Templating: Dashboard will now wait to load until all template variables that have refresh on load set or are initialized via url to be fully loaded and so all variables are in valid state before panels start issuing metric requests. Closes #1255

CHANGELOG.md

@@ -16,6 +16,7 @@
 - [Issue #1321](https://github.com/grafana/grafana/issues/1321). SingleStatPanel: You can now use template variables in pre & postfix
 - [Issue #599](https://github.com/grafana/grafana/issues/599).   Graph: Added right y axis label setting and graph support
 - [Issue #1253](https://github.com/grafana/grafana/issues/1253). Graph & Singlestat: Users can now set decimal precision for legend and tooltips (override auto precision)
+- [Issue #1255](https://github.com/grafana/grafana/issues/1255). Templating: Dashboard will now wait to load until all template variables that have refresh on load set or are initialized via url to be fully loaded and so all variables are in valid state before panels start issuing metric requests.
 
 **Fixes**
 - [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query

pkg/api/dataproxy.go

@@ -44,7 +44,7 @@ func NewReverseProxy(ds *m.DataSource, proxyPath string) *httputil.ReverseProxy
 	return &httputil.ReverseProxy{Director: director}
 }
 
-// TODO: need to cache datasources
+//ProxyDataSourceRequest TODO need to cache datasources
 func ProxyDataSourceRequest(c *middleware.Context) {
 	id := c.ParamsInt64(":id")
 	query := m.GetDataSourceByIdQuery{Id: id, OrgId: c.OrgId}

src/app/features/dashboard/dashboardCtrl.js

@@ -31,25 +31,30 @@ function (angular, $, config) {
       $scope.setupDashboard(dashboard);
     };
 
-    $scope.setupDashboard = function(dashboard) {
+    $scope.setupDashboard = function(data) {
       $rootScope.performance.dashboardLoadStart = new Date().getTime();
       $rootScope.performance.panelsInitialized = 0;
       $rootScope.performance.panelsRendered = 0;
 
-      $scope.dashboard = dashboardSrv.create(dashboard.model);
-      $scope.dashboardViewState = dashboardViewStateSrv.create($scope);
-      $scope.dashboardMeta = dashboard.meta;
+      var dashboard = dashboardSrv.create(data.model);
 
       // init services
-      timeSrv.init($scope.dashboard);
-      templateValuesSrv.init($scope.dashboard, $scope.dashboardViewState);
+      timeSrv.init(dashboard);
 
-      dashboardKeybindings.shortcuts($scope);
+      // template values service needs to initialize completely before
+      // the rest of the dashboard can load
+      templateValuesSrv.init(dashboard).then(function() {
+        $scope.dashboard = dashboard;
+        $scope.dashboardViewState = dashboardViewStateSrv.create($scope);
+        $scope.dashboardMeta = data.meta;
 
-      $scope.updateSubmenuVisibility();
-      $scope.setWindowTitleAndTheme();
+        dashboardKeybindings.shortcuts($scope);
 
-      $scope.appEvent("dashboard-loaded", $scope.dashboard);
+        $scope.updateSubmenuVisibility();
+        $scope.setWindowTitleAndTheme();
+
+        $scope.appEvent("dashboard-loaded", $scope.dashboard);
+      });
     };
 
     $scope.updateSubmenuVisibility = function() {

src/app/features/templating/templateValuesSrv.js

@@ -8,7 +8,7 @@ function (angular, _, kbn) {
 
   var module = angular.module('grafana.services');
 
-  module.service('templateValuesSrv', function($q, $rootScope, datasourceSrv, $routeParams, templateSrv, timeSrv) {
+  module.service('templateValuesSrv', function($q, $rootScope, datasourceSrv, $location, templateSrv, timeSrv) {
     var self = this;
 
     $rootScope.onAppEvent('time-range-changed', function()  {
@@ -18,27 +18,34 @@ function (angular, _, kbn) {
       }
     });
 
-    this.init = function(dashboard, viewstate) {
+    this.init = function(dashboard) {
       this.variables = dashboard.templating.list;
-      this.viewstate = viewstate;
       templateSrv.init(this.variables);
 
+      var queryParams = $location.search();
+      var promises = [];
+
       for (var i = 0; i < this.variables.length; i++) {
         var variable = this.variables[i];
-        var urlValue = viewstate.state['var-' + variable.name];
+        var urlValue = queryParams['var-' + variable.name];
         if (urlValue !== void 0) {
           var option = _.findWhere(variable.options, { text: urlValue });
           option = option || { text: urlValue, value: urlValue };
-          this.setVariableValue(variable, option, true);
+
+          var promise = this.setVariableValue(variable, option, true);
           this.updateAutoInterval(variable);
+
+          promises.push(promise);
         }
         else if (variable.refresh) {
-          this.updateOptions(variable);
+          promises.push(this.updateOptions(variable));
         }
         else if (variable.type === 'interval') {
           this.updateAutoInterval(variable);
         }
       }
+
+      return $q.all(promises);
     };
 
     this.updateAutoInterval = function(variable) {

src/app/partials/submenu.html

@@ -4,7 +4,7 @@
 
 		<ul class="tight-form-list" ng-if="dashboard.templating.list.length > 0">
 			<li class="tight-form-item">
-				<strong>Variables:</strong>
+				<strong>VARIABLES:</strong>
 			</li>
 			<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
 				<span class="template-variable ">
@@ -21,7 +21,7 @@
 
 		<ul class="tight-form-list" ng-if="dashboard.annotations.list.length > 0">
 			<li class="tight-form-item">
-				<strong>Annotations:</strong>
+				<strong>ANNOTATIONS:</strong>
 			</li>
 			<li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
 				<a ng-click="disableAnnotation(annotation)">