Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

8 files changed, 30 insertions, 36 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/column.vue b/app/assets/javascripts/monitoring/components/charts/column.vue
index d7d01def45e..511f77a441b 100644
--- a/app/assets/javascripts/monitoring/components/charts/column.vue
+++ b/app/assets/javascripts/monitoring/components/charts/column.vue
@@ -35,18 +35,14 @@ export default {
     };
   },
   computed: {
-    chartData() {
-      const queryData = this.graphData.metrics.reduce((acc, query) => {
+    barChartData() {
+      return this.graphData.metrics.reduce((acc, query) => {
         const series = makeDataSeries(query.result || [], {
           name: this.formatLegendLabel(query),
         });
 
         return acc.concat(series);
       }, []);
-
-      return {
-        values: queryData[0].data,
-      };
     },
     chartOptions() {
       const xAxis = getTimeAxisOptions({ timezone: this.timezone });
@@ -109,7 +105,7 @@ export default {
     <gl-column-chart
       ref="columnChart"
       v-bind="$attrs"
-      :data="chartData"
+      :bars="barChartData"
       :option="chartOptions"
       :width="width"
       :height="height"
diff --git a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
index 9bcd4419a14..66b4d0d86e6 100644
--- a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
+++ b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
@@ -61,14 +61,16 @@ export default {
   },
   computed: {
     chartData() {
-      return this.graphData.metrics.map(({ result }) => {
-        // This needs a fix. Not only metrics[0] should be shown.
-        // See https://gitlab.com/gitlab-org/gitlab/-/issues/220492
-        if (!result || result.length === 0) {
-          return [];
-        }
-        return result[0].values.map(val => val[1]);
-      });
+      return this.graphData.metrics
+        .map(({ label: name, result }) => {
+          // This needs a fix. Not only metrics[0] should be shown.
+          // See https://gitlab.com/gitlab-org/gitlab/-/issues/220492
+          if (!result || result.length === 0) {
+            return [];
+          }
+          return { name, data: result[0].values.map(val => val[1]) };
+        })
+        .slice(0, 1);
     },
     xAxisTitle() {
       return this.graphData.x_label !== undefined ? this.graphData.x_label : '';
@@ -136,7 +138,7 @@ export default {
     <gl-stacked-column-chart
       ref="chart"
       v-bind="$attrs"
-      :data="chartData"
+      :bars="chartData"
       :option="chartOptions"
       :x-axis-title="xAxisTitle"
       :y-axis-title="yAxisTitle"
@@ -144,7 +146,6 @@ export default {
       :group-by="groupBy"
       :width="width"
       :height="height"
-      :series-names="seriesNames"
       :legend-layout="legendLayout"
       :legend-average-text="legendAverageText"
       :legend-current-text="legendCurrentText"
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index 6bae3fdcc2e..bda2adeb62a 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -402,21 +402,21 @@ export default {
       @updated="onChartUpdated"
     >
       <template v-if="tooltip.type === 'deployments'">
-        <template slot="tooltipTitle">
+        <template slot="tooltip-title">
           {{ __('Deployed') }}
         </template>
-        <div slot="tooltipContent" class="d-flex align-items-center">
+        <div slot="tooltip-content" class="d-flex align-items-center">
           <gl-icon name="commit" class="mr-2" />
           <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
         </div>
       </template>
       <template v-else>
-        <template slot="tooltipTitle">
+        <template slot="tooltip-title">
           <div class="text-nowrap">
             {{ tooltip.title }}
           </div>
         </template>
-        <template slot="tooltipContent" :tooltip="tooltip">
+        <template slot="tooltip-content" :tooltip="tooltip">
           <div
             v-for="(content, key) in tooltip.content"
             :key="key"
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index cbfacd73b5b..16c2c87a4b7 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -423,7 +423,7 @@ export default {
         :prometheus-alerts-available="prometheusAlertsAvailable"
         @timerangezoom="onTimeRangeZoom"
       >
-        <template #topLeft>
+        <template #top-left>
           <gl-button
             ref="goBackBtn"
             v-gl-tooltip
diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel.vue b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
index 18310f7c71e..597600bba07 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
@@ -365,7 +365,7 @@ export default {
 <template>
   <div v-gl-resize-observer="onResize" class="prometheus-graph">
     <div class="d-flex align-items-center">
-      <slot name="topLeft"></slot>
+      <slot name="top-left"></slot>
       <h5
         ref="graphTitle"
         class="prometheus-graph-title gl-font-lg font-weight-bold text-truncate gl-mr-3"
diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
index 88d5a35146f..0a1b1cd2c08 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
@@ -85,7 +85,7 @@ export default {
 <template>
   <div class="prometheus-panel-builder">
     <div class="gl-xs-flex-direction-column gl-display-flex gl-mx-n3">
-      <gl-card class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3">
+      <gl-card class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3 gl-mb-5">
         <template #header>
           <h2 class="gl-font-size-h2 gl-my-3">{{ s__('Metrics|1. Define and preview panel') }}</h2>
         </template>
@@ -124,7 +124,7 @@ export default {
       </gl-card>
 
       <gl-card
-        class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3"
+        class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3 gl-mb-5"
         body-class="gl-display-flex gl-flex-direction-column"
       >
         <template #header>
diff --git a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue
index f07483c34b8..481ba3636cb 100644
--- a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue
+++ b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue
@@ -73,7 +73,7 @@ export default {
 <template>
   <gl-card
     v-show="numCharts > 0"
-    class="collapsible-card border p-0 mb-3"
+    class="collapsible-card border p-0 gl-mb-5"
     header-class="d-flex align-items-center border-bottom-0 py-2"
     :body-class="bodyClass"
   >
diff --git a/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue b/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue
index 5563a27301d..4e48292c48d 100644
--- a/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue
+++ b/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlFormGroup, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlFormGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 
 export default {
   components: {
     GlFormGroup,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
   },
   props: {
     name: {
@@ -41,16 +41,13 @@ export default {
 </script>
 <template>
   <gl-form-group :label="label">
-    <gl-deprecated-dropdown
-      toggle-class="dropdown-menu-toggle"
-      :text="text || s__('Metrics|Select a value')"
-    >
-      <gl-deprecated-dropdown-item
+    <gl-dropdown toggle-class="dropdown-menu-toggle" :text="text || s__('Metrics|Select a value')">
+      <gl-dropdown-item
         v-for="val in options.values"
         :key="val.value"
         @click="onUpdate(val.value)"
-        >{{ val.text }}</gl-deprecated-dropdown-item
+        >{{ val.text }}</gl-dropdown-item
       >
-    </gl-deprecated-dropdown>
+    </gl-dropdown>
   </gl-form-group>
 </template>