diff options
Diffstat (limited to 'app/assets/javascripts/monitoring')
-rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard.vue | 35 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph.vue | 13 |
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(); }, |