Replace old Latency Graph with TimeSeries component (#70)

Author: mikhail-vl

src/redis-cli-panel/components/redis-cli-panel/redis-cli-panel.tsx

@@ -4,7 +4,7 @@ import { map as map$, switchMap as switchMap$ } from 'rxjs/operators';
 import { css, cx } from '@emotion/css';
 import { DataFrame, DataQueryRequest, DataQueryResponse, PanelProps } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
-import { Button, LegacyForms } from '@grafana/ui';
+import { Button, LegacyForms, useTheme2 } from '@grafana/ui';
 import { Help } from '../../constants';
 import { Styles } from '../../styles';
 import { HelpCommand, PanelOptions, RedisQuery } from '../../types';
@@ -27,7 +27,7 @@ export const RedisCLIPanel: React.FC<PanelProps<PanelOptions>> = ({
   replaceVariables,
 }) => {
   const { query, raw, output, help } = options;
-  const styles = Styles();
+  const styles = Styles(useTheme2());
 
   /**
    * Run Query

src/redis-cli-panel/styles.ts

@@ -1,15 +1,10 @@
 import { css } from '@emotion/css';
-import { stylesFactory, useTheme2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
 
 /**
  * Styles
  */
-export const Styles = stylesFactory(() => {
-  const theme = useTheme2();
-
-  /**
-   * Return
-   */
+export const Styles = (theme: GrafanaTheme2) => {
   return {
     wrapper: css`
       position: relative;
@@ -51,4 +46,4 @@ export const Styles = stylesFactory(() => {
       margin-right: 12px;
     `,
   };
-});
+};

src/redis-latency-panel/components/redis-latency-panel-graph/redis-latency-panel-graph.test.tsx

@@ -1,16 +1,8 @@
 import { shallow } from 'enzyme';
 import React from 'react';
-import { dateTime, dateTimeParse, GraphSeriesXY } from '@grafana/data';
-import { DefaultColorModeId } from '../../constants';
+import { DataFrame, dateTime, dateTimeParse } from '@grafana/data';
 import { RedisLatencyPanelGraph } from './redis-latency-panel-graph';
 
-/**
- * Mock @grafana/runtime
- */
-jest.mock('@grafana/runtime', () => ({
-  config: { theme2: {} },
-}));
-
 /**
  * Latency Panel Table
  */
@@ -42,9 +34,10 @@ describe('RedisLatencyPanelGraph', () => {
           },
         ],
       };
-      const result: GraphSeriesXY[] = RedisLatencyPanelGraph.getGraphSeries(seriesMap, false);
-      expect(result[0].seriesIndex).toEqual(0);
-      expect(result[1].seriesIndex).toEqual(1);
+      const result: DataFrame[] = RedisLatencyPanelGraph.getGraphDataFrame(seriesMap, false);
+      expect(result[0].length).toEqual(2);
+      expect(result[0].fields[0].values.length).toEqual(2);
+      expect(result[1].length).toEqual(2);
     });
 
     it('Should remove zero series if hideZero=true', () => {
@@ -70,40 +63,14 @@ describe('RedisLatencyPanelGraph', () => {
           },
         ],
       };
-      const result: GraphSeriesXY[] = RedisLatencyPanelGraph.getGraphSeries(seriesMap, true);
+      const result: DataFrame[] = RedisLatencyPanelGraph.getGraphDataFrame(seriesMap, true);
       expect(result.length).toEqual(1);
 
       /**
        * SeriesIndex should be numerated by visible items not by all items
        */
-      expect(result[0].seriesIndex).toEqual(0);
-    });
-
-    it('Should define color mode Id', () => {
-      const seriesMap = {
-        get: [
-          {
-            time: dateTime(),
-            value: 0,
-          },
-          {
-            time: dateTime(),
-            value: 0,
-          },
-        ],
-        info: [
-          {
-            time: dateTime(),
-            value: 10,
-          },
-          {
-            time: dateTime().add(10, 'seconds'),
-            value: 20,
-          },
-        ],
-      };
-      const result: GraphSeriesXY[] = RedisLatencyPanelGraph.getGraphSeries(seriesMap, true);
-      expect(result[0].valueField.config.color?.mode).toEqual(DefaultColorModeId);
+      expect(result[0].length).toEqual(2);
+      expect(result[0].fields[0].values.length).toEqual(2);
     });
   });
 
@@ -134,13 +101,43 @@ describe('RedisLatencyPanelGraph', () => {
 
     it('Should update timeRange when gets a new seriesMap or timeRange', () => {
       const wrapper = shallow<RedisLatencyPanelGraph>(
-        getComponent({ seriesMap: { get: [{ time: dateTime(), value: 1 }] }, timeRange: { raw: { from: dateTime() } } })
+        getComponent({
+          seriesMap: { get: [{ time: dateTime(), value: 1 }] },
+          timeRange: { raw: { from: dateTime() } },
+          options: { hideZero: true },
+        })
       );
       const currentTimeRange = wrapper.state().timeRange;
       wrapper.setProps({
         seriesMap: { get: [{ time: dateTime(), value: 2 }] },
       });
       expect(currentTimeRange !== wrapper.state().timeRange).toBeTruthy();
     });
+
+    it('Should return gathering results div if data frame is empty', () => {
+      const wrapper = shallow<RedisLatencyPanelGraph>(
+        getComponent({
+          seriesMap: {},
+          timeRange: { raw: { from: dateTime() } },
+          options: { hideZero: true },
+        })
+      );
+
+      const div = wrapper.findWhere((node) => node.name() === 'div');
+      expect(div.exists()).toBeTruthy();
+    });
+
+    it('Should return Time Series if data frame has data', () => {
+      const wrapper = shallow<RedisLatencyPanelGraph>(
+        getComponent({
+          seriesMap: { get: [{ time: dateTime(), value: 1 }] },
+          timeRange: { raw: { from: dateTime() } },
+          options: { hideZero: true },
+        })
+      );
+
+      const timeSeries = wrapper.findWhere((node) => node.name() === 'TimeSeries');
+      expect(timeSeries.exists()).toBeTruthy();
+    });
   });
 });

src/redis-latency-panel/components/redis-latency-panel-graph/redis-latency-panel-graph.tsx

@@ -1,21 +1,19 @@
 import React, { PureComponent } from 'react';
 import {
+  DataFrame,
   DateTime,
   dateTimeParse,
   FieldColorModeId,
   FieldType,
   getDisplayProcessor,
-  getSeriesTimeStep,
   GraphSeriesValue,
-  GraphSeriesXY,
   PanelProps,
   TimeRange,
   TimeZone,
   toDataFrame,
 } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { colors, GraphWithLegend, LegendDisplayMode } from '@grafana/ui';
-import { DefaultColorModeId } from '../../constants';
+import { LegendDisplayMode, TimeSeries, TooltipDisplayMode, TooltipPlugin } from '@grafana/ui';
 import { PanelOptions, SeriesMap, SeriesValue } from '../../types';
 
 /**
@@ -47,13 +45,13 @@ interface State {
  */
 export class RedisLatencyPanelGraph extends PureComponent<Props, State> {
   /**
-   * Convert seriesMap to GraphSeriesXY
+   * Convert seriesMap to Data Frames
    * @param seriesMap
    * @param hideZero
    */
-  static getGraphSeries(seriesMap: SeriesMap, hideZero: boolean): GraphSeriesXY[] {
+  static getGraphDataFrame(seriesMap: SeriesMap, hideZero: boolean): DataFrame[] {
     return Object.entries(seriesMap).reduce(
-      (acc: GraphSeriesXY[], [command, seriesValues]: [string, SeriesValue[]], index) => {
+      (acc: DataFrame[], [command, seriesValues]: [string, SeriesValue[]], index) => {
         const { times, values, shouldBeHidden } = seriesValues.reduce(
           (acc: { times: DateTime[]; values: number[]; shouldBeHidden: boolean }, { time, value }) => {
             let shouldBeHidden = acc.shouldBeHidden;
@@ -81,11 +79,6 @@ export class RedisLatencyPanelGraph extends PureComponent<Props, State> {
           return acc;
         }
 
-        /**
-         * Color
-         */
-        const color = colors[index % colors.length];
-
         /**
          * Data Frame
          */
@@ -99,13 +92,12 @@ export class RedisLatencyPanelGraph extends PureComponent<Props, State> {
             },
             {
               type: FieldType.number,
-              name: command,
+              name: ' ',
               values,
               config: {
                 unit: 'µs',
                 color: {
-                  fixedColor: color,
-                  mode: FieldColorModeId ? FieldColorModeId.Fixed : DefaultColorModeId,
+                  mode: FieldColorModeId.PaletteClassic,
                 },
               },
             },
@@ -128,19 +120,7 @@ export class RedisLatencyPanelGraph extends PureComponent<Props, State> {
           data.push([times[i].valueOf(), values[i]]);
         }
 
-        return acc.concat([
-          {
-            seriesIndex: acc.length,
-            yAxis: { index: 1 },
-            label: command,
-            isVisible: true,
-            data,
-            timeField: seriesDataFrame.fields[0],
-            valueField: seriesDataFrame.fields[1],
-            timeStep: getSeriesTimeStep(seriesDataFrame.fields[0]),
-            color,
-          },
-        ]);
+        return acc.concat(seriesDataFrame);
       },
       []
     );
@@ -183,11 +163,6 @@ export class RedisLatencyPanelGraph extends PureComponent<Props, State> {
     };
   }
 
-  /**
-   * onToggleSort
-   */
-  onToggleSort() {}
-
   /**
    * Render
    */
@@ -196,21 +171,36 @@ export class RedisLatencyPanelGraph extends PureComponent<Props, State> {
     const { timeRange } = this.state;
 
     /**
-     * Return GraphWithLegend
+     * Convert to Data Frames
+     */
+    const dataFrames = RedisLatencyPanelGraph.getGraphDataFrame(seriesMap, options.hideZero);
+    if (!dataFrames.length) {
+      return <div>Gathering latency data...</div>;
+    }
+
+    /**
+     * Return Time Series
      */
     return (
-      <GraphWithLegend
+      <TimeSeries
+        frames={dataFrames}
         width={width}
         height={height}
-        series={RedisLatencyPanelGraph.getGraphSeries(seriesMap, options?.hideZero)}
         timeRange={timeRange}
+        legend={{ displayMode: LegendDisplayMode.List, placement: 'bottom', calcs: [] }}
         timeZone={this.props.timeZone}
-        legendDisplayMode={LegendDisplayMode.List}
-        placement="bottom"
-        onToggleSort={this.onToggleSort}
-        hideZero={options?.hideZero}
-        showLines
-      ></GraphWithLegend>
+      >
+        {(config, alignedDataFrame) => {
+          return (
+            <TooltipPlugin
+              config={config}
+              data={alignedDataFrame}
+              mode={TooltipDisplayMode.Multi}
+              timeZone={this.props.timeZone}
+            />
+          );
+        }}
+      </TimeSeries>
     );
   }
 }

src/redis-latency-panel/constants.ts

@@ -8,11 +8,6 @@ export const DefaultInterval = 1000;
  */
 export const MaxItemsPerSeries = 300;
 
-/**
- * Default color Mode id for 7.2.X
- */
-export const DefaultColorModeId = 'fixed';
-
 /**
  * Fields
  */