mysql-connector: add config options for selecting data source

and load SQL data source during plugin init

src/datasource-zabbix/config.controller.js

@@ -0,0 +1,28 @@
+import _ from 'lodash';
+
+const SUPPORTED_SQL_DS = ['mysql'];
+
+const defaultConfig = {
+  dbConnection: {
+    enable: false,
+  }
+};
+
+export class ZabbixDSConfigController {
+  /** @ngInject */
+  constructor($scope, $injector, datasourceSrv) {
+    this.datasourceSrv = datasourceSrv;
+
+    _.defaults(this.current.jsonData, defaultConfig);
+    this.sqlDataSources = this.getSupportedSQLDataSources();
+  }
+
+  getSupportedSQLDataSources() {
+    let datasources = this.datasourceSrv.getAll();
+    return _.filter(datasources, ds => {
+      return _.includes(SUPPORTED_SQL_DS, ds.type);
+    });
+  }
+}
+
+ZabbixDSConfigController.templateUrl = 'datasource-zabbix/partials/config.html';

src/datasource-zabbix/datasource.js

@@ -13,10 +13,11 @@ import {ZabbixAPIError} from './zabbixAPICore.service.js';
 class ZabbixAPIDatasource {
 
   /** @ngInject */
-  constructor(instanceSettings, templateSrv, alertSrv, dashboardSrv, zabbixAlertingSrv, Zabbix) {
+  constructor(instanceSettings, templateSrv, alertSrv, dashboardSrv, datasourceSrv, zabbixAlertingSrv, Zabbix) {
     this.templateSrv = templateSrv;
     this.alertSrv = alertSrv;
     this.dashboardSrv = dashboardSrv;
+    this.datasourceSrv = datasourceSrv;
     this.zabbixAlertingSrv = zabbixAlertingSrv;
 
     // General data source settings
@@ -45,10 +46,33 @@ class ZabbixAPIDatasource {
 
     this.zabbix = new Zabbix(this.url, this.username, this.password, this.basicAuth, this.withCredentials, this.cacheTTL);
 
+    // Try to use direct DB connection
+    this.enableDirectDBConnection = instanceSettings.jsonData.dbConnection.enable;
+    if (this.enableDirectDBConnection) {
+      this.loadSQLDataSource(instanceSettings.jsonData.dbConnection.datasourceId)
+      .then(() => {})
+      .catch(error => {
+        this.enableDirectDBConnection = false;
+        this.alertSrv.set("SQL Data Source Error", error, 'error');
+      });
+    }
+
     // Use custom format for template variables
     this.replaceTemplateVars = _.partial(replaceTemplateVars, this.templateSrv);
   }
 
+  loadSQLDataSource(datasourceId) {
+    let ds = _.find(this.datasourceSrv.getAll(), {'id': datasourceId});
+    if (ds) {
+      return this.datasourceSrv.loadDatasource(ds.name).then(ds => {
+        console.log('Data source loaded', ds);
+        this.sqlDataSource = ds;
+      });
+    } else {
+      return Promise.reject(`SQL Data Source with ID ${datasourceId} not found`);
+    }
+  }
+
   ////////////////////////
   // Datasource methods //
   ////////////////////////

src/datasource-zabbix/module.js

@@ -1,8 +1,6 @@
 import {ZabbixAPIDatasource} from './datasource';
 import {ZabbixQueryController} from './query.controller';
-
-class ZabbixConfigController {}
-ZabbixConfigController.templateUrl = 'datasource-zabbix/partials/config.html';
+import {ZabbixDSConfigController} from './config.controller';
 
 class ZabbixQueryOptionsController {}
 ZabbixQueryOptionsController.templateUrl = 'datasource-zabbix/partials/query.options.html';
@@ -12,7 +10,7 @@ ZabbixAnnotationsQueryController.templateUrl = 'datasource-zabbix/partials/annot
 
 export {
   ZabbixAPIDatasource as Datasource,
-  ZabbixConfigController as ConfigCtrl,
+  ZabbixDSConfigController as ConfigCtrl,
   ZabbixQueryController as QueryCtrl,
   ZabbixQueryOptionsController as QueryOptionsCtrl,
   ZabbixAnnotationsQueryController as AnnotationsQueryCtrl

src/datasource-zabbix/partials/config.html

@@ -75,6 +75,24 @@
   </div>
 </div>
 
+<div class="gf-form-group">
+  <h3 class="page-heading">Direct DB Connection</h3>
+  <gf-form-switch class="gf-form" label-class="width-9"
+    label="Enable"
+    checked="ctrl.current.jsonData.dbConnection.enable">
+  </gf-form-switch>
+  <div ng-if="ctrl.current.jsonData.dbConnection.enable">
+    <div class="gf-form max-width-20">
+    <span class="gf-form-label width-9">SQL Data Source</span>
+    <div class="gf-form-select-wrapper max-width-16">
+      <select class="gf-form-input" ng-model="ctrl.current.jsonData.dbConnection.datasourceId"
+        ng-options="ds.id as ds.name for ds in ctrl.sqlDataSources">
+      </select>
+    </div>
+  </div>
+  </div>
+</div>
+
 <div class="gf-form-group">
   <h3 class="page-heading">Alerting</h3>
   <gf-form-switch class="gf-form" label-class="width-9"