Merge pull request #12765 from cxcv/master

added percentencode formatting option

docs/sources/reference/templating.md

@@ -52,6 +52,7 @@ Filter Option | Example | Raw | Interpolated | Description
 `csv`| ${servers:csv} |  `'test1', 'test2'` | `test1,test2` | Formats multi-value variable as a comma-separated string
 `csv`| ${servers:csv} |  `'test1', 'test2'` | `test1,test2` | Formats multi-value variable as a comma-separated string
 `distributed`| ${servers:distributed} | `'test1', 'test2'` | `test1,servers=test2` | Formats multi-value variable in custom format for OpenTSDB.
 `distributed`| ${servers:distributed} | `'test1', 'test2'` | `test1,servers=test2` | Formats multi-value variable in custom format for OpenTSDB.
 `lucene`| ${servers:lucene} | `'test', 'test2'` | `("test" OR "test2")` | Formats multi-value variable as a lucene expression.
 `lucene`| ${servers:lucene} | `'test', 'test2'` | `("test" OR "test2")` | Formats multi-value variable as a lucene expression.
+`percentencode` | ${servers:percentencode} |  `'foo()bar BAZ', 'test2'` | `{foo%28%29bar%20BAZ%2Ctest2}` | Formats multi-value variable into a glob, percent-encoded.
 
 
 Test the formatting options on the [Grafana Play site](http://play.grafana.org/d/cJtIfcWiz/template-variable-formatting-options?orgId=1).
 Test the formatting options on the [Grafana Play site](http://play.grafana.org/d/cJtIfcWiz/template-variable-formatting-options?orgId=1).
 
 

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

@@ -275,6 +275,11 @@ describe('templateSrv', () => {
       expect(result).toBe('test,test2');
       expect(result).toBe('test,test2');
     });
     });
 
 
+    it('multi value and percentencode format should render percent-encoded string', () => {
+      const result = _templateSrv.formatValue(['foo()bar BAZ', 'test2'], 'percentencode');
+      expect(result).toBe('%7Bfoo%28%29bar%20BAZ%2Ctest2%7D');
+    });
+
     it('slash should be properly escaped in regex format', () => {
     it('slash should be properly escaped in regex format', () => {
       const result = _templateSrv.formatValue('Gi3/14', 'regex');
       const result = _templateSrv.formatValue('Gi3/14', 'regex');
       expect(result).toBe('Gi3\\/14');
       expect(result).toBe('Gi3\\/14');

public/app/features/templating/template_srv.ts

@@ -77,6 +77,15 @@ export class TemplateSrv {
     return '(' + quotedValues.join(' OR ') + ')';
     return '(' + quotedValues.join(' OR ') + ')';
   }
   }
 
 
+  // encode string according to RFC 3986; in contrast to encodeURIComponent()
+  // also the sub-delims "!", "'", "(", ")" and "*" are encoded;
+  // unicode handling uses UTF-8 as in ECMA-262.
+  encodeURIComponentStrict(str) {
+    return encodeURIComponent(str).replace(/[!'()*]/g, (c) => {
+      return '%' + c.charCodeAt(0).toString(16).toUpperCase();
+    });
+  }
+
   formatValue(value, format, variable) {
   formatValue(value, format, variable) {
     // for some scopedVars there is no variable
     // for some scopedVars there is no variable
     variable = variable || {};
     variable = variable || {};
@@ -118,6 +127,13 @@ export class TemplateSrv {
         }
         }
         return value;
         return value;
       }
       }
+      case 'percentencode': {
+        // like glob, but url escaped
+        if (_.isArray(value)) {
+          return this.encodeURIComponentStrict('{' + value.join(',') + '}');
+        }
+        return this.encodeURIComponentStrict(value);
+      }
       default: {
       default: {
         if (_.isArray(value)) {
         if (_.isArray(value)) {
           return '{' + value.join(',') + '}';
           return '{' + value.join(',') + '}';