feat(mixed datasources): continued work on editor design change

pkg/api/datasources.go

@@ -112,5 +112,13 @@ func UpdateDataSource(c *middleware.Context, cmd m.UpdateDataSourceCommand) {
 }
 
 func GetDataSourcePlugins(c *middleware.Context) {
-	c.JSON(200, plugins.DataSources)
+	dsList := make(map[string]interface{})
+
+	for key, value := range plugins.DataSources {
+		if value.(map[string]interface{})["hide"] == nil {
+			dsList[key] = value
+		}
+	}
+
+	c.JSON(200, dsList)
 }

pkg/api/frontendsettings.go

@@ -90,6 +90,11 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro
 		"type": "grafana",
 		"meta": grafanaDatasourceMeta,
 	}
+	// add mixed backend data source
+	datasources["mixed"] = map[string]interface{}{
+		"type": "mixed",
+		"meta": plugins.DataSources["mixed"],
+	}
 
 	if defaultDatasource == "" {
 		defaultDatasource = "grafana"

public/app/features/annotations/partials/editor.html

@@ -72,8 +72,7 @@
 				</div>
 			</div>
 
-			<div ng-include src="currentDatasource.meta.partials.annotations">
-			</div>
+			<datasource-editor-view datasource="currentAnnotation.datasource" name="annotations-query-editor"></datasource-editor-view>
 
 			<br>
 			<button ng-show="editor.index === 1" type="button" class="btn btn-success" ng-click="add()">Add</button>

public/app/features/panel/panelDirective.js

@@ -40,6 +40,31 @@ function (angular, $, config) {
     };
   });
 
+  module.service('dynamicDirectiveSrv', function($compile, $parse, datasourceSrv) {
+    var self = this;
+
+    this.addDirective = function(options, type, editorScope) {
+      var panelEl = angular.element(document.createElement(options.name + '-' + type));
+      options.parentElem.append(panelEl);
+      $compile(panelEl)(editorScope);
+    };
+
+    this.define = function(options) {
+      var editorScope;
+      options.scope.$watch(options.datasourceProperty, function(newVal) {
+        if (editorScope) {
+          editorScope.$destroy();
+          options.parentElem.empty();
+        }
+
+        editorScope = options.scope.$new();
+        datasourceSrv.get(newVal).then(function(ds) {
+          self.addDirective(options, ds.meta.type, editorScope);
+        });
+      });
+    };
+  });
+
   module.directive('queryEditorLoader', function($compile, $parse, datasourceSrv) {
     return {
       restrict: 'E',
@@ -58,6 +83,10 @@ function (angular, $, config) {
             editorScope = scope.$new();
             editorScope.datasource = ds;
 
+            if (!scope.target.refId) {
+              scope.target.refId = 'A';
+            }
+
             var panelEl = angular.element(document.createElement('metric-query-editor-' + ds.meta.type));
             elem.append(panelEl);
             $compile(panelEl)(editorScope);
@@ -67,25 +96,15 @@ function (angular, $, config) {
     };
   });
 
-  module.directive('queryOptionsLoader', function($compile, $parse, datasourceSrv) {
+  module.directive('datasourceEditorView', function(dynamicDirectiveSrv) {
     return {
       restrict: 'E',
-      link: function(scope, elem) {
-        var editorScope;
-
-        scope.$watch("panel.datasource", function() {
-
-          datasourceSrv.get(scope.panel.datasource).then(function(ds) {
-            if (editorScope) {
-              editorScope.$destroy();
-              elem.empty();
-            }
-
-            editorScope = scope.$new();
-            var panelEl = angular.element(document.createElement('metric-query-options-' + ds.meta.type));
-            elem.append(panelEl);
-            $compile(panelEl)(editorScope);
-          });
+      link: function(scope, elem, attrs) {
+        dynamicDirectiveSrv.define({
+          datasourceProperty: attrs.datasource,
+          name: attrs.name,
+          scope: scope,
+          parentElem: elem,
         });
       }
     };

public/app/features/panel/panelSrv.js

@@ -74,7 +74,7 @@ function (angular, _, config) {
         });
 
         if ($scope.panel.targets.length === 0) {
-          $scope.panel.targets = [{}];
+          $scope.panel.targets = [{refId: 'A'}];
         }
 
         if (datasource === 'mixed') {

public/app/partials/metrics.html

@@ -19,15 +19,14 @@
 
 			<ul class="dropdown-menu" role="menu">
 				<li ng-repeat="datasource in datasources" role="menuitem">
-					<a ng-click="addDataQuery(datasource.value);">{{datasource.name}}</a>
+					<a ng-click="addDataQuery(datasource.name);">{{datasource.name}}</a>
 				</li>
 			</ul>
 		</span>
 
 	</div>
 
-	<query-options-loader></query-options-loader>
-
+	<datasource-editor-view datasource="panel.datasource" name="metric-query-options"></datasource-editor-view>
 </div>
 
 <div class="editor-row" style="margin-top: 30px">

public/app/plugins/datasource/grafana/plugin.json

@@ -1,15 +1,11 @@
 {
   "pluginType": "datasource",
   "name": "Grafana (for testing)",
+  "hide": true,
 
   "type": "grafana",
   "serviceName": "GrafanaDatasource",
 
   "module": "plugins/datasource/grafana/datasource",
-
-  "partials": {
-    "query": "app/plugins/datasource/grafana/partials/query.editor.html"
-  },
-
   "metrics": true
 }

public/app/plugins/datasource/graphite/datasource.js

@@ -5,6 +5,7 @@ define([
   'config',
   'kbn',
   'moment',
+  './directives',
   './queryCtrl',
   './funcEditor',
   './addGraphiteFunc',

public/app/plugins/datasource/graphite/directives.js

@@ -0,0 +1,21 @@
+define([
+  'angular',
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('grafana.directives');
+
+  module.directive('metricQueryEditorGraphite', function() {
+    return {controller: 'GraphiteQueryCtrl', templateUrl: 'app/plugins/datasource/graphite/partials/query.editor.html'};
+  });
+
+  module.directive('metricQueryOptionsGraphite', function() {
+    return {templateUrl: 'app/plugins/datasource/graphite/partials/query.options.html'};
+  });
+
+  module.directive('annotationsQueryEditorGraphite', function() {
+    return {templateUrl: 'app/plugins/datasource/graphite/partials/annotations.editor.html'};
+  });
+
+});

public/app/plugins/datasource/graphite/plugin.json

@@ -9,8 +9,6 @@
 
   "partials": {
     "config": "app/plugins/datasource/graphite/partials/config.html",
-    "query": "app/plugins/datasource/graphite/partials/query.editor.html",
-    "annotations": "app/plugins/datasource/graphite/partials/annotations.editor.html"
   },
 
   "metrics": true,

public/app/plugins/datasource/graphite/queryCtrl.js

@@ -10,19 +10,6 @@ function (angular, _, config, gfunc, Parser) {
 
   var module = angular.module('grafana.controllers');
 
-  module.directive('metricQueryEditorGraphite', function() {
-    return {
-      controller: 'GraphiteQueryCtrl',
-      templateUrl: 'app/plugins/datasource/graphite/partials/query.editor.html',
-    };
-  });
-
-  module.directive('metricQueryOptionsGraphite', function() {
-    return {
-      templateUrl: 'app/plugins/datasource/graphite/partials/query.options.html',
-    };
-  });
-
   module.controller('GraphiteQueryCtrl', function($scope, $sce, templateSrv) {
 
     $scope.init = function() {

public/app/plugins/datasource/influxdb/datasource.js

@@ -4,6 +4,7 @@ define([
   'kbn',
   './influxSeries',
   './queryBuilder',
+  './directives',
   './queryCtrl',
   './funcEditor',
 ],

public/app/plugins/datasource/influxdb/directives.js

@@ -0,0 +1,21 @@
+define([
+  'angular',
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('grafana.directives');
+
+  module.directive('metricQueryEditorInfluxdb', function() {
+    return {controller: 'InfluxQueryCtrl', templateUrl: 'app/plugins/datasource/influxdb/partials/query.editor.html'};
+  });
+
+  module.directive('metricQueryOptionsInfluxdb', function() {
+    return {templateUrl: 'app/plugins/datasource/influxdb/partials/query.options.html'};
+  });
+
+  module.directive('annotationsQueryEditorInfluxdb', function() {
+    return {templateUrl: 'app/plugins/datasource/influxdb/partials/annotations.editor.html'};
+  });
+
+});

public/app/plugins/datasource/influxdb/plugin.json

@@ -9,8 +9,6 @@
 
   "partials": {
     "config": "app/plugins/datasource/influxdb/partials/config.html",
-    "query": "app/plugins/datasource/influxdb/partials/query.editor.html",
-    "annotations": "app/plugins/datasource/influxdb/partials/annotations.editor.html"
   },
 
   "metrics": true,

public/app/plugins/datasource/influxdb/queryCtrl.js

@@ -8,19 +8,6 @@ function (angular, _, InfluxQueryBuilder) {
 
   var module = angular.module('grafana.controllers');
 
-  module.directive('metricQueryEditorInfluxdb', function() {
-    return {
-      controller: 'InfluxQueryCtrl',
-      templateUrl: 'app/plugins/datasource/influxdb/partials/query.editor.html',
-    };
-  });
-
-  module.directive('metricQueryOptionsInfluxdb', function() {
-    return {
-      templateUrl: 'app/plugins/datasource/influxdb/partials/query.options.html',
-    };
-  });
-
   module.controller('InfluxQueryCtrl', function($scope, $timeout, $sce, templateSrv, $q) {
 
     $scope.init = function() {

public/app/plugins/datasource/mixed/plugin.json

@@ -1,15 +1,11 @@
 {
   "pluginType": "datasource",
   "name": "Mixed datasource",
+  "hide": true,
 
   "type": "mixed",
   "serviceName": "MixedDatasource",
 
   "module": "plugins/datasource/mixed/datasource",
-
-  "partials": {
-    "query": "app/plugins/datasource/mixed/partials/query.editor.html"
-  },
-
   "metrics": true
 }

public/app/plugins/datasource/opentsdb/directives.js

@@ -0,0 +1,16 @@
+define([
+  'angular',
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('grafana.directives');
+
+  module.directive('metricQueryEditorOpentsdb', function() {
+    return {
+      controller: 'OpenTSDBQueryCtrl',
+      templateUrl: 'app/plugins/datasource/opentsdb/partials/query.editor.html',
+    };
+  });
+
+});

public/app/plugins/datasource/opentsdb/plugin.json

@@ -8,8 +8,7 @@
   "module": "plugins/datasource/opentsdb/datasource",
 
   "partials": {
-    "config": "app/plugins/datasource/opentsdb/partials/config.html",
-    "query": "app/plugins/datasource/opentsdb/partials/query.editor.html"
+    "config": "app/plugins/datasource/opentsdb/partials/config.html"
   },
 
   "metrics": true

public/app/plugins/datasource/opentsdb/queryCtrl.js

@@ -8,13 +8,6 @@ function (angular, _, kbn) {
 
   var module = angular.module('grafana.controllers');
 
-  module.directive('metricQueryEditorOpentsdb', function() {
-    return {
-      controller: 'OpenTSDBQueryCtrl',
-      templateUrl: 'app/plugins/datasource/opentsdb/partials/query.editor.html',
-    };
-  });
-
   module.controller('OpenTSDBQueryCtrl', function($scope, $timeout) {
 
     $scope.init = function() {