diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue index 7a0d5f07..1ea1028c 100644 --- a/src/components/PingChart.vue +++ b/src/components/PingChart.vue @@ -57,7 +57,8 @@ export default { 168: "1w", }, - chartRawData: null + chartRawData: null, + chartDataFetchInterval: null, }; }, computed: { @@ -315,6 +316,10 @@ export default { watch: { // Update chart data when the selected chart period changes chartPeriodHrs: function (newPeriod) { + if (this.chartDataFetchInterval) { + clearInterval(this.chartDataFetchInterval); + this.chartDataFetchInterval = null; + } // eslint-disable-next-line eqeqeq if (newPeriod == "0") { @@ -340,6 +345,14 @@ export default { } this.loading = false; }); + + this.chartDataFetchInterval = setInterval(() => { + this.$root.getMonitorChartData(this.monitorId, period, (res) => { + if (res.ok) { + this.chartRawData = res.data; + } + }); + }, 5 * 60 * 1000); } } }, @@ -354,6 +367,11 @@ export default { this.chartPeriodHrs = period; } }, + beforeUnmount() { + if (this.chartDataFetchInterval) { + clearInterval(this.chartDataFetchInterval); + } + }, methods: { // Get color of bar chart for this datapoint getBarColorForDatapoint(datapoint) {