Make datasource variables multiselect and dashboard repeatable

closes #7492 (and #7030)

public/app/features/panel/metrics_panel_ctrl.ts

@@ -79,9 +79,28 @@ class MetricsPanelCtrl extends PanelCtrl {
     delete this.error;
     this.loading = true;
 
+    // set "mydatasource" to whatever the panel has defined
+    let mydatasource = this.panel.datasource;
+    let datasourceVarName = '';
+
+    // look for data source variables
+    for (let i = 0; i < this.templateSrv.variables.length; i++) {
+      const variable = this.templateSrv.variables[i];
+      if (variable.type !== 'datasource') {
+        continue;
+      }
+
+      datasourceVarName = variable.name;
+    }
+
+    // if a data source variable was found, use its value
+    if (datasourceVarName !== '' && this.panel.scopedVars && this.panel.scopedVars[datasourceVarName]) {
+      mydatasource = this.panel.scopedVars[datasourceVarName].value;
+    }
+
     // load datasource service
     this.datasourceSrv
-      .get(this.panel.datasource)
+      .get(mydatasource)
       .then(this.updateTimeRange.bind(this))
       .then(this.issueQueries.bind(this))
       .then(this.handleQueryResult.bind(this))

public/app/features/plugins/datasource_srv.ts

@@ -40,6 +40,10 @@ export class DatasourceSrv {
   }
 
   loadDatasource(name: string): Promise<DataSourceApi> {
+    // if there are multiple datasources provided, just use the first one
+    const re = /{([^,}]+).*/;
+    name = name.replace(re, '$1');
+
     const dsConfig = config.datasources[name];
     if (!dsConfig) {
       return this.$q.reject({ message: 'Datasource named ' + name + ' was not found' });

public/app/features/templating/datasource_variable.ts

@@ -6,6 +6,8 @@ export class DatasourceVariable implements Variable {
   query: string;
   options: any;
   current: any;
+  multi: boolean;
+  includeAll: boolean;
   refresh: any;
   skipUrlSync: boolean;
 
@@ -18,6 +20,8 @@ export class DatasourceVariable implements Variable {
     regex: '',
     options: [],
     query: '',
+    multi: false,
+    includeAll: false,
     refresh: 1,
     skipUrlSync: false,
   };
@@ -69,9 +73,16 @@ export class DatasourceVariable implements Variable {
     }
 
     this.options = options;
+    if (this.includeAll) {
+      this.addAllOption();
+    }
     return this.variableSrv.validateVariableSelectionState(this);
   }
 
+  addAllOption() {
+    this.options.unshift({ text: 'All', value: '$__all' });
+  }
+
   dependsOn(variable) {
     if (this.regex) {
       return containsVariable(this.regex, variable.name);
@@ -84,6 +95,9 @@ export class DatasourceVariable implements Variable {
   }
 
   getValueForUrl() {
+    if (this.current.text === 'All') {
+      return 'All';
+    }
     return this.current.value;
   }
 }
@@ -91,5 +105,6 @@ export class DatasourceVariable implements Variable {
 variableTypes['datasource'] = {
   name: 'Datasource',
   ctor: DatasourceVariable,
+  supportsMulti: true,
   description: 'Enabled you to dynamically switch the datasource for multiple panels',
 };