Fix monitoring dashboard not working properly

This fixes a bug when the monitoring dashboard wouldn't redraw for when the sidebar
was collapsed/expanded on medium to small screens. This is done by enforcing vue
to update based on the change of a key

2 files changed, 20 insertions, 28 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index ae96ac3b80c..524f4d1f568 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -97,33 +97,45 @@ export default {
       store: new MonitoringStore(),
       state: 'gettingStarted',
       showEmptyState: true,
-      updateAspectRatio: false,
-      updatedAspectRatios: 0,
       hoverData: {},
-      resizeThrottled: {},
+      updateDashboardKeyNumber: 0,
     };
   },
+  computed: {
+    forceRedraw() {
+      return `dashboard-key-${this.updateDashboardKeyNumber}`;
+    },
+  },
   created() {
     this.service = new MonitoringService({
       metricsEndpoint: this.metricsEndpoint,
       deploymentEndpoint: this.deploymentEndpoint,
       environmentsEndpoint: this.environmentsEndpoint,
     });
-    eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
+    this.mutationObserverConfig = {
+      attributes: true,
+      childList: false,
+      subtree: false,
+    };
     eventHub.$on('hoverChanged', this.hoverChanged);
   },
   beforeDestroy() {
-    eventHub.$off('toggleAspectRatio', this.toggleAspectRatio);
     eventHub.$off('hoverChanged', this.hoverChanged);
     window.removeEventListener('resize', this.resizeThrottled, false);
+    this.sidebarMutationObserver.disconnect();
   },
   mounted() {
-    this.resizeThrottled = _.throttle(this.resize, 600);
+    this.resizeThrottled = _.debounce(this.resize, 100);
     if (!this.hasMetrics) {
       this.state = 'gettingStarted';
     } else {
       this.getGraphsData();
       window.addEventListener('resize', this.resizeThrottled, false);
+
+      const sidebarEl = document.querySelector('.nav-sidebar');
+      // The sidebar listener
+      this.sidebarMutationObserver = new MutationObserver(this.resizeThrottled);
+      this.sidebarMutationObserver.observe(sidebarEl, this.mutationObserverConfig);
     }
   },
   methods: {
@@ -153,14 +165,7 @@ export default {
         });
     },
     resize() {
-      this.updateAspectRatio = true;
-    },
-    toggleAspectRatio() {
-      this.updatedAspectRatios += 1;
-      if (this.store.getMetricsCount() === this.updatedAspectRatios) {
-        this.updateAspectRatio = !this.updateAspectRatio;
-        this.updatedAspectRatios = 0;
-      }
+      this.updateDashboardKeyNumber += 1;
     },
     hoverChanged(data) {
       this.hoverData = data;
@@ -172,6 +177,7 @@ export default {
 <template>
   <div
     v-if="!showEmptyState"
+    :key="forceRedraw"
     class="prometheus-graphs prepend-top-default"
   >
     <div class="environments d-flex align-items-center">
@@ -218,7 +224,6 @@ export default {
         :key="index"
         :graph-data="graphData"
         :hover-data="hoverData"
-        :update-aspect-ratio="updateAspectRatio"
         :deployment-data="store.deploymentData"
         :project-path="projectPath"
         :tags-path="tagsPath"
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index a13f30e6079..ff44f51b8f8 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -32,10 +32,6 @@ export default {
       type: Object,
       required: true,
     },
-    updateAspectRatio: {
-      type: Boolean,
-      required: true,
-    },
     deploymentData: {
       type: Array,
       required: true,
@@ -110,15 +106,6 @@ export default {
     },
   },
   watch: {
-    updateAspectRatio() {
-      if (this.updateAspectRatio) {
-        this.graphHeight = 450;
-        this.graphWidth = 600;
-        this.measurements = measurements.large;
-        this.draw();
-        eventHub.$emit('toggleAspectRatio');
-      }
-    },
     hoverData() {
       this.positionFlag();
     },