diff --git a/pkg/api/datasources.go b/pkg/api/datasources.go
index e0253df3cdb..52655556483 100644
--- a/pkg/api/datasources.go
+++ b/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)
 }
diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go
index 7851f1d8f0d..98f8ee338b9 100644
--- a/pkg/api/frontendsettings.go
+++ b/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"
diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html
index 799b1f69fe4..2ff4040d098 100644
--- a/public/app/features/annotations/partials/editor.html
+++ b/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>
diff --git a/public/app/features/panel/panelDirective.js b/public/app/features/panel/panelDirective.js
index a697aab4722..bb60d209aad 100644
--- a/public/app/features/panel/panelDirective.js
+++ b/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,
         });
       }
     };
diff --git a/public/app/features/panel/panelSrv.js b/public/app/features/panel/panelSrv.js
index 784525c0528..adb28031a4b 100644
--- a/public/app/features/panel/panelSrv.js
+++ b/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') {
diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html
index 9343747f53f..7b30c42a066 100644
--- a/public/app/partials/metrics.html
+++ b/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">
diff --git a/public/app/plugins/datasource/grafana/plugin.json b/public/app/plugins/datasource/grafana/plugin.json
index 9358cb29af1..2baffb991eb 100644
--- a/public/app/plugins/datasource/grafana/plugin.json
+++ b/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
 }
diff --git a/public/app/plugins/datasource/graphite/datasource.js b/public/app/plugins/datasource/graphite/datasource.js
index cd7c66d67a8..400ec7abc77 100644
--- a/public/app/plugins/datasource/graphite/datasource.js
+++ b/public/app/plugins/datasource/graphite/datasource.js
@@ -5,6 +5,7 @@ define([
   'config',
   'kbn',
   'moment',
+  './directives',
   './queryCtrl',
   './funcEditor',
   './addGraphiteFunc',
diff --git a/public/app/plugins/datasource/graphite/directives.js b/public/app/plugins/datasource/graphite/directives.js
new file mode 100644
index 00000000000..91e52bb9546
--- /dev/null
+++ b/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'};
+  });
+
+});
diff --git a/public/app/plugins/datasource/graphite/plugin.json b/public/app/plugins/datasource/graphite/plugin.json
index 8e6766f087a..d45c446f40f 100644
--- a/public/app/plugins/datasource/graphite/plugin.json
+++ b/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,
diff --git a/public/app/plugins/datasource/graphite/queryCtrl.js b/public/app/plugins/datasource/graphite/queryCtrl.js
index 0d1087dc53c..21b1534fbe1 100644
--- a/public/app/plugins/datasource/graphite/queryCtrl.js
+++ b/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() {
diff --git a/public/app/plugins/datasource/influxdb/datasource.js b/public/app/plugins/datasource/influxdb/datasource.js
index cca93fd4e3b..71714b7b40c 100644
--- a/public/app/plugins/datasource/influxdb/datasource.js
+++ b/public/app/plugins/datasource/influxdb/datasource.js
@@ -4,6 +4,7 @@ define([
   'kbn',
   './influxSeries',
   './queryBuilder',
+  './directives',
   './queryCtrl',
   './funcEditor',
 ],
diff --git a/public/app/plugins/datasource/influxdb/directives.js b/public/app/plugins/datasource/influxdb/directives.js
new file mode 100644
index 00000000000..a4c66137751
--- /dev/null
+++ b/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'};
+  });
+
+});
diff --git a/public/app/plugins/datasource/influxdb/plugin.json b/public/app/plugins/datasource/influxdb/plugin.json
index c93b41747a7..560b7cfb8f9 100644
--- a/public/app/plugins/datasource/influxdb/plugin.json
+++ b/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,
diff --git a/public/app/plugins/datasource/influxdb/queryCtrl.js b/public/app/plugins/datasource/influxdb/queryCtrl.js
index 0d8a18ebd33..be87edcad21 100644
--- a/public/app/plugins/datasource/influxdb/queryCtrl.js
+++ b/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() {
diff --git a/public/app/plugins/datasource/mixed/plugin.json b/public/app/plugins/datasource/mixed/plugin.json
index af737142548..e9f99e6ead9 100644
--- a/public/app/plugins/datasource/mixed/plugin.json
+++ b/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
 }
diff --git a/public/app/plugins/datasource/opentsdb/directives.js b/public/app/plugins/datasource/opentsdb/directives.js
new file mode 100644
index 00000000000..3ff4c3c2ccc
--- /dev/null
+++ b/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',
+    };
+  });
+
+});
diff --git a/public/app/plugins/datasource/opentsdb/plugin.json b/public/app/plugins/datasource/opentsdb/plugin.json
index dd7ab96d828..de0eb037d78 100644
--- a/public/app/plugins/datasource/opentsdb/plugin.json
+++ b/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
diff --git a/public/app/plugins/datasource/opentsdb/queryCtrl.js b/public/app/plugins/datasource/opentsdb/queryCtrl.js
index 4f16983848f..44c8496ca8a 100644
--- a/public/app/plugins/datasource/opentsdb/queryCtrl.js
+++ b/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() {