@fc-components/monaco-editor 0.1.15 → 0.1.17

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

@@ -9,6 +9,7 @@ export declare class DataProvider {
     private readonly errorHandler?;
     private readonly httpMethod;
     private readonly apiPrefix;
+    private enableRequests;
     private readonly customRequest;
     metrics: string[];
     labelKeys: string[];
@@ -19,12 +20,12 @@ export declare class DataProvider {
     setVariablesNames(variablesNames: string[]): void;
     private buildRequest;
     private request;
-    fetchSeries: (selector: string, withLimit?: string | undefined) => Promise<Record<string, string>[]>;
+    fetchSeries: (selector: string, withLimit?: string | undefined) => Promise<Record<string, string | undefined>[]>;
     fetchLabels: (selector: string) => Promise<string[]>;
     fetchLabelValues: (labelName: string, selector: string) => Promise<string[]>;
     getAllMetricNames(): string[];
-    start: () => Promise<void[]>;
-    loadMetricsMetadata(): Promise<void>;
+    start: () => Promise<PromMetricsMetadata[]>;
+    loadMetricsMetadata(): Promise<PromMetricsMetadata>;
     metricNamesToMetrics(metricNames: string[]): Metric[];
     private setInputInRange;
     private enableAutocompleteSuggestionsUpdate;

package/dist/promql/index.d.ts

@@ -8,6 +8,7 @@ interface PromQLEditorProps {
     placeholder?: string;
     enableAutocomplete?: boolean;
     durationVariablesCompletion?: boolean;
+    enableRequests?: boolean;
     readOnly?: boolean;
     disabled?: boolean;
     interpolateString?: (query: string) => string;

package/dist/promql/types.d.ts

@@ -27,5 +27,6 @@ export interface DataProviderParams {
     httpMethod?: 'POST' | 'GET';
     apiPrefix?: string;
     httpErrorHandler?: (error: any) => void;
+    enableRequests?: boolean;
 }
 export {};

package/package.json

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

package/src/promql/completion/DataProvider.ts

@@ -26,6 +26,7 @@ export class DataProvider {
   private readonly errorHandler?: (error: any) => void;
   private readonly httpMethod: 'POST' | 'GET' = 'GET';
   private readonly apiPrefix: string = '/api/v1';
+  private enableRequests: boolean = true;
   private readonly customRequest: CustomRequest = (input: RequestInfo, init?: RequestInit): Promise<Response> => fetch(input, init);
   metrics: string[];
   labelKeys: string[];
@@ -56,6 +57,11 @@ export class DataProvider {
       this.apiPrefix = params.apiPrefix;
     }
 
+    // control whether DataProvider should actually send network requests
+    if (typeof params.enableRequests !== 'undefined') {
+      this.enableRequests = !!params.enableRequests;
+    }
+
     this.metrics = [];
     this.labelKeys = [];
   }
@@ -112,7 +118,10 @@ export class DataProvider {
       });
   }
 
-  fetchSeries = async (selector: string, withLimit?: string): Promise<Record<string, string>[]> => {
+  fetchSeries = async (selector: string, withLimit?: string): Promise<Record<string, string | undefined>[]> => {
+    if (!this.enableRequests) {
+      return [] as Record<string, string | undefined>[];
+    }
     const end = new Date();
     const start = new Date(end.getTime() - this.lookbackInterval);
     const url = `${this.apiPrefix}/series`;
@@ -138,6 +147,9 @@ export class DataProvider {
   };
 
   fetchLabels = async (selector: string): Promise<string[]> => {
+    if (!this.enableRequests) {
+      return [] as string[];
+    }
     const end = new Date();
     const start = new Date(end.getTime() - this.lookbackInterval);
     const url = `${this.apiPrefix}/labels`;
@@ -164,6 +176,9 @@ export class DataProvider {
   };
 
   fetchLabelValues = async (labelName: string, selector: string): Promise<string[]> => {
+    if (!this.enableRequests) {
+      return [] as string[];
+    }
     const end = new Date();
     const start = new Date(end.getTime() - this.lookbackInterval);
     const url = `${this.apiPrefix}/label/${labelName}/values`;
@@ -174,6 +189,7 @@ export class DataProvider {
     if (selector) {
       urlParams['match[]'] = selector;
     }
+
     const request = this.buildRequest(url, new URLSearchParams(urlParams));
 
     return await this.request<string[]>(request.uri, {
@@ -197,7 +213,11 @@ export class DataProvider {
     ]);
   };
 
-  async loadMetricsMetadata() {
+  async loadMetricsMetadata(): Promise<PromMetricsMetadata> {
+    if (!this.enableRequests) {
+      this.metricsMetadata = {} as PromMetricsMetadata;
+      return this.metricsMetadata;
+    }
     const request = this.buildRequest(`${this.apiPrefix}/metadata`, new URLSearchParams({}));
     this.metricsMetadata = await this.request<PromMetricsMetadata>(request.uri, {
       method: this.httpMethod,
@@ -205,6 +225,8 @@ export class DataProvider {
     }).catch(() => {
       return {} as PromMetricsMetadata;
     });
+
+    return this.metricsMetadata || ({} as PromMetricsMetadata);
   }
 
   metricNamesToMetrics(metricNames: string[]): Metric[] {

package/src/promql/completion/completions.ts

@@ -1,4 +1,4 @@
-import UFuzzy from '@leeoniya/ufuzzy';
+// import UFuzzy from '@leeoniya/ufuzzy';
 
 import { FUNCTIONS } from '../promql';
 import { makeSelector, NeverCaseError } from '../util';
@@ -17,26 +17,26 @@ type Completion = {
   triggerOnInsert?: boolean;
 };
 
-const metricNamesSearchClient = new UFuzzy({ intraMode: 1 });
+// 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);
-    }
-  }
+  // 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',
@@ -143,7 +143,7 @@ async function getLabelValues(metric: string | undefined, labelName: string, oth
         if (key === '__name__') {
           continue;
         }
-        if (key === labelName) {
+        if (key === labelName && value) {
           labelValues.add(value);
         }
       }

package/src/promql/index.tsx

@@ -20,6 +20,8 @@ interface PromQLEditorProps {
   placeholder?: string;
   enableAutocomplete?: boolean;
   durationVariablesCompletion?: boolean;
+  // When false, DataProvider will not send network requests. Default: true
+  enableRequests?: boolean;
   readOnly?: boolean;
   disabled?: boolean;
   interpolateString?: (query: string) => string;
@@ -92,6 +94,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     placeholder,
     interpolateString,
     enableAutocomplete = true,
+    enableRequests = true,
     readOnly = false,
     disabled = false,
     onChange,
@@ -266,6 +269,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
         httpMethod: props.httpMethod,
         apiPrefix: props.apiPrefix,
         httpErrorHandler: props.httpErrorHandler,
+        enableRequests: enableRequests,
       });
       dataProviderRef.current = dataProvider;
       dataProvider.start();
@@ -331,6 +335,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     props.httpMethod,
     props.apiPrefix,
     placeholder,
+    enableRequests,
   ]);
 
   return (

package/src/promql/types.ts

@@ -33,4 +33,6 @@ export interface DataProviderParams {
   httpMethod?: 'POST' | 'GET';
   apiPrefix?: string;
   httpErrorHandler?: (error: any) => void;
+  // When false, DataProvider will not send any network requests.
+  enableRequests?: boolean;
 }