@fc-components/monaco-editor 0.1.1

package/src/index.tsx

@@ -0,0 +1,3 @@
+import promql from './promql';
+
+export { promql as PromQLMonacoEditor };

package/src/promql/NOTICE.md

@@ -0,0 +1,3 @@
+Copyright 2025 Nightingale Team
+
+This component is based on Grafana: Copyright 2014-2021 Grafana Labs

package/src/promql/completion/DataProvider.ts

@@ -0,0 +1,252 @@
+import { makeSelector } from '../util';
+import type { Metric, PromMetricsMetadata, DataProviderParams } from '../types';
+
+type CustomRequest = (input: RequestInfo, init?: RequestInit) => Promise<Response>;
+
+interface APIResponse<T> {
+  status: 'success' | 'error';
+  data?: T;
+  error?: string;
+  warnings?: string[];
+}
+
+const DEFAULT_SERIES_LIMIT = '40000';
+const badRequest = 400;
+const unprocessableEntity = 422;
+const serviceUnavailable = 503;
+const CODE_MODE_SUGGESTIONS_INCOMPLETE_EVENT = 'codeModeSuggestionsIncomplete';
+
+export class DataProvider {
+  readonly metricNamesSuggestionLimit: number;
+  private inputInRange: string;
+  private suggestionsIncomplete: boolean;
+  private readonly lookbackInterval = 60 * 60 * 1000 * 12; // 12 hours
+  private variablesNames: string[] = [];
+  private readonly url: string;
+  private readonly errorHandler?: (error: any) => void;
+  private readonly httpMethod: 'POST' | 'GET' = 'GET';
+  private readonly apiPrefix: string = '/api/v1';
+  private readonly customRequest: CustomRequest = (input: RequestInfo, init?: RequestInit): Promise<Response> => fetch(input, init);
+  metrics: string[];
+  labelKeys: string[];
+  metricsMetadata?: PromMetricsMetadata;
+
+  constructor(params: DataProviderParams) {
+    this.inputInRange = '';
+    this.metricNamesSuggestionLimit = 1000;
+    this.suggestionsIncomplete = false;
+
+    this.url = params.url ? params.url : '';
+    this.errorHandler = params.httpErrorHandler;
+    if (params.lookbackInterval) {
+      this.lookbackInterval = params.lookbackInterval;
+    }
+    if (params.variablesNames) {
+      this.variablesNames = [...params.variablesNames];
+    }
+    if (params.request) {
+      this.customRequest = params.request;
+    }
+    if (params.httpMethod) {
+      this.httpMethod = params.httpMethod;
+    }
+    if (params.apiPrefix) {
+      this.apiPrefix = params.apiPrefix;
+    }
+
+    this.metrics = [];
+    this.labelKeys = [];
+  }
+
+  getVariablesNames(): string[] {
+    return this.variablesNames;
+  }
+
+  setVariablesNames(variablesNames: string[]) {
+    this.variablesNames = [...variablesNames];
+  }
+
+  private buildRequest(endpoint: string, params: URLSearchParams) {
+    let uri = endpoint;
+    let body: URLSearchParams | null = params;
+    if (this.httpMethod === 'GET') {
+      uri = `${uri}?${params}`;
+      body = null;
+    }
+    return { uri, body };
+  }
+
+  private request<T>(resource: string, init?: RequestInit): Promise<T> {
+    return this.customRequest(this.url + resource, init)
+      .then((res) => {
+        if (!res.ok && ![badRequest, unprocessableEntity, serviceUnavailable].includes(res.status)) {
+          throw new Error(res.statusText);
+        }
+        return res;
+      })
+      .then((res) => res.json())
+      .then((apiRes: APIResponse<T>) => {
+        if (apiRes.status === 'error') {
+          const error = new Error(apiRes.error !== undefined ? apiRes.error : 'missing "error" field in response JSON');
+          if (this.errorHandler) {
+            this.errorHandler(error);
+          }
+          throw error;
+        }
+        if (apiRes.data === undefined) {
+          const error = new Error(apiRes.error !== undefined ? apiRes.error : 'missing "data" field in response JSON');
+          if (this.errorHandler) {
+            this.errorHandler(error);
+          }
+          throw error;
+        }
+        return apiRes.data;
+      })
+      .catch((error) => {
+        if (this.errorHandler) {
+          this.errorHandler(error);
+        }
+        throw error;
+      });
+  }
+
+  fetchSeries = async (selector: string, withLimit?: string): Promise<Record<string, string>[]> => {
+    const end = new Date();
+    const start = new Date(end.getTime() - this.lookbackInterval);
+    const url = `${this.apiPrefix}/series`;
+    let urlParams: any = {
+      start: start.toISOString() as string,
+      end: end.toISOString() as string,
+    };
+    if (selector) {
+      urlParams['match[]'] = selector;
+    }
+
+    if (withLimit !== 'none') {
+      urlParams = { ...urlParams, limit: withLimit ?? DEFAULT_SERIES_LIMIT };
+    }
+    const request = this.buildRequest(url, new URLSearchParams(urlParams));
+
+    return await this.request<Record<string, string>[]>(request.uri, {
+      method: this.httpMethod,
+      body: request.body,
+    }).catch(() => {
+      return [] as Record<string, string>[];
+    });
+  };
+
+  fetchLabels = async (selector: string): Promise<string[]> => {
+    const end = new Date();
+    const start = new Date(end.getTime() - this.lookbackInterval);
+    const url = `${this.apiPrefix}/labels`;
+    const urlParams: any = {
+      start: start.toISOString(),
+      end: end.toISOString(),
+    };
+    if (selector) {
+      urlParams['match[]'] = selector;
+    }
+    const request = this.buildRequest(url, new URLSearchParams(urlParams));
+
+    return await this.request<string[]>(request.uri, {
+      method: this.httpMethod,
+      body: request.body,
+    })
+      .then((res) => {
+        this.labelKeys = res;
+        return res;
+      })
+      .catch(() => {
+        return [] as string[];
+      });
+  };
+
+  fetchLabelValues = async (labelName: string, selector: string): Promise<string[]> => {
+    const end = new Date();
+    const start = new Date(end.getTime() - this.lookbackInterval);
+    const url = `${this.apiPrefix}/label/${labelName}/values`;
+    const urlParams: any = {
+      start: start.toISOString(),
+      end: end.toISOString(),
+    };
+    if (selector) {
+      urlParams['match[]'] = selector;
+    }
+    const request = this.buildRequest(url, new URLSearchParams(urlParams));
+
+    return await this.request<string[]>(request.uri, {
+      method: this.httpMethod,
+      body: request.body,
+    }).catch(() => {
+      return [] as string[];
+    });
+  };
+
+  getAllMetricNames(): string[] {
+    return this.metrics;
+  }
+
+  start = async () => {
+    this.metrics = (await this.fetchLabelValues('__name__', makeSelector('', [], '__name__'))) || [];
+
+    return Promise.all([
+      this.loadMetricsMetadata(),
+      // this.fetchLabels()
+    ]);
+  };
+
+  async loadMetricsMetadata() {
+    const request = this.buildRequest(`${this.apiPrefix}/metadata`, new URLSearchParams({}));
+    this.metricsMetadata = await this.request<PromMetricsMetadata>(request.uri, {
+      method: this.httpMethod,
+      body: request.body,
+    }).catch(() => {
+      return {} as PromMetricsMetadata;
+    });
+  }
+
+  metricNamesToMetrics(metricNames: string[]): Metric[] {
+    const result: Metric[] = metricNames.map((m) => {
+      const metaItem = this.metricsMetadata?.[m];
+      return {
+        name: m,
+        help: metaItem?.help ?? '',
+        type: metaItem?.type ?? '',
+      };
+    });
+
+    return result;
+  }
+
+  private setInputInRange(textInput: string): void {
+    this.inputInRange = textInput;
+  }
+
+  private enableAutocompleteSuggestionsUpdate(): void {
+    this.suggestionsIncomplete = true;
+    dispatchEvent(
+      new CustomEvent(CODE_MODE_SUGGESTIONS_INCOMPLETE_EVENT, {
+        detail: {
+          limit: this.metricNamesSuggestionLimit,
+        },
+      }),
+    );
+  }
+
+  get monacoSettings() {
+    return {
+      /**
+       * Enable autocomplete suggestions update on every input change.
+       *
+       * @remarks
+       * If fuzzy search is used in `getCompletions` to trim down results to improve performance,
+       * we need to instruct Monaco to update the completions on every input change, so that the
+       * completions reflect the current input.
+       */
+      enableAutocompleteSuggestionsUpdate: this.enableAutocompleteSuggestionsUpdate.bind(this),
+      inputInRange: this.inputInRange,
+      setInputInRange: this.setInputInRange.bind(this),
+      suggestionsIncomplete: this.suggestionsIncomplete,
+    };
+  }
+}

package/src/promql/completion/completions.ts

@@ -0,0 +1,188 @@
+import UFuzzy from '@leeoniya/ufuzzy';
+
+import { FUNCTIONS } from '../promql';
+import { makeSelector, NeverCaseError } from '../util';
+import type { DataProvider } from './DataProvider';
+import type { Situation } from './situation';
+import type { Label } from '../types';
+
+export type CompletionType = 'HISTORY' | 'FUNCTION' | 'METRIC_NAME' | 'DURATION' | 'LABEL_NAME' | 'LABEL_VALUE';
+
+type Completion = {
+  type: CompletionType;
+  label: string;
+  insertText: string;
+  detail?: string;
+  documentation?: string;
+  triggerOnInsert?: boolean;
+};
+
+const metricNamesSearchClient = new UFuzzy({ intraMode: 1 });
+
+// we order items like: history, functions, metrics
+function getAllMetricNamesCompletions(dataProvider: DataProvider): Completion[] {
+  let metricNames = dataProvider.getAllMetricNames();
+
+  if (metricNames.length > dataProvider.metricNamesSuggestionLimit) {
+    const { monacoSettings } = dataProvider;
+    monacoSettings.enableAutocompleteSuggestionsUpdate();
+
+    if (monacoSettings.inputInRange) {
+      metricNames =
+        metricNamesSearchClient
+          .filter(metricNames, monacoSettings.inputInRange)
+          ?.slice(0, dataProvider.metricNamesSuggestionLimit)
+          .map((idx) => metricNames[idx]) ?? [];
+    } else {
+      metricNames = metricNames.slice(0, dataProvider.metricNamesSuggestionLimit);
+    }
+  }
+
+  return dataProvider.metricNamesToMetrics(metricNames).map((metric) => ({
+    type: 'METRIC_NAME',
+    label: metric.name,
+    insertText: metric.name,
+    detail: `${metric.name} : ${metric.type}`,
+    documentation: metric.help,
+  }));
+}
+
+const FUNCTION_COMPLETIONS: Completion[] = FUNCTIONS.map((f) => ({
+  type: 'FUNCTION',
+  label: f.label,
+  insertText: f.insertText ?? '', // i don't know what to do when this is nullish. it should not be.
+  detail: f.detail,
+  documentation: f.documentation,
+}));
+
+async function getAllFunctionsAndMetricNamesCompletions(dataProvider: DataProvider): Promise<Completion[]> {
+  const metricNames = getAllMetricNamesCompletions(dataProvider);
+
+  return [...FUNCTION_COMPLETIONS, ...metricNames];
+}
+
+const DURATION_COMPLETIONS: Completion[] = ['$__interval', '$__range', '$__rate_interval', '1m', '5m', '10m', '30m', '1h', '1d'].map((text) => ({
+  type: 'DURATION',
+  label: text,
+  insertText: text,
+}));
+
+function getAllHistoryCompletions(_dataProvider: DataProvider): Completion[] {
+  return [];
+  // function getAllHistoryCompletions(queryHistory: PromHistoryItem[]): Completion[] {
+  // NOTE: the typescript types are wrong. historyItem.query.expr can be undefined
+  // const allHistory = dataProvider.getHistory();
+  // FIXME: find a better history-limit
+  // return allHistory.slice(0, 10).map((expr) => ({
+  //   type: 'HISTORY',
+  //   label: expr,
+  //   insertText: expr,
+  // }));
+}
+
+async function getLabelNames(metric: string | undefined, otherLabels: Label[], dataProvider: DataProvider): Promise<string[]> {
+  if (metric === undefined || metric === '') {
+    const selector = makeSelector('', otherLabels);
+    return await dataProvider.fetchLabels(selector);
+  } else {
+    const selector = makeSelector(metric, otherLabels);
+    const series = await dataProvider.fetchSeries(selector);
+    const labelNames = new Set<string>();
+    for (const labelSet of series) {
+      for (const [key] of Object.entries(labelSet)) {
+        if (key === '__name__') {
+          continue;
+        }
+        labelNames.add(key);
+      }
+    }
+    return Array.from(labelNames);
+  }
+}
+
+async function getLabelNamesForCompletions(
+  metric: string | undefined,
+  suffix: string,
+  triggerOnInsert: boolean,
+  otherLabels: Label[],
+  dataProvider: DataProvider,
+): Promise<Completion[]> {
+  const labelNames = await getLabelNames(metric, otherLabels, dataProvider);
+  return labelNames.map((text) => ({
+    type: 'LABEL_NAME',
+    label: text,
+    insertText: `${text}${suffix}`,
+    triggerOnInsert,
+  }));
+}
+
+async function getLabelNamesForSelectorCompletions(metric: string | undefined, otherLabels: Label[], dataProvider: DataProvider): Promise<Completion[]> {
+  return getLabelNamesForCompletions(metric, '=', true, otherLabels, dataProvider);
+}
+
+async function getLabelNamesForByCompletions(metric: string | undefined, otherLabels: Label[], dataProvider: DataProvider): Promise<Completion[]> {
+  return getLabelNamesForCompletions(metric, '', false, otherLabels, dataProvider);
+}
+
+async function getLabelValues(metric: string | undefined, labelName: string, otherLabels: Label[], dataProvider: DataProvider): Promise<string[]> {
+  if (metric === undefined || metric === '') {
+    const selector = makeSelector('', otherLabels);
+    return await dataProvider.fetchLabelValues(labelName, selector);
+  } else {
+    const selector = makeSelector(metric, otherLabels, labelName);
+    const series = await dataProvider.fetchSeries(selector);
+    const labelValues = new Set<string>();
+    for (const labelSet of series) {
+      for (const [key, value] of Object.entries(labelSet)) {
+        if (key === '__name__') {
+          continue;
+        }
+        if (key === labelName) {
+          labelValues.add(value);
+        }
+      }
+    }
+    const variablesNames = dataProvider.getVariablesNames();
+    return variablesNames.concat(Array.from(labelValues));
+  }
+}
+
+async function getLabelValuesForMetricCompletions(
+  metric: string | undefined,
+  labelName: string,
+  betweenQuotes: boolean,
+  otherLabels: Label[],
+  dataProvider: DataProvider,
+): Promise<Completion[]> {
+  const values = await getLabelValues(metric, labelName, otherLabels, dataProvider);
+  return values.map((text) => ({
+    type: 'LABEL_VALUE',
+    label: text,
+    insertText: betweenQuotes ? text : `"${text}"`, // FIXME: escaping strange characters?
+  }));
+}
+
+export function getCompletions(situation: Situation, dataProvider: DataProvider): Promise<Completion[]> {
+  switch (situation.type) {
+    case 'IN_DURATION':
+      return Promise.resolve(DURATION_COMPLETIONS);
+    case 'IN_FUNCTION':
+      return getAllFunctionsAndMetricNamesCompletions(dataProvider);
+    case 'AT_ROOT': {
+      return getAllFunctionsAndMetricNamesCompletions(dataProvider);
+    }
+    case 'EMPTY': {
+      const metricNames = getAllMetricNamesCompletions(dataProvider);
+      const historyCompletions = getAllHistoryCompletions(dataProvider);
+      return Promise.resolve([...historyCompletions, ...FUNCTION_COMPLETIONS, ...metricNames]);
+    }
+    case 'IN_LABEL_SELECTOR_NO_LABEL_NAME':
+      return getLabelNamesForSelectorCompletions(situation.metricName, situation.otherLabels, dataProvider);
+    case 'IN_GROUPING':
+      return getLabelNamesForByCompletions(situation.metricName, situation.otherLabels, dataProvider);
+    case 'IN_LABEL_SELECTOR_WITH_LABEL_NAME':
+      return getLabelValuesForMetricCompletions(situation.metricName, situation.labelName, situation.betweenQuotes, situation.otherLabels, dataProvider);
+    default:
+      throw new NeverCaseError(situation);
+  }
+}

package/src/promql/completion/getCompletionProvider.ts

@@ -0,0 +1,96 @@
+import type * as monacoTypes from 'monaco-editor/esm/vs/editor/editor.api';
+
+import { NeverCaseError } from '../util';
+import { DataProvider } from './DataProvider';
+import { getSituation } from './situation';
+import { getCompletions } from './completions';
+
+export type { monacoTypes };
+export type Monaco = typeof monacoTypes;
+export type CompletionType = 'HISTORY' | 'FUNCTION' | 'METRIC_NAME' | 'DURATION' | 'LABEL_NAME' | 'LABEL_VALUE';
+
+function getMonacoCompletionItemKind(type: CompletionType, monaco: Monaco): monacoTypes.languages.CompletionItemKind {
+  switch (type) {
+    case 'DURATION':
+      return monaco.languages.CompletionItemKind.Unit;
+    case 'FUNCTION':
+      return monaco.languages.CompletionItemKind.Variable;
+    case 'HISTORY':
+      return monaco.languages.CompletionItemKind.Snippet;
+    case 'LABEL_NAME':
+      return monaco.languages.CompletionItemKind.Enum;
+    case 'LABEL_VALUE':
+      return monaco.languages.CompletionItemKind.EnumMember;
+    case 'METRIC_NAME':
+      return monaco.languages.CompletionItemKind.Constructor;
+    default:
+      throw new NeverCaseError(type);
+  }
+}
+
+export function getCompletionProvider(monaco: Monaco, dataProvider: DataProvider): monacoTypes.languages.CompletionItemProvider {
+  const provideCompletionItems = (
+    model: monacoTypes.editor.ITextModel,
+    position: monacoTypes.Position,
+  ): monacoTypes.languages.ProviderResult<monacoTypes.languages.CompletionList> => {
+    const word = model.getWordAtPosition(position);
+    const range =
+      word != null
+        ? monaco.Range.lift({
+            startLineNumber: position.lineNumber,
+            endLineNumber: position.lineNumber,
+            startColumn: word.startColumn,
+            endColumn: word.endColumn,
+          })
+        : monaco.Range.fromPositions(position);
+    // documentation says `position` will be "adjusted" in `getOffsetAt`
+    // i don't know what that means, to be sure i clone it
+
+    const positionClone = {
+      column: position.column,
+      lineNumber: position.lineNumber,
+    };
+    dataProvider.monacoSettings.setInputInRange(model.getValueInRange(range));
+
+    // Check to see if the browser supports window.getSelection()
+    if (window.getSelection) {
+      const selectedText = window.getSelection()?.toString();
+      // If the user has selected text, adjust the cursor position to be at the start of the selection, instead of the end
+      if (selectedText && selectedText.length > 0) {
+        positionClone.column = positionClone.column - selectedText.length;
+      }
+    }
+
+    const offset = model.getOffsetAt(positionClone);
+    const situation = getSituation(model.getValue(), offset);
+    const completionsPromise = situation != null ? getCompletions(situation, dataProvider) : Promise.resolve([]);
+
+    return completionsPromise.then((items) => {
+      // monaco by-default alphabetically orders the items.
+      // to stop it, we use a number-as-string sortkey,
+      // so that monaco keeps the order we use
+      const maxIndexDigits = items.length.toString().length;
+      const suggestions: monacoTypes.languages.CompletionItem[] = items.map((item, index) => ({
+        kind: getMonacoCompletionItemKind(item.type, monaco),
+        label: item.label,
+        insertText: item.insertText,
+        detail: item.detail,
+        documentation: item.documentation,
+        sortText: index.toString().padStart(maxIndexDigits, '0'), // to force the order we have
+        range,
+        command: item.triggerOnInsert
+          ? {
+              id: 'editor.action.triggerSuggest',
+              title: '',
+            }
+          : undefined,
+      }));
+      return { suggestions, incomplete: dataProvider.monacoSettings.suggestionsIncomplete };
+    });
+  };
+
+  return {
+    triggerCharacters: ['{', ',', '[', '(', '=', '~', ' ', '"'],
+    provideCompletionItems,
+  };
+}