Variables: Add support for `$__timezone` template variable (#66785)

Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>

docs/sources/dashboards/variables/add-template-variables/index.md

@@ -315,6 +315,12 @@ This is used in several places, including:
 - SQL queries in MySQL, Postgres, and MSSQL.
 - The `$__timeFilter` variable is used in the MySQL data source.
 
+### $\_\_timezone
+
+The `$__timezone` variable returns the currently selected time zone, either `utc` or an entry of the IANA time zone database (for example, `America/New_York`).
+
+If the currently selected time zone is _Browser Time_, Grafana will try to determine your browser time zone.
+
 ## Chained variables
 
 _Chained variables_, also called _linked variables_ or _nested variables_, are query variables with one or more other variables in their variable query. This section explains how chained variables work and provides links to example dashboards that use chained variables.

public/app/features/templating/macroRegistry.test.ts

@@ -3,7 +3,8 @@ import { initTemplateSrv } from 'test/helpers/initTemplateSrv';
 import { DataLinkBuiltInVars } from '@grafana/data';
 import { getTemplateSrv, setTemplateSrv } from '@grafana/runtime';
 
-import { setTimeSrv } from '../dashboard/services/TimeSrv';
+import { setTimeSrv, TimeSrv } from '../dashboard/services/TimeSrv';
+import { TimeModel } from '../dashboard/state/TimeModel';
 import { variableAdapters } from '../variables/adapters';
 import { createQueryVariableAdapter } from '../variables/query/adapter';
 
@@ -52,3 +53,18 @@ describe('__url_time_range', () => {
     expect(out).toBe('/d/1?from=1607687293000&to=1607687293100');
   });
 });
+
+describe('__timezone', () => {
+  beforeAll(() => {
+    setTimeSrv({
+      timeModel: {
+        getTimezone: () => 'Pacific/Noumea',
+      } as TimeModel,
+    } as TimeSrv);
+  });
+
+  it('should interpolate to time zone', () => {
+    const out = getTemplateSrv().replace(`TIMEZONE('$__timezone', '2023-04-19 00:00:00')`);
+    expect(out).toBe(`TIMEZONE('Pacific/Noumea', '2023-04-19 00:00:00')`);
+  });
+});

public/app/features/templating/macroRegistry.ts

@@ -1,4 +1,6 @@
-import { DataLinkBuiltInVars, ScopedVars, urlUtil } from '@grafana/data';
+import moment from 'moment-timezone';
+
+import { DataLinkBuiltInVars, getTimeZone, ScopedVars, urlUtil } from '@grafana/data';
 
 import { getTimeSrv } from '../dashboard/services/TimeSrv';
 import { getVariablesUrlParams } from '../variables/getAllVariableValuesForUrl';
@@ -13,6 +15,7 @@ export const macroRegistry: Record<string, MacroHandler> = {
   ['__field']: fieldMacro,
   [DataLinkBuiltInVars.includeVars]: includeVarsMacro,
   [DataLinkBuiltInVars.keepTime]: urlTimeRangeMacro,
+  ['__timezone']: timeZoneMacro,
 };
 
 function includeVarsMacro(match: string, fieldPath?: string, scopedVars?: ScopedVars) {
@@ -23,3 +26,8 @@ function includeVarsMacro(match: string, fieldPath?: string, scopedVars?: Scoped
 function urlTimeRangeMacro() {
   return urlUtil.toUrlParams(getTimeSrv().timeRangeForUrl());
 }
+
+function timeZoneMacro() {
+  const timeZone = getTimeZone({ timeZone: getTimeSrv().timeModel?.getTimezone() });
+  return timeZone === 'browser' ? moment.tz.guess() : timeZone;
+}