diff --git a/public/app/core/services/datasource_srv.js b/public/app/core/services/datasource_srv.js
index 07e3f004d45..e5fe9627bcc 100644
--- a/public/app/core/services/datasource_srv.js
+++ b/public/app/core/services/datasource_srv.js
@@ -7,36 +7,11 @@ define([
 function (angular, _, coreModule, config) {
   'use strict';
 
-  coreModule.default.service('datasourceSrv', function($q, $injector, $rootScope) {
+  coreModule.default.service('datasourceSrv', function($q, $injector, $rootScope, templateSrv) {
     var self = this;
 
     this.init = function() {
       this.datasources = {};
-      this.metricSources = [];
-      this.annotationSources = [];
-
-      _.each(config.datasources, function(value, key) {
-        if (value.meta && value.meta.metrics) {
-          self.metricSources.push({
-            value: key === config.defaultDatasource ? null : 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) {
@@ -44,6 +19,8 @@ function (angular, _, coreModule, config) {
         return this.get(config.defaultDatasource);
       }
 
+      name = templateSrv.replace(name);
+
       if (this.datasources[name]) {
         return $q.when(this.datasources[name]);
       }
@@ -89,11 +66,61 @@ function (angular, _, coreModule, config) {
     };
 
     this.getAnnotationSources = function() {
-      return this.annotationSources;
+      return _.reduce(config.datasources, function(memo, key, value) {
+
+        if (value.meta && value.meta.annotations) {
+          memo.push(value);
+        }
+
+        return memo;
+      }, []);
     };
 
-    this.getMetricSources = function() {
-      return this.metricSources;
+    this.getMetricSources = function(options) {
+      var metricSources = [];
+
+      _.each(config.datasources, function(value, key) {
+        if (value.meta && value.meta.metrics) {
+          metricSources.push({
+            value: key === config.defaultDatasource ? null : key,
+            name: key,
+            meta: value.meta,
+          });
+        }
+      });
+
+      if (!options || !options.skipVariables) {
+        // look for data source variables
+        for (var i = 0; i < templateSrv.variables.length; i++) {
+          var variable = templateSrv.variables[i];
+          if (variable.type !== 'datasource') {
+            continue;
+          }
+
+          var first = variable.current.value;
+          var ds = config.datasources[first];
+
+          if (ds) {
+            metricSources.push({
+              name: '[[' + variable.name + ']]',
+              value: '[[' + variable.name + ']]',
+              meta: ds.meta,
+            });
+          }
+        }
+      }
+
+      metricSources.sort(function(a, b) {
+        if (a.meta.builtIn || a.name > b.name) {
+          return 1;
+        }
+        if (a.name < b.name) {
+          return -1;
+        }
+        return 0;
+      });
+
+      return metricSources;
     };
 
     this.init();
diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts
index e8c16fd9ab7..ea6a49a753c 100644
--- a/public/app/features/panel/metrics_panel_ctrl.ts
+++ b/public/app/features/panel/metrics_panel_ctrl.ts
@@ -15,6 +15,7 @@ class MetricsPanelCtrl extends PanelCtrl {
   error: boolean;
   loading: boolean;
   datasource: any;
+  datasourceName: any;
   $q: any;
   $timeout: any;
   datasourceSrv: any;
@@ -53,6 +54,12 @@ class MetricsPanelCtrl extends PanelCtrl {
     this.addEditorTab('Metrics', 'public/app/partials/metrics.html');
     this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html');
     this.datasources = this.datasourceSrv.getMetricSources();
+
+    // find current
+    var current = _.findWhere(this.datasources, {value: this.panel.datasource});
+    if (current) {
+      this.datasourceName = current.name;
+    }
   }
 
   private onMetricsPanelRefresh() {
@@ -246,6 +253,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     }
 
     this.panel.datasource = datasource.value;
+    this.datasourceName = datasource.name;
     this.datasource = null;
     this.refresh();
   }
diff --git a/public/app/features/templating/templateValuesSrv.js b/public/app/features/templating/templateValuesSrv.js
index 8cbaf306a11..97c3e9a4738 100644
--- a/public/app/features/templating/templateValuesSrv.js
+++ b/public/app/features/templating/templateValuesSrv.js
@@ -179,7 +179,7 @@ function (angular, _, kbn) {
 
     this.updateDataSourceVariable = function(variable) {
       var options = [];
-      var sources = datasourceSrv.getMetricSources();
+      var sources = datasourceSrv.getMetricSources({skipVariables: true});
       var regex;
 
       if (variable.regex) {
diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html
index 7297d415c25..795183230cc 100644
--- a/public/app/partials/metrics.html
+++ b/public/app/partials/metrics.html
@@ -42,7 +42,7 @@
 	<div class="pull-right dropdown" style="margin-right: 10px;">
 		<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" bs-tooltip="'Datasource'">
 			<i class="fa fa-database"></i>&nbsp;
-			{{ctrl.datasource.name}} &nbsp; <span class="caret"></span>
+			{{ctrl.datasourceName}} &nbsp; <span class="fa fa-caret-down"></span>
 		</button>
 
 		<ul class="dropdown-menu" role="menu">