@perses-dev/loki-plugin 0.3.0 → 0.5.0-beta.0

package/lib/cjs/model/loki-client.js

@@ -17,35 +17,35 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    indexStats: function() {
+    get indexStats () {
         return indexStats;
     },
-    labelValues: function() {
+    get labelValues () {
         return labelValues;
     },
-    labels: function() {
+    get labels () {
         return labels;
     },
-    query: function() {
+    get query () {
         return query;
     },
-    queryRange: function() {
+    get queryRange () {
         return queryRange;
     },
-    series: function() {
+    get series () {
         return series;
     },
-    toUnixSeconds: function() {
+    get toUnixSeconds () {
         return toUnixSeconds;
     },
-    volume: function() {
+    get volume () {
         return volume;
     },
-    volumeRange: function() {
+    get volumeRange () {
         return volumeRange;
     }
 });

package/lib/cjs/model/loki-selectors.js

@@ -17,20 +17,20 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    DEFAULT_LOKI: function() {
+    get DEFAULT_LOKI () {
         return DEFAULT_LOKI;
     },
-    LOKI_DATASOURCE_KIND: function() {
+    get LOKI_DATASOURCE_KIND () {
         return LOKI_DATASOURCE_KIND;
     },
-    isDefaultLokiSelector: function() {
+    get isDefaultLokiSelector () {
         return isDefaultLokiSelector;
     },
-    isLokiDatasourceSelector: function() {
+    get isLokiDatasourceSelector () {
         return isLokiDatasourceSelector;
     }
 });

package/lib/cjs/queries/constants.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    DATASOURCE_KIND: function() {
+    get DATASOURCE_KIND () {
         return DATASOURCE_KIND;
     },
-    DEFAULT_DATASOURCE: function() {
+    get DEFAULT_DATASOURCE () {
         return DEFAULT_DATASOURCE;
     }
 });

package/lib/cjs/queries/loki-log-query/LokiLogQueryEditor.js

@@ -26,16 +26,30 @@ const _material = require("@mui/material");
 const _react = require("react");
 const _immer = require("immer");
 const _components = require("@perses-dev/components");
-const _logqleditor = require("../../components/logql-editor");
+const _components1 = require("../../components");
 const _model = require("../../model");
 const _constants = require("../constants");
 const _queryeditormodel = require("../query-editor-model");
 function LokiLogQueryEditor(props) {
-    const { onChange, value, queryHandlerSettings } = props;
+    const { onChange, value } = props;
     const { datasource } = value;
     const datasourceSelectValue = datasource ?? _constants.DEFAULT_DATASOURCE;
     const selectedDatasource = (0, _pluginsystem.useDatasourceSelectValueToSelector)(datasourceSelectValue, _model.LOKI_DATASOURCE_KIND);
     const { query, handleQueryChange, handleQueryBlur } = (0, _queryeditormodel.useQueryState)(props);
+    // Get client and time range for autocompletion
+    const { data: client } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
+    const { absoluteTimeRange } = (0, _pluginsystem.useTimeRange)();
+    // Create completion config for autocompletion
+    const completionConfig = (0, _react.useMemo)(()=>{
+        if (!client) return undefined;
+        return {
+            client,
+            timeRange: absoluteTimeRange
+        };
+    }, [
+        client,
+        absoluteTimeRange
+    ]);
     const handleDatasourceChange = (newDatasourceSelection)=>{
         if (!(0, _pluginsystem.isVariableDatasource)(newDatasourceSelection) && newDatasourceSelection.kind === _constants.DATASOURCE_KIND) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -43,10 +57,6 @@ function LokiLogQueryEditor(props) {
                 const nextDatasource = (0, _model.isDefaultLokiSelector)(newDatasourceSelection) ? undefined : newDatasourceSelection;
                 draft.datasource = nextDatasource;
             }));
-            if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
-                ...value,
-                datasource: newDatasourceSelection
-            });
             return;
         }
         throw new Error('Got unexpected non LokiQuery datasource selection');
@@ -56,21 +66,14 @@ function LokiLogQueryEditor(props) {
         }));
     // Immediate query execution on Enter or blur
     const handleQueryExecute = (query)=>{
-        if (queryHandlerSettings?.watchQueryChanges) {
-            queryHandlerSettings.watchQueryChanges(query);
-        }
         onChange((0, _immer.produce)(value, (draft)=>{
             draft.query = query;
         }));
     };
     const handleLogsQueryChange = (0, _react.useCallback)((e)=>{
         handleQueryChange(e);
-        if (queryHandlerSettings?.watchQueryChanges) {
-            queryHandlerSettings.watchQueryChanges(e);
-        }
     }, [
-        handleQueryChange,
-        queryHandlerSettings
+        handleQueryChange
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 1.5,
@@ -105,17 +108,18 @@ function LokiLogQueryEditor(props) {
                         },
                         children: "LogQL Query"
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_logqleditor.LogQLEditor, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.LogQLEditor, {
                         value: query,
                         onChange: handleLogsQueryChange,
-                        onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined,
+                        onBlur: handleQueryBlur,
                         onKeyDown: (event)=>{
                             if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
                                 event.preventDefault();
                                 handleQueryExecute(query);
                             }
                         },
-                        placeholder: 'Enter LogQL query (e.g. {job="mysql"} |= "error")'
+                        placeholder: 'Enter LogQL query (e.g. {job="mysql"} |= "error")',
+                        completionConfig: completionConfig
                     })
                 ]
             }),

package/lib/cjs/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.js

@@ -25,12 +25,12 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _material = require("@mui/material");
 const _react = require("react");
 const _immer = require("immer");
-const _logqleditor = require("../../components/logql-editor");
+const _components = require("../../components");
 const _model = require("../../model");
 const _constants = require("../constants");
 const _queryeditormodel = require("../query-editor-model");
 function LokiQueryEditor(props) {
-    const { onChange, value, queryHandlerSettings } = props;
+    const { onChange, value } = props;
     const { datasource } = value;
     const datasourceSelectValue = datasource ?? _constants.DEFAULT_DATASOURCE;
     const selectedDatasource = (0, _pluginsystem.useDatasourceSelectValueToSelector)(datasourceSelectValue, _model.LOKI_DATASOURCE_KIND);
@@ -40,31 +40,20 @@ function LokiQueryEditor(props) {
             onChange((0, _immer.produce)(value, (draft)=>{
                 draft.datasource = newDatasourceSelection;
             }));
-            if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
-                ...value,
-                datasource: newDatasourceSelection
-            });
             return;
         }
         throw new Error('Got unexpected non LokiQuery datasource selection');
     };
     // Immediate query execution on Enter or blur
     const handleQueryExecute = (query)=>{
-        if (queryHandlerSettings?.watchQueryChanges) {
-            queryHandlerSettings.watchQueryChanges(query);
-        }
         onChange((0, _immer.produce)(value, (draft)=>{
             draft.query = query;
         }));
     };
     const handleLogsQueryChange = (0, _react.useCallback)((e)=>{
         handleQueryChange(e);
-        if (queryHandlerSettings?.watchQueryChanges) {
-            queryHandlerSettings.watchQueryChanges(e);
-        }
     }, [
-        handleQueryChange,
-        queryHandlerSettings
+        handleQueryChange
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 1.5,
@@ -99,10 +88,10 @@ function LokiQueryEditor(props) {
                         },
                         children: "LogQL Query"
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_logqleditor.LogQLEditor, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.LogQLEditor, {
                         value: query,
                         onChange: handleLogsQueryChange,
-                        onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined,
+                        onBlur: handleQueryBlur,
                         onKeyDown: (event)=>{
                             if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
                                 event.preventDefault();

package/lib/components/complete.d.ts

@@ -0,0 +1,37 @@
+import { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
+import { EditorState } from '@codemirror/state';
+import { Tree } from '@lezer/common';
+import { EditorView } from '@uiw/react-codemirror';
+import { CompletionConfig } from './logql-extension';
+/** CompletionScope specifies the completion kind, e.g. whether to complete label names or values */
+type CompletionScope = {
+    kind: 'LabelName';
+} | {
+    kind: 'LabelValue';
+    label: string;
+};
+/**
+ * CompletionInfo specifies the identified scope and position of the completion in the current editor text.
+ */
+export interface CompletionInfo {
+    scope: CompletionScope;
+    from: number;
+    to?: number;
+}
+export declare function complete(completionCfg: CompletionConfig, { state, pos }: CompletionContext): Promise<CompletionResult | null>;
+/**
+ * Identify completion scope (e.g. LabelName, LabelValue) and position, based on the current node in the syntax tree.
+ *
+ * Function is exported for tests only.
+ */
+export declare function identifyCompletion(state: EditorState, pos: number, tree: Tree): CompletionInfo | undefined;
+/**
+ * Add quotes to the completion text in case quotes are not present already.
+ * This handles the following cases:
+ * { name=HTTP
+ * { name="x
+ * { name="x" where cursor is after the 'x'
+ */
+export declare function applyQuotedCompletion(view: EditorView, completion: Completion, from: number, to: number): void;
+export {};
+//# sourceMappingURL=complete.d.ts.map

package/lib/components/complete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"complete.d.ts","sourceRoot":"","sources":["../../../src/components/complete.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,gBAAgB,EAAwB,MAAM,0BAA0B,CAAC;AAEjH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,oGAAoG;AACpG,KAAK,eAAe,GAAG;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAErF;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,eAAe,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAKD,wBAAsB,QAAQ,CAC5B,aAAa,EAAE,gBAAgB,EAC/B,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,iBAAiB,GAChC,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAWlC;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,cAAc,GAAG,SAAS,CA6G1G;AAkDD;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAmB9G"}

package/lib/components/complete.js

@@ -0,0 +1,249 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { insertCompletionText } from '@codemirror/autocomplete';
+import { syntaxTree } from '@codemirror/language';
+import { Selector, Matchers, Matcher, Identifier, Eq, Neq, Re, Nre, String as StringType } from '@grafana/lezer-logql';
+import { toUnixSeconds } from '../model/loki-client';
+const quoteChars = [
+    '"',
+    '`'
+];
+const defaultQuoteChar = '"';
+export async function complete(completionCfg, { state, pos }) {
+    // First, identify the completion scope
+    const completion = identifyCompletion(state, pos, syntaxTree(state));
+    if (!completion) {
+        // No completion scope found for current cursor position.
+        return null;
+    }
+    // Then, retrieve completion options for the identified scope (from the Loki API).
+    const options = await retrieveOptions(completionCfg, completion.scope);
+    return {
+        options,
+        from: completion.from,
+        to: completion.to
+    };
+}
+/**
+ * Identify completion scope (e.g. LabelName, LabelValue) and position, based on the current node in the syntax tree.
+ *
+ * Function is exported for tests only.
+ */ export function identifyCompletion(state, pos, tree) {
+    const node = tree.resolveInner(pos, -1);
+    switch(node.type.id){
+        case Selector:
+            // Selector is the entire {label matchers} expression
+            // Autocomplete at start: {▯ or empty: {}
+            // Do not autocomplete if cursor is after closing brace: {job="mysql"}▯
+            if ((node.firstChild === null || node.firstChild?.type.id === 0) && !state.sliceDoc(node.from, pos).includes('}')) {
+                return {
+                    scope: {
+                        kind: 'LabelName'
+                    },
+                    from: pos
+                };
+            }
+            break;
+        case Matchers:
+            {
+                // Matchers node contains all label matchers inside {}
+                // Autocomplete after comma: { job="mysql",▯ or { job="mysql", ▯
+                const text = state.sliceDoc(node.from, pos);
+                if (text.endsWith(',') || text.endsWith(', ')) {
+                    return {
+                        scope: {
+                            kind: 'LabelName'
+                        },
+                        from: pos
+                    };
+                }
+                break;
+            }
+        case Matcher:
+            // Single matcher like job="mysql"
+            // Autocomplete when cursor is after a complete matcher: { job="mysql" ▯
+            if (node.parent?.type.id === Matchers) {
+                return {
+                    scope: {
+                        kind: 'LabelName'
+                    },
+                    from: pos
+                };
+            }
+            break;
+        case Identifier:
+            // Identifier is a label name being typed
+            // Autocomplete partial label names: { jo▯ or { job="mysql", na▯
+            if (node.parent?.type.id === Matcher) {
+                return {
+                    scope: {
+                        kind: 'LabelName'
+                    },
+                    from: node.from
+                };
+            }
+            break;
+        case Eq:
+        case Neq:
+        case Re:
+        case Nre:
+            // Operators for label matching: =, !=, =~, !~
+            // Autocomplete label values right after operator: { job=▯ or { job!=▯
+            if (node.parent?.type.id === Matcher) {
+                const labelNode = node.parent.firstChild;
+                if (labelNode?.type.id === Identifier) {
+                    const label = state.sliceDoc(labelNode.from, labelNode.to);
+                    return {
+                        scope: {
+                            kind: 'LabelValue',
+                            label
+                        },
+                        from: pos
+                    };
+                }
+            }
+            break;
+        case StringType:
+            // String value in a matcher: { job="▯
+            // Do not autocomplete if cursor is after closing quotes: { job=""▯
+            if (node.parent?.type.id === Matcher && !/^".*"$/.test(state.sliceDoc(node.from, pos))) {
+                const labelNode = node.parent.firstChild;
+                if (labelNode?.type.id === Identifier) {
+                    const label = state.sliceDoc(labelNode.from, labelNode.to);
+                    return {
+                        scope: {
+                            kind: 'LabelValue',
+                            label
+                        },
+                        from: node.from + 1
+                    }; // +1 to skip opening quote
+                }
+            }
+            break;
+        case 0 /* error node */ :
+            // Error nodes represent incomplete or malformed syntax
+            // Autocomplete incomplete value after operator: { job=mys▯ or { job="mys▯
+            if ((node.prevSibling?.type.id === Eq || node.prevSibling?.type.id === Neq || node.prevSibling?.type.id === Re || node.prevSibling?.type.id === Nre) && node.parent?.type.id === Matcher) {
+                const labelNode = node.parent.firstChild;
+                if (labelNode?.type.id === Identifier) {
+                    const label = state.sliceDoc(labelNode.from, labelNode.to);
+                    // Skip leading quote if present: { name="HT▯
+                    const from = quoteChars.includes(state.sliceDoc(node.from, node.from + 1)) ? node.from + 1 : node.from;
+                    return {
+                        scope: {
+                            kind: 'LabelValue',
+                            label
+                        },
+                        from
+                    };
+                }
+            }
+            // Autocomplete partial label name: { j▯ or { job="mysql", n▯
+            if (node.parent?.type.id === Selector || node.parent?.type.id === Matchers) {
+                return {
+                    scope: {
+                        kind: 'LabelName'
+                    },
+                    from: node.from
+                };
+            }
+            break;
+    }
+}
+/**
+ * Retrieve completion options based on the identified completion scope.
+ */ async function retrieveOptions(completionCfg, completion) {
+    switch(completion.kind){
+        case 'LabelName':
+            return completeLabelName(completionCfg);
+        case 'LabelValue':
+            return completeLabelValue(completionCfg, completion.label);
+    }
+}
+async function completeLabelName(completionCfg) {
+    if (!completionCfg.client) {
+        return [];
+    }
+    const start = completionCfg.timeRange?.start ? toUnixSeconds(new Date(completionCfg.timeRange.start).getTime()) : undefined;
+    const end = completionCfg.timeRange?.end ? toUnixSeconds(new Date(completionCfg.timeRange.end).getTime()) : undefined;
+    try {
+        const response = await completionCfg.client.labels(start, end);
+        if (response.status === 'success') {
+            return response.data.map((label)=>({
+                    label
+                }));
+        }
+        return [];
+    } catch (error) {
+        console.error('Error fetching label names:', error);
+        return [];
+    }
+}
+function escapeString(input, quoteChar) {
+    // do not escape raw strings (when using backticks)
+    if (quoteChar === '`') {
+        return input;
+    }
+    let escaped = input;
+    // escape backslashes and quotes
+    escaped = escaped.replaceAll('\\', '\\\\');
+    escaped = escaped.replaceAll('"', '\\"');
+    return escaped;
+}
+/**
+ * Add quotes to the completion text in case quotes are not present already.
+ * This handles the following cases:
+ * { name=HTTP
+ * { name="x
+ * { name="x" where cursor is after the 'x'
+ */ export function applyQuotedCompletion(view, completion, from, to) {
+    let quoteChar = defaultQuoteChar;
+    if (quoteChars.includes(view.state.sliceDoc(from - 1, from))) {
+        quoteChar = view.state.sliceDoc(from - 1, from);
+        from--;
+    }
+    if (quoteChars.includes(view.state.sliceDoc(to, to + 1))) {
+        quoteChar = view.state.sliceDoc(to, to + 1);
+        to++;
+    }
+    // When using raw strings (`), we cannot escape a backtick.
+    // Therefore, switch the quote character.
+    if (completion.label.includes('`')) {
+        quoteChar = '"';
+    }
+    const insertText = `${quoteChar}${escapeString(completion.label, quoteChar)}${quoteChar}`;
+    view.dispatch(insertCompletionText(view.state, insertText, from, to));
+}
+async function completeLabelValue(completionCfg, label) {
+    if (!completionCfg.client) {
+        return [];
+    }
+    const start = completionCfg.timeRange?.start ? toUnixSeconds(new Date(completionCfg.timeRange.start).getTime()) : undefined;
+    const end = completionCfg.timeRange?.end ? toUnixSeconds(new Date(completionCfg.timeRange.end).getTime()) : undefined;
+    try {
+        const response = await completionCfg.client.labelValues(label, start, end);
+        if (response.status === 'success') {
+            return response.data.map((value)=>({
+                    label: value ?? '',
+                    displayLabel: value ?? '(empty string)',
+                    apply: applyQuotedCompletion
+                }));
+        }
+        return [];
+    } catch (error) {
+        console.error(`Error fetching values for label ${label}:`, error);
+        return [];
+    }
+}
+
+//# sourceMappingURL=complete.js.map

package/lib/components/complete.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/complete.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Completion, CompletionContext, CompletionResult, insertCompletionText } from '@codemirror/autocomplete';\nimport { syntaxTree } from '@codemirror/language';\nimport { EditorState } from '@codemirror/state';\nimport { Tree } from '@lezer/common';\nimport { Selector, Matchers, Matcher, Identifier, Eq, Neq, Re, Nre, String as StringType } from '@grafana/lezer-logql';\nimport { EditorView } from '@uiw/react-codemirror';\nimport { toUnixSeconds } from '../model/loki-client';\nimport { CompletionConfig } from './logql-extension';\n\n/** CompletionScope specifies the completion kind, e.g. whether to complete label names or values */\ntype CompletionScope = { kind: 'LabelName' } | { kind: 'LabelValue'; label: string };\n\n/**\n * CompletionInfo specifies the identified scope and position of the completion in the current editor text.\n */\nexport interface CompletionInfo {\n  scope: CompletionScope;\n  from: number;\n  to?: number;\n}\n\nconst quoteChars = ['\"', '`'];\nconst defaultQuoteChar = '\"';\n\nexport async function complete(\n  completionCfg: CompletionConfig,\n  { state, pos }: CompletionContext\n): Promise<CompletionResult | null> {\n  // First, identify the completion scope\n  const completion = identifyCompletion(state, pos, syntaxTree(state));\n  if (!completion) {\n    // No completion scope found for current cursor position.\n    return null;\n  }\n\n  // Then, retrieve completion options for the identified scope (from the Loki API).\n  const options = await retrieveOptions(completionCfg, completion.scope);\n  return { options, from: completion.from, to: completion.to };\n}\n\n/**\n * Identify completion scope (e.g. LabelName, LabelValue) and position, based on the current node in the syntax tree.\n *\n * Function is exported for tests only.\n */\nexport function identifyCompletion(state: EditorState, pos: number, tree: Tree): CompletionInfo | undefined {\n  const node = tree.resolveInner(pos, -1);\n\n  switch (node.type.id) {\n    case Selector:\n      // Selector is the entire {label matchers} expression\n      // Autocomplete at start: {▯ or empty: {}\n      // Do not autocomplete if cursor is after closing brace: {job=\"mysql\"}▯\n      if (\n        (node.firstChild === null || node.firstChild?.type.id === 0) &&\n        !state.sliceDoc(node.from, pos).includes('}')\n      ) {\n        return {\n          scope: { kind: 'LabelName' },\n          from: pos,\n        };\n      }\n      break;\n\n    case Matchers: {\n      // Matchers node contains all label matchers inside {}\n      // Autocomplete after comma: { job=\"mysql\",▯ or { job=\"mysql\", ▯\n      const text = state.sliceDoc(node.from, pos);\n      if (text.endsWith(',') || text.endsWith(', ')) {\n        return {\n          scope: { kind: 'LabelName' },\n          from: pos,\n        };\n      }\n      break;\n    }\n\n    case Matcher:\n      // Single matcher like job=\"mysql\"\n      // Autocomplete when cursor is after a complete matcher: { job=\"mysql\" ▯\n      if (node.parent?.type.id === Matchers) {\n        return {\n          scope: { kind: 'LabelName' },\n          from: pos,\n        };\n      }\n      break;\n\n    case Identifier:\n      // Identifier is a label name being typed\n      // Autocomplete partial label names: { jo▯ or { job=\"mysql\", na▯\n      if (node.parent?.type.id === Matcher) {\n        return {\n          scope: { kind: 'LabelName' },\n          from: node.from,\n        };\n      }\n      break;\n\n    case Eq:\n    case Neq:\n    case Re:\n    case Nre:\n      // Operators for label matching: =, !=, =~, !~\n      // Autocomplete label values right after operator: { job=▯ or { job!=▯\n      if (node.parent?.type.id === Matcher) {\n        const labelNode = node.parent.firstChild;\n        if (labelNode?.type.id === Identifier) {\n          const label = state.sliceDoc(labelNode.from, labelNode.to);\n          return { scope: { kind: 'LabelValue', label }, from: pos };\n        }\n      }\n      break;\n\n    case StringType:\n      // String value in a matcher: { job=\"▯\n      // Do not autocomplete if cursor is after closing quotes: { job=\"\"▯\n      if (node.parent?.type.id === Matcher && !/^\".*\"$/.test(state.sliceDoc(node.from, pos))) {\n        const labelNode = node.parent.firstChild;\n        if (labelNode?.type.id === Identifier) {\n          const label = state.sliceDoc(labelNode.from, labelNode.to);\n          return { scope: { kind: 'LabelValue', label }, from: node.from + 1 }; // +1 to skip opening quote\n        }\n      }\n      break;\n\n    case 0 /* error node */:\n      // Error nodes represent incomplete or malformed syntax\n      // Autocomplete incomplete value after operator: { job=mys▯ or { job=\"mys▯\n      if (\n        (node.prevSibling?.type.id === Eq ||\n          node.prevSibling?.type.id === Neq ||\n          node.prevSibling?.type.id === Re ||\n          node.prevSibling?.type.id === Nre) &&\n        node.parent?.type.id === Matcher\n      ) {\n        const labelNode = node.parent.firstChild;\n        if (labelNode?.type.id === Identifier) {\n          const label = state.sliceDoc(labelNode.from, labelNode.to);\n          // Skip leading quote if present: { name=\"HT▯\n          const from = quoteChars.includes(state.sliceDoc(node.from, node.from + 1)) ? node.from + 1 : node.from;\n          return { scope: { kind: 'LabelValue', label }, from };\n        }\n      }\n\n      // Autocomplete partial label name: { j▯ or { job=\"mysql\", n▯\n      if (node.parent?.type.id === Selector || node.parent?.type.id === Matchers) {\n        return {\n          scope: { kind: 'LabelName' },\n          from: node.from,\n        };\n      }\n      break;\n  }\n}\n\n/**\n * Retrieve completion options based on the identified completion scope.\n */\nasync function retrieveOptions(completionCfg: CompletionConfig, completion: CompletionScope): Promise<Completion[]> {\n  switch (completion.kind) {\n    case 'LabelName':\n      return completeLabelName(completionCfg);\n\n    case 'LabelValue':\n      return completeLabelValue(completionCfg, completion.label);\n  }\n}\n\nasync function completeLabelName(completionCfg: CompletionConfig): Promise<Completion[]> {\n  if (!completionCfg.client) {\n    return [];\n  }\n\n  const start = completionCfg.timeRange?.start\n    ? toUnixSeconds(new Date(completionCfg.timeRange.start).getTime())\n    : undefined;\n  const end = completionCfg.timeRange?.end ? toUnixSeconds(new Date(completionCfg.timeRange.end).getTime()) : undefined;\n\n  try {\n    const response = await completionCfg.client.labels(start, end);\n    if (response.status === 'success') {\n      return response.data.map((label: string) => ({ label }));\n    }\n    return [];\n  } catch (error) {\n    console.error('Error fetching label names:', error);\n    return [];\n  }\n}\n\nfunction escapeString(input: string, quoteChar: string) {\n  // do not escape raw strings (when using backticks)\n  if (quoteChar === '`') {\n    return input;\n  }\n\n  let escaped = input;\n  // escape backslashes and quotes\n  escaped = escaped.replaceAll('\\\\', '\\\\\\\\');\n  escaped = escaped.replaceAll('\"', '\\\\\"');\n  return escaped;\n}\n\n/**\n * Add quotes to the completion text in case quotes are not present already.\n * This handles the following cases:\n * { name=HTTP\n * { name=\"x\n * { name=\"x\" where cursor is after the 'x'\n */\nexport function applyQuotedCompletion(view: EditorView, completion: Completion, from: number, to: number): void {\n  let quoteChar = defaultQuoteChar;\n  if (quoteChars.includes(view.state.sliceDoc(from - 1, from))) {\n    quoteChar = view.state.sliceDoc(from - 1, from);\n    from--;\n  }\n  if (quoteChars.includes(view.state.sliceDoc(to, to + 1))) {\n    quoteChar = view.state.sliceDoc(to, to + 1);\n    to++;\n  }\n\n  // When using raw strings (`), we cannot escape a backtick.\n  // Therefore, switch the quote character.\n  if (completion.label.includes('`')) {\n    quoteChar = '\"';\n  }\n\n  const insertText = `${quoteChar}${escapeString(completion.label, quoteChar)}${quoteChar}`;\n  view.dispatch(insertCompletionText(view.state, insertText, from, to));\n}\n\nasync function completeLabelValue(completionCfg: CompletionConfig, label: string): Promise<Completion[]> {\n  if (!completionCfg.client) {\n    return [];\n  }\n\n  const start = completionCfg.timeRange?.start\n    ? toUnixSeconds(new Date(completionCfg.timeRange.start).getTime())\n    : undefined;\n  const end = completionCfg.timeRange?.end ? toUnixSeconds(new Date(completionCfg.timeRange.end).getTime()) : undefined;\n\n  try {\n    const response = await completionCfg.client.labelValues(label, start, end);\n    if (response.status === 'success') {\n      return response.data.map((value: string) => ({\n        label: value ?? '',\n        displayLabel: value ?? '(empty string)',\n        apply: applyQuotedCompletion,\n      }));\n    }\n    return [];\n  } catch (error) {\n    console.error(`Error fetching values for label ${label}:`, error);\n    return [];\n  }\n}\n"],"names":["insertCompletionText","syntaxTree","Selector","Matchers","Matcher","Identifier","Eq","Neq","Re","Nre","String","StringType","toUnixSeconds","quoteChars","defaultQuoteChar","complete","completionCfg","state","pos","completion","identifyCompletion","options","retrieveOptions","scope","from","to","tree","node","resolveInner","type","id","firstChild","sliceDoc","includes","kind","text","endsWith","parent","labelNode","label","test","prevSibling","completeLabelName","completeLabelValue","client","start","timeRange","Date","getTime","undefined","end","response","labels","status","data","map","error","console","escapeString","input","quoteChar","escaped","replaceAll","applyQuotedCompletion","view","insertText","dispatch","labelValues","value","displayLabel","apply"],"mappings":"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"}

package/lib/components/logql-editor.d.ts

@@ -1,5 +1,8 @@
 import { ReactElement } from 'react';
 import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
-export type LogQLEditorProps = Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;
+import { CompletionConfig } from './logql-extension';
+export type LogQLEditorProps = Omit<ReactCodeMirrorProps, 'theme' | 'extensions'> & {
+    completionConfig?: CompletionConfig;
+};
 export declare function LogQLEditor(props: LogQLEditorProps): ReactElement;
 //# sourceMappingURL=logql-editor.d.ts.map

package/lib/components/logql-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logql-editor.d.ts","sourceRoot":"","sources":["../../../src/components/logql-editor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAE9C,OAAmB,EAAc,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAGrF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,YAAY,CAAC,CAAC;AAElF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAyCjE"}
+{"version":3,"file":"logql-editor.d.ts","sourceRoot":"","sources":["../../../src/components/logql-editor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAE9C,OAAmB,EAAc,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAkB,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,YAAY,CAAC,GAAG;IAClF,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CA0CjE"}

package/lib/components/logql-editor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,17 +11,19 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { useTheme } from '@mui/material';
 import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { LogQLExtension } from './logql-extension';
 export function LogQLEditor(props) {
+    const { completionConfig, ...codemirrorProps } = props;
     const theme = useTheme();
     const isDarkMode = theme.palette.mode === 'dark';
     const logqlExtension = useMemo(()=>{
-        return LogQLExtension();
-    }, []);
+        return LogQLExtension(completionConfig);
+    }, [
+        completionConfig
+    ]);
     const codemirrorTheme = useMemo(()=>{
         const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
         return EditorView.theme({
@@ -40,7 +43,7 @@ export function LogQLEditor(props) {
         theme
     ]);
     return /*#__PURE__*/ _jsx(CodeMirror, {
-        ...props,
+        ...codemirrorProps,
         theme: isDarkMode ? 'dark' : 'light',
         basicSetup: {
             lineNumbers: false,

package/lib/components/logql-editor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/logql-editor.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo } from 'react';\nimport { useTheme } from '@mui/material';\nimport CodeMirror, { EditorView, ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { LogQLExtension } from './logql-extension';\n\nexport type LogQLEditorProps = Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;\n\nexport function LogQLEditor(props: LogQLEditorProps): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const logqlExtension = useMemo(() => {\n    return LogQLExtension();\n  }, []);\n\n  const codemirrorTheme = useMemo(() => {\n    const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';\n\n    return EditorView.theme({\n      '&': {\n        backgroundColor: 'transparent !important', // required for dark mode\n        border: `1px solid ${borderColor}`,\n        borderRadius: `${theme.shape.borderRadius}px`,\n      },\n      '&.cm-focused.cm-editor': {\n        outline: 'none',\n      },\n      '.cm-content': {\n        padding: '8px',\n      },\n    });\n  }, [theme]);\n\n  return (\n    <CodeMirror\n      {...props}\n      theme={isDarkMode ? 'dark' : 'light'}\n      basicSetup={{\n        lineNumbers: false,\n        highlightActiveLine: false,\n        highlightActiveLineGutter: false,\n        foldGutter: false,\n        syntaxHighlighting: true,\n      }}\n      extensions={[EditorView.lineWrapping, logqlExtension, codemirrorTheme]}\n      placeholder='Example: {job=\"my-service\"} |= \"error\"'\n    />\n  );\n}\n"],"names":["useMemo","useTheme","CodeMirror","EditorView","LogQLExtension","LogQLEditor","props","theme","isDarkMode","palette","mode","logqlExtension","codemirrorTheme","borderColor","backgroundColor","border","borderRadius","shape","outline","padding","basicSetup","lineNumbers","highlightActiveLine","highlightActiveLineGutter","foldGutter","syntaxHighlighting","extensions","lineWrapping","placeholder"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,OAAOC,cAAcC,UAAU,QAA8B,wBAAwB;AACrF,SAASC,cAAc,QAAQ,oBAAoB;AAInD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAMC,QAAQN;IACd,MAAMO,aAAaD,MAAME,OAAO,CAACC,IAAI,KAAK;IAE1C,MAAMC,iBAAiBX,QAAQ;QAC7B,OAAOI;IACT,GAAG,EAAE;IAEL,MAAMQ,kBAAkBZ,QAAQ;QAC9B,MAAMa,cAAcN,MAAME,OAAO,CAACC,IAAI,KAAK,UAAU,wBAAwB;QAE7E,OAAOP,WAAWI,KAAK,CAAC;YACtB,KAAK;gBACHO,iBAAiB;gBACjBC,QAAQ,CAAC,UAAU,EAAEF,aAAa;gBAClCG,cAAc,GAAGT,MAAMU,KAAK,CAACD,YAAY,CAAC,EAAE,CAAC;YAC/C;YACA,0BAA0B;gBACxBE,SAAS;YACX;YACA,eAAe;gBACbC,SAAS;YACX;QACF;IACF,GAAG;QAACZ;KAAM;IAEV,qBACE,KAACL;QACE,GAAGI,KAAK;QACTC,OAAOC,aAAa,SAAS;QAC7BY,YAAY;YACVC,aAAa;YACbC,qBAAqB;YACrBC,2BAA2B;YAC3BC,YAAY;YACZC,oBAAoB;QACtB;QACAC,YAAY;YAACvB,WAAWwB,YAAY;YAAEhB;YAAgBC;SAAgB;QACtEgB,aAAY;;AAGlB"}
+{"version":3,"sources":["../../../src/components/logql-editor.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo } from 'react';\nimport { useTheme } from '@mui/material';\nimport CodeMirror, { EditorView, ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { LogQLExtension, CompletionConfig } from './logql-extension';\n\nexport type LogQLEditorProps = Omit<ReactCodeMirrorProps, 'theme' | 'extensions'> & {\n  completionConfig?: CompletionConfig;\n};\n\nexport function LogQLEditor(props: LogQLEditorProps): ReactElement {\n  const { completionConfig, ...codemirrorProps } = props;\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const logqlExtension = useMemo(() => {\n    return LogQLExtension(completionConfig);\n  }, [completionConfig]);\n\n  const codemirrorTheme = useMemo(() => {\n    const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';\n\n    return EditorView.theme({\n      '&': {\n        backgroundColor: 'transparent !important', // required for dark mode\n        border: `1px solid ${borderColor}`,\n        borderRadius: `${theme.shape.borderRadius}px`,\n      },\n      '&.cm-focused.cm-editor': {\n        outline: 'none',\n      },\n      '.cm-content': {\n        padding: '8px',\n      },\n    });\n  }, [theme]);\n\n  return (\n    <CodeMirror\n      {...codemirrorProps}\n      theme={isDarkMode ? 'dark' : 'light'}\n      basicSetup={{\n        lineNumbers: false,\n        highlightActiveLine: false,\n        highlightActiveLineGutter: false,\n        foldGutter: false,\n        syntaxHighlighting: true,\n      }}\n      extensions={[EditorView.lineWrapping, logqlExtension, codemirrorTheme]}\n      placeholder='Example: {job=\"my-service\"} |= \"error\"'\n    />\n  );\n}\n"],"names":["useMemo","useTheme","CodeMirror","EditorView","LogQLExtension","LogQLEditor","props","completionConfig","codemirrorProps","theme","isDarkMode","palette","mode","logqlExtension","codemirrorTheme","borderColor","backgroundColor","border","borderRadius","shape","outline","padding","basicSetup","lineNumbers","highlightActiveLine","highlightActiveLineGutter","foldGutter","syntaxHighlighting","extensions","lineWrapping","placeholder"],"mappings":";AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,OAAOC,cAAcC,UAAU,QAA8B,wBAAwB;AACrF,SAASC,cAAc,QAA0B,oBAAoB;AAMrE,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,iBAAiB,GAAGF;IACjD,MAAMG,QAAQR;IACd,MAAMS,aAAaD,MAAME,OAAO,CAACC,IAAI,KAAK;IAE1C,MAAMC,iBAAiBb,QAAQ;QAC7B,OAAOI,eAAeG;IACxB,GAAG;QAACA;KAAiB;IAErB,MAAMO,kBAAkBd,QAAQ;QAC9B,MAAMe,cAAcN,MAAME,OAAO,CAACC,IAAI,KAAK,UAAU,wBAAwB;QAE7E,OAAOT,WAAWM,KAAK,CAAC;YACtB,KAAK;gBACHO,iBAAiB;gBACjBC,QAAQ,CAAC,UAAU,EAAEF,aAAa;gBAClCG,cAAc,GAAGT,MAAMU,KAAK,CAACD,YAAY,CAAC,EAAE,CAAC;YAC/C;YACA,0BAA0B;gBACxBE,SAAS;YACX;YACA,eAAe;gBACbC,SAAS;YACX;QACF;IACF,GAAG;QAACZ;KAAM;IAEV,qBACE,KAACP;QACE,GAAGM,eAAe;QACnBC,OAAOC,aAAa,SAAS;QAC7BY,YAAY;YACVC,aAAa;YACbC,qBAAqB;YACrBC,2BAA2B;YAC3BC,YAAY;YACZC,oBAAoB;QACtB;QACAC,YAAY;YAACzB,WAAW0B,YAAY;YAAEhB;YAAgBC;SAAgB;QACtEgB,aAAY;;AAGlB"}