Add latest changes from gitlab-org/gitlab@master

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

 <script>
-import { flatten, isNumber } from 'underscore';
+import { flattenDeep, isNumber } from 'lodash';
 import { GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import { roundOffFloat } from '~/lib/utils/common_utils';
 import { hexToRgb } from '~/lib/utils/color_utils';
@@ -77,7 +77,7 @@ export default {
      * This offset is the lowest value.
      */
     yOffset() {
-      const values = flatten(this.series.map(ser => ser.data.map(([, y]) => y)));
+      const values = flattenDeep(this.series.map(ser => ser.data.map(([, y]) => y)));
       const min = values.length ? Math.floor(Math.min(...values)) : 0;
       return min < 0 ? -min : 0;
     },

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

 <script>
-import _ from 'underscore';
+import { omit } from 'lodash';
 import { GlLink, GlButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
@@ -140,7 +140,7 @@ export default {
       return (this.option.series || []).concat(this.scatterSeries ? [this.scatterSeries] : []);
     },
     chartOptions() {
-      const option = _.omit(this.option, 'series');
+      const option = omit(this.option, 'series');
       return {
         series: this.chartOptionSeries,
         xAxis: {

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

 <script>
-import _ from 'underscore';
+import { debounce, pickBy } from 'lodash';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import VueDraggable from 'vuedraggable';
 import {
@@ -15,12 +15,13 @@ import {
 import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
-import Icon from '~/vue_shared/components/icon.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { getParameterValues, mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
-import DateTimePicker from './date_time_picker/date_time_picker.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import { getTimeRange } from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
+import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
 import GroupEmptyState from './group_empty_state.vue';
@@ -28,11 +29,10 @@ import DashboardsDropdown from './dashboards_dropdown.vue';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import { getAddMetricTrackingOptions } from '../utils';
-import { getTimeRange } from './date_time_picker/date_time_picker_lib';
 import { datePickerTimeWindows, metricStates } from '../constants';
-const defaultTimeDiff = getTimeRange();
+const defaultTimeRange = getTimeRange();
 export default {
   components: {
@@ -190,8 +190,8 @@ export default {
     return {
       state: 'gettingStarted',
       formIsValid: null,
-      startDate: getParameterValues('start')[0] || defaultTimeDiff.start,
-      endDate: getParameterValues('end')[0] || defaultTimeDiff.end,
+      startDate: getParameterValues('start')[0] || defaultTimeRange.start,
+      endDate: getParameterValues('end')[0] || defaultTimeRange.end,
       hasValidDates: true,
       datePickerTimeWindows,
       isRearrangingPanels: false,
@@ -288,13 +288,13 @@ export default {
           'Metrics|Link contains an invalid time window, please verify the link to see the requested time range.',
         ),
       );
-      this.startDate = defaultTimeDiff.start;
-      this.endDate = defaultTimeDiff.end;
+      this.startDate = defaultTimeRange.start;
+      this.endDate = defaultTimeRange.end;
     },
     generateLink(group, title, yLabel) {
       const dashboard = this.currentDashboard || this.firstDashboard.path;
-      const params = _.pick({ dashboard, group, title, y_label: yLabel }, value => value != null);
+      const params = pickBy({ dashboard, group, title, y_label: yLabel }, value => value != null);
       return mergeUrlParams(params, window.location.href);
     },
     hideAddMetricModal() {
@@ -306,7 +306,7 @@ export default {
     setFormValidity(isValid) {
       this.formIsValid = isValid;
     },
-    debouncedEnvironmentsSearch: _.debounce(function environmentsSearchOnInput(searchTerm) {
+    debouncedEnvironmentsSearch: debounce(function environmentsSearchOnInput(searchTerm) {
       this.setEnvironmentsSearchTerm(searchTerm);
     }, 500),
     submitCustomMetricsForm() {
@@ -427,6 +427,7 @@ export default {
             class="col-sm-6 col-md-6 col-lg-4"
           >
             <date-time-picker
+              ref="dateTimePicker"
               :start="startDate"
               :end="endDate"
               :time-windows="datePickerTimeWindows"

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 { getTimeRange } from './date_time_picker/date_time_picker_lib';
+import { getTimeRange } from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
 let sidebarMutationObserver;

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

 <script>
 import { mapState } from 'vuex';
-import _ from 'underscore';
+import { pickBy } from 'lodash';
 import {
   GlDropdown,
   GlDropdownItem,
@@ -90,7 +90,7 @@ export default {
     getGraphAlerts(queries) {
       if (!this.allAlerts) return {};
       const metricIdsForChart = queries.map(q => q.metricId);
-      return _.pick(this.allAlerts, alert => metricIdsForChart.includes(alert.metricId));
+      return pickBy(this.allAlerts, alert => metricIdsForChart.includes(alert.metricId));
     },
     getGraphAlertValues(queries) {
       return Object.values(this.getGraphAlerts(queries));

app/assets/javascripts/monitoring/stores/utils.js

-import _ from 'underscore';
+import { omit } from 'lodash';
 export const uniqMetricsId = metric => `${metric.metric_id}_${metric.id}`;
@@ -11,7 +11,7 @@ export const uniqMetricsId = metric => `${metric.metric_id}_${metric.id}`;
  */
 export const normalizeMetric = (metric = {}) =>
-  _.omit(
+  omit(
     {
       ...metric,
       metric_id: uniqMetricsId(metric),

app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker.vue → app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue

@@ -122,30 +122,28 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown
-    ref="dropdown"
-    :text="timeWindowText"
-    menu-class="time-window-dropdown-menu"
-    class="js-time-window-dropdown"
-  >
-    <div class="d-flex justify-content-between time-window-dropdown-menu-container">
+  <gl-dropdown :text="timeWindowText" class="date-time-picker" menu-class="date-time-picker-menu">
+    <div class="d-flex justify-content-between gl-p-2">
       <gl-form-group
         :label="__('Custom range')"
         label-for="custom-from-time"
-        class="custom-time-range-form-group col-md-7 p-0 m-0"
+        label-class="gl-pb-1"
+        class="custom-time-range-form-group col-md-7 gl-pl-1 gl-pr-0 m-0"
       >
-        <date-time-picker-input
-          id="custom-time-from"
-          v-model="startInput"
-          :label="__('From')"
-          :state="startInputValid"
-        />
-        <date-time-picker-input
-          id="custom-time-to"
-          v-model="endInput"
-          :label="__('To')"
-          :state="endInputValid"
-        />
+        <div class="gl-pt-2">
+          <date-time-picker-input
+            id="custom-time-from"
+            v-model="startInput"
+            :label="__('From')"
+            :state="startInputValid"
+          />
+          <date-time-picker-input
+            id="custom-time-to"
+            v-model="endInput"
+            :label="__('To')"
+            :state="endInputValid"
+          />
+        </div>
         <gl-form-group>
           <gl-button @click="closeDropdown">{{ __('Cancel') }}</gl-button>
           <gl-button variant="success" :disabled="!isValid" @click="apply()">
@@ -153,12 +151,10 @@ export default {
           </gl-button>
         </gl-form-group>
       </gl-form-group>
-      <gl-form-group
-        :label="__('Quick range')"
-        label-for="group-id-dropdown"
-        label-align="center"
-        class="col-md-4 p-0 m-0"
-      >
+      <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-pl-1 gl-pr-1 m-0">
+        <template #label>
+          <span class="gl-pl-5">{{ __('Quick range') }}</span>
+        </template>
         <gl-dropdown-item
           v-for="(timeWindow, key) in timeWindows"
           :key="key"

app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue → app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_input.vue

 <script>
-import _ from 'underscore';
+import { uniqueId } from 'lodash';
 import { GlFormGroup, GlFormInput } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import { dateFormats } from './date_time_picker_lib';
@@ -35,7 +35,7 @@ export default {
     id: {
       type: String,
       required: false,
-      default: () => _.uniqueId('dateTimePicker_'),
+      default: () => uniqueId('dateTimePicker_'),
     },
   },
   data() {

app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_lib.js → app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_lib.js

@@ -8,6 +8,15 @@ import { secondsToMilliseconds } from '~/lib/utils/datetime_utility';
  */
 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]))?$/;
+/**
+ * A key-value pair of "time windows".
+ *
+ * A time window is a representation of period of time that starts
+ * some time in past until now. Keys are only used for easy reference.
+ *
+ * It is represented as user friendly `label` and number of `seconds`
+ * to be substracted from now.
+ */
 export const defaultTimeWindows = {
   thirtyMinutes: {
     label: __('30 minutes'),
@@ -58,6 +67,17 @@ export const isValidDate = dateString => {
   }
 };
+/**
+ * For a given time window key (e.g. `threeHours`) and key-value pair
+ * object of time windows.
+ *
+ * Returns a date time range with start and end.
+ *
+ * @param {String} timeWindowKey - A key in the object of time windows.
+ * @param {Object} timeWindows - A key-value pair of time windows,
+ * with a second duration and a label.
+ * @returns An object with time range, start and end dates, in ISO format.
+ */
 export const getTimeRange = (timeWindowKey, timeWindows = defaultTimeWindows) => {
   let difference;
   if (timeWindows[timeWindowKey]) {

app/assets/stylesheets/components/date_time_picker.scss

+.date-time-picker {
+  .date-time-picker-menu {
+    width: 400px;
+  }
+}

app/assets/stylesheets/pages/prometheus.scss

@@ -46,32 +46,6 @@
   }
 }
-.prometheus-graphs-header {
-  .time-window-dropdown-menu {
-    padding: $gl-padding $gl-padding 0 $gl-padding-12;
-  }
-
-  .time-window-dropdown-menu-container {
-    width: 360px;
-  }
-
-  .custom-time-range-form-group > label {
-    padding-bottom: $gl-padding;
-  }
-
-  .monitor-environment-dropdown-menu {
-    &.show {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    .no-matches-message {
-      padding: $gl-padding-8 $gl-padding-12;
-    }
-  }
-}
-
 .prometheus-panel {
   margin-top: 20px;
 }

doc/administration/auth/how_to_configure_ldap_gitlab_ce/index.md

@@ -105,7 +105,7 @@ The initial configuration of LDAP in GitLab requires changes to the `gitlab.rb`
 The two Active Directory specific values are `active_directory: true` and `uid: 'sAMAccountName'`. `sAMAccountName` is an attribute returned by Active Directory used for GitLab usernames. See the example output from `ldapsearch` for a full list of attributes a "person" object (user) has in **AD** - [`ldapsearch` example](#using-ldapsearch-unix)
-> Both group_base and admin_group configuration options are only available in GitLab Enterprise Edition. See [GitLab EE - LDAP Features](../how_to_configure_ldap_gitlab_ee/index.html#gitlab-enterprise-edition---ldap-features) **(STARTER ONLY)**
+> Both group_base and admin_group configuration options are only available in GitLab Enterprise Edition. See [GitLab EE - LDAP Features](../how_to_configure_ldap_gitlab_ee/index.md#gitlab-enterprise-edition---ldap-features) **(STARTER ONLY)**
 ### Example `gitlab.rb` LDAP

doc/administration/geo/replication/version_specific_updates.md

@@ -134,7 +134,7 @@ sudo gitlab-ctl reconfigure
 ```
 If you do not perform this step, you may find that two-factor authentication
-[is broken following DR](../disaster_recovery/index.html#i-followed-the-disaster-recovery-instructions-and-now-two-factor-auth-is-broken).
+[is broken following DR](../disaster_recovery/index.md#i-followed-the-disaster-recovery-instructions-and-now-two-factor-auth-is-broken).
 To prevent SSH requests to the newly promoted **primary** node from failing
 due to SSH host key mismatch when updating the **primary** node domain's DNS record

doc/administration/job_artifacts.md

@@ -369,7 +369,7 @@ If you need to manually remove job artifacts associated with multiple jobs while
    NOTE: **NOTE:**
    This step will also erase artifacts that users have chosen to
-   ["keep"](../user/project/pipelines/job_artifacts.html#browsing-artifacts).
+   ["keep"](../user/project/pipelines/job_artifacts.md#browsing-artifacts).
    ```ruby
    builds_to_clear = builds_with_artifacts.where("finished_at < ?", 1.week.ago)

doc/administration/monitoring/prometheus/index.md

@@ -133,7 +133,7 @@ To use an external Prometheus server:
    ```
 1. Install and set up a dedicated Prometheus instance, if necessary, using the [official installation instructions](https://prometheus.io/docs/prometheus/latest/installation/).
-1. Add the Prometheus server IP address to the [monitoring IP whitelist](../ip_whitelist.html). For example:
+1. Add the Prometheus server IP address to the [monitoring IP whitelist](../ip_whitelist.md). For example:
     ```ruby
     gitlab_rails['monitoring_whitelist'] = ['127.0.0.0/8', '192.168.0.1']

doc/administration/packages/container_registry.md

@@ -744,7 +744,7 @@ project or branch name. Special characters can include:
 To get around this, you can [change the group path](../../user/group/index.md#changing-a-groups-path),
 [change the project path](../../user/project/settings/index.md#renaming-a-repository) or change the
-branch name. Another option is to create a [push rule](../../push_rules/push_rules.html) to prevent
+branch name. Another option is to create a [push rule](../../push_rules/push_rules.md) to prevent
 this at the instance level.
 ### Image push errors

doc/api/audit_events.md

@@ -120,7 +120,7 @@ Example response:
 > [Introduced](https://gitlab.com/gitlab-org/gitlab/issues/34078) in GitLab 12.5.
-The Group Audit Events API allows you to retrieve [group audit events](../administration/audit_events.html#group-events-starter).
+The Group Audit Events API allows you to retrieve [group audit events](../administration/audit_events.md#group-events-starter).
 To retrieve group audit events using the API, you must [authenticate yourself](README.html#authentication) as an Administrator or an owner of the group.

doc/api/award_emoji.md

@@ -10,7 +10,7 @@ Emoji can be awarded on the following (known as "awardables"):
 - [Merge requests](../user/project/merge_requests/index.md) ([API](merge_requests.md)).
 - [Snippets](../user/snippets.md) ([API](snippets.md)).
-Emoji can also [be awarded](../user/award_emojis.html#award-emoji-for-comments) on comments (also known as notes). See also [Notes API](notes.md).
+Emoji can also [be awarded](../user/award_emojis.md#award-emoji-for-comments) on comments (also known as notes). See also [Notes API](notes.md).
 ## Issues, merge requests, and snippets

doc/api/repositories.md

@@ -128,7 +128,7 @@ curl --header "PRIVATE-TOKEN: <your_access_token>" https://gitlab.com/api/v4/pro
 ## Compare branches, tags or commits
 This endpoint can be accessed without authentication if the repository is
-publicly accessible. Note that diffs could have an empty diff string if [diff limits](../development/diffs.html#diff-limits) are reached.
+publicly accessible. Note that diffs could have an empty diff string if [diff limits](../development/diffs.md#diff-limits) are reached.
 ```
 GET /projects/:id/repository/compare

doc/development/i18n/externalization.md

@@ -341,7 +341,7 @@ This also applies when using links in between translated sentences, otherwise th
   ```js
   {{
       sprintf(s__("ClusterIntegration|Learn more about %{linkStart}zones%{linkEnd}"), {
-          linkStart: '<a href="https://cloud.google.com/compute/docs/regions-zones/regions-zones" target="_blank" rel="noopener noreferrer">'
+          linkStart: '<a href="https://cloud.google.com/compute/docs/regions-zones/regions-zones" target="_blank" rel="noopener noreferrer">',
           linkEnd: '</a>',
       })
   }}