Metrics dashboard fetches UTC configuration from HTML to display it

When the dashboard is configured to use UTC, the dashboard time picker
and the panels will use the dashboard timezone.

app/assets/javascripts/monitoring/components/dashboard_header.vue

@@ -26,6 +26,7 @@ import DashboardsDropdown from './dashboards_dropdown.vue';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import { getAddMetricTrackingOptions, timeRangeToUrl } from '../utils';
 import { timeRanges } from '~/vue_shared/constants';
+import { timezones } from '../format_date';
 
 export default {
   components: {
@@ -104,6 +105,7 @@ export default {
       'currentEnvironmentName',
       'isUpdatingStarredValue',
       'showEmptyState',
+      'dashboardTimezone',
     ]),
     ...mapGetters('monitoringDashboard', ['selectedDashboard', 'filteredEnvironments']),
     shouldShowEnvironmentsDropdownNoMatchedMsg() {
@@ -122,6 +124,9 @@ export default {
     showRearrangePanelsBtn() {
       return !this.showEmptyState && this.rearrangePanelsAvailable;
     },
+    displayUtc() {
+      return this.dashboardTimezone === timezones.UTC;
+    },
   },
   methods: {
     ...mapActions('monitoringDashboard', [
@@ -240,6 +245,7 @@ export default {
         data-qa-selector="range_picker_dropdown"
         :value="selectedTimeRange"
         :options="$options.timeRanges"
+        :utc="displayUtc"
         @input="onDateTimePickerInput"
         @invalid="onDateTimePickerInvalid"
       />

app/assets/javascripts/monitoring/components/dashboard_panel.vue

@@ -118,6 +118,9 @@ export default {
       timeRange(state) {
         return state[this.namespace].timeRange;
       },
+      dashboardTimezone(state) {
+        return state[this.namespace].dashboardTimezone;
+      },
       metricsSavedToDb(state, getters) {
         return getters[`${this.namespace}/metricsSavedToDb`];
       },
@@ -398,6 +401,7 @@ export default {
       :is="basicChartComponent"
       v-else-if="basicChartComponent"
       :graph-data="graphData"
+      :timezone="dashboardTimezone"
       v-bind="$attrs"
       v-on="$listeners"
     />
@@ -411,6 +415,7 @@ export default {
       :project-path="projectPath"
       :thresholds="getGraphAlertValues(graphData.metrics)"
       :group-id="groupId"
+      :timezone="dashboardTimezone"
       v-bind="$attrs"
       v-on="$listeners"
       @datazoom="onDatazoom"

app/assets/javascripts/monitoring/monitoring_bundle.js

@@ -20,6 +20,7 @@ export default (props = {}) => {
       projectPath,
       logsPath,
       currentEnvironmentName,
+      dashboardTimezone,
       ...dataProps
     } = el.dataset;
 
@@ -28,6 +29,7 @@ export default (props = {}) => {
       deploymentsEndpoint,
       dashboardEndpoint,
       dashboardsEndpoint,
+      dashboardTimezone,
       projectPath,
       logsPath,
       currentEnvironmentName,

app/assets/javascripts/monitoring/stores/state.js

 import invalidUrl from '~/lib/utils/invalid_url';
+import { timezones } from '../format_date';
 
 export default () => ({
   // API endpoints
@@ -45,6 +46,7 @@ export default () => ({
    */
   links: {},
   // Other project data
+  dashboardTimezone: timezones.LOCAL,
   annotations: [],
   deploymentData: [],
   environments: [],

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -513,6 +513,34 @@ describe('Dashboard Panel', () => {
     });
   });
 
+  describe('panel timezone', () => {
+    it('displays a time chart in local timezone', () => {
+      createWrapper();
+      expect(findTimeChart().props('timezone')).toBe('LOCAL');
+    });
+
+    it('displays a heatmap in local timezone', () => {
+      createWrapper({ graphData: graphDataPrometheusQueryRangeMultiTrack });
+      expect(wrapper.find(MonitorHeatmapChart).props('timezone')).toBe('LOCAL');
+    });
+
+    describe('when timezone is set to UTC', () => {
+      beforeEach(() => {
+        store = createStore({ dashboardTimezone: 'UTC' });
+      });
+
+      it('displays a time chart with UTC', () => {
+        createWrapper();
+        expect(findTimeChart().props('timezone')).toBe('UTC');
+      });
+
+      it('displays a heatmap with UTC', () => {
+        createWrapper({ graphData: graphDataPrometheusQueryRangeMultiTrack });
+        expect(wrapper.find(MonitorHeatmapChart).props('timezone')).toBe('UTC');
+      });
+    });
+  });
+
   describe('Expand to full screen', () => {
     const findExpandBtn = () => wrapper.find({ ref: 'expandBtn' });
 

spec/frontend/monitoring/components/dashboard_spec.js

@@ -36,8 +36,9 @@ describe('Dashboard', () => {
   let wrapper;
   let mock;
 
+  const findDashboardHeader = () => wrapper.find(DashboardHeader);
   const findEnvironmentsDropdown = () =>
-    wrapper.find(DashboardHeader).find({ ref: 'monitorEnvironmentsDropdown' });
+    findDashboardHeader().find({ ref: 'monitorEnvironmentsDropdown' });
   const findAllEnvironmentsDropdownItems = () => findEnvironmentsDropdown().findAll(GlDropdownItem);
   const setSearchTerm = searchTerm => {
     store.commit(`monitoringDashboard/${types.SET_ENVIRONMENTS_FILTER}`, searchTerm);
@@ -805,6 +806,57 @@ describe('Dashboard', () => {
     });
   });
 
+  describe('dashboard timezone', () => {
+    const setupWithTimezone = value => {
+      store = createStore({ dashboardTimezone: value });
+      setupStoreWithData(store);
+      createShallowWrapper({ hasMetrics: true });
+      return wrapper.vm.$nextTick;
+    };
+
+    describe('local timezone is enabled by default', () => {
+      beforeEach(() => {
+        return setupWithTimezone();
+      });
+
+      it('shows the data time picker in local timezone', () => {
+        expect(
+          findDashboardHeader()
+            .find(DateTimePicker)
+            .props('utc'),
+        ).toBe(false);
+      });
+    });
+
+    describe('when LOCAL timezone is enabled', () => {
+      beforeEach(() => {
+        return setupWithTimezone('LOCAL');
+      });
+
+      it('shows the data time picker in local timezone', () => {
+        expect(
+          findDashboardHeader()
+            .find(DateTimePicker)
+            .props('utc'),
+        ).toBe(false);
+      });
+    });
+
+    describe('when UTC timezone is enabled', () => {
+      beforeEach(() => {
+        return setupWithTimezone('UTC');
+      });
+
+      it('shows the data time picker in UTC format', () => {
+        expect(
+          findDashboardHeader()
+            .find(DateTimePicker)
+            .props('utc'),
+        ).toBe(true);
+      });
+    });
+  });
+
   describe('cluster health', () => {
     beforeEach(() => {
       createShallowWrapper({ hasMetrics: true, showHeader: false });