Add latest changes from gitlab-org/gitlab@master

4 files changed, 344 insertions, 290 deletions

diff --git a/spec/frontend/monitoring/components/dashboard_time_window_spec.js b/spec/frontend/monitoring/components/dashboard_time_window_spec.js
index 8e2f52a3183..29cca695093 100644
--- a/spec/frontend/monitoring/components/dashboard_time_window_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_time_window_spec.js
@@ -42,7 +42,7 @@ describe('dashboard time window', () => {
     mock.restore();
   });
 
-  it('shows an error message if invalid url parameters are passed', done => {
+  it('shows an active quick range option', done => {
     mock.onGet(mockApiEndpoint).reply(statusCodes.OK, metricsDashboardPayload);
 
     createComponentWrapperMounted({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
@@ -55,6 +55,7 @@ describe('dashboard time window', () => {
         const timeWindowDropdownItems = wrapper
           .find('.js-time-window-dropdown')
           .findAll(GlDropdownItem);
+
         const activeItem = timeWindowDropdownItems.wrappers.filter(itemWrapper =>
           itemWrapper.find('.active').exists(),
         );
diff --git a/spec/frontend/monitoring/components/date_time_picker/date_time_picker_lib_spec.js b/spec/frontend/monitoring/components/date_time_picker/date_time_picker_lib_spec.js
new file mode 100644
index 00000000000..9c0f66427ae
--- /dev/null
+++ b/spec/frontend/monitoring/components/date_time_picker/date_time_picker_lib_spec.js
@@ -0,0 +1,264 @@
+import * as dateTimePickerLib from '~/monitoring/components/date_time_picker/date_time_picker_lib';
+
+describe('date time picker lib', () => {
+  describe('isValidDate', () => {
+    [
+      {
+        input: '2019-09-09T00:00:00.000Z',
+        output: true,
+      },
+      {
+        input: '2019-09-09T000:00.000Z',
+        output: false,
+      },
+      {
+        input: 'a2019-09-09T000:00.000Z',
+        output: false,
+      },
+      {
+        input: '2019-09-09T',
+        output: false,
+      },
+      {
+        input: '2019-09-09',
+        output: true,
+      },
+      {
+        input: '2019-9-9',
+        output: true,
+      },
+      {
+        input: '2019-9-',
+        output: true,
+      },
+      {
+        input: '2019--',
+        output: false,
+      },
+      {
+        input: '2019',
+        output: true,
+      },
+      {
+        input: '',
+        output: false,
+      },
+      {
+        input: null,
+        output: false,
+      },
+    ].forEach(({ input, output }) => {
+      it(`isValidDate return ${output} for ${input}`, () => {
+        expect(dateTimePickerLib.isValidDate(input)).toBe(output);
+      });
+    });
+  });
+
+  describe('getTimeWindow', () => {
+    [
+      {
+        args: [
+          {
+            start: '2019-10-01T18:27:47.000Z',
+            end: '2019-10-01T21:27:47.000Z',
+          },
+          dateTimePickerLib.defaultTimeWindows,
+        ],
+        expected: 'threeHours',
+      },
+      {
+        args: [
+          {
+            start: '2019-10-01T28:27:47.000Z',
+            end: '2019-10-01T21:27:47.000Z',
+          },
+          dateTimePickerLib.defaultTimeWindows,
+        ],
+        expected: null,
+      },
+      {
+        args: [
+          {
+            start: '',
+            end: '',
+          },
+          dateTimePickerLib.defaultTimeWindows,
+        ],
+        expected: null,
+      },
+      {
+        args: [
+          {
+            start: null,
+            end: null,
+          },
+          dateTimePickerLib.defaultTimeWindows,
+        ],
+        expected: null,
+      },
+      {
+        args: [{}, dateTimePickerLib.defaultTimeWindows],
+        expected: null,
+      },
+    ].forEach(({ args, expected }) => {
+      it(`returns "${expected}" with args=${JSON.stringify(args)}`, () => {
+        expect(dateTimePickerLib.getTimeWindowKey(...args)).toEqual(expected);
+      });
+    });
+  });
+
+  describe('getTimeRange', () => {
+    function secondsBetween({ start, end }) {
+      return (new Date(end) - new Date(start)) / 1000;
+    }
+
+    function minutesBetween(timeRange) {
+      return secondsBetween(timeRange) / 60;
+    }
+
+    function hoursBetween(timeRange) {
+      return minutesBetween(timeRange) / 60;
+    }
+
+    it('defaults to an 8 hour (28800s) difference', () => {
+      const params = dateTimePickerLib.getTimeRange();
+
+      expect(hoursBetween(params)).toEqual(8);
+    });
+
+    it('accepts time window as an argument', () => {
+      const params = dateTimePickerLib.getTimeRange('thirtyMinutes');
+
+      expect(minutesBetween(params)).toEqual(30);
+    });
+
+    it('returns a value for every defined time window', () => {
+      const nonDefaultWindows = Object.entries(dateTimePickerLib.defaultTimeWindows).filter(
+        ([, timeWindow]) => !timeWindow.default,
+      );
+      nonDefaultWindows.forEach(timeWindow => {
+        const params = dateTimePickerLib.getTimeRange(timeWindow[0]);
+
+        // Ensure we're not returning the default
+        expect(hoursBetween(params)).not.toEqual(8);
+      });
+    });
+  });
+
+  describe('stringToISODate', () => {
+    ['', 'null', undefined, 'abc'].forEach(input => {
+      it(`throws error for invalid input like ${input}`, done => {
+        try {
+          dateTimePickerLib.stringToISODate(input);
+        } catch (e) {
+          expect(e).toBeDefined();
+          done();
+        }
+      });
+    });
+    [
+      {
+        input: '2019-09-09 01:01:01',
+        output: '2019-09-09T01:01:01Z',
+      },
+      {
+        input: '2019-09-09 00:00:00',
+        output: '2019-09-09T00:00:00Z',
+      },
+      {
+        input: '2019-09-09 23:59:59',
+        output: '2019-09-09T23:59:59Z',
+      },
+      {
+        input: '2019-09-09',
+        output: '2019-09-09T00:00:00Z',
+      },
+    ].forEach(({ input, output }) => {
+      it(`returns ${output} from ${input}`, () => {
+        expect(dateTimePickerLib.stringToISODate(input)).toBe(output);
+      });
+    });
+  });
+
+  describe('truncateZerosInDateTime', () => {
+    [
+      {
+        input: '',
+        output: '',
+      },
+      {
+        input: '2019-10-10',
+        output: '2019-10-10',
+      },
+      {
+        input: '2019-10-10 00:00:01',
+        output: '2019-10-10 00:00:01',
+      },
+      {
+        input: '2019-10-10 00:00:00',
+        output: '2019-10-10',
+      },
+    ].forEach(({ input, output }) => {
+      it(`truncateZerosInDateTime return ${output} for ${input}`, () => {
+        expect(dateTimePickerLib.truncateZerosInDateTime(input)).toBe(output);
+      });
+    });
+  });
+
+  describe('isDateTimePickerInputValid', () => {
+    [
+      {
+        input: null,
+        output: false,
+      },
+      {
+        input: '',
+        output: false,
+      },
+      {
+        input: 'xxxx-xx-xx',
+        output: false,
+      },
+      {
+        input: '9999-99-19',
+        output: false,
+      },
+      {
+        input: '2019-19-23',
+        output: false,
+      },
+      {
+        input: '2019-09-23',
+        output: true,
+      },
+      {
+        input: '2019-09-23 x',
+        output: false,
+      },
+      {
+        input: '2019-09-29 0:0:0',
+        output: false,
+      },
+      {
+        input: '2019-09-29 00:00:00',
+        output: true,
+      },
+      {
+        input: '2019-09-29 24:24:24',
+        output: false,
+      },
+      {
+        input: '2019-09-29 23:24:24',
+        output: true,
+      },
+      {
+        input: '2019-09-29 23:24:24 ',
+        output: false,
+      },
+    ].forEach(({ input, output }) => {
+      it(`returns ${output} for ${input}`, () => {
+        expect(dateTimePickerLib.isDateTimePickerInputValid(input)).toBe(output);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js b/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js
index 340143a6b53..3b37da5bcd6 100644
--- a/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js
+++ b/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js
@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils';
 import DateTimePicker from '~/monitoring/components/date_time_picker/date_time_picker.vue';
-import { timeWindows } from '~/monitoring/constants';
+import { defaultTimeWindows } from '~/monitoring/components/date_time_picker/date_time_picker_lib';
 
-const timeWindowsCount = Object.keys(timeWindows).length;
+const timeWindowsCount = Object.entries(defaultTimeWindows).length;
 const start = '2019-10-10T07:00:00.000Z';
 const end = '2019-10-13T07:00:00.000Z';
 const selectedTimeWindowText = `3 days`;
@@ -13,6 +13,7 @@ describe('DateTimePicker', () => {
   const dropdownToggle = () => dateTimePicker.find('.dropdown-toggle');
   const dropdownMenu = () => dateTimePicker.find('.dropdown-menu');
   const applyButtonElement = () => dateTimePicker.find('button.btn-success').element;
+  const findQuickRangeItems = () => dateTimePicker.findAll('.dropdown-item');
   const cancelButtonElement = () => dateTimePicker.find('button.btn-secondary').element;
   const fillInputAndBlur = (input, val) => {
     dateTimePicker.find(input).setValue(val);
@@ -25,7 +26,6 @@ describe('DateTimePicker', () => {
   const createComponent = props => {
     dateTimePicker = mount(DateTimePicker, {
       propsData: {
-        timeWindows,
         start,
         end,
         ...props,
@@ -52,16 +52,6 @@ describe('DateTimePicker', () => {
     });
   });
 
-  it('renders dropdown without a selectedTimeWindow set', done => {
-    createComponent({
-      selectedTimeWindow: {},
-    });
-    dateTimePicker.vm.$nextTick(() => {
-      expect(dateTimePicker.findAll('input').length).toBe(2);
-      done();
-    });
-  });
-
   it('renders inputs with h/m/s truncated if its all 0s', done => {
     createComponent({
       start: '2019-10-10T00:00:00.000Z',
@@ -74,11 +64,11 @@ describe('DateTimePicker', () => {
     });
   });
 
-  it(`renders dropdown with ${timeWindowsCount} items in quick range`, done => {
+  it(`renders dropdown with ${timeWindowsCount} (default) items in quick range`, done => {
     createComponent();
     dropdownToggle().trigger('click');
     dateTimePicker.vm.$nextTick(() => {
-      expect(dateTimePicker.findAll('.dropdown-item').length).toBe(timeWindowsCount);
+      expect(findQuickRangeItems().length).toBe(timeWindowsCount);
       done();
     });
   });
@@ -167,4 +157,77 @@ describe('DateTimePicker', () => {
       });
     });
   });
+
+  describe('when using non-default time windows', () => {
+    const otherTimeWindows = {
+      oneMinute: {
+        label: '1 minute',
+        seconds: 60,
+      },
+      twoMinutes: {
+        label: '2 minutes',
+        seconds: 60 * 2,
+        default: true,
+      },
+      fiveMinutes: {
+        label: '5 minutes',
+        seconds: 60 * 5,
+      },
+    };
+
+    it('renders dropdown with a label in the quick range', done => {
+      createComponent({
+        // 2 minutes range
+        start: '2020-01-21T15:00:00.000Z',
+        end: '2020-01-21T15:02:00.000Z',
+        timeWindows: otherTimeWindows,
+      });
+      dropdownToggle().trigger('click');
+      dateTimePicker.vm.$nextTick(() => {
+        expect(dropdownToggle().text()).toBe('2 minutes');
+
+        done();
+      });
+    });
+
+    it('renders dropdown with quick range items', done => {
+      createComponent({
+        // 2 minutes range
+        start: '2020-01-21T15:00:00.000Z',
+        end: '2020-01-21T15:02:00.000Z',
+        timeWindows: otherTimeWindows,
+      });
+      dropdownToggle().trigger('click');
+      dateTimePicker.vm.$nextTick(() => {
+        const items = findQuickRangeItems();
+
+        expect(items.length).toBe(Object.keys(otherTimeWindows).length);
+        expect(items.at(0).text()).toBe('1 minute');
+        expect(items.at(0).is('.active')).toBe(false);
+
+        expect(items.at(1).text()).toBe('2 minutes');
+        expect(items.at(1).is('.active')).toBe(true);
+
+        expect(items.at(2).text()).toBe('5 minutes');
+        expect(items.at(2).is('.active')).toBe(false);
+
+        done();
+      });
+    });
+
+    it('renders dropdown with a label not in the quick range', done => {
+      createComponent({
+        // 10 minutes range
+        start: '2020-01-21T15:00:00.000Z',
+        end: '2020-01-21T15:10:00.000Z',
+        timeWindows: otherTimeWindows,
+      });
+      dropdownToggle().trigger('click');
+      dateTimePicker.vm.$nextTick(() => {
+        expect(dropdownToggle().text()).toBe('2020-01-21 15:00:00 to 2020-01-21 15:10:00');
+
+        done();
+      });
+    });
+  });
 });
diff --git a/spec/frontend/monitoring/utils_spec.js b/spec/frontend/monitoring/utils_spec.js
index 9b1a331e3b5..9df48eb0ad3 100644
--- a/spec/frontend/monitoring/utils_spec.js
+++ b/spec/frontend/monitoring/utils_spec.js
@@ -1,5 +1,4 @@
 import * as monitoringUtils from '~/monitoring/utils';
-import { timeWindows, timeWindowsKeyNames } from '~/monitoring/constants';
 import {
   graphDataPrometheusQuery,
   graphDataPrometheusQueryRange,
@@ -58,92 +57,6 @@ describe('monitoring/utils', () => {
     });
   });
 
-  describe('getTimeDiff', () => {
-    function secondsBetween({ start, end }) {
-      return (new Date(end) - new Date(start)) / 1000;
-    }
-
-    function minutesBetween(timeRange) {
-      return secondsBetween(timeRange) / 60;
-    }
-
-    function hoursBetween(timeRange) {
-      return minutesBetween(timeRange) / 60;
-    }
-
-    it('defaults to an 8 hour (28800s) difference', () => {
-      const params = monitoringUtils.getTimeDiff();
-
-      expect(hoursBetween(params)).toEqual(8);
-    });
-
-    it('accepts time window as an argument', () => {
-      const params = monitoringUtils.getTimeDiff('thirtyMinutes');
-
-      expect(minutesBetween(params)).toEqual(30);
-    });
-
-    it('returns a value for every defined time window', () => {
-      const nonDefaultWindows = Object.keys(timeWindows).filter(window => window !== 'eightHours');
-
-      nonDefaultWindows.forEach(timeWindow => {
-        const params = monitoringUtils.getTimeDiff(timeWindow);
-
-        // Ensure we're not returning the default
-        expect(hoursBetween(params)).not.toEqual(8);
-      });
-    });
-  });
-
-  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: null,
-      },
-      {
-        args: [
-          {
-            start: '',
-            end: '',
-          },
-        ],
-        expected: null,
-      },
-      {
-        args: [
-          {
-            start: null,
-            end: null,
-          },
-        ],
-        expected: null,
-      },
-      {
-        args: [{}],
-        expected: null,
-      },
-    ].forEach(({ args, expected }) => {
-      it(`returns "${expected}" with args=${JSON.stringify(args)}`, () => {
-        expect(monitoringUtils.getTimeWindow(...args)).toEqual(expected);
-      });
-    });
-  });
-
   describe('graphDataValidatorForValues', () => {
     /*
      * When dealing with a metric using the query format, e.g.
@@ -174,193 +87,6 @@ describe('monitoring/utils', () => {
     });
   });
 
-  describe('stringToISODate', () => {
-    ['', 'null', undefined, 'abc'].forEach(input => {
-      it(`throws error for invalid input like ${input}`, done => {
-        try {
-          monitoringUtils.stringToISODate(input);
-        } catch (e) {
-          expect(e).toBeDefined();
-          done();
-        }
-      });
-    });
-    [
-      {
-        input: '2019-09-09 01:01:01',
-        output: '2019-09-09T01:01:01Z',
-      },
-      {
-        input: '2019-09-09 00:00:00',
-        output: '2019-09-09T00:00:00Z',
-      },
-      {
-        input: '2019-09-09 23:59:59',
-        output: '2019-09-09T23:59:59Z',
-      },
-      {
-        input: '2019-09-09',
-        output: '2019-09-09T00:00:00Z',
-      },
-    ].forEach(({ input, output }) => {
-      it(`returns ${output} from ${input}`, () => {
-        expect(monitoringUtils.stringToISODate(input)).toBe(output);
-      });
-    });
-  });
-
-  describe('ISODateToString', () => {
-    [
-      {
-        input: new Date('2019-09-09T00:00:00.000Z'),
-        output: '2019-09-09 00:00:00',
-      },
-      {
-        input: new Date('2019-09-09T07:00:00.000Z'),
-        output: '2019-09-09 07:00:00',
-      },
-    ].forEach(({ input, output }) => {
-      it(`ISODateToString return ${output} for ${input}`, () => {
-        expect(monitoringUtils.ISODateToString(input)).toBe(output);
-      });
-    });
-  });
-
-  describe('truncateZerosInDateTime', () => {
-    [
-      {
-        input: '',
-        output: '',
-      },
-      {
-        input: '2019-10-10',
-        output: '2019-10-10',
-      },
-      {
-        input: '2019-10-10 00:00:01',
-        output: '2019-10-10 00:00:01',
-      },
-      {
-        input: '2019-10-10 00:00:00',
-        output: '2019-10-10',
-      },
-    ].forEach(({ input, output }) => {
-      it(`truncateZerosInDateTime return ${output} for ${input}`, () => {
-        expect(monitoringUtils.truncateZerosInDateTime(input)).toBe(output);
-      });
-    });
-  });
-
-  describe('isValidDate', () => {
-    [
-      {
-        input: '2019-09-09T00:00:00.000Z',
-        output: true,
-      },
-      {
-        input: '2019-09-09T000:00.000Z',
-        output: false,
-      },
-      {
-        input: 'a2019-09-09T000:00.000Z',
-        output: false,
-      },
-      {
-        input: '2019-09-09T',
-        output: false,
-      },
-      {
-        input: '2019-09-09',
-        output: true,
-      },
-      {
-        input: '2019-9-9',
-        output: true,
-      },
-      {
-        input: '2019-9-',
-        output: true,
-      },
-      {
-        input: '2019--',
-        output: false,
-      },
-      {
-        input: '2019',
-        output: true,
-      },
-      {
-        input: '',
-        output: false,
-      },
-      {
-        input: null,
-        output: false,
-      },
-    ].forEach(({ input, output }) => {
-      it(`isValidDate return ${output} for ${input}`, () => {
-        expect(monitoringUtils.isValidDate(input)).toBe(output);
-      });
-    });
-  });
-
-  describe('isDateTimePickerInputValid', () => {
-    [
-      {
-        input: null,
-        output: false,
-      },
-      {
-        input: '',
-        output: false,
-      },
-      {
-        input: 'xxxx-xx-xx',
-        output: false,
-      },
-      {
-        input: '9999-99-19',
-        output: false,
-      },
-      {
-        input: '2019-19-23',
-        output: false,
-      },
-      {
-        input: '2019-09-23',
-        output: true,
-      },
-      {
-        input: '2019-09-23 x',
-        output: false,
-      },
-      {
-        input: '2019-09-29 0:0:0',
-        output: false,
-      },
-      {
-        input: '2019-09-29 00:00:00',
-        output: true,
-      },
-      {
-        input: '2019-09-29 24:24:24',
-        output: false,
-      },
-      {
-        input: '2019-09-29 23:24:24',
-        output: true,
-      },
-      {
-        input: '2019-09-29 23:24:24 ',
-        output: false,
-      },
-    ].forEach(({ input, output }) => {
-      it(`returns ${output} for ${input}`, () => {
-        expect(monitoringUtils.isDateTimePickerInputValid(input)).toBe(output);
-      });
-    });
-  });
-
   describe('graphDataValidatorForAnomalyValues', () => {
     let oneMetric;
     let threeMetrics;