Allow for multiple auto interval template variables (#9216)

* Allow for multiple auto interval template variables without them overwriting each other's value.

* Add test for multiple auto interval template variables.

* Correctly handle old links with .

public/app/features/templating/interval_variable.ts

@@ -5,6 +5,7 @@ import kbn from 'app/core/utils/kbn';
 import {Variable, assignModelProperties, variableTypes} from './variable';
 
 export class IntervalVariable implements Variable {
+  name: string;
   auto_count: number;
   auto_min: number;
   options: any;
@@ -50,10 +51,12 @@ export class IntervalVariable implements Variable {
 
     // add auto option if missing
     if (this.options.length && this.options[0].text !== 'auto') {
-      this.options.unshift({ text: 'auto', value: '$__auto_interval' });
+      this.options.unshift({ text: 'auto', value: '$__auto_interval_' + this.name });
     }
 
     var res = kbn.calculateInterval(this.timeSrv.timeRange(), this.auto_count, this.auto_min);
+    this.templateSrv.setGrafanaVariable('$__auto_interval_' + this.name, res.interval);
+    // for backward compatibility, to be removed eventually
     this.templateSrv.setGrafanaVariable('$__auto_interval', res.interval);
   }
 

public/app/features/templating/specs/template_srv.jest.ts

@@ -254,9 +254,9 @@ describe('templateSrv', function() {
     beforeEach(function() {
       initTemplateSrv([
         {type: 'query', name: 'server', current: { value: '{asd,asd2}', text: 'All' } },
-        {type: 'interval', name: 'period', current: { value: '$__auto_interval', text: 'auto' } }
+        {type: 'interval', name: 'period', current: { value: '$__auto_interval_interval', text: 'auto' } }
       ]);
-      _templateSrv.setGrafanaVariable('$__auto_interval', '13m');
+      _templateSrv.setGrafanaVariable('$__auto_interval_interval', '13m');
       _templateSrv.updateTemplateData();
     });
 

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

@@ -84,11 +84,19 @@ describe('VariableSrv', function() {
     it('should update options array', function() {
       expect(scenario.variable.options.length).to.be(5);
       expect(scenario.variable.options[0].text).to.be('auto');
-      expect(scenario.variable.options[0].value).to.be('$__auto_interval');
+      expect(scenario.variable.options[0].value).to.be('$__auto_interval_test');
     });
 
+    it('should set $__auto_interval_test', function() {
+      var call = ctx.templateSrv.setGrafanaVariable.firstCall;
+      expect(call.args[0]).to.be('$__auto_interval_test');
+      expect(call.args[1]).to.be('12h');
+    });
+
+    // updateAutoValue() gets called twice: once directly once via VariableSrv.validateVariableSelectionState()
+    // So use lastCall instead of a specific call number
     it('should set $__auto_interval', function() {
-      var call = ctx.templateSrv.setGrafanaVariable.getCall(0);
+      var call = ctx.templateSrv.setGrafanaVariable.lastCall;
       expect(call.args[0]).to.be('$__auto_interval');
       expect(call.args[1]).to.be('12h');
     });
@@ -395,4 +403,68 @@ describe('VariableSrv', function() {
         expect(scenario.variable.options[1].value).to.be('hop');
       });
     });
+
+    describe('multiple interval variables with auto', function() {
+      var variable1, variable2;
+
+      beforeEach(function() {
+        var range = {
+          from: moment(new Date()).subtract(7, 'days').toDate(),
+          to: new Date()
+        };
+        ctx.timeSrv.timeRange = sinon.stub().returns(range);
+        ctx.templateSrv.setGrafanaVariable = sinon.spy();
+
+        var variableModel1 = {type: 'interval', query: '1s,2h,5h,1d', name: 'variable1', auto: true, auto_count: 10 };
+        variable1 = ctx.variableSrv.createVariableFromModel(variableModel1);
+        ctx.variableSrv.addVariable(variable1);
+
+        var variableModel2 = {type: 'interval', query: '1s,2h,5h', name: 'variable2', auto: true, auto_count: 1000 };
+        variable2 = ctx.variableSrv.createVariableFromModel(variableModel2);
+        ctx.variableSrv.addVariable(variable2);
+
+        ctx.variableSrv.updateOptions(variable1);
+        ctx.variableSrv.updateOptions(variable2);
+        ctx.$rootScope.$digest();
+      });
+
+      it('should update options array', function() {
+        expect(variable1.options.length).to.be(5);
+        expect(variable1.options[0].text).to.be('auto');
+        expect(variable1.options[0].value).to.be('$__auto_interval_variable1');
+        expect(variable2.options.length).to.be(4);
+        expect(variable2.options[0].text).to.be('auto');
+        expect(variable2.options[0].value).to.be('$__auto_interval_variable2');
+      });
+
+      it('should correctly set $__auto_interval_variableX', function() {
+        var variable1Set, variable2Set, legacySet, unknownSet = false;
+        // updateAutoValue() gets called repeatedly: once directly once via VariableSrv.validateVariableSelectionState()
+        // So check that all calls are valid rather than expect a specific number and/or ordering of calls
+        for (var i = 0; i < ctx.templateSrv.setGrafanaVariable.callCount; i++) {
+          var call = ctx.templateSrv.setGrafanaVariable.getCall(i);
+          switch (call.args[0]) {
+            case '$__auto_interval_variable1':
+              expect(call.args[1]).to.be('12h');
+              variable1Set = true;
+              break;
+            case '$__auto_interval_variable2':
+              expect(call.args[1]).to.be('10m');
+              variable2Set = true;
+              break;
+            case '$__auto_interval':
+              expect(call.args[1]).to.match(/^(12h|10m)$/);
+              legacySet = true;
+              break;
+            default:
+              unknownSet = true;
+              break;
+          }
+        }
+        expect(variable1Set).to.be.equal(true);
+        expect(variable2Set).to.be.equal(true);
+        expect(legacySet).to.be.equal(true);
+        expect(unknownSet).to.be.equal(false);
+      });
+    });
 });