Add latest changes from gitlab-org/gitlab@master

4 files changed, 7 insertions, 46 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index 78fe575717a..434debb67f5 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -1,17 +1,15 @@
 <script>
 import { s__, __ } from '~/locale';
-import { GlLink, GlButton, GlTooltip } from '@gitlab/ui';
+import { GlLink, GlButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
-import { debounceByAnimationFrame, roundOffFloat } from '~/lib/utils/common_utils';
+import { roundOffFloat } from '~/lib/utils/common_utils';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
 import { chartHeight, graphTypes, lineTypes, symbolSizes, dateFormats } from '../../constants';
 import { makeDataSeries } from '~/helpers/monitor_helper';
 import { graphDataValidatorForValues } from '../../utils';
 
-let debouncedResize;
-
 export default {
   components: {
     GlAreaChart,
@@ -22,6 +20,9 @@ export default {
     GlLink,
     Icon,
   },
+  directives: {
+    GlResizeObserverDirective,
+  },
   inheritAttrs: false,
   props: {
     graphData: {
@@ -29,10 +30,6 @@ export default {
       required: true,
       validator: graphDataValidatorForValues.bind(null, false),
     },
-    containerWidth: {
-      type: Number,
-      required: true,
-    },
     deploymentData: {
       type: Array,
       required: false,
@@ -206,21 +203,13 @@ export default {
       return `${this.graphData.y_label}`;
     },
   },
-  watch: {
-    containerWidth: 'onResize',
-  },
   mounted() {
     const graphTitleEl = this.$refs.graphTitle;
     if (graphTitleEl && graphTitleEl.scrollWidth > graphTitleEl.offsetWidth) {
       this.showTitleTooltip = true;
     }
   },
-  beforeDestroy() {
-    window.removeEventListener('resize', debouncedResize);
-  },
   created() {
-    debouncedResize = debounceByAnimationFrame(this.onResize);
-    window.addEventListener('resize', debouncedResize);
     this.setSvg('rocket');
     this.setSvg('scroll-handle');
   },
@@ -276,7 +265,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"
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index b4ea415bb51..725af920691 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -22,12 +22,9 @@ import MonitorTimeSeriesChart from './charts/time_series.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
-import { sidebarAnimationDuration } from '../constants';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import { getTimeDiff, isValidDate, downloadCSVOptions, generateLinkToChartOptions } from '../utils';
 
-let sidebarMutationObserver;
-
 export default {
   components: {
     VueDraggable,
@@ -167,7 +164,6 @@ export default {
   data() {
     return {
       state: 'gettingStarted',
-      elWidth: 0,
       formIsValid: null,
       selectedTimeWindow: {},
       isRearrangingPanels: false,
@@ -214,11 +210,6 @@ export default {
       projectPath: this.projectPath,
     });
   },
-  beforeDestroy() {
-    if (sidebarMutationObserver) {
-      sidebarMutationObserver.disconnect();
-    }
-  },
   mounted() {
     if (!this.hasMetrics) {
       this.setGettingStartedEmptyState();
@@ -239,13 +230,6 @@ export default {
       } else {
         this.fetchData(range);
       }
-
-      sidebarMutationObserver = new MutationObserver(this.onSidebarMutation);
-      sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
-        attributes: true,
-        childList: false,
-        subtree: false,
-      });
     }
   },
   methods: {
@@ -306,11 +290,6 @@ export default {
     hideAddMetricModal() {
       this.$refs.addMetricModal.hide();
     },
-    onSidebarMutation() {
-      setTimeout(() => {
-        this.elWidth = this.$el.clientWidth;
-      }, sidebarAnimationDuration);
-    },
     toggleRearrangingPanels() {
       this.isRearrangingPanels = !this.isRearrangingPanels;
     },
@@ -503,7 +482,6 @@ export default {
                     generateLink(groupData.group, graphData.title, graphData.y_label)
                   "
                   :graph-data="graphData"
-                  :dashboard-width="elWidth"
                   :alerts-endpoint="alertsEndpoint"
                   :prometheus-alerts-available="prometheusAlertsAvailable"
                   :index="`${index}-${graphIndex}`"
@@ -520,7 +498,6 @@ export default {
             :graph-data="graphData"
             :deployment-data="deploymentData"
             :thresholds="getGraphAlertValues(graphData.queries)"
-            :container-width="elWidth"
             :project-path="projectPath"
             group-id="monitor-time-series-chart"
           >
diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue
index ee3a2bae79b..3cb6ccb64b1 100644
--- a/app/assets/javascripts/monitoring/components/graph_group.vue
+++ b/app/assets/javascripts/monitoring/components/graph_group.vue
@@ -45,7 +45,7 @@ export default {
   <div v-if="showPanels" class="card prometheus-panel">
     <div class="card-header d-flex align-items-center">
       <h4 class="flex-grow-1">{{ name }}</h4>
-      <a role="button" @click="collapse">
+      <a role="button" class="js-graph-group-toggle" @click="collapse">
         <icon :size="16" :aria-label="__('Toggle collapse')" :name="caretIcon" />
       </a>
     </div>
diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue
index 1a14d06f4c8..2c56966f120 100644
--- a/app/assets/javascripts/monitoring/components/panel_type.vue
+++ b/app/assets/javascripts/monitoring/components/panel_type.vue
@@ -40,10 +40,6 @@ export default {
       type: Object,
       required: true,
     },
-    dashboardWidth: {
-      type: Number,
-      required: true,
-    },
     index: {
       type: String,
       required: false,
@@ -103,7 +99,6 @@ export default {
     :deployment-data="deploymentData"
     :project-path="projectPath"
     :thresholds="getGraphAlertValues(graphData.queries)"
-    :container-width="dashboardWidth"
     group-id="monitor-area-chart"
   >
     <div class="d-flex align-items-center">