diff --git a/pkg/api/datasources.go b/pkg/api/datasources.go
index 52655556483..717211d438d 100644
--- a/pkg/api/datasources.go
+++ b/pkg/api/datasources.go
@@ -115,7 +115,7 @@ func GetDataSourcePlugins(c *middleware.Context) {
 	dsList := make(map[string]interface{})
 
 	for key, value := range plugins.DataSources {
-		if value.(map[string]interface{})["hide"] == nil {
+		if value.(map[string]interface{})["builtIn"] == nil {
 			dsList[key] = value
 		}
 	}
diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go
index 98f8ee338b9..4442f004b82 100644
--- a/pkg/api/frontendsettings.go
+++ b/pkg/api/frontendsettings.go
@@ -86,12 +86,13 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro
 
 	// add grafana backend data source
 	grafanaDatasourceMeta, _ := plugins.DataSources["grafana"]
-	datasources["grafana"] = map[string]interface{}{
+	datasources["-- Grafana --"] = map[string]interface{}{
 		"type": "grafana",
 		"meta": grafanaDatasourceMeta,
 	}
+
 	// add mixed backend data source
-	datasources["mixed"] = map[string]interface{}{
+	datasources["-- Mixed --"] = map[string]interface{}{
 		"type": "mixed",
 		"meta": plugins.DataSources["mixed"],
 	}
diff --git a/public/app/features/panel/panelSrv.js b/public/app/features/panel/panelSrv.js
index adb28031a4b..bf8c983c018 100644
--- a/public/app/features/panel/panelSrv.js
+++ b/public/app/features/panel/panelSrv.js
@@ -48,7 +48,7 @@ function (angular, _, config) {
         var target = {};
 
         if (datasource) {
-          target.datasource = datasource;
+          target.datasource = datasource.name;
         }
 
         target.refId = _.find(letters, function(refId) {
@@ -66,21 +66,24 @@ function (angular, _, config) {
       };
 
       $scope.setDatasource = function(datasource) {
-        $scope.panel.datasource = datasource;
+        // switching to mixed
+        if (datasource.meta.mixed) {
+          _.each($scope.panel.targets, function(target) {
+            target.datasource = $scope.panel.datasource;
+            if (target.datasource === null) {
+              target.datasource = config.defaultDatasource;
+            }
+          });
+        }
+        // switching from mixed
+        else if ($scope.datasource && $scope.datasource.meta.mixed) {
+          _.each($scope.panel.targets, function(target) {
+            delete target.datasource;
+          });
+        }
+
+        $scope.panel.datasource = datasource.value;
         $scope.datasource = null;
-        $scope.panel.targets = _.filter($scope.panel.targets, function(target) {
-          delete target.datasource;
-          return target.datasource === void 0;
-        });
-
-        if ($scope.panel.targets.length === 0) {
-          $scope.panel.targets = [{refId: 'A'}];
-        }
-
-        if (datasource === 'mixed') {
-          $scope.panel.targets = [];
-        }
-
         $scope.get_data();
       };
 
diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html
index 80ab429e950..dd7199c336c 100644
--- a/public/app/partials/metrics.html
+++ b/public/app/partials/metrics.html
@@ -6,23 +6,23 @@
 	</div>
 
 	<div style="margin: 20px 0 0 0">
-		<button class="btn btn-inverse" ng-click="addDataQuery(panel.target)" ng-if="datasource.meta.type !== 'mixed'">
+		<button class="btn btn-inverse" ng-click="addDataQuery()" ng-hide="datasource.meta.builtIn">
 			<i class="fa fa-plus"></i>&nbsp;
 			Query
 		</button>
 
-		<span class="dropdown" ng-if="datasource.meta.type === 'mixed'">
+		<div class="dropdown" ng-if="datasource.meta.builtIn">
 			<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
 				<i class="fa fa-plus"></i>&nbsp;
 				Query &nbsp; <span class="caret"></span>
 			</button>
 
 			<ul class="dropdown-menu" role="menu">
-				<li ng-repeat="datasource in datasources" role="menuitem">
-					<a ng-click="addDataQuery(datasource.name);">{{datasource.name}}</a>
+				<li ng-repeat="datasource in datasources" role="menuitem" ng-hide="datasource.meta.builtIn">
+					<a ng-click="addDataQuery(datasource);">{{datasource.name}}</a>
 				</li>
 			</ul>
-		</span>
+		</div>
 
 	</div>
 
diff --git a/public/app/plugins/datasource/grafana/plugin.json b/public/app/plugins/datasource/grafana/plugin.json
index 2baffb991eb..b32045b9ef8 100644
--- a/public/app/plugins/datasource/grafana/plugin.json
+++ b/public/app/plugins/datasource/grafana/plugin.json
@@ -1,7 +1,7 @@
 {
   "pluginType": "datasource",
-  "name": "Grafana (for testing)",
-  "hide": true,
+  "name": "Grafana",
+  "builtIn": true,
 
   "type": "grafana",
   "serviceName": "GrafanaDatasource",
diff --git a/public/app/plugins/datasource/graphite/plugin.json b/public/app/plugins/datasource/graphite/plugin.json
index d45c446f40f..dd69d847bd4 100644
--- a/public/app/plugins/datasource/graphite/plugin.json
+++ b/public/app/plugins/datasource/graphite/plugin.json
@@ -8,7 +8,7 @@
   "module": "plugins/datasource/graphite/datasource",
 
   "partials": {
-    "config": "app/plugins/datasource/graphite/partials/config.html",
+    "config": "app/plugins/datasource/graphite/partials/config.html"
   },
 
   "metrics": true,
diff --git a/public/app/plugins/datasource/influxdb/plugin.json b/public/app/plugins/datasource/influxdb/plugin.json
index 560b7cfb8f9..3511ed8c167 100644
--- a/public/app/plugins/datasource/influxdb/plugin.json
+++ b/public/app/plugins/datasource/influxdb/plugin.json
@@ -8,7 +8,7 @@
   "module": "plugins/datasource/influxdb/datasource",
 
   "partials": {
-    "config": "app/plugins/datasource/influxdb/partials/config.html",
+    "config": "app/plugins/datasource/influxdb/partials/config.html"
   },
 
   "metrics": true,
diff --git a/public/app/plugins/datasource/mixed/plugin.json b/public/app/plugins/datasource/mixed/plugin.json
index e9f99e6ead9..c8327d6e4fc 100644
--- a/public/app/plugins/datasource/mixed/plugin.json
+++ b/public/app/plugins/datasource/mixed/plugin.json
@@ -1,7 +1,8 @@
 {
   "pluginType": "datasource",
   "name": "Mixed datasource",
-  "hide": true,
+  "builtIn": true,
+  "mixed": true,
 
   "type": "mixed",
   "serviceName": "MixedDatasource",
diff --git a/public/app/plugins/datasource/opentsdb/datasource.js b/public/app/plugins/datasource/opentsdb/datasource.js
index b8786761beb..64f6afcdb62 100644
--- a/public/app/plugins/datasource/opentsdb/datasource.js
+++ b/public/app/plugins/datasource/opentsdb/datasource.js
@@ -3,6 +3,7 @@ define([
   'lodash',
   'kbn',
   'moment',
+  './directives',
   './queryCtrl',
 ],
 function (angular, _, kbn) {
diff --git a/public/app/services/datasourceSrv.js b/public/app/services/datasourceSrv.js
index 35256c9fe4f..644e84e8801 100644
--- a/public/app/services/datasourceSrv.js
+++ b/public/app/services/datasourceSrv.js
@@ -20,13 +20,24 @@ function (angular, _, config) {
         if (value.meta && value.meta.metrics) {
           self.metricSources.push({
             value: key === config.defaultDatasource ? null : key,
-            name: key
+            name: key,
+            meta: value.meta,
           });
         }
         if (value.meta && value.meta.annotations) {
           self.annotationSources.push(value);
         }
       });
+
+      this.metricSources.sort(function(a, b) {
+        if (a.meta.builtIn || a.name > b.name) {
+          return 1;
+        }
+        if (a.name < b.name) {
+          return -1;
+        }
+        return 0;
+      });
     };
 
     this.get = function(name) {
diff --git a/public/vendor/bootstrap/less/bootstrap.less b/public/vendor/bootstrap/less/bootstrap.less
index 79621cebf4c..9529c54cda4 100644
--- a/public/vendor/bootstrap/less/bootstrap.less
+++ b/public/vendor/bootstrap/less/bootstrap.less
@@ -32,7 +32,7 @@
 
 // Components: Buttons & Alerts
 @import "buttons.less";
-// @import "button-groups.less";
+@import "button-groups.less";
 @import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
 
 // Components: Nav