fix: templating issue with data source variables, can now be used right away in…

fix: templating issue with data source variables, can now be used right away in other query variables and panels (without page reload), fixes #7510

public/app/core/services/datasource_srv.js

@@ -129,6 +129,10 @@ function (angular, _, coreModule, config) {
         }
         }
 
 
         var first = variable.current.value;
         var first = variable.current.value;
+        if (first === 'default') {
+          first = config.defaultDatasource;
+        }
+
         var ds = config.datasources[first];
         var ds = config.datasources[first];
 
 
         if (ds) {
         if (ds) {

public/app/features/templating/editor_ctrl.ts

@@ -35,14 +35,6 @@ export class VariableEditorCtrl {
     $scope.init = function() {
     $scope.init = function() {
       $scope.mode = 'list';
       $scope.mode = 'list';
 
 
-      $scope.datasources = _.filter(datasourceSrv.getMetricSources(), function(ds) {
-        return !ds.meta.mixed && ds.value !== null;
-      });
-
-      $scope.datasourceTypes = _($scope.datasources).uniqBy('meta.id').map(function(ds) {
-        return {text: ds.meta.name, value: ds.meta.id};
-      }).value();
-
       $scope.variables = variableSrv.variables;
       $scope.variables = variableSrv.variables;
       $scope.reset();
       $scope.reset();
 
 
@@ -130,6 +122,15 @@ export class VariableEditorCtrl {
     $scope.reset = function() {
     $scope.reset = function() {
       $scope.currentIsNew = true;
       $scope.currentIsNew = true;
       $scope.current = variableSrv.createVariableFromModel({type: 'query'});
       $scope.current = variableSrv.createVariableFromModel({type: 'query'});
+
+      // this is done here in case a new data source type variable was added
+      $scope.datasources = _.filter(datasourceSrv.getMetricSources(), function(ds) {
+        return !ds.meta.mixed && ds.value !== null;
+      });
+
+      $scope.datasourceTypes = _($scope.datasources).uniqBy('meta.id').map(function(ds) {
+        return {text: ds.meta.name, value: ds.meta.id};
+      }).value();
     };
     };
 
 
     $scope.typeChanged = function() {
     $scope.typeChanged = function() {