Add latest changes from gitlab-org/gitlab@master

3 files changed, 39 insertions, 36 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/column.vue b/app/assets/javascripts/monitoring/components/charts/column.vue
index eb407ad1d7f..0acdfe7675c 100644
--- a/app/assets/javascripts/monitoring/components/charts/column.vue
+++ b/app/assets/javascripts/monitoring/components/charts/column.vue
@@ -1,6 +1,6 @@
 <script>
+import { GlResizeObserverDirective } from '@gitlab/ui';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
-import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { chartHeight } from '../../constants';
 import { makeDataSeries } from '~/helpers/monitor_helper';
@@ -10,24 +10,21 @@ export default {
   components: {
     GlColumnChart,
   },
-  inheritAttrs: false,
+  directives: {
+    GlResizeObserverDirective,
+  },
   props: {
     graphData: {
       type: Object,
       required: true,
       validator: graphDataValidatorForValues.bind(null, false),
     },
-    containerWidth: {
-      type: Number,
-      required: true,
-    },
   },
   data() {
     return {
       width: 0,
       height: chartHeight,
       svgs: {},
-      debouncedResizeCallback: {},
     };
   },
   computed: {
@@ -68,15 +65,7 @@ export default {
       };
     },
   },
-  watch: {
-    containerWidth: 'onResize',
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.debouncedResizeCallback);
-  },
   created() {
-    this.debouncedResizeCallback = debounceByAnimationFrame(this.onResize);
-    window.addEventListener('resize', this.debouncedResizeCallback);
     this.setSvg('scroll-handle');
   },
   methods: {
@@ -84,6 +73,7 @@ export default {
       return `${query.label}`;
     },
     onResize() {
+      if (!this.$refs.columnChart) return;
       const { width } = this.$refs.columnChart.$el.getBoundingClientRect();
       this.width = width;
     },
@@ -100,7 +90,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prometheus-graph">
+  <div v-gl-resize-observer-directive="onResize" class="prometheus-graph">
     <div class="prometheus-graph-header">
       <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphData.title }}</h5>
       <div ref="graphWidgets" class="prometheus-graph-widgets"><slot></slot></div>
diff --git a/app/assets/javascripts/monitoring/components/charts/heatmap.vue b/app/assets/javascripts/monitoring/components/charts/heatmap.vue
index 6ab5aaeba1d..881904cbd0c 100644
--- a/app/assets/javascripts/monitoring/components/charts/heatmap.vue
+++ b/app/assets/javascripts/monitoring/components/charts/heatmap.vue
@@ -1,26 +1,29 @@
 <script>
+import { GlResizeObserverDirective } from '@gitlab/ui';
 import { GlHeatmap } from '@gitlab/ui/dist/charts';
 import dateformat from 'dateformat';
 import PrometheusHeader from '../shared/prometheus_header.vue';
-import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 import { graphDataValidatorForValues } from '../../utils';
 
 export default {
   components: {
     GlHeatmap,
-    ResizableChartContainer,
     PrometheusHeader,
   },
+  directives: {
+    GlResizeObserverDirective,
+  },
   props: {
     graphData: {
       type: Object,
       required: true,
       validator: graphDataValidatorForValues.bind(null, false),
     },
-    containerWidth: {
-      type: Number,
-      required: true,
-    },
+  },
+  data() {
+    return {
+      width: 0,
+    };
   },
   computed: {
     chartData() {
@@ -52,22 +55,27 @@ 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 class="prometheus-graph col-12 col-lg-6">
+  <div v-gl-resize-observer-directive="onResize" class="prometheus-graph col-12 col-lg-6">
     <prometheus-header :graph-title="graphData.title" />
-    <resizable-chart-container>
-      <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="containerWidth"
-      />
-    </resizable-chart-container>
+    <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>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue
index 9c50d3190b9..4d067365ed9 100644
--- a/app/assets/javascripts/monitoring/components/panel_type.vue
+++ b/app/assets/javascripts/monitoring/components/panel_type.vue
@@ -14,6 +14,7 @@ import MonitorTimeSeriesChart from './charts/time_series.vue';
 import MonitorAnomalyChart from './charts/anomaly.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
 import MonitorHeatmapChart from './charts/heatmap.vue';
+import MonitorColumnChart from './charts/column.vue';
 import MonitorEmptyChart from './charts/empty_chart.vue';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import { downloadCSVOptions, generateLinkToChartOptions } from '../utils';
@@ -21,6 +22,7 @@ import { downloadCSVOptions, generateLinkToChartOptions } from '../utils';
 export default {
   components: {
     MonitorSingleStatChart,
+    MonitorColumnChart,
     MonitorHeatmapChart,
     MonitorEmptyChart,
     Icon,
@@ -114,7 +116,10 @@ export default {
   <monitor-heatmap-chart
     v-else-if="isPanelType('heatmap') && graphDataHasMetrics"
     :graph-data="graphData"
-    :container-width="dashboardWidth"
+  />
+  <monitor-column-chart
+    v-else-if="isPanelType('column') && graphDataHasMetrics"
+    :graph-data="graphData"
   />
   <component
     :is="monitorChartComponent"