Templating: A way to support object syntax for global vars (#21634)

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

@@ -31,6 +31,14 @@ describe('templateSrv', () => {
       expect(target).toBe('Server1 nested');
     });
 
+    it('built in vars should support objects', () => {
+      _templateSrv.setGlobalVariable('__dashboard', {
+        value: { name: 'hello' },
+      });
+      const target = _templateSrv.replace('${__dashboard.name}');
+      expect(target).toBe('hello');
+    });
+
     it('scoped vars should support objects with propert names with dot', () => {
       const target = _templateSrv.replace('${series.name} ${series.nested["field.with.dot"]}', {
         series: { value: { name: 'Server1', nested: { 'field.with.dot': 'nested' } } },

public/app/features/templating/template_srv.ts

@@ -195,6 +195,15 @@ export class TemplateSrv {
     this.grafanaVariables[name] = value;
   }
 
+  setGlobalVariable(name: string, variable: any) {
+    this.index = {
+      ...this.index,
+      [name]: {
+        current: variable,
+      },
+    };
+  }
+
   getVariableName(expression: string) {
     this.regex.lastIndex = 0;
     const match = this.regex.exec(expression);
@@ -295,6 +304,15 @@ export class TemplateSrv {
         }
       }
 
+      if (fieldPath) {
+        const fieldValue = this.getVariableValue(variableName, fieldPath, {
+          [variableName]: { value: value, text: '' },
+        });
+        if (fieldValue !== null && fieldValue !== undefined) {
+          return this.formatValue(fieldValue, fmt, variable);
+        }
+      }
+
       const res = this.formatValue(value, fmt, variable);
       return res;
     });