directive for multiple ds selection

src/panel-triggers/datasource-selector.directive.js

@@ -0,0 +1,49 @@
+import angular from 'angular';
+import _ from 'lodash';
+
+const template = `
+<value-select-dropdown variable="ctrl.dsOptions" on-updated="ctrl.onChange(ctrl.dsOptions)">
+</value-select-dropdown>
+`;
+
+angular
+.module('grafana.directives')
+.directive('datasourceSelector', () => {
+  return {
+    scope: {
+      datasources: "=",
+      options: "=",
+      onChange: "&"
+    },
+    controller: DatasourceSelectorCtrl,
+    controllerAs: 'ctrl',
+    template: template
+  };
+});
+
+class DatasourceSelectorCtrl {
+
+  /** @ngInject */
+  constructor($scope) {
+    this.scope = $scope;
+    let datasources = $scope.datasources;
+    let options = $scope.options;
+    this.dsOptions = {
+      multi: true,
+      current: {value: datasources, text: datasources.join(" + ")},
+      options: _.map(options, (ds) => {
+        return {text: ds, value: ds};
+      })
+    };
+  }
+
+  onChange(updatedOptions) {
+    let newDataSources = updatedOptions.current.value;
+    this.scope.datasources = newDataSources;
+
+    // Run after model was changed
+    this.scope.$$postDigest(() => {
+      this.scope.onChange();
+    });
+  }
+}