Generating copy-able PromQL queries instead of Prometheus URLs?

[emschwartz]

An attendee at the Rust&Tell Meetup in Berlin made the good observation that the Prometheus URLs won't work for many people, because their Prometheus instances won't be directly accessible.

Should we:

• Generate Grafana explore links instead?
• Put the queries in code blocks so they can be copied and pasted instead of having links?
• I don't think it's possible to have a "Copy to Clipboard" button in the little preview window in VS Code or other editors, but it would be nice if there were a way to do this
• Use the IDE extension to make authenticated queries to Prometheus (if it is accessible but requires auth) and render the graphs in the extension?
• ...?

We could make all of these options, though we want to be mindful of how many options we add, just because it makes the configuration more complicated.

[keturiosakys]

One very hacky idea that would probably be feasible at least in the TypeScript plugin (and the VSCode) is to hook into the "Code Actions" of the language service. Wherein on action user could choose the link (request, error rates or latency) and what to do with it (open in Prometheus, Grafana, copy to clipboard etc.) 🙂

[mies]

Could we just simply leverage the VSCode extenstion and add several buttons/actions to the tooltip (copy query, go to link). This would make the extension a bit of a requirement but also supercharge the Autometrics experience. I also like the idea of showing graphs from within the extenion, we could tuck away any auth details in the settings for the extension.

[emschwartz]

That's a neat idea. I don't know if VS Code gives extensions enough power to modify the tooltips like that, but it's definitely worth investigating.

[flenter]

I did a little bit of research to see what we can do with the tooltips and right now the vscode extension for Python at least is using a HoverProvider. The HoverProvider returns markdown and there is some support for HTML elements, but it's limited:
https://github.com/microsoft/vscode/blob/6d2920473c6f13759c978dd89104c4270a83422d/src/vs/base/browser/markdownRenderer.ts#L296

We might instead want to look into something like codelens to provide additional functionality. Here's what the codemetrics extension that i have installed locally looks like:

CodeMetrics extension on vscode marketplace
example codelens

Another thing we could do is build an extension that uses some kind of a webview. Which is sort of an iframe inside vscode.

And finally instead of a webview we could look into the treeview, but i think it doesn't allow for enough interactivity