Add Syntax highlighting and AutoCompletion to the LogsQL editor

[sbordeyne]

Currently, it's quite hard to use the victorialogs datasource in grafana for a few reasons. It's hard to discover what kinds of queries you can write, and it's hard to figure out which labels are available, which operations can be piped together and so on.

In order to alleviate those issues, having auto completions and syntax highlighting might ease the pains above.

For reference, here is the MonacoQueryField reference for the loki datasource: https://github.com/grafana/grafana/blob/main/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx#L104

As you can see, it has hooks for autocompletion, and hooks for custom syntax highlighting in it. As far as usage goes, it would make a world of difference to have common pipe operations proposed after a query and a pipe character, or have labels autocompleted, or encourage the use of streams in the query.

Loki's datasource also includes a Label Browser as well as a "Query Kickstarter" which gives out common queries you can use.

[hagen1778]

@Loori-R @arturminchukov could you pls take a look?

[chenlujjj]

+1, that's a very desired feature for users trying to move from Loki, Splunk, etc.

[arturminchukov]

Currently, there is a plan to implement the autocompletion feature on the part of VictoriaLogs. This will enable us to have the same auto-completion mechanism in both the plugin and the Victoria Logs UI, as well as support the newly added LogsQL functions. We should wait for this feature to avoid unnecessary effort costs.