Migrate backendSrv to getBackendSrv, fix direct DB connection

package.json

@@ -29,8 +29,9 @@
     "@babel/preset-env": "^7.7.7",
     "@babel/preset-react": "^7.6.3",
     "@emotion/core": "^10.0.27",
-    "@grafana/data": "^6.4.2",
+    "@grafana/data": "^6.7.0",
-    "@grafana/ui": "^6.4.2",
+    "@grafana/ui": "^6.7.0",
+    "@grafana/runtime": "^6.7.0",
     "@types/classnames": "^2.2.6",
     "@types/grafana": "github:CorpGlory/types-grafana",
     "@types/jest": "^23.1.1",
@@ -70,7 +71,7 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-popper": "^1.3.2",
-    "react-table": "^6.8.6",
+    "react-table-6": "^6.8.6",
     "react-test-renderer": "^16.7.0",
     "react-transition-group": "^2.5.2",
     "rst2html": "github:thoward/rst2html#990cb89",

src/datasource-zabbix/components/ZabbixInput.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
 import { css, cx } from 'emotion';
-import { Themeable, withTheme, Input, GrafanaTheme, EventsWithValidation, ValidationEvents } from '@grafana/ui';
+import { Themeable, withTheme, Input, EventsWithValidation, ValidationEvents } from '@grafana/ui';
 import { isRegex, variableRegex } from '../utils';
+import { GrafanaTheme } from '@grafana/data';
 
 const variablePattern = RegExp(`^${variableRegex.source}`);
 

src/datasource-zabbix/datasource.js

@@ -16,7 +16,7 @@ const DEFAULT_ZABBIX_VERSION = 3;
 export class ZabbixDatasource {
 
   /** @ngInject */
-  constructor(instanceSettings, templateSrv, backendSrv, datasourceSrv, zabbixAlertingSrv) {
+  constructor(instanceSettings, templateSrv, datasourceSrv, zabbixAlertingSrv) {
     this.templateSrv = templateSrv;
     this.zabbixAlertingSrv = zabbixAlertingSrv;
 
@@ -75,7 +75,7 @@ export class ZabbixDatasource {
       dbConnectionRetentionPolicy: this.dbConnectionRetentionPolicy,
     };
 
-    this.zabbix = new Zabbix(zabbixOptions, datasourceSrv, backendSrv);
+    this.zabbix = new Zabbix(zabbixOptions, datasourceSrv);
   }
 
   ////////////////////////

src/datasource-zabbix/specs/datasource.spec.js

@@ -21,11 +21,11 @@ describe('ZabbixDatasource', () => {
     };
 
     ctx.templateSrv = mocks.templateSrvMock;
-    ctx.backendSrv = mocks.backendSrvMock;
+    // ctx.backendSrv = mocks.backendSrvMock;
     ctx.datasourceSrv = mocks.datasourceSrvMock;
     ctx.zabbixAlertingSrv = mocks.zabbixAlertingSrvMock;
 
-    ctx.ds = new Datasource(ctx.instanceSettings, ctx.templateSrv, ctx.backendSrv, ctx.datasourceSrv, ctx.zabbixAlertingSrv);
+    ctx.ds = new Datasource(ctx.instanceSettings, ctx.templateSrv, ctx.datasourceSrv, ctx.zabbixAlertingSrv);
   });
 
   describe('When querying data', () => {

src/datasource-zabbix/zabbix/connectors/sql/sqlConnector.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { getBackendSrv } from '@grafana/runtime';
 import { compactQuery } from '../../../utils';
 import mysql from './mysql';
 import postgres from './postgres';
@@ -17,8 +18,7 @@ export class SQLConnector extends DBConnector {
     this.sqlDialect = null;
 
     super.loadDBDataSource()
-    .then(ds => {
+    .then(() => {
-      this.backendSrv = ds.backendSrv;
       this.loadSQLDialect();
     });
   }
@@ -96,7 +96,7 @@ export class SQLConnector extends DBConnector {
       maxDataPoints: this.limit
     };
 
-    return this.backendSrv.datasourceRequest({
+    return getBackendSrv().datasourceRequest({
       url: '/api/tsdb/query',
       method: 'POST',
       data: {

src/datasource-zabbix/zabbix/connectors/zabbix_api/zabbixAPIConnector.js

@@ -10,7 +10,7 @@ import { ZBX_ACK_ACTION_NONE, ZBX_ACK_ACTION_ACK, ZBX_ACK_ACTION_ADD_MESSAGE, MI
  * Wraps API calls and provides high-level methods.
  */
 export class ZabbixAPIConnector {
-  constructor(api_url, username, password, version, basicAuth, withCredentials, backendSrv) {
+  constructor(api_url, username, password, version, basicAuth, withCredentials) {
     this.url              = api_url;
     this.username         = username;
     this.password         = password;
@@ -26,7 +26,7 @@ export class ZabbixAPIConnector {
     this.loginErrorCount = 0;
     this.maxLoginAttempts = 3;
 
-    this.zabbixAPICore = new ZabbixAPICore(backendSrv);
+    this.zabbixAPICore = new ZabbixAPICore();
 
     this.getTrend = this.getTrend_ZBXNEXT1193;
     //getTrend = getTrend_30;

src/datasource-zabbix/zabbix/connectors/zabbix_api/zabbixAPICore.js

@@ -1,12 +1,12 @@
 /**
  * General Zabbix API methods
  */
+import { getBackendSrv } from '@grafana/runtime';
 
 export class ZabbixAPICore {
 
   /** @ngInject */
-  constructor(backendSrv) {
+  constructor() {
-    this.backendSrv = backendSrv;
   }
 
   /**
@@ -50,7 +50,7 @@ export class ZabbixAPICore {
   }
 
   datasourceRequest(requestOptions) {
-    return this.backendSrv.datasourceRequest(requestOptions)
+    return getBackendSrv().datasourceRequest(requestOptions)
     .then((response) => {
       if (!response.data) {
         return Promise.reject(new ZabbixAPIError({data: "General Error, no data"}));

src/datasource-zabbix/zabbix/zabbix.js

@@ -25,7 +25,7 @@ const REQUESTS_TO_BIND = [
 ];
 
 export class Zabbix {
-  constructor(options, datasourceSrv, backendSrv) {
+  constructor(options, datasourceSrv) {
     let {
       url,
       username,
@@ -49,7 +49,7 @@ export class Zabbix {
     };
     this.cachingProxy = new CachingProxy(cacheOptions);
 
-    this.zabbixAPI = new ZabbixAPIConnector(url, username, password, zabbixVersion, basicAuth, withCredentials, backendSrv);
+    this.zabbixAPI = new ZabbixAPIConnector(url, username, password, zabbixVersion, basicAuth, withCredentials);
 
     this.proxyfyRequests();
     this.cacheRequests();

src/datasource-zabbix/zabbix/zabbix.test.js

@@ -13,9 +13,9 @@ describe('Zabbix', () => {
 
   beforeEach(() => {
     ctx.options = options;
-    ctx.backendSrv = mocks.backendSrvMock;
+    // ctx.backendSrv = mocks.backendSrvMock;
     ctx.datasourceSrv = mocks.datasourceSrvMock;
-    zabbix = new Zabbix(ctx.options, ctx.backendSrvMock, ctx.datasourceSrvMock);
+    zabbix = new Zabbix(ctx.options, ctx.datasourceSrvMock);
   });
 
   describe('When querying proxies', () => {

src/panel-triggers/components/Problems/Problems.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import ReactTable from 'react-table';
+import ReactTable from 'react-table-6';
 import classNames from 'classnames';
 import _ from 'lodash';
 import moment from 'moment';
@@ -18,8 +18,8 @@ export interface ProblemListProps {
   timeRange?: GFTimeRange;
   pageSize?: number;
   fontSize?: number;
-  getProblemEvents: (problem: ZBXTrigger) => ZBXEvent[];
+  getProblemEvents: (problem: ZBXTrigger) => Promise<ZBXEvent[]>;
-  getProblemAlerts: (problem: ZBXTrigger) => ZBXAlert[];
+  getProblemAlerts: (problem: ZBXTrigger) => Promise<ZBXAlert[]>;
   onProblemAck?: (problem: ZBXTrigger, data: AckProblemData) => void;
   onTagClick?: (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => void;
   onPageSizeChange?: (pageSize: number, pageIndex: number) => void;
@@ -163,6 +163,7 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
               getProblemAlerts={this.props.getProblemAlerts}
               onProblemAck={this.handleProblemAck}
               onTagClick={this.handleTagClick}
+              subRows={false}
             />
           }
           expanded={this.getExpandedPage(this.state.page)}

src/panel-triggers/utils.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import moment from 'moment';
-import { DataQuery } from '@grafana/ui/';
+import { DataQuery } from '@grafana/data';
 import * as utils from '../datasource-zabbix/utils';
 import { ZBXTrigger } from './types';
 

src/sass/grafana-zabbix.scss

@@ -1,5 +1,5 @@
 // DEPENDENCIES
-@import '../../node_modules/react-table/react-table.css';
+@import '../../node_modules/react-table-6/react-table.css';
 
 @import 'variables';
 @import 'panel-triggers';

webpack/webpack.base.conf.js

@@ -28,7 +28,7 @@ module.exports = {
   externals: [
     // remove the line below if you don't want to use builtin versions
     'jquery', 'lodash', 'moment', 'angular', 'emotion',
-    'react', 'react-dom', '@grafana/ui', '@grafana/data',
+    'react', 'react-dom', '@grafana/ui', '@grafana/data', '@grafana/runtime',
     function (context, request, callback) {
       var prefix = 'grafana/';
       if (request.indexOf(prefix) === 0) {