Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

6 files changed, 112 insertions, 175 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/bar.vue b/app/assets/javascripts/monitoring/components/charts/bar.vue
index a4cef5ea256..1e0f4b10297 100644
--- a/app/assets/javascripts/monitoring/components/charts/bar.vue
+++ b/app/assets/javascripts/monitoring/components/charts/bar.vue
@@ -1,5 +1,4 @@
 <script>
-import { GlResizeObserverDirective } from '@gitlab/ui';
 import { GlBarChart } from '@gitlab/ui/dist/charts';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { chartHeight } from '../../constants';
@@ -9,9 +8,6 @@ export default {
   components: {
     GlBarChart,
   },
-  directives: {
-    GlResizeObserverDirective,
-  },
   props: {
     graphData: {
       type: Object,
@@ -60,11 +56,6 @@ export default {
     formatLegendLabel(query) {
       return query.label;
     },
-    onResize() {
-      if (!this.$refs.barChart) return;
-      const { width } = this.$refs.barChart.$el.getBoundingClientRect();
-      this.width = width;
-    },
     setSvg(name) {
       getSvgIconPathContent(name)
         .then((path) => {
@@ -81,17 +72,16 @@ export default {
 };
 </script>
 <template>
-  <div v-gl-resize-observer-directive="onResize">
-    <gl-bar-chart
-      ref="barChart"
-      v-bind="$attrs"
-      :data="chartData"
-      :option="chartOptions"
-      :width="width"
-      :height="height"
-      :x-axis-title="xAxisTitle"
-      :y-axis-title="yAxisTitle"
-      :x-axis-type="xAxisType"
-    />
-  </div>
+  <gl-bar-chart
+    ref="barChart"
+    v-bind="$attrs"
+    :responsive="true"
+    :data="chartData"
+    :option="chartOptions"
+    :width="width"
+    :height="height"
+    :x-axis-title="xAxisTitle"
+    :y-axis-title="yAxisTitle"
+    :x-axis-type="xAxisType"
+  />
 </template>
diff --git a/app/assets/javascripts/monitoring/components/charts/column.vue b/app/assets/javascripts/monitoring/components/charts/column.vue
index 37251af2049..e8f54b1fa34 100644
--- a/app/assets/javascripts/monitoring/components/charts/column.vue
+++ b/app/assets/javascripts/monitoring/components/charts/column.vue
@@ -1,5 +1,4 @@
 <script>
-import { GlResizeObserverDirective } from '@gitlab/ui';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import { makeDataSeries } from '~/helpers/monitor_helper';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
@@ -12,9 +11,6 @@ export default {
   components: {
     GlColumnChart,
   },
-  directives: {
-    GlResizeObserverDirective,
-  },
   props: {
     graphData: {
       type: Object,
@@ -83,11 +79,6 @@ export default {
     formatLegendLabel(query) {
       return query.label;
     },
-    onResize() {
-      if (!this.$refs.columnChart) return;
-      const { width } = this.$refs.columnChart.$el.getBoundingClientRect();
-      this.width = width;
-    },
     setSvg(name) {
       getSvgIconPathContent(name)
         .then((path) => {
@@ -101,17 +92,16 @@ export default {
 };
 </script>
 <template>
-  <div v-gl-resize-observer-directive="onResize">
-    <gl-column-chart
-      ref="columnChart"
-      v-bind="$attrs"
-      :bars="barChartData"
-      :option="chartOptions"
-      :width="width"
-      :height="height"
-      :x-axis-title="xAxisTitle"
-      :y-axis-title="yAxisTitle"
-      :x-axis-type="xAxisType"
-    />
-  </div>
+  <gl-column-chart
+    ref="columnChart"
+    v-bind="$attrs"
+    :responsive="true"
+    :bars="barChartData"
+    :option="chartOptions"
+    :width="width"
+    :height="height"
+    :x-axis-title="xAxisTitle"
+    :y-axis-title="yAxisTitle"
+    :x-axis-type="xAxisType"
+  />
 </template>
diff --git a/app/assets/javascripts/monitoring/components/charts/gauge.vue b/app/assets/javascripts/monitoring/components/charts/gauge.vue
index 461ff06be72..0477ff19ffe 100644
--- a/app/assets/javascripts/monitoring/components/charts/gauge.vue
+++ b/app/assets/javascripts/monitoring/components/charts/gauge.vue
@@ -1,5 +1,4 @@
 <script>
-import { GlResizeObserverDirective } from '@gitlab/ui';
 import { GlGaugeChart } from '@gitlab/ui/dist/charts';
 import { isFinite, isArray, isInteger } from 'lodash';
 import { getFormatter, SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
@@ -10,9 +9,6 @@ export default {
   components: {
     GlGaugeChart,
   },
-  directives: {
-    GlResizeObserverDirective,
-  },
   props: {
     graphData: {
       type: Object,
@@ -96,27 +92,19 @@ export default {
       return this.queryResult || NaN;
     },
   },
-  methods: {
-    onResize() {
-      if (!this.$refs.gaugeChart) return;
-      const { width } = this.$refs.gaugeChart.$el.getBoundingClientRect();
-      this.width = width;
-    },
-  },
 };
 </script>
 <template>
-  <div v-gl-resize-observer-directive="onResize">
-    <gl-gauge-chart
-      ref="gaugeChart"
-      v-bind="$attrs"
-      :value="value"
-      :min="rangeValues.min"
-      :max="rangeValues.max"
-      :thresholds="thresholdsValue"
-      :text="textValue"
-      :split-number="splitValue"
-      :width="width"
-    />
-  </div>
+  <gl-gauge-chart
+    ref="gaugeChart"
+    v-bind="$attrs"
+    :responsive="true"
+    :value="value"
+    :min="rangeValues.min"
+    :max="rangeValues.max"
+    :thresholds="thresholdsValue"
+    :text="textValue"
+    :split-number="splitValue"
+    :width="width"
+  />
 </template>
diff --git a/app/assets/javascripts/monitoring/components/charts/heatmap.vue b/app/assets/javascripts/monitoring/components/charts/heatmap.vue
index ed888ef022c..12add274a90 100644
--- a/app/assets/javascripts/monitoring/components/charts/heatmap.vue
+++ b/app/assets/javascripts/monitoring/components/charts/heatmap.vue
@@ -1,5 +1,4 @@
 <script>
-import { GlResizeObserverDirective } from '@gitlab/ui';
 import { GlHeatmap } from '@gitlab/ui/dist/charts';
 import { formatDate, timezones, formats } from '../../format_date';
 import { graphDataValidatorForValues } from '../../utils';
@@ -8,9 +7,6 @@ export default {
   components: {
     GlHeatmap,
   },
-  directives: {
-    GlResizeObserverDirective,
-  },
   props: {
     graphData: {
       type: Object,
@@ -61,26 +57,18 @@ export default {
       return this.graphData.metrics[0];
     },
   },
-  methods: {
-    onResize() {
-      if (this.$refs.heatmapChart) return;
-      const { width } = this.$refs.heatmapChart.$el.getBoundingClientRect();
-      this.width = width;
-    },
-  },
 };
 </script>
 <template>
-  <div v-gl-resize-observer-directive="onResize">
-    <gl-heatmap
-      ref="heatmapChart"
-      v-bind="$attrs"
-      :data-series="chartData"
-      :x-axis-name="xAxisName"
-      :y-axis-name="yAxisName"
-      :x-axis-labels="xAxisLabels"
-      :y-axis-labels="yAxisLabels"
-      :width="width"
-    />
-  </div>
+  <gl-heatmap
+    ref="heatmapChart"
+    v-bind="$attrs"
+    :responsive="true"
+    :data-series="chartData"
+    :x-axis-name="xAxisName"
+    :y-axis-name="yAxisName"
+    :x-axis-labels="xAxisLabels"
+    :y-axis-labels="yAxisLabels"
+    :width="width"
+  />
 </template>
diff --git a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
index a53f899f752..0cf39448d6b 100644
--- a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
+++ b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
@@ -1,5 +1,4 @@
 <script>
-import { GlResizeObserverDirective } from '@gitlab/ui';
 import { GlStackedColumnChart } from '@gitlab/ui/dist/charts';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { s__ } from '~/locale';
@@ -12,9 +11,6 @@ export default {
   components: {
     GlStackedColumnChart,
   },
-  directives: {
-    GlResizeObserverDirective,
-  },
   props: {
     graphData: {
       type: Object,
@@ -125,32 +121,26 @@ export default {
           console.error('SVG could not be rendered correctly: ', e);
         });
     },
-    onResize() {
-      if (!this.$refs.chart) return;
-      const { width } = this.$refs.chart.$el.getBoundingClientRect();
-      this.width = width;
-    },
   },
 };
 </script>
 <template>
-  <div v-gl-resize-observer-directive="onResize">
-    <gl-stacked-column-chart
-      ref="chart"
-      v-bind="$attrs"
-      :bars="chartData"
-      :option="chartOptions"
-      :x-axis-title="xAxisTitle"
-      :y-axis-title="yAxisTitle"
-      :x-axis-type="xAxisType"
-      :group-by="groupBy"
-      :width="width"
-      :height="height"
-      :legend-layout="legendLayout"
-      :legend-average-text="legendAverageText"
-      :legend-current-text="legendCurrentText"
-      :legend-max-text="legendMaxText"
-      :legend-min-text="legendMinText"
-    />
-  </div>
+  <gl-stacked-column-chart
+    ref="chart"
+    v-bind="$attrs"
+    :responsive="true"
+    :bars="chartData"
+    :option="chartOptions"
+    :x-axis-title="xAxisTitle"
+    :y-axis-title="yAxisTitle"
+    :x-axis-type="xAxisType"
+    :group-by="groupBy"
+    :width="width"
+    :height="height"
+    :legend-layout="legendLayout"
+    :legend-average-text="legendAverageText"
+    :legend-current-text="legendCurrentText"
+    :legend-max-text="legendMaxText"
+    :legend-min-text="legendMinText"
+  />
 </template>
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index 5529a94874b..a95b143920b 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlTooltip, GlResizeObserverDirective, GlIcon } from '@gitlab/ui';
+import { GlLink, GlTooltip, GlIcon } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import { isEmpty, omit, throttle } from 'lodash';
 import { makeDataSeries } from '~/helpers/monitor_helper';
@@ -28,9 +28,6 @@ export default {
     GlLink,
     GlIcon,
   },
-  directives: {
-    GlResizeObserverDirective,
-  },
   inheritAttrs: false,
   props: {
     graphData: {
@@ -366,64 +363,58 @@ export default {
       eChart.off('datazoom');
       eChart.on('datazoom', this.throttledDatazoom);
     },
-    onResize() {
-      if (!this.$refs.chart) return;
-      const { width } = this.$refs.chart.$el.getBoundingClientRect();
-      this.width = width;
-    },
   },
 };
 </script>
 
 <template>
-  <div v-gl-resize-observer-directive="onResize">
-    <component
-      :is="glChartComponent"
-      ref="chart"
-      v-bind="$attrs"
-      :group-id="groupId"
-      :data="chartData"
-      :option="chartOptions"
-      :format-tooltip-text="formatTooltipText"
-      :format-annotations-tooltip-text="formatAnnotationsTooltipText"
-      :width="width"
-      :height="height"
-      :legend-layout="legendLayout"
-      :legend-average-text="legendAverageText"
-      :legend-current-text="legendCurrentText"
-      :legend-max-text="legendMaxText"
-      :legend-min-text="legendMinText"
-      @created="onChartCreated"
-      @updated="onChartUpdated"
-    >
-      <template #tooltip-title>
-        <template v-if="tooltip.type === 'deployments'">
-          {{ __('Deployed') }}
-        </template>
-        <div v-else class="text-nowrap">
-          {{ tooltip.title }}
-        </div>
+  <component
+    :is="glChartComponent"
+    ref="chart"
+    v-bind="$attrs"
+    :responsive="true"
+    :group-id="groupId"
+    :data="chartData"
+    :option="chartOptions"
+    :format-tooltip-text="formatTooltipText"
+    :format-annotations-tooltip-text="formatAnnotationsTooltipText"
+    :width="width"
+    :height="height"
+    :legend-layout="legendLayout"
+    :legend-average-text="legendAverageText"
+    :legend-current-text="legendCurrentText"
+    :legend-max-text="legendMaxText"
+    :legend-min-text="legendMinText"
+    @created="onChartCreated"
+    @updated="onChartUpdated"
+  >
+    <template #tooltip-title>
+      <template v-if="tooltip.type === 'deployments'">
+        {{ __('Deployed') }}
       </template>
-      <template #tooltip-content>
-        <div v-if="tooltip.type === 'deployments'" class="d-flex align-items-center">
-          <gl-icon name="commit" class="mr-2" />
-          <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
-        </div>
-        <template v-else>
-          <div
-            v-for="(content, key) in tooltip.content"
-            :key="key"
-            class="d-flex justify-content-between"
-          >
-            <gl-chart-series-label :color="isMultiSeries ? content.color : ''">
-              {{ content.name }}
-            </gl-chart-series-label>
-            <div class="gl-ml-7">
-              {{ content.value }}
-            </div>
+      <div v-else class="text-nowrap">
+        {{ tooltip.title }}
+      </div>
+    </template>
+    <template #tooltip-content>
+      <div v-if="tooltip.type === 'deployments'" class="d-flex align-items-center">
+        <gl-icon name="commit" class="mr-2" />
+        <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
+      </div>
+      <template v-else>
+        <div
+          v-for="(content, key) in tooltip.content"
+          :key="key"
+          class="d-flex justify-content-between"
+        >
+          <gl-chart-series-label :color="isMultiSeries ? content.color : ''">
+            {{ content.name }}
+          </gl-chart-series-label>
+          <div class="gl-ml-7">
+            {{ content.value }}
           </div>
-        </template>
+        </div>
       </template>
-    </component>
-  </div>
+    </template>
+  </component>
 </template>