Merge pull request #26 from factrylabs/bug/grafana-8

Fix Untimely for Grafana 8.3.3
factrylabs · Dec 22, 2021 · ac99e1d · ac99e1d
2 parents d8c6926 + 4133891
commit ac99e1d
Show file tree

Hide file tree

Showing 8 changed files with 5,780 additions and 7,057 deletions.
diff --git a/package.json b/package.json
@@ -1,34 +1,40 @@
 {
   "name": "@factry/untimely-panel",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Untimely Grafana panel",
   "scripts": {
-    "build": "grafana-toolkit plugin:build && grafana-toolkit plugin:sign",
-    "test": "grafana-toolkit plugin:test --coverage",
+    "build": "grafana-toolkit plugin:build",
+    "test": "grafana-toolkit plugin:test",
     "dev": "grafana-toolkit plugin:dev",
-    "watch": "grafana-toolkit plugin:dev --watch"
+    "watch": "grafana-toolkit plugin:dev --watch",
+    "sign": "grafana-toolkit plugin:sign",
+    "start": "yarn watch"
   },
   "author": "Factry BV",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@grafana/data": "^7.3.6",
-    "@grafana/toolkit": "^7.3.6",
-    "@grafana/ui": "^7.3.6",
-    "@popperjs/core": "^2.6.0",
-    "@types/flot": "^0.0.31",
-    "@types/jquery": "^3.3.32",
-    "@types/react": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
-    "eslint": "^7.17.0",
+    "@grafana/data": "^8.3.2",
+    "@grafana/toolkit": "^8.3.2",
+    "@grafana/ui": "^8.3.2",
+    "@popperjs/core": "^2.11.0",
+    "@types/flot": "^0.0.32",
+    "@types/jquery": "^3.5.10",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.11",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "jquery": "^3.4.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-popper": "^2.2.4"
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "jquery": "^3.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-popper": "^2.2.5"
+  },
+  "engines": {
+    "node": ">=14"
   }
 }
diff --git a/src/OffsetsEditor.tsx b/src/OffsetsEditor.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Field, Input, InfoBox } from '@grafana/ui';
+import { Alert, Field, Input } from '@grafana/ui';
 import { StandardEditorProps } from '@grafana/data';
 
 export class OffsetsEditor extends PureComponent<StandardEditorProps> {
@@ -19,18 +19,17 @@ export class OffsetsEditor extends PureComponent<StandardEditorProps> {
     return (
       <>
         {!ySeries.length && (
-          <InfoBox>
+          <Alert title="Add more than one series" severity="warning">
             Please add more than one series to get started.
             <br />
             All series that are not the reference series will be used as Y-series.
-          </InfoBox>
+          </Alert>
         )}
         {ySeries.map((serie) => (
           <Field
-            label={`Offset for ${serie.refId} - ${serie.name || '-'}`}
+            label={`Offset for ${serie.name || serie.refId || '-'}`}
           >
             <Input
-              css=""
               type="number"
               onChange={({ currentTarget: { value } }) => (
                 this.onChangeOffset(serie.refId as string, value)

diff --git a/src/Panel.tsx b/src/Panel.tsx
@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 import { PanelProps } from '@grafana/data';
 import { FlotPosition } from '@grafana/ui/components/Graph/types.d';
 import {
-  CustomScrollbar, GraphLegend, LegendDisplayMode, LegendItem,
+  CustomScrollbar, VizLegend, LegendDisplayMode, VizLegendItem,
 } from '@grafana/ui';
 import { Tooltip } from './Tooltip';
 import { Serie, Options, XValue } from './types';
@@ -117,7 +117,7 @@ export class Panel extends PureComponent<Props, State> {
     }
   }
 
-  getLegendItems(): LegendItem[] {
+  getLegendItems(): VizLegendItem[] {
     const { plot } = this.state;
     const { data: { series }, options } = this.props;
 
@@ -129,10 +129,14 @@ export class Panel extends PureComponent<Props, State> {
       return [];
     }
 
+    if (!series.some((serie) => serie.refId === options.xseries)) {
+      return [];
+    }
+
     return series.filter((serie) => (
       serie.refId !== options.xseries
     )).map((serie, idx) => ({
-      label: serie.name || '',
+      label: serie.name || serie.refId || '',
       isVisible: true,
       color: plotData[idx].color,
       yAxis: 1,
@@ -152,11 +156,12 @@ export class Panel extends PureComponent<Props, State> {
   }
 
   drawGraph() {
+    const { series, xSerie } = this.getSeries();
+    const { width, options: { accuracy } } = this.props;
+
     if (this.$element === null) {
       return;
     }
-    const { series, xSerie } = this.getSeries();
-    const { width, options: { accuracy } } = this.props;
 
     this.setState({ noData: series.length < 1 });
 
@@ -224,7 +229,6 @@ export class Panel extends PureComponent<Props, State> {
             this.setState({ hoverItem: undefined });
           }}
         />
-        {noData && <div className="datapoints-warning">No data</div>}
         <Tooltip
           accuracy={accuracy}
           items={this.getLegendItems()}
@@ -234,9 +238,16 @@ export class Panel extends PureComponent<Props, State> {
         />
         <div style={{ maxHeight: '35%', padding: '10px 0' }}>
           <CustomScrollbar hideHorizontalTrack>
-            <GraphLegend items={this.getLegendItems()} placement="under" displayMode={LegendDisplayMode.List} />
+            <VizLegend
+              items={this.getLegendItems()}
+              displayMode={LegendDisplayMode.List}
+              placement="bottom"
+            />
           </CustomScrollbar>
         </div>
+        {noData && (
+          <div className="datapoints-warning">No data</div>
+        )}
       </div>
     );
   }

diff --git a/src/SeriesEditor.tsx b/src/SeriesEditor.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { InfoBox, Select } from '@grafana/ui';
+import { Alert, Select } from '@grafana/ui';
 import { StandardEditorProps } from '@grafana/data';
 
 export class SeriesEditor extends PureComponent<StandardEditorProps> {
@@ -9,17 +9,17 @@ export class SeriesEditor extends PureComponent<StandardEditorProps> {
     const series = data || [];
 
     const selectSeriesOptions = series.map((serie) => (
-      { label: `${serie.refId} - ${serie.name}`, value: serie.refId }
+      { label: `${serie.name || serie.refId}`, value: serie.refId }
     ));
 
     const selectedXSeries = selectSeriesOptions.find((serie) => serie.value === xseries);
 
     return (
       <>
         {!series.length && (
-          <InfoBox>
-            Make sure that all queries have data
-          </InfoBox>
+          <Alert title="Queries should have data" severity="info">
+            Make sure that all queries return data, otherwise an error might occur
+          </Alert>
         )}
         <Select
           options={selectSeriesOptions}

diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
@@ -1,12 +1,12 @@
 import ReactDOM from 'react-dom';
 import React, { PureComponent } from 'react';
 import { Popper } from 'react-popper';
-import { LegendItem, SeriesIcon } from '@grafana/ui';
+import { VizLegendItem, SeriesIcon } from '@grafana/ui';
 
 interface Props {
   accuracy: number;
   series?: any[];
-  items?: LegendItem[];
+  items?: VizLegendItem[];
   hoveredValue?: any;
   xSerie?: any[];
 }
@@ -86,7 +86,7 @@ export class Tooltip extends PureComponent<Props, State> {
     const { x, y } = this.state;
     const xValue = this.getXValue();
     const values = this.getTooltipValues();
-    const virtualElement = Tooltip.virtualElement(x, y);
+    const virtualElement = Tooltip.virtualElement(x, y) as HTMLElement;
     if (!xValue) {
       return null;
     }

diff --git a/src/convertToPoints.ts b/src/convertToPoints.ts
@@ -2,11 +2,11 @@ import { DataFrame } from '@grafana/data';
 import { Point, Serie, XValue } from './types';
 
 const getTime = (data: DataFrame, index: number): number => (
-  data.fields[1].values.get(index)
+  data.fields[0].values.get(index)
 );
 
 const getValue = (data: DataFrame, index: number): number => (
-  data.fields[0].values.get(index)
+  data.fields[1].values.get(index)
 );
 
 export default (

diff --git a/src/plugin.json b/src/plugin.json
@@ -24,7 +24,7 @@
   },
 
   "dependencies": {
-    "grafanaDependency": ">=7.1.0",
+    "grafanaDependency": ">=8.3.2",
     "plugins": []
   }
 }