Add theme to getDisplayProcessor (#66)

* Add theme to getDisplayProcessor

* Fix tests

Author: mikhail-vl

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Bug fixes
 
 - "Available Requirements" panel should be set to $redis datasource #63
+- Cannot read property 'v1' of undefined (theme.v1) in the Grafana8 #65
 
 ## 1.2.0 (2021-05-11)
 

src/redis-gears-panel/components/redis-gears-panel/redis-gears-panel.test.tsx

@@ -33,13 +33,14 @@ const dataSourceMock = {
 const dataSourceSrvGetMock = jest.fn().mockImplementation(() => Promise.resolve(dataSourceMock));
 
 /**
- * Mock getDataSourceSrv function
+ * Mock @grafana/runtime
  */
 jest.mock('@grafana/runtime', () => ({
   getDataSourceSrv: () => ({
     get: dataSourceSrvGetMock,
   }),
   toDataQueryError: jest.fn().mockImplementation(({ message }: any) => ({ message })),
+  config: { theme: {} },
 }));
 
 /**

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

@@ -13,7 +13,7 @@ import {
   PanelProps,
   toDataFrame,
 } from '@grafana/data';
-import { getDataSourceSrv, toDataQueryError } from '@grafana/runtime';
+import { config, getDataSourceSrv, toDataQueryError } from '@grafana/runtime';
 import { Alert, Button, InlineField, InlineFormLabel, Input, RadioButtonGroup, Table } from '@grafana/ui';
 import { DefaultScript, ExecutionMode, ExecutionOptions } from '../../constants';
 import { PanelOptions } from '../../types';
@@ -182,7 +182,7 @@ export class RedisGearsPanel extends PureComponent<Props, State> {
      * Fields
      */
     resultDataFrame.fields.forEach((field: Field) => {
-      field.display = getDisplayProcessor({ field });
+      field.display = getDisplayProcessor({ field, theme: config.theme });
     });
 
     this.setState({

src/redis-keys-panel/components/redis-keys-panel/redis-keys-panel.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { shallow } from 'enzyme';
+import React from 'react';
 import { Observable } from 'rxjs';
 import { FieldType, toDataFrame } from '@grafana/data';
 import { Button, Table } from '@grafana/ui';
@@ -65,12 +65,13 @@ const dataSourceMock = {
 const dataSourceSrvGetMock = jest.fn().mockImplementation(() => Promise.resolve(dataSourceMock));
 
 /**
- * Mock getDataSourceSrv function
+ * Mock @grafana/runtime
  */
 jest.mock('@grafana/runtime', () => ({
   getDataSourceSrv: () => ({
     get: dataSourceSrvGetMock,
   }),
+  config: { theme: {} },
 }));
 
 /**

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

@@ -9,7 +9,7 @@ import {
   PanelProps,
   toDataFrame,
 } from '@grafana/data';
-import { getDataSourceSrv } from '@grafana/runtime';
+import { config, getDataSourceSrv } from '@grafana/runtime';
 import { Button, InlineFormLabel, Input, Table, TableSortByFieldState } from '@grafana/ui';
 import {
   DefaultCount,
@@ -213,7 +213,7 @@ export class RedisKeysPanel extends PureComponent<Props, State> {
      */
     tableDataFrame.fields = tableDataFrame.fields.map((field) => ({
       ...field,
-      display: getDisplayProcessor({ field }),
+      display: getDisplayProcessor({ field, theme: config.theme }),
     }));
 
     return tableDataFrame;

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

@@ -4,6 +4,13 @@ import { dateTime, dateTimeParse, GraphSeriesXY } from '@grafana/data';
 import { DefaultColorModeId } from '../../constants';
 import { RedisLatencyPanelGraph } from './redis-latency-panel-graph';
 
+/**
+ * Mock @grafana/runtime
+ */
+jest.mock('@grafana/runtime', () => ({
+  config: { theme: {} },
+}));
+
 /**
  * Latency Panel Table
  */

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

@@ -13,6 +13,7 @@ import {
   TimeZone,
   toDataFrame,
 } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { Chart, colors, GraphWithLegend, LegendDisplayMode } from '@grafana/ui';
 import { DefaultColorModeId } from '../../constants';
 import { PanelOptions, SeriesMap, SeriesValue } from '../../types';
@@ -116,7 +117,7 @@ export class RedisLatencyPanelGraph extends PureComponent<Props, State> {
          */
         seriesDataFrame.fields = seriesDataFrame.fields.map((field) => ({
           ...field,
-          display: getDisplayProcessor({ field }),
+          display: getDisplayProcessor({ field, theme: config.theme }),
         }));
 
         /**

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

@@ -5,6 +5,13 @@ import { Table } from '@grafana/ui';
 import { DisplayNameByFieldName, FieldName } from '../../constants';
 import { RedisLatencyPanelTable } from './redis-latency-panel-table';
 
+/**
+ * Mock @grafana/runtime
+ */
+jest.mock('@grafana/runtime', () => ({
+  config: { theme: {} },
+}));
+
 /**
  * Latency Panel Table
  */

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

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { DataFrame, FieldType, getDisplayProcessor, PanelProps, toDataFrame } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { Table, TableSortByFieldState } from '@grafana/ui';
 import { DisplayNameByFieldName, FieldName } from '../../constants';
 import { PanelOptions, SeriesMap } from '../../types';
@@ -89,7 +90,7 @@ export class RedisLatencyPanelTable extends PureComponent<Props, State> {
      */
     tableDataFrame.fields = tableDataFrame.fields.map((field) => ({
       ...field,
-      display: getDisplayProcessor({ field }),
+      display: getDisplayProcessor({ field, theme: config.theme }),
     }));
 
     /**