fix(templating): fixed issue when adding template variable, fixes #6622

CHANGELOG.md

@@ -5,6 +5,7 @@
 * **Graph Panel**: Bar width if bars was only used in series override, [#6528](https://github.com/grafana/grafana/issues/6528)
 * **UI/Browser**: Fixed issue with page/view header gradient border not showing in Safari, [#6530](https://github.com/grafana/grafana/issues/6530)
 * **UX**: Panel Drop zone visible after duplicating panel, and when entering fullscreen/edit view, [#6598](https://github.com/grafana/grafana/issues/6598)
+* **Templating**: Newly added variable was not visible directly only after dashboard reload, [#6622](https://github.com/grafana/grafana/issues/6622)
 
 ### Enhancements
 * **Singlestat**: Support repeated template variables in prefix/postfix [#6595](https://github.com/grafana/grafana/issues/6595)

public/app/features/dashboard/model.ts

@@ -98,12 +98,14 @@ export class DashboardModel {
     var events = this.events;
     var meta = this.meta;
     var rows = this.rows;
+    var variables = this.templating.list;
+
     delete this.events;
     delete this.meta;
 
     // prepare save model
-    this.rows = _.map(this.rows, row => row.getSaveModel());
-    events.emit('prepare-save-model');
+    this.rows = _.map(rows, row => row.getSaveModel());
+    this.templating.list = _.map(variables, variable => variable.getSaveModel());
 
     var copy = $.extend(true, {}, this);
 
@@ -111,6 +113,8 @@ export class DashboardModel {
     this.events = events;
     this.meta = meta;
     this.rows = rows;
+    this.templating.list = variables;
+
     return copy;
   }
 

public/app/features/templating/adhoc_variable.ts

@@ -26,7 +26,7 @@ export class AdhocVariable implements Variable {
     return Promise.resolve();
   }
 
-  getModel() {
+  getSaveModel() {
     assignModelProperties(this.model, this, this.defaults);
     return this.model;
   }

public/app/features/templating/constant_variable.ts

@@ -24,7 +24,7 @@ export class ConstantVariable implements Variable {
     assignModelProperties(this, model, this.defaults);
   }
 
-  getModel() {
+  getSaveModel() {
     assignModelProperties(this.model, this, this.defaults);
     return this.model;
   }

public/app/features/templating/custom_variable.ts

@@ -34,7 +34,7 @@ export class CustomVariable implements Variable {
     return this.variableSrv.setOptionAsCurrent(this, option);
   }
 
-  getModel() {
+  getSaveModel() {
     assignModelProperties(this.model, this, this.defaults);
     return this.model;
   }

public/app/features/templating/datasource_variable.ts

@@ -30,7 +30,7 @@ export class DatasourceVariable implements Variable {
     this.refresh = 1;
   }
 
-  getModel() {
+  getSaveModel() {
     assignModelProperties(this.model, this, this.defaults);
     return this.model;
   }

public/app/features/templating/interval_variable.ts

@@ -34,7 +34,7 @@ export class IntervalVariable implements Variable {
     this.refresh = 2;
   }
 
-  getModel() {
+  getSaveModel() {
     assignModelProperties(this.model, this, this.defaults);
     return this.model;
   }

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

@@ -136,7 +136,7 @@
 			<div ng-if="current.type === 'custom'" class="gf-form-group">
         <h5 class="section-heading">Custom Options</h5>
 				<div class="gf-form">
-					<span class="gf-form-label width-13">Values separated by comma</span>
+					<span class="gf-form-label width-14">Values separated by comma</span>
 					<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue" required></input>
 				</div>
 			</div>

public/app/features/templating/query_variable.ts

@@ -47,7 +47,7 @@ export class QueryVariable implements Variable {
     assignModelProperties(this, model, this.defaults);
   }
 
-  getModel() {
+  getSaveModel() {
     // copy back model properties to model
     assignModelProperties(this.model, this, this.defaults);
     return this.model;

public/app/features/templating/specs/query_variable_specs.ts

@@ -25,7 +25,7 @@ describe('QueryVariable', function() {
       variable.regex = 'asd';
       variable.sort = 50;
 
-      var model = variable.getModel();
+      var model = variable.getSaveModel();
       expect(model.options.length).to.be(1);
       expect(model.options[0].text).to.be('test');
       expect(model.datasource).to.be('google');

public/app/features/templating/variable.ts

@@ -10,7 +10,7 @@ export interface Variable {
   dependsOn(variable);
   setValueFromUrl(urlValue);
   getValueForUrl();
-  getModel();
+  getSaveModel();
 }
 
 export var variableTypes = {};

public/app/features/templating/variable_srv.ts

@@ -20,12 +20,9 @@ export class VariableSrv {
     this.dashboard = dashboard;
 
     // create working class models representing variables
-    this.variables = dashboard.templating.list.map(this.createVariableFromModel.bind(this));
+    this.variables = dashboard.templating.list = dashboard.templating.list.map(this.createVariableFromModel.bind(this));
     this.templateSrv.init(this.variables);
 
-    // register event to sync back to persisted model
-    this.dashboard.events.on('prepare-save-model', this.syncToDashboardModel.bind(this));
-
     // init variables
     for (let variable of this.variables) {
       variable.initLock = this.$q.defer();
@@ -99,12 +96,6 @@ export class VariableSrv {
     return variable;
   }
 
-  syncToDashboardModel() {
-    this.dashboard.templating.list = this.variables.map(variable => {
-      return variable.getModel();
-    });
-  }
-
   updateOptions(variable) {
     return variable.updateOptions();
   }