Add latest changes from gitlab-org/gitlab@master

5 files changed, 26 insertions, 17 deletions

diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index 5a77896f5ef..95b84497de3 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -6,6 +6,7 @@ import EditBlob from './edit_blob';
 import BlobFileDropzone from '../blob/blob_file_dropzone';
 import initPopover from '~/blob/suggest_gitlab_ci_yml';
 import { setCookie } from '~/lib/utils/common_utils';
+import Tracking from '~/tracking';
 
 export default () => {
   const editBlobForm = $('.js-edit-blob-form');
@@ -66,10 +67,19 @@ export default () => {
     initPopover(suggestEl);
 
     if (commitButton) {
-      const commitCookieName = `suggest_gitlab_ci_yml_commit_${suggestEl.dataset.dismissKey}`;
+      const { dismissKey, humanAccess } = suggestEl.dataset;
+      const commitCookieName = `suggest_gitlab_ci_yml_commit_${dismissKey}`;
+      const commitTrackLabel = 'suggest_gitlab_ci_yml_commit_changes';
+      const commitTrackValue = '20';
 
       commitButton.addEventListener('click', () => {
         setCookie(commitCookieName, true);
+
+        Tracking.event(undefined, 'click_button', {
+          label: commitTrackLabel,
+          property: humanAccess,
+          value: commitTrackValue,
+        });
       });
     }
   }
diff --git a/app/assets/javascripts/monitoring/components/charts/single_stat.vue b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
index 225fcfda165..eee5eaa5eca 100644
--- a/app/assets/javascripts/monitoring/components/charts/single_stat.vue
+++ b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
@@ -1,8 +1,10 @@
 <script>
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
-import { roundOffFloat } from '~/lib/utils/common_utils';
+import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
 import { graphDataValidatorForValues } from '../../utils';
 
+const defaultPrecision = 2;
+
 export default {
   components: {
     GlSingleStat,
@@ -25,15 +27,19 @@ export default {
     /**
      * This method formats the query result from a promQL expression
      * allowing a user to format the data in percentile values
-     * by using the `max_value` inner property from the graphData prop
+     * by using the `maxValue` inner property from the graphData prop
      * @returns {(String)}
      */
     statValue() {
-      const chartValue = this.graphData?.max_value
-        ? (this.queryResult / Number(this.graphData.max_value)) * 100
-        : this.queryResult;
+      let formatter;
+
+      if (this.graphData?.maxValue) {
+        formatter = getFormatter(SUPPORTED_FORMATS.percent);
+        return formatter(this.queryResult / Number(this.graphData.maxValue), defaultPrecision);
+      }
 
-      return `${roundOffFloat(chartValue, 1)}${this.queryInfo.unit}`;
+      formatter = getFormatter(SUPPORTED_FORMATS.number);
+      return `${formatter(this.queryResult, defaultPrecision)}${this.queryInfo.unit}`;
     },
     graphTitle() {
       return this.queryInfo.label;
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index f3cbdffec64..ca416650f34 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -13,7 +13,6 @@ import {
   lineWidths,
   symbolSizes,
   dateFormats,
-  chartColorValues,
 } from '../../constants';
 import { getYAxisOptions, getChartGrid, getTooltipFormatter } from './options';
 import { makeDataSeries } from '~/helpers/monitor_helper';
@@ -124,7 +123,7 @@ export default {
       // Transforms & supplements query data to render appropriate labels & styles
       // Input: [{ queryAttributes1 }, { queryAttributes2 }]
       // Output: [{ seriesAttributes1 }, { seriesAttributes2 }]
-      return this.graphData.metrics.reduce((acc, query, i) => {
+      return this.graphData.metrics.reduce((acc, query) => {
         const { appearance } = query;
         const lineType =
           appearance && appearance.line && appearance.line.type
@@ -145,7 +144,6 @@ export default {
           lineStyle: {
             type: lineType,
             width: lineWidth,
-            color: chartColorValues[i % chartColorValues.length],
           },
           showSymbol: false,
           areaStyle: this.graphData.type === 'area-chart' ? areaStyle : undefined,
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
index 4fd6903d566..f9a911ddf03 100644
--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -67,13 +67,6 @@ export const colorValues = {
   anomalyAreaColor: '#1f78d1',
 };
 
-export const chartColorValues = [
-  '#1f78d1', // $blue-500 (see variables.scss)
-  '#1aaa55', // $green-500
-  '#fc9403', // $orange-500
-  '#6d49cb', // $purple
-];
-
 export const lineTypes = {
   default: 'solid',
 };
diff --git a/app/assets/javascripts/monitoring/stores/utils.js b/app/assets/javascripts/monitoring/stores/utils.js
index 48ed2259a51..b5938fb1205 100644
--- a/app/assets/javascripts/monitoring/stores/utils.js
+++ b/app/assets/javascripts/monitoring/stores/utils.js
@@ -109,6 +109,7 @@ const mapPanelToViewModel = ({
   y_label,
   y_axis = {},
   metrics = [],
+  max_value,
 }) => {
   // Both `x_axis.name` and `x_label` are supported for now
   // https://gitlab.com/gitlab-org/gitlab/issues/210521
@@ -125,6 +126,7 @@ const mapPanelToViewModel = ({
     y_label: yAxis.name, // Changing y_label to yLabel is pending https://gitlab.com/gitlab-org/gitlab/issues/207198
     yAxis,
     xAxis,
+    maxValue: max_value,
     metrics: mapToMetricsViewModel(metrics, yAxis.name),
   };
 };