feat: Monaco editor with LQL support for search field

.github/workflows/e2e-tests.yml

@@ -133,5 +133,8 @@ jobs:
       - name: Install dependencies
         run: mix do deps.get + deps.compile
 
+      - name: Build assets
+        run: npm run deploy --prefix assets
+
       - name: Run Tests
         run: mix test.e2e

.github/workflows/elixir-ci.yml

@@ -8,6 +8,7 @@ on:
   pull_request:
     branches: ["**"]
     paths:
+      - "assets/**"
       - "lib/**"
       - "config/**"
       - "*.exs"
@@ -163,3 +164,22 @@ jobs:
 
       - name: Run ${{ matrix.commands.name }}
         run: ${{ matrix.commands.run }}
+
+  frontend:
+    name: Frontend Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: npm
+          cache-dependency-path: assets/package-lock.json
+
+      - name: Install frontend dependencies
+        run: npm ci --prefix assets
+
+      - name: Run frontend unit tests
+        run: npm test --prefix assets

assets/css/source_log_search.scss

@@ -57,6 +57,13 @@
   }
 }
 
+// Prevent live_monaco_editor auto-resize from expanding the single-line editor
+.lql-editor-wrapper [phx-hook="CodeEditorHook"] {
+  height: 32px !important;
+  min-height: 32px !important;
+  max-height: 32px !important;
+}
+
 .message {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }

assets/js/app.js

@@ -21,6 +21,7 @@ import sourceLiveViewHooks from "./source_lv_hooks";
 import $ from "jquery";
 import moment from "moment";
 import { CodeEditorHook } from "../../deps/live_monaco_editor/priv/static/live_monaco_editor.esm"
+import LqlEditorWrapper from "./lql_editor_wrapper_hook"
 
 
 // set moment globally before daterangepicker
@@ -47,8 +48,8 @@ const hooks = {
   ...sourceLiveViewHooks,
   ...LiveModalHooks,
   ...BillingHooks,
-  CodeEditorHook
-
+  CodeEditorHook,
+  LqlEditorWrapper,
 };
 
 let liveSocket = new LiveSocket("/live", Socket, {

assets/js/lql_editor_wrapper_hook.js

@@ -0,0 +1,179 @@
+import {
+  registerLqlLanguage,
+  registerLqlCompletionProvider,
+} from "./lql_language";
+
+const parseSchemaFields = (schemaFieldsJson) => {
+  if (!schemaFieldsJson) return {};
+
+  return JSON.parse(schemaFieldsJson);
+};
+
+const parseSuggestedSearches = (suggestedSearchesJson) => {
+  if (!suggestedSearchesJson) return [];
+
+  return JSON.parse(suggestedSearchesJson);
+};
+
+const LqlEditorWrapper = {
+  mounted() {
+    this._schemaFields = parseSchemaFields(this.el.dataset.schemaFieldsJson);
+    this._suggestedSearches = parseSuggestedSearches(
+      this.el.dataset.suggestedSearchesJson,
+    );
+    this._completionDisposable = null;
+    this._editor = null;
+    this._editorDisposables = [];
+    this._pendingServerValue = null;
+    this._handleSubmitRequest = () => {
+      this.submitSearch();
+    };
+    this._handleEditorMounted = (event) => {
+      const { editor } = event.detail;
+      const standaloneEditor = editor.standalone_code_editor;
+
+      if (this._editor === standaloneEditor && this._completionDisposable) {
+        return;
+      }
+
+      this.disposeEditorBindings();
+      this._editor = standaloneEditor;
+      this.applyPendingEditorValue();
+
+      const monaco = window.monaco;
+
+      try {
+        registerLqlLanguage(monaco);
+      } catch (_) {
+        console.log("Failed to register LQL language", _);
+      }
+
+      const model = standaloneEditor.getModel();
+      monaco.editor.setModelLanguage(model, "lql");
+
+      this._completionDisposable = registerLqlCompletionProvider(
+        monaco,
+        () => this._schemaFields,
+        () => this._suggestedSearches,
+      );
+
+      standaloneEditor.addCommand(
+        monaco.KeyCode.Enter,
+        () => {
+          this.submitSearch();
+        },
+        "!suggestWidgetVisible",
+      );
+
+      this._editorDisposables = [
+        standaloneEditor.onDidChangeModelContent(() => {
+          const value = standaloneEditor.getValue();
+          this.pushEvent("querystring_changed", { querystring: value });
+        }),
+        standaloneEditor.onDidFocusEditorText(() => {
+          this.pushEvent("form_focus", { value: standaloneEditor.getValue() });
+        }),
+        standaloneEditor.onDidBlurEditorText(() => {
+          this.pushEvent("form_blur", { value: standaloneEditor.getValue() });
+        }),
+      ];
+    };
+
+    this.el.addEventListener("lql:submit", this._handleSubmitRequest);
+    this.el.addEventListener("lme:editor_mounted", this._handleEditorMounted);
+  },
+
+  updated() {
+    this._schemaFields = parseSchemaFields(this.el.dataset.schemaFieldsJson);
+    this._suggestedSearches = parseSuggestedSearches(
+      this.el.dataset.suggestedSearchesJson,
+    );
+    const value = this.el.dataset.querystring ?? "";
+
+    if (!this._editor) {
+      this._pendingServerValue = value;
+      return;
+    }
+
+    this.setEditorValue(value);
+  },
+
+  applyPendingEditorValue() {
+    if (!this._editor || this._pendingServerValue === null) {
+      return;
+    }
+
+    const value = this._pendingServerValue;
+    this._pendingServerValue = null;
+    this.setEditorValue(value);
+  },
+
+  setEditorValue(value) {
+    const currentValue = this._editor?.getValue?.();
+
+    if (!this._editor || currentValue === value) {
+      return;
+    }
+
+    const hadTextFocus = this._editor.hasTextFocus();
+    const model = this._editor?.getModel?.();
+    const suggestController = this._editor?.getContribution?.(
+      "editor.contrib.suggestController",
+    );
+
+    this._editor.setValue(value);
+
+    if (hadTextFocus && model) {
+      const endPosition = {
+        lineNumber: model.getLineCount(),
+        column: model.getLineMaxColumn(model.getLineCount()),
+      };
+
+      this._editor.setPosition(endPosition);
+      suggestController?.cancelSuggestWidget();
+    }
+  },
+
+  collectRecommendedFields() {
+    const searchControl =
+      this.el.closest("#source-logs-search-control") || this.el.parentElement;
+    const fields = {};
+
+    searchControl
+      ?.querySelectorAll('#recommended_fields input[name^="fields["]')
+      .forEach((input) => {
+        const match = input.name.match(/^fields\[(.+)\]$/);
+
+        if (match) {
+          fields[match[1]] = input.value;
+        }
+      });
+
+    return fields;
+  },
+
+  submitSearch() {
+    const querystring = this._editor?.getValue?.() ?? "";
+
+    this.pushEvent("start_search", {
+      querystring,
+      fields: this.collectRecommendedFields(),
+    });
+  },
+
+  disposeEditorBindings() {
+    this._editorDisposables.forEach((disposable) => disposable?.dispose?.());
+    this._editorDisposables = [];
+
+    if (this._completionDisposable) {
+      this._completionDisposable.dispose();
+      this._completionDisposable = null;
+    }
+  },
+
+  destroyed() {
+    this.disposeEditorBindings();
+  },
+};
+
+export default LqlEditorWrapper;