@fc-components/monaco-editor 0.1.2 → 0.1.4

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.4",
   "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;
@@ -26,7 +27,6 @@ interface PromQLEditorProps {
 }
 
 const PROMQL_LANG_ID = promLanguageDefinition.id;
-const EDITOR_HEIGHT_OFFSET = 2;
 const SIZE_MAP: Record<
   string,
   {
@@ -52,8 +52,8 @@ const SIZE_MAP: Record<
   },
 };
 const themeMap: Record<string, string> = {
-  light: 'vs-light',
-  dark: 'vs-dark',
+  light: 'light',
+  dark: 'n9e-dark',
 };
 
 const getStyles = (placeholder?: string) => {
@@ -97,6 +97,16 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
   }, []);
 
   const handleEditorDidMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
+    monaco.editor.defineTheme('n9e-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000',
+      },
+    });
+
     const isEditorFocused = editor.createContextKey<boolean>('isEditorFocused' + id, false);
     // we setup on-blur
     editor.onDidBlurEditorWidget(() => {
@@ -107,19 +117,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 = {
@@ -141,7 +152,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
       const containerDiv = containerRef.current;
       if (containerDiv !== null) {
         const pixelHeight = editor.getContentHeight();
-        containerDiv.style.height = `${pixelHeight + EDITOR_HEIGHT_OFFSET}px`;
+        containerDiv.style.height = `${pixelHeight}px`;
         containerDiv.style.width = '100%';
         const pixelWidth = containerDiv.clientWidth;
         editor.layout({ width: pixelWidth, height: pixelHeight });

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;