Upgrade to Grafana 8.3.0 (#93)

* Upgrade to Grafana 8.3.0

* Fix tests

* Fix LGTM

Author: mikhail-vl

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v2.1.2
         with:
-          node-version: "14.x"
+          node-version: "16.x"
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/docker.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v2.1.2
         with:
-          node-version: "14.x"
+          node-version: "16.x"
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v2.1.2
         with:
-          node-version: "14.x"
+          node-version: "16.x"
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

CHANGELOG.md

@@ -5,7 +5,9 @@
 ### Features / Enhancements
 
 - Upgrade to Grafana 8.2.5 (#88)
-- Add CLUSTER Slots commands introduces in Redis 7
+- Add CLUSTER Slots commands introduces in Redis 7 (#89)
+- Fix Docker plugins provisioning (#90)
+- Upgrade to Grafana 8.3.0
 
 ## 2.1.0 (2021-11-10)
 

package.json

@@ -2,10 +2,10 @@
   "author": "RedisGrafana",
   "description": "Redis Application for Grafana",
   "devDependencies": {
-    "@grafana/data": "8.2.5",
-    "@grafana/runtime": "8.2.5",
-    "@grafana/toolkit": "8.2.5",
-    "@grafana/ui": "8.2.5",
+    "@grafana/data": "8.3.0",
+    "@grafana/runtime": "8.3.0",
+    "@grafana/toolkit": "8.3.0",
+    "@grafana/ui": "8.3.0",
     "@monaco-editor/react": "^4.3.1",
     "@types/enzyme": "^3.10.10",
     "@types/enzyme-adapter-react-16": "^1.0.6",
@@ -15,7 +15,7 @@
     "tslib": "^2.3.1"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=14"
   },
   "license": "Apache-2.0",
   "name": "redis-app",

src/components/root-page/root-page.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Observable } from 'rxjs';
 import { AppPluginMeta, PluginType } from '@grafana/data';
 import { Alert } from '@grafana/ui';
-import { ApplicationName, DataSourceType, RedisCommand } from '../../constants';
+import { ApplicationName, ApplicationSubTitle, DataSourceType, RedisCommand } from '../../constants';
 import { DataSourceList } from '../data-source-list';
 import { RootPage } from './root-page';
 
@@ -163,7 +163,7 @@ describe('RootPage', () => {
       const node = {
         text: ApplicationName,
         img: meta.info.logos.large,
-        subTitle: 'Redis Data Source',
+        subTitle: ApplicationSubTitle,
         url: path,
         children: [
           {

src/components/root-page/root-page.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Observable } from 'rxjs';
+import { lastValueFrom, Observable } from 'rxjs';
 import {
   AppRootProps,
   DataQueryRequest,
@@ -10,7 +10,7 @@ import {
 } from '@grafana/data';
 import { config, getBackendSrv, getDataSourceSrv } from '@grafana/runtime';
 import { Alert } from '@grafana/ui';
-import { ApplicationName, DataSourceType, RedisCommand } from '../../constants';
+import { ApplicationName, ApplicationSubTitle, DataSourceType, RedisCommand } from '../../constants';
 import { RedisQuery } from '../../redis-cli-panel/types';
 import { GlobalSettings, RedisDataSourceInstanceSettings } from '../../types';
 import { DataSourceList } from '../data-source-list';
@@ -107,16 +107,15 @@ export class RootPage extends PureComponent<Props, State> {
           targets: [{ refId: 'A', query: RedisCommand.COMMAND }],
         } as DataQueryRequest<RedisQuery>) as unknown;
 
-        const query = dsQuery as Observable<DataQueryResponse>;
-        if (!query.toPromise) {
+        const query = lastValueFrom(dsQuery as Observable<DataQueryResponse>);
+        if (!query) {
           return;
         }
 
         /**
          * Get available commands
          */
         await query
-          .toPromise()
           .then((response: DataQueryResponse) => response.data)
           .then((data: DataQueryResponseData[]) =>
             data.forEach((item: DataQueryResponseData) => {
@@ -167,7 +166,7 @@ export class RootPage extends PureComponent<Props, State> {
     const node = {
       text: ApplicationName,
       img: meta.info.logos.large,
-      subTitle: 'Redis Data Source',
+      subTitle: ApplicationSubTitle,
       url: path,
       children: tabs,
     };

src/constants.ts

@@ -42,6 +42,7 @@ export enum ClientTypeValue {
 export const ApplicationRoot = '/a/redis-app';
 
 /**
- * Application's name
+ * Application
  */
 export const ApplicationName = 'Redis Application';
+export const ApplicationSubTitle = 'Redis Data Source Manager';

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

@@ -493,6 +493,51 @@ describe('RedisCLIPanel', () => {
         done();
       });
     });
+
+    it('Run query with error received', (done) => {
+      const getDataSourceQueryError = () => ({
+        error: {
+          message: 'Error',
+        },
+        data: [],
+      });
+
+      dataSourceMock.query.mockImplementationOnce(
+        () =>
+          new Observable((subscriber) => {
+            subscriber.next(getDataSourceQueryError());
+            subscriber.complete();
+          })
+      );
+
+      const options = getOptions({
+        query: 'WRONG COMMAND',
+        output: '',
+      });
+      const overrideData = {
+        ...data,
+        request: { targets: [{ datasource: 'datasource/id' }] },
+      };
+
+      const wrapper = shallow(
+        <RedisCLIPanel
+          {...additionalProps}
+          width={width}
+          height={height}
+          data={overrideData}
+          onOptionsChange={onOptionsChangeMock}
+          replaceVariables={replaceVariablesMock}
+          options={options}
+        />
+      );
+
+      const testedComponent = getTestedComponent(wrapper);
+      testedComponent.simulate('keypress', { key: 'Enter' });
+      setImmediate(() => {
+        expect(onOptionsChangeMock).toHaveBeenCalled();
+        done();
+      });
+    });
   });
 
   it('Clear button should clean output', () => {

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

@@ -1,9 +1,15 @@
 import React, { ChangeEvent } from 'react';
-import { Observable } from 'rxjs';
-import { map as map$, switchMap as switchMap$ } from 'rxjs/operators';
+import { lastValueFrom, Observable } from 'rxjs';
 import { RedisDataSourceOptions } from 'types';
 import { css, cx } from '@emotion/css';
-import { DataFrame, DataQueryRequest, DataQueryResponse, PanelProps } from '@grafana/data';
+import {
+  DataQueryRequest,
+  DataQueryResponse,
+  DataQueryResponseData,
+  DataSourceRef,
+  Field,
+  PanelProps,
+} from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { Button, RadioButtonGroup, useTheme2 } from '@grafana/ui';
 import { Help, ResponseMode, ResponseModeOptions } from '../../constants';
@@ -29,7 +35,7 @@ export const RedisCLIPanel: React.FC<PanelProps<PanelOptions>> = ({
    * Get configured Data Source Id
    */
   const targets = data.request?.targets;
-  let datasource = '';
+  let datasource: string | DataSourceRef = '';
   if (targets && targets.length && targets[0].datasource) {
     datasource = targets[0].datasource;
   }
@@ -64,33 +70,39 @@ export const RedisCLIPanel: React.FC<PanelProps<PanelOptions>> = ({
     const dsQuery = ds.query({
       targets: [{ refId: 'A', query: replaceVariables(query), cli: !options.raw }],
     } as DataQueryRequest<RedisQuery>) as unknown;
-    const res = await (dsQuery as Observable<DataQueryResponse>)
-      .pipe(
-        switchMap$((response) => {
-          /**
-           * Check for error in response
-           */
-          if (response.error && response.error.message) {
-            error = response.error.message;
-          }
-
-          return response.data;
-        }),
-        switchMap$((data: DataFrame) => data.fields),
-        map$((field) =>
-          field.values.toArray().map((value) => {
-            return value;
-          })
-        )
-      )
-      .toPromise();
+    const q = lastValueFrom(dsQuery as Observable<DataQueryResponse>);
 
     /**
-     * Result
+     * Get Results
+     */
+    const results: string[] = [];
+    await q
+      .then((response: DataQueryResponse) => {
+        /**
+         * Check for error in response
+         */
+        if (response.error && response.error.message) {
+          error = response.error.message;
+        }
+
+        return response.data;
+      })
+      .then((data: DataQueryResponseData[]) =>
+        data.forEach((item: DataQueryResponseData) => {
+          item.fields.forEach((field: Field) => {
+            field.values.toArray().map((value) => {
+              results.push(value);
+            });
+          });
+        })
+      );
+
+    /**
+     * Show Output
      */
     let result = `${ds.name}> ${query}\n`;
-    if (res && res.length) {
-      result += res.join('\n');
+    if (results.length) {
+      result += results.join('\n');
     } else if (error) {
       result += `(error) ${error}\n`;
     } else {