Update depreciated getBackendSrv().datasourceRequest to`getBackendS…

…rv().fetch()` (#41)

* Replace deprecated getBackendSrv().datasourceRequest to getBackendSrv().fetch()

* Add tests for the new code

* Remove console.log

* Update Docker configuration

* Format

Co-authored-by: Mikhail <[email protected]>

README.md

@@ -47,10 +47,10 @@ docker run -d -p 3000:3000 --name=explorer ghcr.io/redisgrafana/redis-explorer:l
 
 ### Run using `docker-compose` for development
 
-Explorer plug-in have to be built following [BUILD](https://github.com/RedisGrafana/grafana-redis-explorer/blob/master/BUILD.md) instructions before starting using `docker-compose-dev.yml` file.
+Explorer plug-in have to be built following [BUILD](https://github.com/RedisGrafana/grafana-redis-explorer/blob/master/BUILD.md) instructions before starting using `docker-compose/dev.yml` file.
 
 ```bash
-docker-compose -f docker-compose-dev.yml up
+docker-compose -f docker-compose/dev.yml up
 ```
 
 ### Open Grafana

docker-compose-dev.yml → docker-compose/dev.yml

@@ -1,16 +1,6 @@
 version: '3.4'
 
 services:
-  redis:
-    container_name: redis
-    image: redislabs/redis:latest
-    cap_add:
-      - SYS_RESOURCE
-    ports:
-      - 8443:8443/tcp
-      - 9443:9443/tcp
-      - 12000-12050:12000-12050/tcp
-
   grafana:
     container_name: grafana
     image: grafana/grafana:latest
@@ -26,9 +16,9 @@ services:
       # Uncomment to run in debug mode
       # - GF_LOG_LEVEL=debug
     volumes:
-      - ./dist:/var/lib/grafana/plugins/redis-explorer-app
-      - ../grafana-redis-app:/var/lib/grafana/plugins/redis-app
-      - ../grafana-redis-datasource:/var/lib/grafana/plugins/redis-datasource
-      - ./provisioning/plugins:/etc/grafana/provisioning/plugins
+      - ../dist:/var/lib/grafana/plugins/redis-explorer-app
+      - ../../grafana-redis-app:/var/lib/grafana/plugins/redis-app
+      - ../../grafana-redis-datasource:/var/lib/grafana/plugins/redis-datasource
+      - ../provisioning/plugins:/etc/grafana/provisioning/plugins
       # Uncomment to preserve Grafana configuration
       # - ./data:/var/lib/grafana

docker-compose/master.yml

@@ -0,0 +1,24 @@
+version: '3.4'
+
+services:
+  grafana:
+    container_name: grafana
+    image: grafana/grafana:master
+    ports:
+      - 3000:3000/tcp
+    environment:
+      - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin
+      - GF_AUTH_ANONYMOUS_ENABLED=true
+      - GF_AUTH_BASIC_ENABLED=false
+      - GF_ENABLE_GZIP=true
+      - GF_USERS_DEFAULT_THEME=light
+      - GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=redis-app,redis-datasource,redis-explorer-app
+      # Uncomment to run in debug mode
+      # - GF_LOG_LEVEL=debug
+    volumes:
+      - ../dist:/var/lib/grafana/plugins/redis-explorer-app
+      - ../../grafana-redis-app:/var/lib/grafana/plugins/redis-app
+      - ../../grafana-redis-datasource:/var/lib/grafana/plugins/redis-datasource
+      - ../provisioning/plugins:/etc/grafana/provisioning/plugins
+      # Uncomment to preserve Grafana configuration
+      # - ./data:/var/lib/grafana

package.json

@@ -24,7 +24,10 @@
     "dev": "grafana-toolkit plugin:dev",
     "format": "prettier --write \"**\"",
     "start": "docker-compose pull && docker-compose up",
-    "start:dev": "docker-compose -f docker-compose-dev.yml up",
+    "start:dev": "docker-compose -f docker-compose/dev.yml up",
+    "start:master": "docker-compose -f docker-compose/master.yml up",
+    "stop": "docker-compose down",
+    "stop:dev": "docker-compose -f docker-compose/dev.yml down",
     "test": "grafana-toolkit plugin:test --coverage",
     "watch": "grafana-toolkit plugin:dev --watch"
   },

src/components/data-source-list/data-source-list.tsx

@@ -124,8 +124,8 @@ export const DataSourceList: FC<Props> = ({ dataSources, query }) => {
         <ol className="card-list">
           {renderedDataSources.map((redis: any, index: number) => {
             const title = redis.fields?.name ? 'Working as expected' : "Can't connect";
-            const name = redis.fields?.name ? redis.fields?.name : 'Unknown';
-            const url = redis.jsonData?.host ? redis.jsonData?.host : 'Not provided';
+            const name = redis.fields?.name || 'Unknown';
+            const url = redis.jsonData?.host || 'Not provided';
             const variant = redis.fields?.name ? 'primary' : 'destructive';
             const fill = redis.fields?.name ? '#DC382D' : '#A7A7A7';
 

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { AppPluginMeta, FieldType, PluginType, toDataFrame } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { InfoBox } from '@grafana/ui';
-import { QueryTypeValue } from '../../redis-enterprise-software-datasource/api';
 import { DataSourceType } from '../../constants';
+import { QueryTypeValue } from '../../redis-enterprise-software-datasource/api';
 import { DataSourceList } from '../data-source-list';
 import { RootPage } from './root-page';
 
@@ -71,6 +72,7 @@ jest.mock('@grafana/runtime', () => ({
   getDataSourceSrv: () => ({
     get: getRedisMock,
   }),
+  config: {},
 }));
 
 /**
@@ -81,11 +83,17 @@ describe('RootPage', () => {
   const path = '/app';
   const onNavChangedMock = jest.fn();
 
+  beforeAll(() => {
+    // runtime.config = bootConfig;
+  });
+
   beforeEach(() => {
     onNavChangedMock.mockClear();
     getDataSourceMock.mockClear();
     getRedisMock.mockClear();
     redisMock.query.mockClear();
+    config.datasources = undefined as any;
+    config.defaultDatasource = undefined as any;
   });
 
   /**
@@ -109,6 +117,34 @@ describe('RootPage', () => {
       expect(getDataSourceMock).toHaveBeenCalledWith('/api/datasources');
     });
 
+    it('Should update bootConfig', async () => {
+      const dataSource = {
+        type: DataSourceType.SOFTWARE,
+        name: 'redis',
+      };
+      getDataSourceMock
+        .mockImplementationOnce(() => Promise.resolve([dataSource]))
+        .mockImplementationOnce(() =>
+          Promise.resolve({
+            datasources: [dataSource],
+            defaultDatasource: dataSource,
+          })
+        );
+      expect(config.datasources).not.toBeDefined();
+      expect(config.defaultDatasource).not.toBeDefined();
+      const wrapper = shallow<RootPage>(
+        <RootPage meta={meta} path={path} query={null as any} onNavChanged={onNavChangedMock} />,
+        {
+          disableLifecycleMethods: true,
+        }
+      );
+      await wrapper.instance().componentDidMount();
+      expect(getDataSourceMock).toHaveBeenCalledWith('/api/datasources');
+      expect(getDataSourceMock).toHaveBeenCalledWith('/api/frontend/settings');
+      expect(config.datasources).toEqual([dataSource]);
+      expect(config.defaultDatasource).toEqual(dataSource);
+    });
+
     it('Should retrieve cluster name', (done) => {
       getDataSourceMock.mockImplementationOnce(() =>
         Promise.resolve([
@@ -179,10 +215,12 @@ describe('RootPage', () => {
       const wrapper = shallow<RootPage>(
         <RootPage meta={meta} path={path} query={null as any} onNavChanged={onNavChangedMock} />
       );
+
       const loadingMessageComponent = wrapper.findWhere(
         (node) => node.is(InfoBox) && node.prop('title') === 'Loading...'
       );
       expect(loadingMessageComponent.exists()).toBeTruthy();
+
       wrapper.instance().componentDidMount();
       setImmediate(() => {
         const dataSourceListComponent = wrapper.findWhere((node) => node.is(DataSourceList));
@@ -201,11 +239,13 @@ describe('RootPage', () => {
         <RootPage meta={meta} path={path} query={null as any} onNavChanged={onNavChangedMock} />,
         { disableLifecycleMethods: true }
       );
+
       getDataSourceMock.mockImplementationOnce(() =>
         Promise.resolve([{ name: 'my-redis', type: DataSourceType.SOFTWARE }])
       );
       redisMock.query.mockImplementationOnce(() => Promise.reject());
       await wrapper.instance().componentDidMount();
+
       const dataSourceListComponent = wrapper.findWhere((node) => node.is(DataSourceList));
       const loadingMessageComponent = wrapper.findWhere(
         (node) => node.is(InfoBox) && node.prop('title') === 'Loading...'