feat: support for schema autocomplete for queries. (#18)

fix: load monaco kusto once.

fix: split kusto monaco and others.

Author: itsnotapt

frontend/src/components/KustoMonacoEditor.vue

@@ -0,0 +1,106 @@
+<template>
+  <div :style="$attrs.style" />
+</template>
+<script>
+import loader from '@monaco-editor/loader';
+import loadMonacoKusto from '@/helpers/loadMonacoKusto';
+import { getKustoSchema } from '@/helpers/apiClient';
+
+export default {
+  name: 'KustoMonacoEditor',
+  model: {
+    event: 'change',
+  },
+  props: {
+    options: {
+      default: () => {},
+      type: Object,
+    },
+    value: {
+      type: String,
+      required: true,
+    },
+    cluster: {
+      type: String,
+      default: null,
+    },
+    database: {
+      type: String,
+      default: null,
+    },
+  },
+  data: () => ({
+    monaco: null,
+    editor: null,
+  }),
+  watch: {
+    value(newValue) {
+      if (this.editor && this.value !== this.editor.getValue()) {
+        this.editor.setValue(newValue);
+      }
+    },
+    cluster(newCluster, oldCluster) {
+      if (newCluster && oldCluster !== newCluster) {
+        this.loadSchema();
+      }
+    },
+    database(newDatabase, oldDatabase) {
+      if (newDatabase && oldDatabase !== newDatabase) {
+        this.loadSchema();
+      }
+    },
+  },
+  mounted() {
+    this.initialiseMonaco();
+  },
+  methods: {
+    async initialiseMonaco() {
+      loader.config({
+        paths: {
+          vs: `${import.meta.env.BASE_URL}monaco-editor/min/vs`,
+        },
+      });
+
+      const monaco = await loader.init();
+      this.monaco = monaco;
+
+      await loadMonacoKusto();
+      console.log('Loaded monaco kusto.');
+
+      this.editor = monaco.editor.create(
+        this.$el,
+        {
+          value: this.value,
+          language: 'kusto',
+          ...this.options,
+        },
+      );
+      this.editor.onDidChangeModelContent(() => {
+        const value = this.editor.getValue();
+        if (this.value !== value) {
+          this.$emit('change', value);
+        }
+      });
+    },
+    async loadSchema() {
+      if (this.cluster === '' || this.database === '') {
+        return;
+      }
+
+      const schema = await this.parseSchema();
+      const workerAccessor = await this.monaco.languages.kusto.getKustoWorker();
+      const model = this.editor.getModel();
+      const worker = await workerAccessor(model.uri);
+      await worker.setSchemaFromShowSchema(
+        schema,
+        this.cluster,
+        this.database,
+      );
+    },
+    async parseSchema() {
+      const schema = await getKustoSchema(this.cluster, this.database);
+      return JSON.parse(schema?.data?.at(0)?.ClusterSchema);
+    },
+  },
+};
+</script>

frontend/src/components/KustoQueryResult.vue

@@ -97,7 +97,7 @@
           <v-icon>mdi-help-circle-outline</v-icon>
         </v-btn>
       </p>
-      <MonacoEditor
+      <KustoMonacoEditor
         v-model="editParams.query"
         style="
           width: 100%;
@@ -107,7 +107,8 @@
           resize: vertical;
           overflow: hidden;
         "
-        language="kusto"
+        :cluster="editParams.cluster"
+        :database="editParams.database"
         :options="options"
       />
     </v-form>
@@ -141,7 +142,7 @@ import {
 import KustoPivot from '@/components/grids/KustoPivot.vue';
 import NewQueryButton from '@/components/NewQueryButton.vue';
 import eventBus from '@/helpers/eventBus';
-import MonacoEditor from '@/components/MonacoEditor.vue';
+import KustoMonacoEditor from '@/components/KustoMonacoEditor.vue';
 import TimeSelection from '@/components/TimeSelection.vue';
 import QueryHelperDialog from '@/components/QueryHelperDialog.vue';
 import ClusterSelection from '@/components/ClusterSelection.vue';
@@ -154,7 +155,7 @@ export default {
     TimeSelection,
     NewQueryButton,
     KustoPivot,
-    MonacoEditor,
+    KustoMonacoEditor,
   },
   props: {
     uuid: {

frontend/src/components/MonacoEditor.vue

@@ -3,10 +3,9 @@
 </template>
 <script>
 import loader from '@monaco-editor/loader';
-import loadMonacoKusto from '@/helpers/loadMonacoKusto';
 
 export default {
-  name: 'Editor',
+  name: 'MonacoEditor',
   model: {
     event: 'change',
   },
@@ -46,7 +45,6 @@ export default {
       });
 
       const monaco = await loader.init();
-      await loadMonacoKusto();
 
       this.editor = monaco.editor.create(
         this.$el,

frontend/src/helpers/apiClient.js

@@ -100,7 +100,7 @@ export const executeQuery = async (
     ...additionalParameters,
   };
 
-  return axios.post(`${runtimeConfig.apiEndpoint}query/executeQuery`, body, {
+  return axios.post(`${runtimeConfig.apiEndpoint}kusto/query`, body, {
     headers,
   });
 };
@@ -113,11 +113,31 @@ export const getQueryResult = async (queryRunId) => {
   };
 
   return axios.get(
-    `${runtimeConfig.apiEndpoint}query/getQueryResult?queryRunId=${queryRunId}`,
+    `${runtimeConfig.apiEndpoint}kusto/query/${queryRunId}`,
     { headers },
   );
 };
 
+export const getKustoSchema = async (
+  cluster,
+  database,
+) => {
+  const accessToken = await auth.getApiToken();
+
+  const headers = {
+    Authorization: `Bearer ${accessToken}`,
+  };
+
+  const body = {
+    cluster,
+    database,
+  };
+
+  return axios.post(`${runtimeConfig.apiEndpoint}kusto/schema`, body, {
+    headers,
+  });
+};
+
 export const saveEvents = async (events) => {
   const accessToken = await auth.getApiToken();
 

frontend/src/helpers/loadMonacoKusto.js

@@ -1,5 +1,7 @@
 // Original source code: https://github.com/grafana/grafana/pull/33528
 
+let promise = null;
+
 const loadMonacoKusto = () => new Promise((resolve) => {
   window.monacoKustoResolvePromise = resolve;
 
@@ -24,7 +26,7 @@ const loadScript = (script) => new Promise((resolve, reject) => {
   document.body.appendChild(scriptEl);
 });
 
-const loadKusto = async () => {
+const loadScripts = async () => {
   const scripts = [
     `${import.meta.env.BASE_URL}monaco-editor/min/vs/language/kusto/kusto.javascript.client.min.js`,
     `${import.meta.env.BASE_URL}monaco-editor/min/vs/language/kusto/newtonsoft.json.min.js`,
@@ -39,4 +41,11 @@ const loadKusto = async () => {
   await loadMonacoKusto();
 };
 
+const loadKusto = async () => {
+  if (promise === null) {
+    promise = loadScripts();
+  }
+  return promise;
+};
+
 export default loadKusto;