fix: new ReactMonacoEditor not support old grafana version.

Author: Mr-Xzz

dist/module.js

@@ -38,7 +38,7 @@
     ],
     "screenshots": [],
     "version": "2.29",
-    "updated": "2023-06-28"
+    "updated": "2023-06-29"
   },
   "dependencies": {
     "grafanaDependency": ">=7.0.0",

dist/module.js.map

@@ -7,14 +7,16 @@ import { QueryEditorProps } from '@grafana/data';
 
 import { SLSDataSource } from './datasource';
 import { defaultQuery, SLSDataSourceOptions, SLSQuery } from './types';
-import { xColInfoSeries, yColInfoSeries } from './const';
+import { version, xColInfoSeries, yColInfoSeries } from './const';
 import MonacoQueryField from './SLS-monaco-editor/MonacoQueryField';
+import MonacoQueryFieldOld from 'SLS-monaco-editor/MonacoQueryFieldOld';
 
 // const { FormField } = LegacyForms;
 
 type Props = QueryEditorProps<SLSDataSource, SLSQuery, SLSDataSourceOptions>;
 
 export class SLSQueryEditor extends PureComponent<Props> {
+
   onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { onChange, query } = this.props;
     onChange({ ...query, query: event.target.value });
@@ -56,22 +58,36 @@ export class SLSQueryEditor extends PureComponent<Props> {
           <InlineFormLabel width={6} className="query-keyword">
             Query
           </InlineFormLabel>
-          {/* <input
-            className="gf-form-input"
-            value={query}
-            onChange={this.onQueryTextChange}
-            onBlur={this.onQueryTextChange}
-            style={{ fontFamily: 'Menlo, monospace' }}
-          ></input> */}
-          <MonacoQueryField
-            onChange={this.onQueryTextChangeString}
-            onRunQuery={this.onQueryTextChangeWithRunQuery}
-            onBlur={this.onQueryTextChangeString}
-            initialValue={query ?? ''}
-            languageProvider={{} as any}
-            history={[]}
-            placeholder={''}
-          />
+          {version === '' || version.startsWith('8.0') || version.startsWith('8.1') || version.startsWith('8.2') || version.startsWith('7') ? (
+            // <input
+            //   className="gf-form-input"
+            //   value={query}
+            //   onChange={this.onQueryTextChange}
+            //   onBlur={this.onQueryTextChange}
+            //   style={{ fontFamily: 'Menlo, monospace' }}
+            // ></input>
+            <div style={{ width: '100%' }}>
+              <MonacoQueryFieldOld
+                onChange={this.onQueryTextChangeString}
+                onRunQuery={this.onQueryTextChangeWithRunQuery}
+                onBlur={this.onQueryTextChangeString}
+                initialValue={query ?? ''}
+                languageProvider={{} as any}
+                history={[]}
+                placeholder={''}
+              />
+            </div>
+          ) : (
+            <MonacoQueryField
+              onChange={this.onQueryTextChangeString}
+              onRunQuery={this.onQueryTextChangeWithRunQuery}
+              onBlur={this.onQueryTextChangeString}
+              initialValue={query ?? ''}
+              languageProvider={{} as any}
+              history={[]}
+              placeholder={''}
+            />
+          )}
         </div>
         <div className="gf-form-inline" style={{ lineHeight: '32px', verticalAlign: 'center' }}>
           <InlineField label={'ycol'} labelWidth={12}>
@@ -105,7 +121,7 @@ export class SLSQueryEditor extends PureComponent<Props> {
               prefix={<Icon name="x" />}
               value={xcol}
               onChange={this.onXChange}
-              label="xcol(time)"
+              label="xcol"
               suffix={
                 <Tooltip
                   content={

dist/plugin.json

@@ -0,0 +1,73 @@
+import { Button, CodeEditor, Monaco, MonacoEditor } from '@grafana/ui';
+import React, { useCallback, useRef, useState } from 'react';
+import { Props } from './MonacoQueryFieldProps';
+
+export class Deferred<T = any> {
+  resolve?: (reason?: T | PromiseLike<T>) => void;
+  reject?: (reason?: any) => void;
+  promise: Promise<T>;
+
+  constructor() {
+    this.resolve = undefined;
+    this.reject = undefined;
+
+    this.promise = new Promise((resolve, reject) => {
+      this.resolve = resolve as any;
+      this.reject = reject;
+    });
+    Object.freeze(this);
+  }
+}
+
+interface MonacoPromise {
+  editor: MonacoEditor;
+  monaco: Monaco;
+}
+
+const QueryField: React.FC<Props> = ({ initialValue: query, onChange }) => {
+  const monacoPromiseRef = useRef<Deferred<MonacoPromise>>();
+  const [queryHeight, setQueryHeight] = useState<number>(30);
+  const handleEditorMount = useCallback((editor: MonacoEditor, monaco: Monaco) => {
+    monacoPromiseRef.current?.resolve?.({ editor, monaco });
+  }, []);
+
+  return (
+    <div style={{ width: '100%' }}>
+      <div style={{ width: 'calc(100% - 65px)', display: 'inline-block', fontSize: '14px' }}>
+        <CodeEditor
+          value={query}
+          language="sql"
+          height={queryHeight}
+          width="100%"
+          showMiniMap={false}
+          onBlur={onChange}
+          onSave={onChange}
+          onEditorDidMount={handleEditorMount}
+          monacoOptions={{ contextmenu: true, codeLens: true, overviewRulerBorder: true }}
+        />
+      </div>
+      <div style={{ width: '60px', height: '100%', display: 'inline-block', float: 'right' }}>
+        <Button
+          icon="angle-up"
+          variant="secondary"
+          size="sm"
+          disabled={queryHeight === 30}
+          onClick={() => {
+            setQueryHeight(queryHeight - 30);
+          }}
+        />
+        <Button
+          icon="angle-down"
+          variant="secondary"
+          size="sm"
+          disabled={queryHeight === 120}
+          onClick={() => {
+            setQueryHeight(queryHeight + 30);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default QueryField;

src/QueryEditor.tsx

@@ -53,3 +53,5 @@ export const yColInfoSeries = [
     value: '[col1#:#col2] Applicable to bar and SLS metricStore, col1 is the aggregation column, col2 is other columns',
   },
 ];
+
+export const version = (window as any)?.grafanaBootData?.settings?.buildInfo?.version ?? '';

src/SLS-monaco-editor/MonacoQueryFieldOld.tsx

@@ -2,6 +2,7 @@
   "extends": "@grafana/toolkit/src/config/tsconfig.plugin.json",
   "include": ["src", "types"],
   "compilerOptions": {
+    "jsx": "react",
     "rootDir": "./src",
     "baseUrl": "./src",
     "typeRoots": ["./node_modules/@types"]