@fc-components/monaco-editor 0.1.2 → 0.1.3

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

@@ -13,6 +13,7 @@ export declare class DataProvider {
     metrics: string[];
     labelKeys: string[];
     metricsMetadata?: PromMetricsMetadata;
+    durationVariablesCompletion: boolean;
     constructor(params: DataProviderParams);
     getVariablesNames(): string[];
     setVariablesNames(variablesNames: string[]): void;

package/dist/promql/index.d.ts

@@ -6,6 +6,7 @@ interface PromQLEditorProps {
     value?: string;
     placeholder?: string;
     enableAutocomplete?: boolean;
+    durationVariablesCompletion?: boolean;
     interpolateString?: (query: string) => string;
     onChange?: (value: string) => void;
     onShiftEnter?: (value: string) => void;

package/dist/promql/types.d.ts

@@ -22,6 +22,7 @@ export interface DataProviderParams {
     url?: string;
     lookbackInterval?: number;
     variablesNames?: string[];
+    durationVariablesCompletion?: boolean;
     request: FetchFn;
     httpMethod?: 'POST' | 'GET';
     apiPrefix?: string;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",

package/src/promql/completion/DataProvider.ts

@@ -30,6 +30,7 @@ export class DataProvider {
   metrics: string[];
   labelKeys: string[];
   metricsMetadata?: PromMetricsMetadata;
+  durationVariablesCompletion: boolean;
 
   constructor(params: DataProviderParams) {
     this.inputInRange = '';
@@ -44,6 +45,7 @@ export class DataProvider {
     if (params.variablesNames) {
       this.variablesNames = [...params.variablesNames];
     }
+    this.durationVariablesCompletion = params.durationVariablesCompletion ?? true;
     if (params.request) {
       this.customRequest = params.request;
     }

package/src/promql/completion/completions.ts

@@ -61,7 +61,13 @@ async function getAllFunctionsAndMetricNamesCompletions(dataProvider: DataProvid
   return [...FUNCTION_COMPLETIONS, ...metricNames];
 }
 
-const DURATION_COMPLETIONS: Completion[] = ['$__interval', '$__range', '$__rate_interval', '1m', '5m', '10m', '30m', '1h', '1d'].map((text) => ({
+const DURATION_COMPLETIONS: Completion[] = ['1m', '5m', '10m', '30m', '1h', '1d'].map((text) => ({
+  type: 'DURATION',
+  label: text,
+  insertText: text,
+}));
+
+const DURATION_VARIABLES_COMPLETIONS: Completion[] = ['$__interval', '$__range', '$__rate_interval'].map((text) => ({
   type: 'DURATION',
   label: text,
   insertText: text,
@@ -165,6 +171,9 @@ async function getLabelValuesForMetricCompletions(
 export function getCompletions(situation: Situation, dataProvider: DataProvider): Promise<Completion[]> {
   switch (situation.type) {
     case 'IN_DURATION':
+      if (dataProvider.durationVariablesCompletion) {
+        return Promise.resolve(DURATION_VARIABLES_COMPLETIONS.concat(DURATION_COMPLETIONS));
+      }
       return Promise.resolve(DURATION_COMPLETIONS);
     case 'IN_FUNCTION':
       return getAllFunctionsAndMetricNamesCompletions(dataProvider);

package/src/promql/index.tsx

@@ -19,6 +19,7 @@ interface PromQLEditorProps {
   value?: string;
   placeholder?: string;
   enableAutocomplete?: boolean;
+  durationVariablesCompletion?: boolean;
   interpolateString?: (query: string) => string;
   onChange?: (value: string) => void;
   onShiftEnter?: (value: string) => void;
@@ -107,19 +108,20 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
       isEditorFocused.set(true);
     });
 
-    const dataProvider = new DataProvider({
-      url: props.url,
-      lookbackInterval: props.lookbackInterval,
-      variablesNames: props.variablesNames,
-      request: props.request,
-      httpMethod: props.httpMethod,
-      apiPrefix: props.apiPrefix,
-      httpErrorHandler: props.httpErrorHandler,
-    });
-    dataProviderRef.current = dataProvider;
-    dataProvider.start();
-
     if (enableAutocomplete) {
+      const dataProvider = new DataProvider({
+        url: props.url,
+        lookbackInterval: props.lookbackInterval,
+        variablesNames: props.variablesNames,
+        durationVariablesCompletion: props.durationVariablesCompletion,
+        request: props.request,
+        httpMethod: props.httpMethod,
+        apiPrefix: props.apiPrefix,
+        httpErrorHandler: props.httpErrorHandler,
+      });
+      dataProviderRef.current = dataProvider;
+      dataProvider.start();
+
       const completionProvider = getCompletionProvider(monaco, dataProvider);
 
       const filteringCompletionProvider: monacoTypes.languages.CompletionItemProvider = {

package/src/promql/types.ts

@@ -28,6 +28,7 @@ export interface DataProviderParams {
   url?: string;
   lookbackInterval?: number;
   variablesNames?: string[];
+  durationVariablesCompletion?: boolean;
   request: FetchFn;
   httpMethod?: 'POST' | 'GET';
   apiPrefix?: string;