diff options
author | Jose Vargas <jvargas@gitlab.com> | 2018-09-13 22:33:31 +0300 |
---|---|---|
committer | Jose Vargas <jvargas@gitlab.com> | 2018-09-25 19:21:44 +0300 |
commit | d0f81b60e45a0eed8eb863aa9fc9070d1f416f14 (patch) | |
tree | ba817ccfcbefe16aa31d9a57002010e94021e2af | |
parent | 7dd8d37984efb93c58f0f56fe7394ff5d90fbe11 (diff) |
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
5 files changed, 66 insertions, 47 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(); }, diff --git a/changelogs/unreleased/jivl-fix-monitoring-dashboard-resizing-navbar.yml b/changelogs/unreleased/jivl-fix-monitoring-dashboard-resizing-navbar.yml new file mode 100644 index 00000000000..c21301bf6b3 --- /dev/null +++ b/changelogs/unreleased/jivl-fix-monitoring-dashboard-resizing-navbar.yml @@ -0,0 +1,5 @@ +--- +title: Fix resizing of monitoring dashboard +merge_request: 21730 +author: +type: fixed diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js index 997163c7602..a1953382531 100644 --- a/spec/javascripts/monitoring/dashboard_spec.js +++ b/spec/javascripts/monitoring/dashboard_spec.js @@ -25,7 +25,10 @@ describe('Dashboard', () => { }; beforeEach(() => { - setFixtures('<div class="prometheus-graphs"></div>'); + setFixtures(` + <div class="prometheus-graphs"></div> + <div class="nav-sidebar"></div> + `); DashboardComponent = Vue.extend(Dashboard); }); @@ -127,4 +130,41 @@ describe('Dashboard', () => { }); }); }); + + describe('when the window resizes', () => { + let mock; + beforeEach(() => { + mock = new MockAdapter(axios); + mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse); + jasmine.clock().install(); + }); + + afterEach(() => { + mock.restore(); + jasmine.clock().uninstall(); + }); + + it('rerenders the dashboard when the sidebar is resized', done => { + const component = new DashboardComponent({ + el: document.querySelector('.prometheus-graphs'), + propsData: { ...propsData, hasMetrics: true, showPanels: false }, + }); + + expect(component.forceRedraw).toEqual('dashboard-key-0'); + + const navSidebarEl = document.querySelector('.nav-sidebar'); + navSidebarEl.classList.add('nav-sidebar-collapsed'); + + Vue.nextTick() + .then(() => { + jasmine.clock().tick(1000); + return Vue.nextTick(); + }) + .then(() => { + expect(component.forceRedraw).toEqual('dashboard-key-1'); + done(); + }) + .catch(done.fail); + }); + }); }); diff --git a/spec/javascripts/monitoring/graph_spec.js b/spec/javascripts/monitoring/graph_spec.js index 990619b4109..99180e4d303 100644 --- a/spec/javascripts/monitoring/graph_spec.js +++ b/spec/javascripts/monitoring/graph_spec.js @@ -1,7 +1,6 @@ import Vue from 'vue'; import Graph from '~/monitoring/components/graph.vue'; import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins'; -import eventHub from '~/monitoring/event_hub'; import { deploymentData, convertDatesMultipleSeries, @@ -69,23 +68,6 @@ describe('Graph', () => { }); }); - it('sends an event to the eventhub when it has finished resizing', done => { - const component = createComponent({ - graphData: convertedMetrics[1], - updateAspectRatio: false, - deploymentData, - tagsPath, - projectPath, - }); - spyOn(eventHub, '$emit'); - - component.updateAspectRatio = true; - Vue.nextTick(() => { - expect(eventHub.$emit).toHaveBeenCalled(); - done(); - }); - }); - it('has a title for the y-axis and the chart legend that comes from the backend', () => { const component = createComponent({ graphData: convertedMetrics[1], |