Show full time range in metrics dashboard

Metrics dashboard charts currently display
the window in which data is present. This MR
force displays the time range selected in the
dashboard controls on all time series charts

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

 <script>
-import { omit, throttle } from 'lodash';
+import { isEmpty, omit, throttle } from 'lodash';
 import { GlLink, GlDeprecatedButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import { s__ } from '~/locale';
@@ -45,6 +45,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+    timeRange: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
     seriesConfig: {
       type: Object,
       required: false,
@@ -174,10 +179,17 @@ export default {
     chartOptions() {
       const { yAxis, xAxis } = this.option;
       const option = omit(this.option, ['series', 'yAxis', 'xAxis']);
+      const xAxisBounds = isEmpty(this.timeRange)
+        ? {}
+        : {
+            min: this.timeRange.start,
+            max: this.timeRange.end,
+          };
 
       const timeXAxis = {
         ...getTimeAxisOptions({ timezone: this.timezone }),
         ...xAxis,
+        ...xAxisBounds,
       };
 
       const dataYAxis = {

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

@@ -2,6 +2,7 @@
 import { mapState } from 'vuex';
 import { pickBy } from 'lodash';
 import invalidUrl from '~/lib/utils/invalid_url';
+import { convertToFixedRange } from '~/lib/utils/datetime_range';
 import { relativePathToAbsolute, getBaseURL, visitUrl, isSafeURL } from '~/lib/utils/url_utility';
 import {
   GlResizeObserverDirective,
@@ -130,6 +131,15 @@ export default {
         return getters[`${this.namespace}/selectedDashboard`];
       },
     }),
+    fixedCurrentTimeRange() {
+      // convertToFixedRange throws an error if the time range
+      // is not properly set.
+      try {
+        return convertToFixedRange(this.timeRange);
+      } catch {
+        return {};
+      }
+    },
     title() {
       return this.graphData?.title || '';
     },
@@ -468,6 +478,7 @@ export default {
       :thresholds="getGraphAlertValues(graphData.metrics)"
       :group-id="groupId"
       :timezone="dashboardTimezone"
+      :time-range="fixedCurrentTimeRange"
       v-bind="$attrs"
       v-on="$listeners"
       @datazoom="onDatazoom"

changelogs/unreleased/set-timerange-window-for-metrics-dashboards.yml

+---
+title: Show full time range in metrics dashboard charts
+merge_request: 37243
+author:
+type: added

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

@@ -12,7 +12,12 @@ import {
 import { shallowWrapperContainsSlotText } from 'helpers/vue_test_utils_helper';
 import { panelTypes, chartHeight } from '~/monitoring/constants';
 import TimeSeries from '~/monitoring/components/charts/time_series.vue';
-import { deploymentData, mockProjectDir, annotationsData } from '../../mock_data';
+import {
+  deploymentData,
+  mockProjectDir,
+  annotationsData,
+  mockFixedTimeRange,
+} from '../../mock_data';
 
 import { timeSeriesGraphData } from '../../graph_data';
 
@@ -42,6 +47,7 @@ describe('Time series component', () => {
         deploymentData,
         annotations: annotationsData,
         projectPath: `${TEST_HOST}${mockProjectDir}`,
+        timeRange: mockFixedTimeRange,
         ...props,
       },
       stubs: {
@@ -382,6 +388,25 @@ describe('Time series component', () => {
         });
 
         describe('chartOptions', () => {
+          describe('x-Axis bounds', () => {
+            it('is set to the time range bounds', () => {
+              expect(getChartOptions().xAxis).toMatchObject({
+                min: mockFixedTimeRange.start,
+                max: mockFixedTimeRange.end,
+              });
+            });
+
+            it('is not set if time range is not set or incorrectly set', () => {
+              wrapper.setProps({
+                timeRange: {},
+              });
+              return wrapper.vm.$nextTick(() => {
+                expect(getChartOptions().xAxis).not.toHaveProperty('min');
+                expect(getChartOptions().xAxis).not.toHaveProperty('max');
+              });
+            });
+          });
+
           describe('dataZoom', () => {
             it('renders with scroll handle icons', () => {
               expect(getChartOptions().dataZoom).toHaveLength(1);

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -254,6 +254,35 @@ describe('Dashboard Panel', () => {
         });
       });
     });
+
+    describe('computed', () => {
+      describe('fixedCurrentTimeRange', () => {
+        it('returns fixed time for valid time range', () => {
+          state.timeRange = mockTimeRange;
+          return wrapper.vm.$nextTick(() => {
+            expect(findTimeChart().props('timeRange')).toEqual(
+              expect.objectContaining({
+                start: expect.any(String),
+                end: expect.any(String),
+              }),
+            );
+          });
+        });
+
+        it.each`
+          input           | output
+          ${''}           | ${{}}
+          ${undefined}    | ${{}}
+          ${null}         | ${{}}
+          ${'2020-12-03'} | ${{}}
+        `('returns $output for invalid input like $input', ({ input, output }) => {
+          state.timeRange = input;
+          return wrapper.vm.$nextTick(() => {
+            expect(findTimeChart().props('timeRange')).toEqual(output);
+          });
+        });
+      });
+    });
   });
 
   describe('Edit custom metric dropdown item', () => {

spec/frontend/monitoring/mock_data.js

@@ -343,6 +343,11 @@ export const mockNamespaces = [`${baseNamespace}/1`, `${baseNamespace}/2`];
 
 export const mockTimeRange = { duration: { seconds: 120 } };
 
+export const mockFixedTimeRange = {
+  start: '2020-06-17T19:59:08.659Z',
+  end: '2020-07-17T19:59:08.659Z',
+};
+
 export const mockNamespacedData = {
   mockDeploymentData: ['mockDeploymentData'],
   mockProjectPath: '/mockProjectPath',