feat(templating): refactoring template variable handling for variables that…

feat(templating): refactoring template variable handling for variables that change on time refresh, closes #5021

CHANGELOG.md

@@ -4,6 +4,7 @@
 * **Login**: Adds option to disable username/password logins, closes [#4674](https://github.com/grafana/grafana/issues/4674)
 * **SingleStat**: Add seriename as option in singlestat panel, closes [#4740](https://github.com/grafana/grafana/issues/4740)
 * **Localization**: Week start day now dependant on browser locale setting, closes [#3003](https://github.com/grafana/grafana/issues/3003)
+* **Templating**: Update panel repeats for variables that change on time refresh, closes [#5021](https://github.com/grafana/grafana/issues/5021)
 
 # 3.1.0 stable (unreleased)
 

public/app/features/dashboard/dashboard_ctrl.ts

@@ -87,6 +87,7 @@ export class DashboardCtrl {
       };
 
       $scope.templateVariableUpdated = function() {
+        console.log('dynamic update');
         dynamicDashboardSrv.update($scope.dashboard);
       };
 

public/app/features/templating/partials/editor.html

@@ -20,7 +20,7 @@
 			</li>
 		</ul>
 
-		<button class="tabbed-view-close-btn" ng-click="dismiss();dashboard.refresh();">
+		<button class="tabbed-view-close-btn" ng-click="dismiss();">
 			<i class="fa fa-remove"></i>
 		</button>
 	</div>

public/app/features/templating/templateValuesSrv.js

 define([
   'angular',
   'lodash',
+  'jquery',
   'app/core/utils/kbn',
 ],
-function (angular, _, kbn) {
+function (angular, _, $, kbn) {
   'use strict';
 
   var module = angular.module('grafana.services');
 
-  module.service('templateValuesSrv', function($q, $rootScope, datasourceSrv, $location, templateSrv, timeSrv, dynamicDashboardSrv) {
+  module.service('templateValuesSrv', function($q, $rootScope, datasourceSrv, $location, templateSrv, timeSrv) {
     var self = this;
 
     function getNoneOption() { return { text: 'None', value: '', isNone: true }; }
@@ -27,14 +28,13 @@ function (angular, _, kbn) {
         .filter(function(variable) {
           return variable.refresh === 2;
         }).map(function(variable) {
-          var previousVariable = angular.copy(variable);
+          var previousOptions = variable.options.slice();
+
           return self.updateOptions(variable).then(function () {
             return self.variableUpdated(variable).then(function () {
-              var updatedVariable = angular.copy(variable);
-              delete(updatedVariable.$$hashKey);
-              if (JSON.stringify(previousVariable) !== JSON.stringify(updatedVariable)) {
-                dynamicDashboardSrv.update(self.dashboard);
-                $rootScope.$emit('template-variable-value-updated');
+              // check if current options changed due to refresh
+              if (angular.toJson(previousOptions) !== angular.toJson(variable.options)) {
+                $rootScope.appEvent('template-variable-value-updated');
               }
             });
           });