@fc-components/monaco-editor 0.1.1 → 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

@@ -5,6 +5,8 @@ interface PromQLEditorProps {
     theme?: 'light' | 'dark';
     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

@@ -1,6 +1,9 @@
 {
   "name": "@fc-components/monaco-editor",
-  "version": "0.1.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "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

@@ -18,6 +18,8 @@ interface PromQLEditorProps {
   theme?: 'light' | 'dark';
   value?: string;
   placeholder?: string;
+  enableAutocomplete?: boolean;
+  durationVariablesCompletion?: boolean;
   interpolateString?: (query: string) => string;
   onChange?: (value: string) => void;
   onShiftEnter?: (value: string) => void;
@@ -68,7 +70,7 @@ const getStyles = (placeholder?: string) => {
 
 export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams) {
   const id = uuidv4();
-  const { size = 'middle', theme = 'light', variablesNames, value, placeholder, interpolateString, onChange, onShiftEnter, onBlur } = props;
+  const { size = 'middle', theme = 'light', variablesNames, value, placeholder, interpolateString, enableAutocomplete = true, onChange, onShiftEnter, onBlur } = props;
   const autocompleteDisposeFun = useRef<(() => void) | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const dataProviderRef = useRef<DataProvider | null>(null);
@@ -106,33 +108,36 @@ 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 completionProvider = getCompletionProvider(monaco, dataProvider);
 
-    const filteringCompletionProvider: monacoTypes.languages.CompletionItemProvider = {
-      ...completionProvider,
-      provideCompletionItems: (model, position, context, token) => {
-        if (editor.getModel()?.id !== model.id) {
-          return { suggestions: [] };
-        }
-        return completionProvider.provideCompletionItems(model, position, context, token);
-      },
-    };
+      const filteringCompletionProvider: monacoTypes.languages.CompletionItemProvider = {
+        ...completionProvider,
+        provideCompletionItems: (model, position, context, token) => {
+          if (editor.getModel()?.id !== model.id) {
+            return { suggestions: [] };
+          }
+          return completionProvider.provideCompletionItems(model, position, context, token);
+        },
+      };
 
-    const { dispose } = monaco.languages.registerCompletionItemProvider(PROMQL_LANG_ID, filteringCompletionProvider);
+      const { dispose } = monaco.languages.registerCompletionItemProvider(PROMQL_LANG_ID, filteringCompletionProvider);
 
-    autocompleteDisposeFun.current = dispose;
+      autocompleteDisposeFun.current = dispose;
+    }
 
     const updateElementHeight = () => {
       const containerDiv = containerRef.current;
@@ -158,7 +163,6 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     editor.addCommand(
       monaco.KeyMod.Shift | monaco.KeyCode.Enter,
       () => {
-        console.log(22222);
         onShiftEnter?.(editor.getValue());
       },
       'isEditorFocused' + id,

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;

package/src/promql/util.ts

@@ -25,5 +25,5 @@ export function makeSelector(metricName: string, labels?: Label[], labelName?: s
     return `${label.name}${label.op}"${escapeLabelValueInExactSelector(label.value)}"`;
   });
 
-  return `{${allLabelTexts.join(',')}}`;
+  return `${metricName}{${allLabelTexts.join(',')}}`;
 }