fix(metrics): node chart race condition EE-5447 (#9249)

app/kubernetes/views/applications/stats/stats.html

@@ -26,7 +26,6 @@
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 
-<div ng-if="ctrl.state.viewReady">
 <information-panel ng-if="!ctrl.state.getMetrics" title-text="Unable to retrieve container metrics">
   <span class="small text-warning vertical-center">
     <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
@@ -117,4 +116,3 @@
     </rd-widget>
   </div>
 </div>
-</div>

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');
+    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 memoryChartCtx = $('#memoryChart');
         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() {

app/kubernetes/views/cluster/node/stats/stats.html

@@ -15,7 +15,6 @@
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 
-<div ng-if="ctrl.state.viewReady">
 <information-panel ng-if="!ctrl.state.getMetrics" title-text="Unable to retrieve node metrics">
   <span class="small text-muted vertical-center">
     <pr-icon icon="'alert-triangle'" mode="'primary'"></pr-icon>
@@ -97,4 +96,3 @@
     </rd-widget>
   </div>
 </div>
-</div>

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 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 memoryChartCtx = $('#memoryChart');
         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();
+        });
+      }
     }
   }
 

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;