Change forceRedraw key formatjivl-fix-monitoring-dashboard-resizing-navbar

2 files changed, 5 insertions, 5 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 228eff006f7..67338aa96c3 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -98,12 +98,12 @@ export default {
       state: 'gettingStarted',
       showEmptyState: true,
       hoverData: {},
-      updateDashboardKeyNumber: 0,
+      elWidth: 0,
     };
   },
   computed: {
     forceRedraw() {
-      return `dashboard-key-${this.updateDashboardKeyNumber}`;
+      return this.elWidth;
     },
   },
   created() {
@@ -165,7 +165,7 @@ export default {
         });
     },
     resize() {
-      this.updateDashboardKeyNumber += 1;
+      this.elWidth = this.$el.clientWidth;
     },
     hoverChanged(data) {
       this.hoverData = data;
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index a1953382531..f0d53b2d8d7 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -150,7 +150,7 @@ describe('Dashboard', () => {
         propsData: { ...propsData, hasMetrics: true, showPanels: false },
       });
 
-      expect(component.forceRedraw).toEqual('dashboard-key-0');
+      expect(component.forceRedraw).toEqual(0);
 
       const navSidebarEl = document.querySelector('.nav-sidebar');
       navSidebarEl.classList.add('nav-sidebar-collapsed');
@@ -161,7 +161,7 @@ describe('Dashboard', () => {
           return Vue.nextTick();
         })
         .then(() => {
-          expect(component.forceRedraw).toEqual('dashboard-key-1');
+          expect(component.forceRedraw).toEqual(component.elWidth);
           done();
         })
         .catch(done.fail);