Add latest changes from gitlab-org/gitlab@master

11 files changed, 158 insertions, 46 deletions

diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue
index 89d32efec6d..093d993c3ad 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -15,7 +15,6 @@ import {
   GlDropdownDivider,
 } from '@gitlab/ui';
 import { __, sprintf, n__ } from '~/locale';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import Stacktrace from './stacktrace.vue';
@@ -28,7 +27,6 @@ import query from '../queries/details.query.graphql';
 
 export default {
   components: {
-    LoadingButton,
     GlButton,
     GlFormInput,
     GlLink,
@@ -234,19 +232,21 @@ export default {
         </div>
         <div class="error-details-actions">
           <div class="d-inline-flex bv-d-sm-down-none">
-            <loading-button
-              :label="ignoreBtnLabel"
+            <gl-button
               :loading="updatingIgnoreStatus"
               data-qa-selector="update_ignore_status_button"
               @click="onIgnoreStatusUpdate"
-            />
-            <loading-button
+            >
+              {{ ignoreBtnLabel }}
+            </gl-button>
+            <gl-button
               class="btn-outline-info ml-2"
-              :label="resolveBtnLabel"
               :loading="updatingResolveStatus"
               data-qa-selector="update_resolve_status_button"
               @click="onResolveStatusUpdate"
-            />
+            >
+              {{ resolveBtnLabel }}
+            </gl-button>
             <gl-button
               v-if="error.gitlabIssuePath"
               class="ml-2"
@@ -270,14 +270,15 @@ export default {
                 name="issue[sentry_issue_attributes][sentry_issue_identifier]"
               />
               <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" />
-              <loading-button
+              <gl-button
                 v-if="!error.gitlabIssuePath"
                 class="btn-success"
-                :label="__('Create issue')"
                 :loading="issueCreationInProgress"
                 data-qa-selector="create_issue_button"
                 @click="createIssue"
-              />
+              >
+                {{ __('Create issue') }}
+              </gl-button>
             </form>
           </div>
           <gl-dropdown
diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
index 70f257180c6..552e8cac3a7 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -236,6 +236,7 @@ export default {
             </gl-dropdown>
             <div class="filtered-search-input-container flex-fill">
               <gl-form-input
+                v-model="errorSearchQuery"
                 class="pl-2 filtered-search"
                 :disabled="loading"
                 :placeholder="__('Search or filter results…')"
diff --git a/app/assets/javascripts/monitoring/components/charts/options.js b/app/assets/javascripts/monitoring/components/charts/options.js
new file mode 100644
index 00000000000..d9f49bd81f5
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/charts/options.js
@@ -0,0 +1,78 @@
+import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
+import { s__ } from '~/locale';
+
+const yAxisBoundaryGap = [0.1, 0.1];
+/**
+ * Max string length of formatted axis tick
+ */
+const maxDataAxisTickLength = 8;
+
+//  Defaults
+const defaultFormat = SUPPORTED_FORMATS.number;
+
+const defaultYAxisFormat = defaultFormat;
+const defaultYAxisPrecision = 2;
+
+const defaultTooltipFormat = defaultFormat;
+const defaultTooltipPrecision = 3;
+
+// Give enough space for y-axis with units and name.
+const chartGridLeft = 75;
+
+// Axis options
+
+/**
+ * Converts .yml parameters to echarts axis options for data axis
+ * @param {Object} param - Dashboard .yml definition options
+ */
+const getDataAxisOptions = ({ format, precision, name }) => {
+  const formatter = getFormatter(format);
+
+  return {
+    name,
+    nameLocation: 'center', // same as gitlab-ui's default
+    scale: true,
+    axisLabel: {
+      formatter: val => formatter(val, precision, maxDataAxisTickLength),
+    },
+  };
+};
+
+/**
+ * Converts .yml parameters to echarts y-axis options
+ * @param {Object} param - Dashboard .yml definition options
+ */
+export const getYAxisOptions = ({
+  name = s__('Metrics|Values'),
+  format = defaultYAxisFormat,
+  precision = defaultYAxisPrecision,
+} = {}) => {
+  return {
+    nameGap: 63, // larger gap than gitlab-ui's default to fit with formatted numbers
+    scale: true,
+    boundaryGap: yAxisBoundaryGap,
+
+    ...getDataAxisOptions({
+      name,
+      format,
+      precision,
+    }),
+  };
+};
+
+// Chart grid
+
+/**
+ * Grid with enough room to display chart.
+ */
+export const getChartGrid = ({ left = chartGridLeft } = {}) => ({ left });
+
+// Tooltip options
+
+export const getTooltipFormatter = ({
+  format = defaultTooltipFormat,
+  precision = defaultTooltipPrecision,
+} = {}) => {
+  const formatter = getFormatter(format);
+  return num => formatter(num, precision);
+};
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index 1c39fb072d9..cba0a6da6a9 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -4,7 +4,6 @@ import { GlLink, GlButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import { s__, __ } from '~/locale';
-import { getFormatter } from '~/lib/utils/unit_format';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
 import {
@@ -16,6 +15,7 @@ import {
   dateFormats,
   chartColorValues,
 } from '../../constants';
+import { getYAxisOptions, getChartGrid, getTooltipFormatter } from './options';
 import { makeDataSeries } from '~/helpers/monitor_helper';
 import { graphDataValidatorForValues } from '../../utils';
 
@@ -30,15 +30,13 @@ const deploymentYAxisCoords = {
   max: 100,
 };
 
-const THROTTLED_DATAZOOM_WAIT = 1000; // miliseconds
+const THROTTLED_DATAZOOM_WAIT = 1000; // milliseconds
 const timestampToISODate = timestamp => new Date(timestamp).toISOString();
 
 const events = {
   datazoom: 'datazoom',
 };
 
-const yValFormatter = getFormatter('number');
-
 export default {
   components: {
     GlAreaChart,
@@ -167,14 +165,7 @@ export default {
       const option = omit(this.option, ['series', 'yAxis', 'xAxis']);
 
       const dataYAxis = {
-        name: this.yAxisLabel,
-        nameGap: 50, // same as gitlab-ui's default
-        nameLocation: 'center', // same as gitlab-ui's default
-        boundaryGap: [0.1, 0.1],
-        scale: true,
-        axisLabel: {
-          formatter: num => yValFormatter(num, 3),
-        },
+        ...getYAxisOptions(this.graphData.yAxis),
         ...yAxis,
       };
 
@@ -204,6 +195,7 @@ export default {
         series: this.chartOptionSeries,
         xAxis: timeXAxis,
         yAxis: [dataYAxis, deploymentsYAxis],
+        grid: getChartGrid(),
         dataZoom: [this.dataZoomConfig],
         ...option,
       };
@@ -282,8 +274,9 @@ export default {
         },
       };
     },
-    yAxisLabel() {
-      return `${this.graphData.y_label}`;
+    tooltipYFormatter() {
+      // Use same format as y-axis
+      return getTooltipFormatter({ format: this.graphData.yAxis?.format });
     },
   },
   created() {
@@ -315,12 +308,11 @@ export default {
             this.tooltip.commitUrl = deploy.commitUrl;
           } else {
             const { seriesName, color, dataIndex } = dataPoint;
-            const value = yValFormatter(yVal, 3);
 
             this.tooltip.content.push({
               name: seriesName,
               dataIndex,
-              value,
+              value: this.tooltipYFormatter(yVal),
               color,
             });
           }
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index a4073133028..a0bd45bef5e 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -19,7 +19,7 @@ import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
+import { mergeUrlParams, redirectTo, refreshCurrentPage } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
 import Icon from '~/vue_shared/components/icon.vue';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
@@ -351,6 +351,10 @@ export default {
       };
       redirectTo(mergeUrlParams(params, window.location.href));
     },
+
+    refreshDashboard() {
+      refreshCurrentPage();
+    },
   },
   addMetric: {
     title: s__('Metrics|Add metric'),
@@ -438,7 +442,7 @@ export default {
           :label="s__('Metrics|Show last')"
           label-size="sm"
           label-for="monitor-time-window-dropdown"
-          class="col-sm-6 col-md-6 col-lg-4"
+          class="col-sm-auto col-md-auto col-lg-auto"
         >
           <date-time-picker
             ref="dateTimePicker"
@@ -449,6 +453,18 @@ export default {
           />
         </gl-form-group>
 
+        <gl-form-group class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button">
+          <gl-button
+            ref="refreshDashboardBtn"
+            v-gl-tooltip
+            variant="default"
+            :title="s__('Metrics|Reload this page')"
+            @click="refreshDashboard"
+          >
+            <icon name="repeat" />
+          </gl-button>
+        </gl-form-group>
+
         <gl-form-group
           v-if="hasHeaderButtons"
           label-for="prometheus-graphs-dropdown-buttons"
diff --git a/app/assets/javascripts/monitoring/stores/utils.js b/app/assets/javascripts/monitoring/stores/utils.js
index 82deaa7ccfd..0e97d50f317 100644
--- a/app/assets/javascripts/monitoring/stores/utils.js
+++ b/app/assets/javascripts/monitoring/stores/utils.js
@@ -1,5 +1,6 @@
 import { slugify } from '~/lib/utils/text_utility';
 import createGqClient, { fetchPolicies } from '~/lib/graphql';
+import { SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
 export const gqClient = createGqClient(
@@ -75,17 +76,37 @@ const mapToMetricsViewModel = (metrics, defaultLabel) =>
   }));
 
 /**
+ * Maps an axis view model
+ *
+ * Defaults to a 2 digit precision and `number` format. It only allows
+ * formats in the SUPPORTED_FORMATS array.
+ *
+ * @param {Object} axis
+ */
+const mapToAxisViewModel = ({ name = '', format = SUPPORTED_FORMATS.number, precision = 2 }) => {
+  return {
+    name,
+    format: SUPPORTED_FORMATS[format] || SUPPORTED_FORMATS.number,
+    precision,
+  };
+};
+
+/**
  * Maps a metrics panel to its view model
  *
  * @param {Object} panel - Metrics panel
  * @returns {Object}
  */
-const mapToPanelViewModel = ({ title = '', type, y_label, metrics = [] }) => {
+const mapToPanelViewModel = ({ title = '', type, y_label, y_axis = {}, metrics = [] }) => {
+  // Both `y_axis.name` and `y_label` are supported for now
+  // https://gitlab.com/gitlab-org/gitlab/issues/208385
+  const yAxis = mapToAxisViewModel({ name: y_label, ...y_axis }); // eslint-disable-line babel/camelcase
   return {
     title,
     type,
-    y_label,
-    metrics: mapToMetricsViewModel(metrics, y_label),
+    y_label: yAxis.name, // Changing y_label to yLabel is pending https://gitlab.com/gitlab-org/gitlab/issues/207198
+    yAxis,
+    metrics: mapToMetricsViewModel(metrics, yAxis.name),
   };
 };
 
diff --git a/app/assets/javascripts/terminal/terminal.js b/app/assets/javascripts/terminal/terminal.js
index 9c7c10d9864..f4e546e4d4e 100644
--- a/app/assets/javascripts/terminal/terminal.js
+++ b/app/assets/javascripts/terminal/terminal.js
@@ -1,4 +1,4 @@
-import _ from 'underscore';
+import { throttle } from 'lodash';
 import $ from 'jquery';
 import { Terminal } from 'xterm';
 import * as fit from 'xterm/lib/addons/fit/fit';
@@ -85,7 +85,7 @@ export default class GLTerminal {
 
   addScrollListener(onScrollLimit) {
     const viewport = this.container.querySelector('.xterm-viewport');
-    const listener = _.throttle(() => {
+    const listener = throttle(() => {
       onScrollLimit({
         canScrollUp: canScrollUp(viewport, SCROLL_MARGIN),
         canScrollDown: canScrollDown(viewport, SCROLL_MARGIN),
diff --git a/app/assets/javascripts/u2f/authenticate.js b/app/assets/javascripts/u2f/authenticate.js
index abfc81e681e..6244df1180e 100644
--- a/app/assets/javascripts/u2f/authenticate.js
+++ b/app/assets/javascripts/u2f/authenticate.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import _ from 'underscore';
+import { template as lodashTemplate, omit } from 'lodash';
 import importU2FLibrary from './util';
 import U2FError from './error';
 
@@ -37,7 +37,7 @@ export default class U2FAuthenticate {
     // Note: The server library fixes this behaviour in (unreleased) version 1.0.0.
     // This can be removed once we upgrade.
     // https://github.com/castle/ruby-u2f/commit/103f428071a81cd3d5f80c2e77d522d5029946a4
-    this.signRequests = u2fParams.sign_requests.map(request => _(request).omit('challenge'));
+    this.signRequests = u2fParams.sign_requests.map(request => omit(request, 'challenge'));
 
     this.templates = {
       setup: '#js-authenticate-u2f-setup',
@@ -74,7 +74,7 @@ export default class U2FAuthenticate {
 
   renderTemplate(name, params) {
     const templateString = $(this.templates[name]).html();
-    const template = _.template(templateString);
+    const template = lodashTemplate(templateString);
     return this.container.html(template(params));
   }
 
diff --git a/app/assets/javascripts/u2f/register.js b/app/assets/javascripts/u2f/register.js
index 43c814c8070..f5a422727ad 100644
--- a/app/assets/javascripts/u2f/register.js
+++ b/app/assets/javascripts/u2f/register.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import _ from 'underscore';
+import { template as lodashTemplate } from 'lodash';
 import importU2FLibrary from './util';
 import U2FError from './error';
 
@@ -59,7 +59,7 @@ export default class U2FRegister {
 
   renderTemplate(name, params) {
     const templateString = $(this.templates[name]).html();
-    const template = _.template(templateString);
+    const template = lodashTemplate(templateString);
     return this.container.html(template(params));
   }
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
index 8e8e67228ed..ad80a51c5f9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
@@ -53,6 +53,7 @@ export default {
         .then(res => res.data)
         .then(data => {
           eventHub.$emit('UpdateWidgetData', data);
+          eventHub.$emit('MRWidgetUpdateRequested');
         })
         .catch(() => {
           this.isCancellingAutoMerge = false;
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index ea83c61e275..91ac23f427d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -123,13 +123,15 @@ export default class MergeRequestStore {
 
     const currentUser = data.current_user;
 
-    this.cherryPickInForkPath = currentUser.cherry_pick_in_fork_path;
-    this.revertInForkPath = currentUser.revert_in_fork_path;
-
-    this.canRemoveSourceBranch = currentUser.can_remove_source_branch || false;
-    this.canCreateIssue = currentUser.can_create_issue || false;
-    this.canCherryPickInCurrentMR = currentUser.can_cherry_pick_on_current_merge_request || false;
-    this.canRevertInCurrentMR = currentUser.can_revert_on_current_merge_request || false;
+    if (currentUser) {
+      this.cherryPickInForkPath = currentUser.cherry_pick_in_fork_path;
+      this.revertInForkPath = currentUser.revert_in_fork_path;
+
+      this.canRemoveSourceBranch = currentUser.can_remove_source_branch || false;
+      this.canCreateIssue = currentUser.can_create_issue || false;
+      this.canCherryPickInCurrentMR = currentUser.can_cherry_pick_on_current_merge_request || false;
+      this.canRevertInCurrentMR = currentUser.can_revert_on_current_merge_request || false;
+    }
 
     this.setState(data);
   }