@fc-components/monaco-editor 0.1.1 → 0.1.3

package/README.md

@@ -5,23 +5,36 @@ import { PromQLMonacoEditor } from '@fc-components/monaco-editor';
 
 const App = () => {
   return (
-    <div>
-      <PromQLMonacoEditor
-        height="500px"
-        apiPrefix="/api/n9e/proxy/1/api/v1"
-        fetchFn={(resource, options: any) => {
-          const params = options.body?.toString();
-          const search = params ? `?${params}` : '';
-          return fetch(resource + search, {
-            method: 'Get',
-            headers: new Headers({
-              Authorization: `Bearer ${localStorage.getItem('access_token') ||
-                ''}`,
-            }),
-          });
-        }}
-      />
-    </div>
+    <PromQLMonacoEditor
+      placeholder='Enter your PromQL query here...'
+      variablesNames={['$job', '$instance']} // Example variable names
+      apiPrefix='/api/n9e/proxy/1/api/v1'
+      request={(resource, options) => {
+        const params = options?.body?.toString();
+        const search = params ? `?${params}` : '';
+        return fetch(resource + search, {
+          method: 'Get',
+          headers: new Headers({
+            Authorization: `Bearer ${localStorage.getItem('access_token') || ''}`,
+          }),
+        });
+      }}
+      enableAutocomplete={true} // Enable completion
+      durationVariablesCompletion={false} // Disable duration variables completion. eg. $__interval, $__range, $__rate_interval
+      interpolateString={(query) => {
+        // Interpolate variables in the query string
+        return query.replace(/\$__interval/g, '10s');
+      }}
+      onShiftEnter={(value) => {
+        console.log('Shift+Enter pressed, current value:', value);
+      }}
+      onBlur={(value) => {
+        console.log('Editor lost focus, current value:', value);
+      }}
+      onChange={(value) => {
+        console.log('Value changed:', value);
+      }}
+    />
   );
 };
 

package/dist/monaco-editor.cjs.development.js

@@ -862,7 +862,7 @@ function makeSelector(metricName, labels, labelName) {
   var allLabelTexts = allLabels.map(function (label) {
     return "" + label.name + label.op + "\"" + escapeLabelValueInExactSelector(label.value) + "\"";
   });
-  return "{" + allLabelTexts.join(',') + "}";
+  return metricName + "{" + allLabelTexts.join(',') + "}";
 }
 
 var DEFAULT_SERIES_LIMIT = '40000';
@@ -872,7 +872,8 @@ var serviceUnavailable = 503;
 var CODE_MODE_SUGGESTIONS_INCOMPLETE_EVENT = 'codeModeSuggestionsIncomplete';
 var DataProvider = /*#__PURE__*/function () {
   function DataProvider(params) {
-    var _this = this;
+    var _this = this,
+      _params$durationVaria;
     this.lookbackInterval = 60 * 60 * 1000 * 12; // 12 hours
     this.variablesNames = [];
     this.httpMethod = 'GET';
@@ -1018,6 +1019,7 @@ var DataProvider = /*#__PURE__*/function () {
     if (params.variablesNames) {
       this.variablesNames = [].concat(params.variablesNames);
     }
+    this.durationVariablesCompletion = (_params$durationVaria = params.durationVariablesCompletion) != null ? _params$durationVaria : true;
     if (params.request) {
       this.customRequest = params.request;
     }
@@ -1542,7 +1544,14 @@ function _getAllFunctionsAndMetricNamesCompletions() {
   }));
   return _getAllFunctionsAndMetricNamesCompletions.apply(this, arguments);
 }
-var DURATION_COMPLETIONS = /*#__PURE__*/['$__interval', '$__range', '$__rate_interval', '1m', '5m', '10m', '30m', '1h', '1d'].map(function (text) {
+var DURATION_COMPLETIONS = /*#__PURE__*/['1m', '5m', '10m', '30m', '1h', '1d'].map(function (text) {
+  return {
+    type: 'DURATION',
+    label: text,
+    insertText: text
+  };
+});
+var DURATION_VARIABLES_COMPLETIONS = /*#__PURE__*/['$__interval', '$__range', '$__rate_interval'].map(function (text) {
   return {
     type: 'DURATION',
     label: text,
@@ -1770,6 +1779,9 @@ function _getLabelValuesForMetricCompletions() {
 function getCompletions(situation, dataProvider) {
   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);
@@ -1989,6 +2001,8 @@ function PromQLEditor(props) {
     value = props.value,
     placeholder = props.placeholder,
     interpolateString = props.interpolateString,
+    _props$enableAutocomp = props.enableAutocomplete,
+    enableAutocomplete = _props$enableAutocomp === void 0 ? true : _props$enableAutocomp,
     onChange = props.onChange,
     onShiftEnter = props.onShiftEnter,
     onBlur = props.onBlur;
@@ -2025,32 +2039,35 @@ function PromQLEditor(props) {
     editor.onDidFocusEditorText(function () {
       isEditorFocused.set(true);
     });
-    var 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();
-    var completionProvider = getCompletionProvider(monaco, dataProvider);
-    var filteringCompletionProvider = _extends({}, completionProvider, {
-      provideCompletionItems: function provideCompletionItems(model, position, context, token) {
-        var _editor$getModel;
-        if (((_editor$getModel = editor.getModel()) == null ? void 0 : _editor$getModel.id) !== model.id) {
-          return {
-            suggestions: []
-          };
+    if (enableAutocomplete) {
+      var 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();
+      var completionProvider = getCompletionProvider(monaco, dataProvider);
+      var filteringCompletionProvider = _extends({}, completionProvider, {
+        provideCompletionItems: function provideCompletionItems(model, position, context, token) {
+          var _editor$getModel;
+          if (((_editor$getModel = editor.getModel()) == null ? void 0 : _editor$getModel.id) !== model.id) {
+            return {
+              suggestions: []
+            };
+          }
+          return completionProvider.provideCompletionItems(model, position, context, token);
         }
-        return completionProvider.provideCompletionItems(model, position, context, token);
-      }
-    });
-    var _monaco$languages$reg = monaco.languages.registerCompletionItemProvider(PROMQL_LANG_ID, filteringCompletionProvider),
-      dispose = _monaco$languages$reg.dispose;
-    autocompleteDisposeFun.current = dispose;
+      });
+      var _monaco$languages$reg = monaco.languages.registerCompletionItemProvider(PROMQL_LANG_ID, filteringCompletionProvider),
+        dispose = _monaco$languages$reg.dispose;
+      autocompleteDisposeFun.current = dispose;
+    }
     var updateElementHeight = function updateElementHeight() {
       var containerDiv = containerRef.current;
       if (containerDiv !== null) {
@@ -2073,7 +2090,6 @@ function PromQLEditor(props) {
     });
     // handle: shift + enter
     editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, function () {
-      console.log(22222);
       onShiftEnter == null || onShiftEnter(editor.getValue());
     }, 'isEditorFocused' + id);
     if (placeholder) {