From 400d95c1a51e24d8b28b12bf4c761b6d75501c7b Mon Sep 17 00:00:00 2001 From: Dakota Walsh <101994734+dakota-portainer@users.noreply.github.com> Date: Thu, 27 Jul 2023 11:46:38 +1200 Subject: [PATCH] fix(metrics): node chart race condition EE-5447 (#9249) --- .../views/applications/stats/stats.html | 164 +++++++++--------- .../applications/stats/statsController.js | 32 ++-- .../views/cluster/node/stats/stats.html | 148 ++++++++-------- .../cluster/node/stats/statsController.js | 39 +++-- .../views/configure/configureController.js | 2 +- 5 files changed, 197 insertions(+), 188 deletions(-) diff --git a/app/kubernetes/views/applications/stats/stats.html b/app/kubernetes/views/applications/stats/stats.html index 01b47510c..dcc367cd9 100644 --- a/app/kubernetes/views/applications/stats/stats.html +++ b/app/kubernetes/views/applications/stats/stats.html @@ -26,95 +26,93 @@ -
- - - - Portainer was unable to retrieve any metrics associated to that container. Please contact your administrator to ensure that the Kubernetes metrics feature is properly - configured. - - -
-
- -
-
-
- -
- About statistics + + + + Portainer was unable to retrieve any metrics associated to that container. Please contact your administrator to ensure that the Kubernetes metrics feature is properly + configured. + + +
+
+ +
+
+
+
+ About statistics
- -
-
-
- - This view displays real-time statistics about the container {{ ctrl.state.transition.containerName | trimcontainername }}. - -
-
-
- -
- -
- - +
+ + +
+
+ + This view displays real-time statistics about the container {{ ctrl.state.transition.containerName | trimcontainername }}.
-
-
- - - Network stats are unavailable for this container. - -
+
+
+ +
+
- - - -
-
- -
-
- -
-
-
- + + + +
+
+
+ + + Network stats are unavailable for this container. +
- Memory usage
-
- -
- -
- - -
-
- -
-
-
- -
- CPU usage -
-
- -
- -
- - -
+ + + +
+
+ +
+
+ +
+
+
+ +
+ Memory usage +
+
+ +
+ +
+ + +
+
+ +
+
+
+ +
+ CPU usage +
+
+ +
+ +
+ +
diff --git a/app/kubernetes/views/applications/stats/statsController.js b/app/kubernetes/views/applications/stats/statsController.js index 65a43199e..5217460aa 100644 --- a/app/kubernetes/views/applications/stats/statsController.js +++ b/app/kubernetes/views/applications/stats/statsController.js @@ -19,6 +19,7 @@ class KubernetesApplicationStatsController { this.ChartService = ChartService; this.onInit = this.onInit.bind(this); + this.initCharts = this.initCharts.bind(this); } changeUpdateRepeater() { @@ -68,17 +69,26 @@ class KubernetesApplicationStatsController { } initCharts() { - const cpuChartCtx = $('#cpuChart'); - const cpuChart = this.ChartService.CreateCPUChart(cpuChartCtx); - this.cpuChart = cpuChart; - - const memoryChartCtx = $('#memoryChart'); - const memoryChart = this.ChartService.CreateMemoryChart(memoryChartCtx); - this.memoryChart = memoryChart; - - this.updateCPUChart(); - this.updateMemoryChart(); - this.setUpdateRepeater(); + let i = 0; + const findCharts = setInterval(() => { + let cpuChartCtx = $('#cpuChart'); + let memoryChartCtx = $('#memoryChart'); + if (cpuChartCtx.length !== 0 && memoryChartCtx.length !== 0) { + const cpuChart = this.ChartService.CreateCPUChart(cpuChartCtx); + this.cpuChart = cpuChart; + const memoryChart = this.ChartService.CreateMemoryChart(memoryChartCtx); + this.memoryChart = memoryChart; + this.updateCPUChart(); + this.updateMemoryChart(); + this.setUpdateRepeater(); + clearInterval(findCharts); + return; + } + i++; + if (i >= 10) { + clearInterval(findCharts); + } + }, 200); } getStats() { diff --git a/app/kubernetes/views/cluster/node/stats/stats.html b/app/kubernetes/views/cluster/node/stats/stats.html index 92bda8a04..d53650bbf 100644 --- a/app/kubernetes/views/cluster/node/stats/stats.html +++ b/app/kubernetes/views/cluster/node/stats/stats.html @@ -15,86 +15,84 @@ -
- - - - Portainer was unable to retrieve any metrics associated to that node. Please contact your administrator to ensure that the Kubernetes metrics feature is properly configured. - - -
-
- -
-
-
- -
- About statistics + + + + Portainer was unable to retrieve any metrics associated to that node. Please contact your administrator to ensure that the Kubernetes metrics feature is properly configured. + + +
+
+ +
+
+
+
+ About statistics
- -
-
-
- - This view displays real-time statistics about the node {{ ctrl.state.transition.nodeName }}. - -
-
-
- -
- -
- - +
+ + +
+
+ + This view displays real-time statistics about the node {{ ctrl.state.transition.nodeName }}.
- - - -
-
- -
-
- -
-
-
- +
+
+ +
+
- Memory usage + + +
-
- -
- -
- - -
-
- -
-
-
- -
- CPU usage -
-
- -
- -
- - -
+ + + +
+
+ +
+
+ +
+
+
+ +
+ Memory usage +
+
+ +
+ +
+ + +
+
+ +
+
+
+ +
+ CPU usage +
+
+ +
+ +
+ +
diff --git a/app/kubernetes/views/cluster/node/stats/statsController.js b/app/kubernetes/views/cluster/node/stats/statsController.js index 9b5448c99..1400ff5fc 100644 --- a/app/kubernetes/views/cluster/node/stats/statsController.js +++ b/app/kubernetes/views/cluster/node/stats/statsController.js @@ -17,6 +17,7 @@ class KubernetesNodeStatsController { this.ChartService = ChartService; this.onInit = this.onInit.bind(this); + this.initCharts = this.initCharts.bind(this); } changeUpdateRepeater() { @@ -63,17 +64,20 @@ class KubernetesNodeStatsController { } initCharts() { - const cpuChartCtx = $('#cpuChart'); - const cpuChart = this.ChartService.CreateCPUChart(cpuChartCtx); - this.cpuChart = cpuChart; - - const memoryChartCtx = $('#memoryChart'); - const memoryChart = this.ChartService.CreateMemoryChart(memoryChartCtx); - this.memoryChart = memoryChart; - - this.updateCPUChart(); - this.updateMemoryChart(); - this.setUpdateRepeater(); + const findCharts = setInterval(() => { + let cpuChartCtx = $('#cpuChart'); + let memoryChartCtx = $('#memoryChart'); + if (cpuChartCtx.length !== 0 && memoryChartCtx.length !== 0) { + const cpuChart = this.ChartService.CreateCPUChart(cpuChartCtx); + this.cpuChart = cpuChart; + const memoryChart = this.ChartService.CreateMemoryChart(memoryChartCtx); + this.memoryChart = memoryChart; + this.updateCPUChart(); + this.updateMemoryChart(); + this.setUpdateRepeater(); + clearInterval(findCharts); + } + }, 200); } getStats() { @@ -84,7 +88,7 @@ class KubernetesNodeStatsController { const memory = filesizeParser(stats.usage.memory); const cpu = KubernetesResourceReservationHelper.parseCPU(stats.usage.cpu); this.stats = { - read: stats.creationTimestamp, + read: stats.metadata.creationTimestamp, MemoryUsage: memory, CPUUsage: (cpu / this.nodeCPU) * 100, }; @@ -118,12 +122,6 @@ class KubernetesNodeStatsController { this.nodeCPU = node.CPU || 1; await this.getStats(); - - if (this.state.getMetrics) { - this.$document.ready(() => { - this.initCharts(); - }); - } } else { this.state.getMetrics = false; } @@ -132,6 +130,11 @@ class KubernetesNodeStatsController { this.Notifications.error('Failure', err, 'Unable to retrieve node stats'); } finally { this.state.viewReady = true; + if (this.state.getMetrics) { + this.$document.ready(() => { + this.initCharts(); + }); + } } } diff --git a/app/kubernetes/views/configure/configureController.js b/app/kubernetes/views/configure/configureController.js index d500440dc..ae2d1ec7e 100644 --- a/app/kubernetes/views/configure/configureController.js +++ b/app/kubernetes/views/configure/configureController.js @@ -189,7 +189,7 @@ class KubernetesConfigureController { await getMetricsForAllNodes(this.endpoint.Id); this.state.metrics.isServerRunning = true; this.state.metrics.pending = false; - this.state.metrics.userClick = false; + this.state.metrics.userClick = true; this.formValues.UseServerMetrics = true; } catch (_) { this.state.metrics.isServerRunning = false;