Upgrade to Grafana 7.2

Author: ae3e

dist/module.js

@@ -52,3 +52,18 @@ object-assign
  * Copyright (c) 2014-2015, Jon Schlinkert.
  * Licensed under the MIT License.
  */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */

dist/module.js.LICENSE.txt

@@ -20,12 +20,13 @@
       {"name": "Editor", "path": "img/editor.png"},
       {"name": "Panel", "path": "img/panel.png"}
     ],
-    "version": "0.2.1",
-    "updated": "2020-09-01"
+    "version": "0.3.0",
+    "updated": "2020-10-09"
   },
 
   "dependencies": {
     "grafanaDependency": ">=7.1.1",
+    "grafanaVersion": "7.x",
     "plugins": []
   }
 }

dist/module.js.map

@@ -1,6 +1,6 @@
 {
   "name": "ae3e-plotly-panel",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Grafana Plotly Panel",
   "scripts": {
     "build": "grafana-toolkit plugin:build",
@@ -11,15 +11,15 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/preset-env": "7.5.5",
-    "@grafana/data": "7.1.1",
-    "@grafana/runtime": "7.1.1",
-    "@grafana/toolkit": "7.1.1",
-    "@grafana/ui": "7.1.1"
+    "@grafana/data": "7.2.0",
+    "@grafana/runtime": "7.2.0",
+    "@grafana/toolkit": "7.2.0",
+    "@grafana/ui": "7.2.0"
   },
   "dependencies": {
     "deepmerge": "^4.2.2",
     "plotly.js": "1.52.1",
-    "react-ace": "6.2.2",
+    "@monaco-editor/react": "^3.6.3",
     "react-chart-editor": "0.41.0",
     "react-plotly.js": "2.4.0"
   },

dist/plugin.json

@@ -0,0 +1,22 @@
+//Code from https://github.com/gapitio/gapit-htmlgraphics-panel
+import React from 'react';
+import { StandardEditorProps } from '@grafana/data';
+import { TextPanelEditor } from 'TextPanelEditor';
+import { EditorLanguageType, EditorCodeType } from 'types';
+
+interface Settings {
+  language: EditorLanguageType;
+}
+
+interface Props extends StandardEditorProps<EditorCodeType, Settings> {}
+
+export const PanelOptionCode: React.FC<Props> = ({ value, item, onChange }) => {
+    if(typeof value!=="string"){
+        value=JSON.stringify(value, null, 2)
+    }
+  return <TextPanelEditor language={item.settings?.language} value={value} onChange={code => {
+    if(item.settings?.language==='json' && code){
+        code=JSON.parse(code);
+    }  
+    onChange(code)}} />;
+};

package-lock.json

@@ -25,14 +25,13 @@ interface Props extends PanelProps<SimpleOptions> {}
 
 export class SimplePanel extends PureComponent<Props> {
   render() {
-    console.log(this);
-    console.log(this.props.replaceVariables('$distance'));
-    //console.log(this.props.replaceVariables('$__to'+' '+'$__from'));
-    
-    console.log(templateSrv.getVariables())
     //Get all variables
     const context = {
-      interval: templateSrv.getBuiltInIntervalValue(),//dataSource.templateSrv.builtIns.__interval.value,
+      //interval: templateSrv.getBuiltInIntervalValue(),//dataSource.templateSrv.builtIns.__interval.value,
+      __from:this.props.replaceVariables('$__from'),
+      __to:this.props.replaceVariables('$__to'),
+      __interval:this.props.replaceVariables('$__interval'),
+      __interval_ms:this.props.replaceVariables('$__interval_ms')
     } as any;
     templateSrv.getVariables().forEach((elt: any)=>{
       context[elt.name]=elt.current.text;
@@ -77,7 +76,7 @@ export class SimplePanel extends PureComponent<Props> {
       });
     }*/
 
-    console.log(merge(this.props.options.data,parameters.data,{ arrayMerge: combineMerge }));
+    //console.log(merge(this.props.options.data,parameters.data,{ arrayMerge: combineMerge }));
     //let layout = { ...this.props.options.layout, autosize: true, paper_bgcolor: 'rgba(0,0,0,0)', plot_bgcolor: 'transparent', height: this.props.height, title: this.props.options.title }
     let layout = { ...this.props.options.layout, autosize: true, height: this.props.height };
 

package.json

@@ -0,0 +1,71 @@
+//Code from https://github.com/gapitio/gapit-htmlgraphics-panel
+import React, { PureComponent } from 'react';
+import MonacoEditor, { monaco, EditorDidMount } from '@monaco-editor/react';
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+import { EditorLanguageType } from 'types';
+import { config } from '@grafana/runtime';
+//import textEditorDeclarations from './text-editor-declarations';
+
+interface MonacoEditorProps {
+  language: EditorLanguageType;
+  value: string | undefined;
+  onChange: (value?: string) => void;
+}
+
+let keyCtrlCmd = 2048;
+let keyS = 49;
+
+monaco.init().then(monaco => {
+  // Add autocompletion for panel definitions (htmlNode, codeData, data, options, and theme)
+  //monaco.languages.typescript.javascriptDefaults.addExtraLib(textEditorDeclarations);
+
+  // Override the key values (should be the same)
+  keyCtrlCmd = monaco.KeyMod.CtrlCmd;
+  keyS = monaco.KeyCode.KEY_S;
+});
+
+class TextPanelEditor extends PureComponent<MonacoEditorProps> {
+  getEditorValue: (() => string) | undefined;
+  editorInstance: editor.IStandaloneCodeEditor | undefined;
+
+  onSourceChange = () => {
+    if (this.getEditorValue) {
+      this.props.onChange(this.getEditorValue());
+    }
+  };
+
+  onEditorDidMount: EditorDidMount = (getEditorValue, editorInstance) => {
+    this.getEditorValue = getEditorValue;
+    this.editorInstance = editorInstance;
+    editorInstance.addCommand(keyCtrlCmd | keyS, () => {
+      this.onSourceChange();
+      this.render();
+    });
+  };
+
+  updateDimensions = () => {
+    this.editorInstance?.layout();
+  };
+
+  render = () => {
+    // Updates the layout (width) of the text editor
+    if (this.editorInstance) {
+      this.editorInstance.layout();
+    }
+
+    return (
+      <div onBlur={this.onSourceChange}>
+        <MonacoEditor
+          height={'33vh'}
+          language={this.props.language}
+          theme={config.theme.isDark ? 'vs-dark' : 'vs-light'}
+          value={this.props.value}
+          editorDidMount={this.onEditorDidMount}
+          options={{ fontSize: 12 }}
+        />
+      </div>
+    );
+  };
+}
+
+export { TextPanelEditor };