Merge branch '214370-single-chart-time-formatter' into 'master'

Add a "timezone" prop to heatmaps, time series and anomaly charts

See merge request gitlab-org/gitlab!33018

app/assets/javascripts/monitoring/components/charts/heatmap.vue

 <script>
 import { GlResizeObserverDirective } from '@gitlab/ui';
 import { GlHeatmap } from '@gitlab/ui/dist/charts';
-import dateformat from 'dateformat';
 import { graphDataValidatorForValues } from '../../utils';
+import { formatDate, timezones, formats } from '../../format_date';
 
 export default {
   components: {
@@ -17,6 +17,11 @@ export default {
       required: true,
       validator: graphDataValidatorForValues.bind(null, false),
     },
+    timezone: {
+      type: String,
+      required: false,
+      default: timezones.LOCAL,
+    },
   },
   data() {
     return {
@@ -43,7 +48,7 @@ export default {
       return this.result.values.map(val => {
         const [yLabel] = val;
 
-        return dateformat(new Date(yLabel), 'HH:MM:ss');
+        return formatDate(new Date(yLabel), { format: formats.shortTime, timezone: this.timezone });
       });
     },
     result() {

app/assets/javascripts/monitoring/components/charts/time_series.vue

@@ -2,18 +2,19 @@
 import { omit, throttle } from 'lodash';
 import { GlLink, GlDeprecatedButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
-import dateFormat from 'dateformat';
 import { s__, __ } from '~/locale';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
-import { panelTypes, chartHeight, lineTypes, lineWidths, dateFormats } from '../../constants';
+import { panelTypes, chartHeight, lineTypes, lineWidths } from '../../constants';
 import { getYAxisOptions, getChartGrid, getTooltipFormatter } from './options';
 import { annotationsYAxis, generateAnnotationsSeries } from './annotations';
 import { makeDataSeries } from '~/helpers/monitor_helper';
 import { graphDataValidatorForValues } from '../../utils';
+import { formatDate, timezones, formats } from '../../format_date';
+
+export const timestampToISODate = timestamp => new Date(timestamp).toISOString();
 
 const THROTTLED_DATAZOOM_WAIT = 1000; // milliseconds
-const timestampToISODate = timestamp => new Date(timestamp).toISOString();
 
 const events = {
   datazoom: 'datazoom',
@@ -89,6 +90,11 @@ export default {
       required: false,
       default: '',
     },
+    timezone: {
+      type: String,
+      required: false,
+      default: timezones.LOCAL,
+    },
   },
   data() {
     return {
@@ -163,7 +169,8 @@ export default {
         name: __('Time'),
         type: 'time',
         axisLabel: {
-          formatter: date => dateFormat(date, dateFormats.timeOfDay),
+          formatter: date =>
+            formatDate(date, { format: formats.shortTime, timezone: this.timezone }),
         },
         axisPointer: {
           snap: true,
@@ -271,12 +278,13 @@ export default {
      */
     formatAnnotationsTooltipText(params) {
       return {
-        title: dateFormat(params.data?.tooltipData?.title, dateFormats.default),
+        title: formatDate(params.data?.tooltipData?.title, { timezone: this.timezone }),
         content: params.data?.tooltipData?.content,
       };
     },
     formatTooltipText(params) {
-      this.tooltip.title = dateFormat(params.value, dateFormats.default);
+      this.tooltip.title = formatDate(params.value, { timezone: this.timezone });
+
       this.tooltip.content = [];
 
       params.seriesData.forEach(dataPoint => {

app/assets/javascripts/monitoring/constants.js

@@ -127,11 +127,6 @@ export const lineWidths = {
   default: 2,
 };
 
-export const dateFormats = {
-  timeOfDay: 'h:MM TT',
-  default: 'dd mmm yyyy, h:MMTT',
-};
-
 /**
  * These Vuex store properties are allowed to be
  * replaced dynamically after component has been created

app/assets/javascripts/monitoring/format_date.js

+import dateFormat from 'dateformat';
+
+export const timezones = {
+  /**
+   * Renders a date with a local timezone
+   */
+  LOCAL: 'LOCAL',
+
+  /**
+   * Renders at date with UTC
+   */
+  UTC: 'UTC',
+};
+
+export const formats = {
+  shortTime: 'h:MM TT',
+  default: 'dd mmm yyyy, h:MMTT (Z)',
+};
+
+/**
+ * Formats a date for a metric dashboard or chart.
+ *
+ * Convenience wrapper of dateFormat with default formats
+ * and settings.
+ *
+ * dateFormat has some limitations and we could use `toLocaleString` instead
+ * See: https://gitlab.com/gitlab-org/gitlab/-/issues/219246
+ *
+ * @param {Date|String|Number} date
+ * @param {Object} options - Formatting options
+ * @param {string} options.format - Format or mask from `formats`.
+ * @param {string} options.timezone - Timezone abbreviation.
+ * Accepts "LOCAL" for the client local timezone.
+ */
+export const formatDate = (date, options = {}) => {
+  const { format = formats.default, timezone = timezones.LOCAL } = options;
+  const useUTC = timezone === timezones.UTC;
+  return dateFormat(date, format, useUTC);
+};

spec/frontend/monitoring/components/charts/heatmap_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlHeatmap } from '@gitlab/ui/dist/charts';
+import timezoneMock from 'timezone-mock';
 import Heatmap from '~/monitoring/components/charts/heatmap.vue';
 import { graphDataPrometheusQueryRangeMultiTrack } from '../../mock_data';
 
 describe('Heatmap component', () => {
-  let heatmapChart;
+  let wrapper;
   let store;
 
-  beforeEach(() => {
-    heatmapChart = shallowMount(Heatmap, {
+  const findChart = () => wrapper.find(GlHeatmap);
+
+  const createWrapper = (props = {}) => {
+    wrapper = shallowMount(Heatmap, {
       propsData: {
         graphData: graphDataPrometheusQueryRangeMultiTrack,
         containerWidth: 100,
+        ...props,
       },
       store,
     });
-  });
+  };
 
-  afterEach(() => {
-    heatmapChart.destroy();
-  });
+  describe('wrapped chart', () => {
+    let glHeatmapChart;
 
-  describe('wrapped components', () => {
-    describe('GitLab UI heatmap chart', () => {
-      let glHeatmapChart;
+    beforeEach(() => {
+      createWrapper();
+      glHeatmapChart = findChart();
+    });
 
-      beforeEach(() => {
-        glHeatmapChart = heatmapChart.find(GlHeatmap);
-      });
+    afterEach(() => {
+      wrapper.destroy();
+    });
 
-      it('is a Vue instance', () => {
-        expect(glHeatmapChart.isVueInstance()).toBe(true);
-      });
+    it('is a Vue instance', () => {
+      expect(glHeatmapChart.isVueInstance()).toBe(true);
+    });
 
-      it('should display a label on the x axis', () => {
-        expect(heatmapChart.vm.xAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.x_label);
-      });
+    it('should display a label on the x axis', () => {
+      expect(wrapper.vm.xAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.x_label);
+    });
 
-      it('should display a label on the y axis', () => {
-        expect(heatmapChart.vm.yAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.y_label);
-      });
+    it('should display a label on the y axis', () => {
+      expect(wrapper.vm.yAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.y_label);
+    });
 
-      // According to the echarts docs https://echarts.apache.org/en/option.html#series-heatmap.data
-      // each row of the heatmap chart is represented by an array inside another parent array
-      // e.g. [[0, 0, 10]], the format represents the column, the row and finally the value
-      // corresponding to the cell
+    // According to the echarts docs https://echarts.apache.org/en/option.html#series-heatmap.data
+    // each row of the heatmap chart is represented by an array inside another parent array
+    // e.g. [[0, 0, 10]], the format represents the column, the row and finally the value
+    // corresponding to the cell
 
-      it('should return chartData with a length of x by y, with a length of 3 per array', () => {
-        const row = heatmapChart.vm.chartData[0];
+    it('should return chartData with a length of x by y, with a length of 3 per array', () => {
+      const row = wrapper.vm.chartData[0];
 
-        expect(row.length).toBe(3);
-        expect(heatmapChart.vm.chartData.length).toBe(30);
-      });
+      expect(row.length).toBe(3);
+      expect(wrapper.vm.chartData.length).toBe(30);
+    });
+
+    it('returns a series of labels for the x axis', () => {
+      const { xAxisLabels } = wrapper.vm;
+
+      expect(xAxisLabels.length).toBe(5);
+    });
 
-      it('returns a series of labels for the x axis', () => {
-        const { xAxisLabels } = heatmapChart.vm;
+    describe('y axis labels', () => {
+      const gmtLabels = ['3:00 PM', '4:00 PM', '5:00 PM', '6:00 PM', '7:00 PM', '8:00 PM'];
 
-        expect(xAxisLabels.length).toBe(5);
+      it('y-axis labels are formatted in AM/PM format', () => {
+        expect(findChart().props('yAxisLabels')).toEqual(gmtLabels);
       });
 
-      it('returns a series of labels for the y axis', () => {
-        const { yAxisLabels } = heatmapChart.vm;
+      describe('when in PT timezone', () => {
+        const ptLabels = ['8:00 AM', '9:00 AM', '10:00 AM', '11:00 AM', '12:00 PM', '1:00 PM'];
+        const utcLabels = gmtLabels; // Identical in this case
+
+        beforeAll(() => {
+          timezoneMock.register('US/Pacific');
+        });
+
+        afterAll(() => {
+          timezoneMock.unregister();
+        });
+
+        it('by default, y-axis is formatted in PT', () => {
+          createWrapper();
+          expect(findChart().props('yAxisLabels')).toEqual(ptLabels);
+        });
+
+        it('when the chart uses local timezone, y-axis is formatted in PT', () => {
+          createWrapper({ timezone: 'LOCAL' });
+          expect(findChart().props('yAxisLabels')).toEqual(ptLabels);
+        });
 
-        expect(yAxisLabels.length).toBe(6);
+        it('when the chart uses UTC, y-axis is formatted in UTC', () => {
+          createWrapper({ timezone: 'UTC' });
+          expect(findChart().props('yAxisLabels')).toEqual(utcLabels);
+        });
       });
     });
   });