Merge branch '214370-add-timezone-dashboard-store' into 'master'

Metrics dashboard fetches UTC configuration from HTML to display it

Closes #214370

See merge request gitlab-org/gitlab!33474

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 });