Add latest changes from gitlab-org/gitlab@master

8 files changed, 188 insertions, 124 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 5d27c6eb865..ee10a1e92fc 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -210,6 +210,9 @@ export default {
         :text="diffFile.file_path"
         :gfm="gfmCopyText"
         css-class="btn-default btn-transparent btn-clipboard"
+        data-track-event="click_copy_file_button"
+        data-track-label="diff_copy_file_path_button"
+        data-track-property="diff_copy_file"
       />
 
       <small v-if="isModeChanged" ref="fileMode" class="mr-1">
@@ -233,6 +236,9 @@ export default {
               :class="{ active: diffHasExpandedDiscussions(diffFile) }"
               class="js-btn-vue-toggle-comments btn"
               data-qa-selector="toggle_comments_button"
+              data-track-event="click_toggle_comments_button"
+              data-track-label="diff_toggle_comments_button"
+              data-track-property="diff_toggle_comments"
               type="button"
               @click="toggleFileDiscussionWrappers(diffFile)"
             >
@@ -245,6 +251,9 @@ export default {
             :can-current-user-fork="canCurrentUserFork"
             :edit-path="diffFile.edit_path"
             :can-modify-blob="diffFile.can_modify_blob"
+            data-track-event="click_toggle_edit_button"
+            data-track-label="diff_toggle_edit_button"
+            data-track-property="diff_toggle_edit"
             @showForkMessage="showForkMessage"
           />
         </template>
@@ -263,6 +272,9 @@ export default {
           v-gl-tooltip.hover
           :title="expandDiffToFullFileTitle"
           class="expand-file"
+          data-track-event="click_toggle_view_full_button"
+          data-track-label="diff_toggle_view_full_button"
+          data-track-property="diff_toggle_view_full"
           @click="toggleFullDiff(diffFile.file_path)"
         >
           <gl-loading-icon v-if="diffFile.isLoadingFullFile" color="dark" inline />
@@ -275,6 +287,9 @@ export default {
           :href="diffFile.view_path"
           target="blank"
           class="view-file"
+          data-track-event="click_toggle_view_sha_button"
+          data-track-label="diff_toggle_view_sha_button"
+          data-track-property="diff_toggle_view_sha"
           :title="viewFileButtonText"
         >
           <icon name="doc-text" />
@@ -288,6 +303,9 @@ export default {
           :title="`View on ${diffFile.formatted_external_url}`"
           target="_blank"
           rel="noopener noreferrer"
+          data-track-event="click_toggle_external_button"
+          data-track-label="diff_toggle_external_button"
+          data-track-property="diff_toggle_external"
           class="btn btn-file-option"
         >
           <icon name="external-link" />
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index f6f119d4463..211990f3d7c 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -27,10 +27,12 @@ import GroupEmptyState from './group_empty_state.vue';
 import DashboardsDropdown from './dashboards_dropdown.vue';
 
 import TrackEventDirective from '~/vue_shared/directives/track_event';
-import { getTimeDiff, getAddMetricTrackingOptions } from '../utils';
-import { metricStates } from '../constants';
+import { getAddMetricTrackingOptions } from '../utils';
+import { getTimeRange } from './date_time_picker/date_time_picker_lib';
 
-const defaultTimeDiff = getTimeDiff();
+import { datePickerTimeWindows, metricStates } from '../constants';
+
+const defaultTimeDiff = getTimeRange();
 
 export default {
   components: {
@@ -191,6 +193,7 @@ export default {
       startDate: getParameterValues('start')[0] || defaultTimeDiff.start,
       endDate: getParameterValues('end')[0] || defaultTimeDiff.end,
       hasValidDates: true,
+      datePickerTimeWindows,
       isRearrangingPanels: false,
     };
   },
@@ -426,6 +429,7 @@ export default {
             <date-time-picker
               :start="startDate"
               :end="endDate"
+              :time-windows="datePickerTimeWindows"
               @apply="onDateTimePickerApply"
               @invalid="onDateTimePickerInvalid"
             />
diff --git a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker.vue
index 0aa710b1b3a..3a18a494cad 100644
--- a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker.vue
+++ b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker.vue
@@ -1,19 +1,18 @@
 <script>
 import { GlButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
-import { s__, sprintf } from '~/locale';
+import { __, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import DateTimePickerInput from './date_time_picker_input.vue';
 import {
-  getTimeDiff,
+  defaultTimeWindows,
   isValidDate,
-  getTimeWindow,
+  getTimeRange,
+  getTimeWindowKey,
   stringToISODate,
   ISODateToString,
   truncateZerosInDateTime,
   isDateTimePickerInputValid,
-} from '~/monitoring/utils';
-
-import { timeWindows } from '~/monitoring/constants';
+} from './date_time_picker_lib';
 
 const events = {
   apply: 'apply',
@@ -41,7 +40,7 @@ export default {
     timeWindows: {
       type: Object,
       required: false,
-      default: () => timeWindows,
+      default: () => defaultTimeWindows,
     },
   },
   data() {
@@ -81,11 +80,11 @@ export default {
     },
 
     timeWindowText() {
-      const timeWindow = getTimeWindow({ start: this.start, end: this.end });
+      const timeWindow = getTimeWindowKey({ start: this.start, end: this.end }, this.timeWindows);
       if (timeWindow) {
-        return this.timeWindows[timeWindow];
+        return this.timeWindows[timeWindow].label;
       } else if (isValidDate(this.start) && isValidDate(this.end)) {
-        return sprintf(s__('%{start} to %{end}'), {
+        return sprintf(__('%{start} to %{end}'), {
           start: this.formatDate(this.start),
           end: this.formatDate(this.end),
         });
@@ -104,7 +103,7 @@ export default {
       return truncateZerosInDateTime(ISODateToString(date));
     },
     setTimeWindow(key) {
-      const { start, end } = getTimeDiff(key);
+      const { start, end } = getTimeRange(key, this.timeWindows);
       this.startDate = start;
       this.endDate = end;
 
@@ -161,18 +160,18 @@ export default {
         class="col-md-4 p-0 m-0"
       >
         <gl-dropdown-item
-          v-for="(value, key) in timeWindows"
+          v-for="(timeWindow, key) in timeWindows"
           :key="key"
-          :active="value === timeWindowText"
+          :active="timeWindow.label === timeWindowText"
           active-class="active"
           @click="setTimeWindow(key)"
         >
           <icon
             name="mobile-issue-close"
             class="align-bottom"
-            :class="{ invisible: value !== timeWindowText }"
+            :class="{ invisible: timeWindow.label !== timeWindowText }"
           />
-          {{ value }}
+          {{ timeWindow.label }}
         </gl-dropdown-item>
       </gl-form-group>
     </div>
diff --git a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue
index c3beae18726..b27a379c46a 100644
--- a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue
+++ b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue
@@ -1,14 +1,14 @@
 <script>
 import _ from 'underscore';
 import { GlFormGroup, GlFormInput } from '@gitlab/ui';
-import { s__, sprintf } from '~/locale';
-import { dateFormats } from '~/monitoring/constants';
+import { __, sprintf } from '~/locale';
+import { dateFormats } from './date_time_picker_lib';
 
 const inputGroupText = {
-  invalidFeedback: sprintf(s__('Format: %{dateFormat}'), {
-    dateFormat: dateFormats.dateTimePicker.format,
+  invalidFeedback: sprintf(__('Format: %{dateFormat}'), {
+    dateFormat: dateFormats.stringDate,
   }),
-  placeholder: dateFormats.dateTimePicker.format,
+  placeholder: dateFormats.stringDate,
 };
 
 export default {
diff --git a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_lib.js b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_lib.js
new file mode 100644
index 00000000000..604b17baab9
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_lib.js
@@ -0,0 +1,112 @@
+import dateformat from 'dateformat';
+import { __ } from '~/locale';
+import { secondsToMilliseconds } from '~/lib/utils/datetime_utility';
+
+/**
+ * Valid strings for this regex are
+ * 2019-10-01 and 2019-10-01 01:02:03
+ */
+const dateTimePickerRegex = /^(\d{4})-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])(?: (0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]))?$/;
+
+export const defaultTimeWindows = {
+  thirtyMinutes: {
+    label: __('30 minutes'),
+    seconds: 60 * 30,
+  },
+  threeHours: {
+    label: __('3 hours'),
+    seconds: 60 * 60 * 3,
+  },
+  eightHours: {
+    label: __('8 hours'),
+    seconds: 60 * 60 * 8,
+    default: true,
+  },
+  oneDay: {
+    label: __('1 day'),
+    seconds: 60 * 60 * 24 * 1,
+  },
+  threeDays: {
+    label: __('3 days'),
+    seconds: 60 * 60 * 24 * 3,
+  },
+};
+
+export const dateFormats = {
+  ISODate: "yyyy-mm-dd'T'HH:MM:ss'Z'",
+  stringDate: 'yyyy-mm-dd HH:MM:ss',
+};
+
+/**
+ * The URL params start and end need to be validated
+ * before passing them down to other components.
+ *
+ * @param {string} dateString
+ * @returns true if the string is a valid date, false otherwise
+ */
+export const isValidDate = dateString => {
+  try {
+    // dateformat throws error that can be caught.
+    // This is better than using `new Date()`
+    if (dateString && dateString.trim()) {
+      dateformat(dateString, 'isoDateTime');
+      return true;
+    }
+    return false;
+  } catch (e) {
+    return false;
+  }
+};
+
+export const getTimeRange = (timeWindowKey, timeWindows = defaultTimeWindows) => {
+  let difference;
+  if (timeWindows[timeWindowKey]) {
+    difference = timeWindows[timeWindowKey].seconds;
+  } else {
+    const [defaultEntry] = Object.entries(timeWindows).filter(
+      ([, timeWindow]) => timeWindow.default,
+    );
+    // find default time window
+    difference = defaultEntry[1].seconds;
+  }
+
+  const end = Math.floor(Date.now() / 1000); // convert milliseconds to seconds
+  const start = end - difference;
+
+  return {
+    start: new Date(secondsToMilliseconds(start)).toISOString(),
+    end: new Date(secondsToMilliseconds(end)).toISOString(),
+  };
+};
+
+export const getTimeWindowKey = ({ start, end }, timeWindows = defaultTimeWindows) =>
+  Object.entries(timeWindows).reduce((acc, [timeWindowKey, timeWindow]) => {
+    if (new Date(end) - new Date(start) === secondsToMilliseconds(timeWindow.seconds)) {
+      return timeWindowKey;
+    }
+    return acc;
+  }, null);
+
+/**
+ * Convert the input in Time picker component to ISO date.
+ *
+ * @param {string} val
+ * @returns {string}
+ */
+export const stringToISODate = val =>
+  dateformat(new Date(val.replace(/-/g, '/')), dateFormats.ISODate, true);
+
+/**
+ * Convert the ISO date received from the URL to string
+ * for the Time picker component.
+ *
+ * @param {Date} date
+ * @returns {string}
+ */
+export const ISODateToString = date => dateformat(date, dateFormats.stringDate);
+
+export const truncateZerosInDateTime = datetime => datetime.replace(' 00:00:00', '');
+
+export const isDateTimePickerInputValid = val => dateTimePickerRegex.test(val);
+
+export default {};
diff --git a/app/assets/javascripts/monitoring/components/embed.vue b/app/assets/javascripts/monitoring/components/embed.vue
index 2f562071764..10c081070d7 100644
--- a/app/assets/javascripts/monitoring/components/embed.vue
+++ b/app/assets/javascripts/monitoring/components/embed.vue
@@ -3,7 +3,7 @@ import { mapActions, mapState, mapGetters } from 'vuex';
 import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { getParameterValues, removeParams } from '~/lib/utils/url_utility';
 import { sidebarAnimationDuration } from '../constants';
-import { getTimeDiff } from '../utils';
+import { getTimeRange } from './date_time_picker/date_time_picker_lib';
 
 let sidebarMutationObserver;
 
@@ -18,7 +18,7 @@ export default {
     },
   },
   data() {
-    const defaultRange = getTimeDiff();
+    const defaultRange = getTimeRange();
     const start = getParameterValues('start', this.dashboardUrl)[0] || defaultRange.start;
     const end = getParameterValues('end', this.dashboardUrl)[0] || defaultRange.end;
 
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
index 398b45b9012..2d5361a5029 100644
--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -50,11 +50,6 @@ export const metricStates = {
 export const sidebarAnimationDuration = 300; // milliseconds.
 
 export const chartHeight = 300;
-/**
- * Valid strings for this regex are
- * 2019-10-01 and 2019-10-01 01:02:03
- */
-export const dateTimePickerRegex = /^(\d{4})-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])(?: (0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]))?$/;
 
 export const graphTypes = {
   deploymentData: 'scatter',
@@ -83,38 +78,39 @@ export const lineWidths = {
   default: 2,
 };
 
-export const timeWindows = {
-  thirtyMinutes: __('30 minutes'),
-  threeHours: __('3 hours'),
-  eightHours: __('8 hours'),
-  oneDay: __('1 day'),
-  threeDays: __('3 days'),
-  oneWeek: __('1 week'),
-};
-
 export const dateFormats = {
   timeOfDay: 'h:MM TT',
   default: 'dd mmm yyyy, h:MMTT',
-  dateTimePicker: {
-    format: 'yyyy-mm-dd hh:mm:ss',
-    ISODate: "yyyy-mm-dd'T'HH:MM:ss'Z'",
-    stringDate: 'yyyy-mm-dd HH:MM:ss',
-  },
 };
 
-export const secondsIn = {
-  thirtyMinutes: 60 * 30,
-  threeHours: 60 * 60 * 3,
-  eightHours: 60 * 60 * 8,
-  oneDay: 60 * 60 * 24 * 1,
-  threeDays: 60 * 60 * 24 * 3,
-  oneWeek: 60 * 60 * 24 * 7 * 1,
+export const datePickerTimeWindows = {
+  thirtyMinutes: {
+    label: __('30 minutes'),
+    seconds: 60 * 30,
+  },
+  threeHours: {
+    label: __('3 hours'),
+    seconds: 60 * 60 * 3,
+  },
+  eightHours: {
+    label: __('8 hours'),
+    seconds: 60 * 60 * 8,
+    default: true,
+  },
+  oneDay: {
+    label: __('1 day'),
+    seconds: 60 * 60 * 24 * 1,
+  },
+  threeDays: {
+    label: __('3 days'),
+    seconds: 60 * 60 * 24 * 3,
+  },
+  oneWeek: {
+    label: __('1 week'),
+    seconds: 60 * 60 * 24 * 7 * 1,
+  },
+  twoWeeks: {
+    label: __('2 weeks'),
+    seconds: 60 * 60 * 24 * 7 * 2,
+  },
 };
-
-export const timeWindowsKeyNames = Object.keys(secondsIn).reduce(
-  (otherTimeWindows, timeWindow) => ({
-    ...otherTimeWindows,
-    [timeWindow]: timeWindow,
-  }),
-  {},
-);
diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js
index c824d6d4ddb..3847d885f9a 100644
--- a/app/assets/javascripts/monitoring/utils.js
+++ b/app/assets/javascripts/monitoring/utils.js
@@ -1,68 +1,3 @@
-import dateformat from 'dateformat';
-import { secondsIn, dateTimePickerRegex, dateFormats } from './constants';
-import { secondsToMilliseconds } from '~/lib/utils/datetime_utility';
-
-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(secondsToMilliseconds(start)).toISOString(),
-    end: new Date(secondsToMilliseconds(end)).toISOString(),
-  };
-};
-
-export const getTimeWindow = ({ start, end }) =>
-  Object.entries(secondsIn).reduce((acc, [timeRange, value]) => {
-    if (new Date(end) - new Date(start) === secondsToMilliseconds(value)) {
-      return timeRange;
-    }
-    return acc;
-  }, null);
-
-export const isDateTimePickerInputValid = val => dateTimePickerRegex.test(val);
-
-export const truncateZerosInDateTime = datetime => datetime.replace(' 00:00:00', '');
-
-/**
- * The URL params start and end need to be validated
- * before passing them down to other components.
- *
- * @param {string} dateString
- */
-export const isValidDate = dateString => {
-  try {
-    // dateformat throws error that can be caught.
-    // This is better than using `new Date()`
-    if (dateString && dateString.trim()) {
-      dateformat(dateString, 'isoDateTime');
-      return true;
-    }
-    return false;
-  } catch (e) {
-    return false;
-  }
-};
-
-/**
- * Convert the input in Time picker component to ISO date.
- *
- * @param {string} val
- * @returns {string}
- */
-export const stringToISODate = val =>
-  dateformat(new Date(val.replace(/-/g, '/')), dateFormats.dateTimePicker.ISODate, true);
-
-/**
- * Convert the ISO date received from the URL to string
- * for the Time picker component.
- *
- * @param {Date} date
- * @returns {string}
- */
-export const ISODateToString = date => dateformat(date, dateFormats.dateTimePicker.stringDate);
-
 /**
  * This method is used to validate if the graph data format for a chart component
  * that needs a time series as a response from a prometheus query (query_range) is