Merge branch 'tr-underscore-to-lodash-monitoring' into 'master'

Replace underscore with lodash for ~/monitoring

Closes #196674

See merge request gitlab-org/gitlab!23574

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 {
@@ -294,7 +294,7 @@ export default {
 
     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() {

app/assets/javascripts/monitoring/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/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),

ee/app/assets/javascripts/monitoring/components/alert_widget_form.vue

 <script>
-import _ from 'underscore';
+import { isEmpty, findKey } from 'lodash';
 import Vue from 'vue';
 import {
   GlLink,
@@ -118,7 +118,7 @@ export default {
       );
     },
     submitAction() {
-      if (_.isEmpty(this.selectedAlert)) return 'create';
+      if (isEmpty(this.selectedAlert)) return 'create';
       if (this.haveValuesChanged) return 'update';
       return 'delete';
     },
@@ -147,7 +147,7 @@ export default {
   },
   methods: {
     selectQuery(queryId) {
-      const existingAlertPath = _.findKey(this.alertsToManage, alert => alert.metricId === queryId);
+      const existingAlertPath = findKey(this.alertsToManage, alert => alert.metricId === queryId);
       const existingAlert = this.alertsToManage[existingAlertPath];
 
       if (existingAlert) {