Time window filter in monitor dashboard gets reset

Time window filter dropdown in monitor dashboard
does not retain previously selected time window

app/assets/javascripts/monitoring/utils.js

 import { secondsIn, timeWindowsKeyNames } from './constants';
 
+const secondsToMilliseconds = seconds => seconds * 1000;
+
 export const getTimeDiff = timeWindow => {
   const end = Math.floor(Date.now() / 1000); // convert milliseconds to seconds
   const difference = secondsIn[timeWindow] || secondsIn.eightHours;
   const start = end - difference;
 
   return {
-    start: new Date(start * 1000).toISOString(),
-    end: new Date(end * 1000).toISOString(),
+    start: new Date(secondsToMilliseconds(start)).toISOString(),
+    end: new Date(secondsToMilliseconds(end)).toISOString(),
   };
 };
 
 export const getTimeWindow = ({ start, end }) =>
   Object.entries(secondsIn).reduce((acc, [timeRange, value]) => {
-    if (end - start === value) {
+    if (new Date(end) - new Date(start) === secondsToMilliseconds(value)) {
       return timeRange;
     }
     return acc;

changelogs/unreleased/33158-time-window-filter-dropdown-doesn-t-retain-previously-selected-wind.yml

+---
+title: Time window filter in monitor dashboard gets reset
+merge_request: 17972
+author:
+type: fixed

spec/javascripts/monitoring/components/dashboard_spec.js

@@ -333,8 +333,8 @@ describe('Dashboard', () => {
     });
 
     it('shows a specific time window selected from the url params', done => {
-      const start = 1564439536;
-      const end = 1564441336;
+      const start = '2019-10-01T18:27:47.000Z';
+      const end = '2019-10-01T18:57:47.000Z';
       spyOnDependency(Dashboard, 'getTimeDiff').and.returnValue({
         start,
         end,

spec/javascripts/monitoring/utils_spec.js

-import { getTimeDiff, graphDataValidatorForValues } from '~/monitoring/utils';
-import { timeWindows } from '~/monitoring/constants';
+import { getTimeDiff, getTimeWindow, graphDataValidatorForValues } from '~/monitoring/utils';
+import { timeWindows, timeWindowsKeyNames } from '~/monitoring/constants';
 import { graphDataPrometheusQuery, graphDataPrometheusQueryRange } from './mock_data';
 
 describe('getTimeDiff', () => {
@@ -39,6 +39,55 @@ describe('getTimeDiff', () => {
   });
 });
 
+describe('getTimeWindow', () => {
+  [
+    {
+      args: [
+        {
+          start: '2019-10-01T18:27:47.000Z',
+          end: '2019-10-01T21:27:47.000Z',
+        },
+      ],
+      expected: timeWindowsKeyNames.threeHours,
+    },
+    {
+      args: [
+        {
+          start: '2019-10-01T28:27:47.000Z',
+          end: '2019-10-01T21:27:47.000Z',
+        },
+      ],
+      expected: timeWindowsKeyNames.eightHours,
+    },
+    {
+      args: [
+        {
+          start: '',
+          end: '',
+        },
+      ],
+      expected: timeWindowsKeyNames.eightHours,
+    },
+    {
+      args: [
+        {
+          start: null,
+          end: null,
+        },
+      ],
+      expected: timeWindowsKeyNames.eightHours,
+    },
+    {
+      args: [{}],
+      expected: timeWindowsKeyNames.eightHours,
+    },
+  ].forEach(({ args, expected }) => {
+    it(`returns "${expected}" with args=${JSON.stringify(args)}`, () => {
+      expect(getTimeWindow(...args)).toEqual(expected);
+    });
+  });
+});
+
 describe('graphDataValidatorForValues', () => {
   /*
    * When dealing with a metric using the query format, e.g.