feat(dashboard): template variable changes updates url, closes #5002

CHANGELOG.md

 # 3.1.0 (unreleased)
 # 3.1.0 (unreleased)
 
 
 ### Enhancements
 ### Enhancements
+* **Dashboard Url**: Time range changes updates url, closes [#458](https://github.com/grafana/grafana/issues/458)
+* **Dashboard Url**: Template variable change updates url, closes [#5002](https://github.com/grafana/grafana/issues/5002)
 * **Singlestat**: Add support for range to text mappings, closes [#1319](https://github.com/grafana/grafana/issues/1319)
 * **Singlestat**: Add support for range to text mappings, closes [#1319](https://github.com/grafana/grafana/issues/1319)
 * **Graph**: Adds sort order options for graph tooltip, closes  [#1189](https://github.com/grafana/grafana/issues/1189)
 * **Graph**: Adds sort order options for graph tooltip, closes  [#1189](https://github.com/grafana/grafana/issues/1189)
 * **Theme**: Add default theme to config file [#5011](https://github.com/grafana/grafana/pull/5011)
 * **Theme**: Add default theme to config file [#5011](https://github.com/grafana/grafana/pull/5011)

public/app/features/dashboard/submenu/submenu.ts

 ///<reference path="../../../headers/common.d.ts" />
 ///<reference path="../../../headers/common.d.ts" />
 
 
 import angular from 'angular';
 import angular from 'angular';
+import _ from 'lodash';
 
 
 export class SubmenuCtrl {
 export class SubmenuCtrl {
   annotations: any;
   annotations: any;
@@ -8,7 +9,11 @@ export class SubmenuCtrl {
   dashboard: any;
   dashboard: any;
 
 
   /** @ngInject */
   /** @ngInject */
-  constructor(private $rootScope, private templateValuesSrv, private dynamicDashboardSrv) {
+  constructor(private $rootScope,
+              private templateValuesSrv,
+              private templateSrv,
+              private dynamicDashboardSrv,
+              private $location) {
     this.annotations = this.dashboard.templating.list;
     this.annotations = this.dashboard.templating.list;
     this.variables = this.dashboard.templating.list;
     this.variables = this.dashboard.templating.list;
   }
   }
@@ -22,8 +27,25 @@ export class SubmenuCtrl {
     return this.templateValuesSrv.getValuesForTag(variable, tagKey);
     return this.templateValuesSrv.getValuesForTag(variable, tagKey);
   }
   }
 
 
+  updateUrlParamsWithCurrentVariables() {
+    // update url
+    var params = this.$location.search();
+    // remove variable params
+    _.each(params, function(value, key) {
+      if (key.indexOf('var-') === 0) {
+        delete params[key];
+      }
+    });
+
+    // add new values
+    this.templateSrv.fillVariableValuesForUrl(params);
+    // update url
+    this.$location.search(params);
+  }
+
   variableUpdated(variable) {
   variableUpdated(variable) {
     this.templateValuesSrv.variableUpdated(variable).then(() => {
     this.templateValuesSrv.variableUpdated(variable).then(() => {
+      this.updateUrlParamsWithCurrentVariables();
       this.dynamicDashboardSrv.update(this.dashboard);
       this.dynamicDashboardSrv.update(this.dashboard);
       this.$rootScope.$emit('template-variable-value-updated');
       this.$rootScope.$emit('template-variable-value-updated');
       this.$rootScope.$broadcast('refresh');
       this.$rootScope.$broadcast('refresh');

public/app/features/templating/templateValuesSrv.js

@@ -79,7 +79,6 @@ function (angular, _, kbn) {
         else if (variable.refresh === 1 || variable.refresh === 2) {
         else if (variable.refresh === 1 || variable.refresh === 2) {
           return self.updateOptions(variable).then(function() {
           return self.updateOptions(variable).then(function() {
             if (_.isEmpty(variable.current) && variable.options.length) {
             if (_.isEmpty(variable.current) && variable.options.length) {
-              console.log("setting current for %s", variable.name);
               self.setVariableValue(variable, variable.options[0]);
               self.setVariableValue(variable, variable.options[0]);
             }
             }
             lock.resolve();
             lock.resolve();
@@ -102,7 +101,10 @@ function (angular, _, kbn) {
       }
       }
 
 
       return promise.then(function() {
       return promise.then(function() {
-        var option = _.findWhere(variable.options, { text: urlValue });
+        var option = _.find(variable.options, function(op) {
+          return op.text === urlValue || op.value === urlValue;
+        });
+
         option = option || { text: urlValue, value: urlValue };
         option = option || { text: urlValue, value: urlValue };
 
 
         self.updateAutoInterval(variable);
         self.updateAutoInterval(variable);