Add latest changes from gitlab-org/gitlab@master

4 files changed, 128 insertions, 21 deletions

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),
   };
 };