Merge pull request #12395 from grafana/11968_variable_key_value

Set correct text in drop down when variable is present in url

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

@@ -179,4 +179,38 @@ describe('VariableSrv init', function() {
       expect(variable.options[2].selected).to.be(false);
     });
   });
+
+  describeInitScenario('when template variable is present in url multiple times using key/values', scenario => {
+    scenario.setup(() => {
+      scenario.variables = [
+        {
+          name: 'apps',
+          type: 'query',
+          multi: true,
+          current: { text: 'Val1', value: 'val1' },
+          options: [
+            { text: 'Val1', value: 'val1' },
+            { text: 'Val2', value: 'val2' },
+            { text: 'Val3', value: 'val3', selected: true },
+          ],
+        },
+      ];
+      scenario.urlParams['var-apps'] = ['val2', 'val1'];
+    });
+
+    it('should update current value', function() {
+      var variable = ctx.variableSrv.variables[0];
+      expect(variable.current.value.length).to.be(2);
+      expect(variable.current.value[0]).to.be('val2');
+      expect(variable.current.value[1]).to.be('val1');
+      expect(variable.current.text).to.be('Val2 + Val1');
+      expect(variable.options[0].selected).to.be(true);
+      expect(variable.options[1].selected).to.be(true);
+    });
+
+    it('should set options that are not in value to selected false', function() {
+      var variable = ctx.variableSrv.variables[0];
+      expect(variable.options[2].selected).to.be(false);
+    });
+  });
 });

public/app/features/templating/variable_srv.ts

@@ -209,7 +209,24 @@ export class VariableSrv {
         return op.text === urlValue || op.value === urlValue;
       });
 
-      option = option || { text: urlValue, value: urlValue };
+      let defaultText = urlValue;
+      let defaultValue = urlValue;
+
+      if (!option && _.isArray(urlValue)) {
+        defaultText = [];
+
+        for (let n = 0; n < urlValue.length; n++) {
+          let t = _.find(variable.options, op => {
+            return op.value === urlValue[n];
+          });
+
+          if (t) {
+            defaultText.push(t.text);
+          }
+        }
+      }
+
+      option = option || { text: defaultText, value: defaultValue };
       return variable.setValue(option);
     });
   }