Visual Query Editor

[daniellee]

Creating a visual query editors for other data sources like MySQL or InfluxDB would help new users get started with ADX without having to know KQL well. Even for experienced users, having a wizard/visual query editor would aid in writing queries that return data in the correct format for graphing.

Here are some early designs but need to research the following topics more:

• how simple/complex should the query builder be to cover 80% of queries? Should it be a very simple editor with a few dropdowns (like the sql query editors)? Or should it be possible to build more expressive queries?
• How important is the education aspect of showing the KQL queries to users so that they can learn to write raw KQL queries themselves?
• Which terminology should be used - columns or measurements for example

Figma sketch: https://www.figma.com/file/J7JWlBHNLOZwqnNUAfIJob/ADX-query-builder?node-id=3%3A198

[srclosson]

Love this. It's really hard to structure a query editor that captures all the use cases a language (especially like kusto) provides, but I suspect the important thing would be to cover 80% of the common cases, and leave the remaining ones back to monaco.

In angular we had a "switch between" view. Is that no longer going to be a thing? As I see a more hybrid approach here.

[daniellee]

@srclosson I think we will keep the switch to raw mode. The latest design looks like it will be simpler than these initial designs.

[erikbos]

Please do not remove the raw mode.. we use the ADX plugin quite a bit with complex queries (and sometimes functions as well) A visual editor would likely not be handle that level of query complexity.

[gilkgit]

I agree with erikbos, Please do not remove the raw mode. we anyway work with Kusto Explorer and copy paste the queries since the ADX plugin + Chart updating is painfully slow to the point where it's unusable to edit queries in most scenarios.

I'd be happy if the Raw mode could be set as the default editor (maybe by customization), since the experience is already very "mouse clicky" as is.

For us the visual query editor is anyway not a main usage scenario.
Our personas who use Grafana are proficient with ADX syntax.
I'd be happy if it could be hidden from presentation (by customization), since I see how this feature (which might be useful to people who just started using ADX) will bring in negative attitude by people who would feel that it flags the ADX plugin as a tool for absolute beginners.

[jessover9000]

Hello! My feedback from UX testing the status quo of v3:

• Database/From dropdowns: I find it weirdthat I can't use backspace to delete the currently selected "From". It's not a common pattern for such a combo box that I have type something with the current value still fully displayed in the input, and then it starts showing what I typed from an empty field. probably a component issue – @dprokop you mentioned this, I guess we’re tackling it in grafana-ui and leaving it for now?

• where dropdown: When I type something in there, e.g. "S", it will show stuff starting with other letters that contain "s" before showing stuff that actually starts with "s". I think we should show results first that start with the letters actually entered (if there are any). If we keep the way it’s currently working, we should highlight the "S" in the search result because otherwise the user, who might expect words starting with S to show up first, might be confused.
  

Buttons: There is a color bug for me currently where the “Run query” button switches between primary and secondary, first a few seconds after loading and then after interacting with the buttons it randomly switches back and forth.

There should only be one primary action button, not two. It shouldn’t be Query editor but Run query, not only because of the user feedback but also because you will only switch the edit modes once but run queries all the time. having the "wrong" non-running button be blue is super distracting. I also think that the Run Query functionality should be on the left = closer to the query editor for a shorter distance you have to travel with your cursor. I do think that "Run query" is important enough and far away enough from the top save button to make it primary without the top right corner distracting from it.

• Smaller resolutions still need some work, buttons are overlapped by explanatory text (this is Macbook Pro 1280px resolution)
  

[mckn]

I will close this issue since we have shipped a version with this.