@fc-components/monaco-editor 0.1.27 → 0.2.1

package/dist/promql/completion/situation.d.ts

@@ -7,6 +7,8 @@ export declare type Situation = {
     type: 'EMPTY';
 } | {
     type: 'IN_DURATION';
+} | {
+    type: 'IN_WITH_BODY';
 } | {
     type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME';
     metricName?: string;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.27",
+  "version": "0.2.1",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@emotion/css": "11.13.4",
-    "@fc-components/lezer-metricsql": "0.0.1",
+    "@fc-components/lezer-metricsql": "^0.0.2",
     "@leeoniya/ufuzzy": "^1.0.18",
     "@lezer/common": "1.2.3",
     "@lezer/highlight": "1.2.1",

package/src/promql/__tests__/completions.test.ts

@@ -0,0 +1,72 @@
+import { getCompletions } from '../completion/completions';
+import type { Situation } from '../completion/situation';
+import type { DataProvider } from '../completion/DataProvider';
+
+// Minimal mock DataProvider that returns empty data
+function createMockDataProvider(overrides: Partial<DataProvider> = {}): DataProvider {
+  return {
+    getAllMetricNames: () => [],
+    metricNamesToMetrics: (names: string[]) => names.map((name) => ({ name, help: '', type: '' })),
+    fetchLabels: async () => [],
+    fetchSeries: async () => [],
+    fetchLabelValues: async () => [],
+    getVariablesNames: () => [],
+    durationVariablesCompletion: false,
+    ...overrides,
+  } as unknown as DataProvider;
+}
+
+describe('getCompletions', () => {
+  const mockDataProvider = createMockDataProvider();
+
+  describe('with keyword completion', () => {
+    it('includes "with" in EMPTY completions', async () => {
+      const situation: Situation = { type: 'EMPTY' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const withCompletion = completions.find((c) => c.label === 'with');
+      expect(withCompletion).toBeDefined();
+      expect(withCompletion!.insertText).toBe('with (');
+      expect(withCompletion!.detail).toContain('cte_name');
+    });
+
+    it('includes "with" in AT_ROOT completions', async () => {
+      const situation: Situation = { type: 'AT_ROOT' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const withCompletion = completions.find((c) => c.label === 'with');
+      expect(withCompletion).toBeDefined();
+    });
+
+    it('includes "with" in IN_WITH_BODY completions', async () => {
+      const situation: Situation = { type: 'IN_WITH_BODY' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const withCompletion = completions.find((c) => c.label === 'with');
+      expect(withCompletion).toBeDefined();
+    });
+
+    it('includes "with" in IN_FUNCTION completions', async () => {
+      const situation: Situation = { type: 'IN_FUNCTION' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const withCompletion = completions.find((c) => c.label === 'with');
+      expect(withCompletion).toBeDefined();
+    });
+  });
+
+  describe('Function completions', () => {
+    it('includes standard PromQL functions', async () => {
+      const situation: Situation = { type: 'AT_ROOT' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const sumCompletion = completions.find((c) => c.label === 'sum');
+      expect(sumCompletion).toBeDefined();
+      expect(sumCompletion!.type).toBe('FUNCTION');
+    });
+  });
+
+  describe('Duration completions', () => {
+    it('returns duration values for IN_DURATION', async () => {
+      const situation: Situation = { type: 'IN_DURATION' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      expect(completions.length).toBeGreaterThan(0);
+      expect(completions.every((c) => c.type === 'DURATION')).toBe(true);
+    });
+  });
+});

package/src/promql/__tests__/situation.test.ts

@@ -0,0 +1,85 @@
+import { getSituation } from '../completion/situation';
+
+describe('getSituation', () => {
+  describe('EMPTY', () => {
+    it('returns EMPTY for empty text', () => {
+      expect(getSituation('', 0)).toEqual({ type: 'EMPTY' });
+    });
+  });
+
+  describe('IN_WITH_BODY', () => {
+    it('returns IN_WITH_BODY when cursor is after with block', () => {
+      const text = 'with (cpu = sum(rate(foo[5m])))\ncpu';
+      // find the second occurrence of 'cpu' (after the with block)
+      const firstCpu = text.indexOf('cpu');
+      const pos = text.indexOf('cpu', firstCpu + 1);
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'IN_WITH_BODY' });
+    });
+
+    it('returns IN_WITH_BODY for simple with expression', () => {
+      const text = 'with (a = foo) a';
+      const pos = text.length; // cursor at end
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'IN_WITH_BODY' });
+    });
+
+    it('returns IN_WITH_BODY for multi-CTE with expressions', () => {
+      const text = 'with (x = rate(foo[5m]), y = sum(bar))\nx + y';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'IN_WITH_BODY' });
+    });
+
+    it('does NOT return IN_WITH_BODY when cursor is before closing paren', () => {
+      const text = 'with (a = foo|) a';
+      const pipePos = text.indexOf('|');
+      const cleanText = text.slice(0, pipePos) + text.slice(pipePos + 1);
+      const result = getSituation(cleanText, pipePos);
+      expect(result?.type).not.toBe('IN_WITH_BODY');
+    });
+
+    it('does NOT return IN_WITH_BODY for regular query starting with identifier containing "with"', () => {
+      const text = 'without_cpu';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      expect(result?.type).not.toBe('IN_WITH_BODY');
+    });
+  });
+
+  describe('AT_ROOT', () => {
+    it('returns AT_ROOT for simple metric name', () => {
+      const text = 'node_cpu_seconds_total';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'AT_ROOT' });
+    });
+
+    it('returns AT_ROOT for function call', () => {
+      const text = 'rate(node_cpu_seconds_total[5m])';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'AT_ROOT' });
+    });
+  });
+
+  describe('IN_FUNCTION', () => {
+    it('returns IN_FUNCTION inside function body', () => {
+      const text = 'sum()';
+      const pos = text.indexOf(')');
+      const result = getSituation(text, pos);
+      expect(result?.type).toBe('IN_FUNCTION');
+    });
+  });
+
+  describe('IN_DURATION', () => {
+    it('returns a situation for incomplete duration', () => {
+      // Cursor just after `[` but before `]` should trigger some situation
+      const text = 'foo[5';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      // Result depends on exact parse tree; not null for valid/incomplete input
+      expect(result).toBeDefined();
+    });
+  });
+});

package/src/promql/completion/completions.ts

@@ -58,9 +58,17 @@ const FUNCTION_COMPLETIONS: Completion[] = FUNCTIONS.map((f) => ({
 async function getAllFunctionsAndMetricNamesCompletions(dataProvider: DataProvider): Promise<Completion[]> {
   const metricNames = getAllMetricNamesCompletions(dataProvider);
 
-  return [...FUNCTION_COMPLETIONS, ...metricNames];
+  return [CTE_KEYWORD_COMPLETION, ...FUNCTION_COMPLETIONS, ...metricNames];
 }
 
+const CTE_KEYWORD_COMPLETION: Completion = {
+  type: 'FUNCTION',
+  label: 'with',
+  insertText: 'with (',
+  detail: 'with (cte_name = expr, ...) expr',
+  documentation: 'Define Common Table Expressions (CTEs) for use in the query. MetricsQL extension.',
+};
+
 const DURATION_COMPLETIONS: Completion[] = ['1m', '5m', '10m', '30m', '1h', '1d'].map((text) => ({
   type: 'DURATION',
   label: text,
@@ -177,13 +185,14 @@ export function getCompletions(situation: Situation, dataProvider: DataProvider)
       return Promise.resolve(DURATION_COMPLETIONS);
     case 'IN_FUNCTION':
       return getAllFunctionsAndMetricNamesCompletions(dataProvider);
+    case 'IN_WITH_BODY':
     case 'AT_ROOT': {
       return getAllFunctionsAndMetricNamesCompletions(dataProvider);
     }
     case 'EMPTY': {
       const metricNames = getAllMetricNamesCompletions(dataProvider);
       const historyCompletions = getAllHistoryCompletions(dataProvider);
-      return Promise.resolve([...historyCompletions, ...FUNCTION_COMPLETIONS, ...metricNames]);
+      return Promise.resolve([...historyCompletions, CTE_KEYWORD_COMPLETION, ...FUNCTION_COMPLETIONS, ...metricNames]);
     }
     case 'IN_LABEL_SELECTOR_NO_LABEL_NAME':
       return getLabelNamesForSelectorCompletions(situation.metricName, situation.hasOperator, situation.otherLabels, dataProvider);

package/src/promql/completion/situation.ts

@@ -20,6 +20,8 @@ import {
   StringLiteral,
   UnquotedLabelMatcher,
   VectorSelector,
+  WithExpr,
+  WithAssignment,
 } from '@fc-components/lezer-metricsql';
 
 import { NeverCaseError } from '../util';
@@ -45,7 +47,9 @@ type NodeTypeId =
   | typeof EqlSingle
   | typeof Neq
   | typeof EqlRegex
-  | typeof NeqRegex;
+  | typeof NeqRegex
+  | typeof WithExpr
+  | typeof WithAssignment;
 
 type Path = Array<[Direction, NodeTypeId]>;
 
@@ -128,6 +132,9 @@ export type Situation =
   | {
       type: 'IN_DURATION';
     }
+  | {
+      type: 'IN_WITH_BODY';
+    }
   | {
       type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME';
       metricName?: string;
@@ -216,6 +223,18 @@ const RESOLVERS: Resolver[] = [
     path: [GroupingLabels],
     fun: resolveLabelsForGrouping,
   },
+  {
+    path: [WithExpr],
+    fun: resolveWithExpr,
+  },
+  {
+    path: [WithExpr, PromQL],
+    fun: resolveWithExpr,
+  },
+  {
+    path: [WithAssignment, WithExpr],
+    fun: resolveWithExpr,
+  },
 ];
 
 const LABEL_OP_MAP = new Map<number, LabelOperator>([
@@ -430,6 +449,23 @@ function resolveInFunction(): Situation {
   };
 }
 
+function resolveWithExpr(node: SyntaxNode, text: string, pos: number): Situation | null {
+  // Find the containing WithExpr node (node may be a WithAssignment child)
+  let withExprNode: SyntaxNode | null = node.type.id === WithExpr ? node : node.parent;
+  while (withExprNode && withExprNode.type.id !== WithExpr) {
+    withExprNode = withExprNode.parent;
+  }
+  if (!withExprNode) return null;
+
+  // Only return IN_WITH_BODY when cursor is in the body expression (after the closing ')')
+  const children = getNodeChildren(withExprNode);
+  const closeParen = children.find((c) => getNodeText(c, text) === ')');
+  if (closeParen && pos > closeParen.to) {
+    return { type: 'IN_WITH_BODY' };
+  }
+  return null;
+}
+
 function resolveDurations(): Situation {
   return {
     type: 'IN_DURATION',
@@ -563,6 +599,27 @@ function getErrorNode(tree: Tree, pos: number): SyntaxNode | null {
   return null;
 }
 
+function findMatchingParen(text: string, openPos: number): number {
+  let depth = 0;
+  for (let i = openPos; i < text.length; i++) {
+    if (text[i] === '(') depth++;
+    if (text[i] === ')') {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+
+function isInWithBody(text: string, pos: number): boolean {
+  const withMatch = text.match(/^with\s*\(/i);
+  if (!withMatch) return false;
+  const openParenPos = withMatch[0].length - 1;
+  const closeParenPos = findMatchingParen(text, openParenPos);
+  if (closeParenPos === -1) return false;
+  return pos > closeParenPos;
+}
+
 export function getSituation(text: string, pos: number): Situation | null {
   // there is a special-case when we are at the start of writing text,
   // so we handle that case first
@@ -573,6 +630,13 @@ export function getSituation(text: string, pos: number): Situation | null {
     };
   }
 
+  // text-based check for with body (fallback until grammar supports WithExpr)
+  if (isInWithBody(text, pos)) {
+    return {
+      type: 'IN_WITH_BODY',
+    };
+  }
+
   /**
      PromQL
      Expr

package/src/promql/promql.ts

@@ -243,6 +243,8 @@ for (let _i = 0, aggregations_1 = aggregations; _i < aggregations_1.length; _i++
 // PromQL vector matching + the by and without clauses
 // (https://prometheus.io/docs/prometheus/latest/querying/operators/#vector-matching)
 const vectorMatching = ['on', 'ignoring', 'group_right', 'group_left', 'by', 'without'];
+
+const cteKeywords = ['with'];
 // Produce a regex matching elements : (elt1|elt2|...)
 const vectorMatchingRegex =
   '(' +
@@ -257,7 +259,7 @@ const operators = ['+', '-', '*', '/', '%', '^', '==', '!=', '>', '<', '>=', '<=
 // (https://prometheus.io/docs/prometheus/latest/querying/basics/#offset-modifier)
 const offsetModifier = ['offset'];
 // Merging all the keywords in one list
-const keywords = aggregations.concat(functions).concat(aggregationsOverTime).concat(vectorMatching).concat(offsetModifier);
+const keywords = aggregations.concat(functions).concat(aggregationsOverTime).concat(vectorMatching).concat(offsetModifier).concat(cteKeywords);
 // noinspection JSUnusedGlobalSymbols
 export const language = {
   ignoreCase: false,