fixed control plane

2026-08-23 21:46:21 +00:00 · 2024-02-29 14:45:55 +00:00
parent df407c6409
commit 7a93406bf1
5 changed files with 160 additions and 24 deletions
@@ -87,11 +87,11 @@ function sendSavedChaosReport() {
  }

  chaosReportprojectName = presetBodyDict["chaosReportProject"];
-  $("#chaosReportAuthorDiv").html("Author: " + presetBodyDict["chaosReportAuthor"]);
-  $("#chaosReportProjectDiv").html("Project: " + presetBodyDict["chaosReportProject"]);
-  $("#chaosReportDateDiv").html("Session Start Date: " + new Date().toLocaleString());
-  $("#chaosReportSessionTimeDiv").html("Session Time: 0");
-  $("#chaosReportCheckSiteURLDiv").html("Observed URL: " + presetBodyDict["chaosReportCheckSiteURL"]);
+  $("#chaosReportAuthorDiv").html(presetBodyDict["chaosReportAuthor"]);
+  $("#chaosReportProjectDiv").html(presetBodyDict["chaosReportProject"]);
+  $("#chaosReportDateDiv").html(new Date().toLocaleString());
+  $("#chaosReportSessionTimeDiv").html("0");
+  $("#chaosReportCheckSiteURLDiv").html(presetBodyDict["chaosReportCheckSiteURL"]);

  if (!isValidURL(presetBodyDict["chaosReportCheckSiteURL"])) {
    alert("Invalid URL");
@@ -194,6 +194,7 @@ function updateChaosReportStartTime(projectName) {

 function drawCanvasHTTPStatusCodeStats() {
  console.log("[SAVE-CHAOS-REPORT-CONF] Updating chart");
+  
  myChart.setOption({
    xAxis: {},
    yAxis: {
@@ -208,6 +209,49 @@ function drawCanvasHTTPStatusCodeStats() {
    ]
  });

+  // console.log("[SAVE-CHAOS-REPORT-CONF] Updating metrics");
+  // console.log("[SAVE-CHAOS-REPORT-CONF] Deleted Pods: " + chart_deleted_pods_total);
+  // console.log("[SAVE-CHAOS-REPORT-CONF] Chaos Jobs: " + chart_chaos_jobs_total);
+  // console.log("[SAVE-CHAOS-REPORT-CONF] Current Chaos Pods: " + chart_current_chaos_job_pod);
+  // console.log("[SAVE-CHAOS-REPORT-CONF] Not Running Pods: " + chart_pods_not_running_on);
+  // console.log("[SAVE-CHAOS-REPORT-CONF] Current Replicas State Delay: " + chart_fewer_replicas_seconds);
+  // console.log("[SAVE-CHAOS-REPORT-CONF] Latest Replicas State Delay: " + chart_latest_fewer_replicas_seconds);
+
+  myMainChaosMetrics.setOption({
+    series: [
+      {
+        type: 'pie',
+        data: [
+          {
+            value: Number(chart_deleted_pods_total),
+            name: 'Deleted Pods'
+          },
+          {
+            value: Number(chart_chaos_jobs_total),
+            name: 'Chaos Jobs'
+          },
+          {
+            value: Number(chart_current_chaos_job_pod),
+            name: 'Current Chaos Pods'
+          },
+          {
+            value: Number(chart_pods_not_running_on),
+            name: 'Not Running Pods'
+          },
+          {
+            value:  Number(chart_fewer_replicas_seconds),
+            name: 'Current Replicas State Delay'
+          },
+          {
+            value:  Number(chart_latest_fewer_replicas_seconds),
+            name: 'Latest Replicas State Delay'
+          }
+        ],
+        roseType: 'area'
+      }
+    ]
+  });
+
 //   while (chaos_report_http_elapsed_time_array.length > 40) {
 //     chaos_report_http_elapsed_time_array.shift();
 //   }
@@ -274,6 +318,12 @@ function drawCanvasHTTPStatusCodeStats() {
 var myChart = echarts.init(document.getElementById('main'));

 option = {
+  legend: {
+    // Try 'horizontal'
+    orient: 'vertical',
+    right: 10,
+    top: 'center'
+  },
  xAxis: {
    data: chaos_report_http_elapsed_time_array,
  },
@@ -282,8 +332,51 @@ option = {
    {
      data: chaos_report_http_elapsed_time_array,
      type: 'line',
-      smooth: true
+      smooth: true,
+      itemStyle: {
+        color: 'red'
+      }
    }
  ]
 };
-myChart.setOption(option);
+myChart.setOption(option);
+
+
+var myMainChaosMetrics = echarts.init(document.getElementById('mainChaosMetrics'));
+
+option = {
+  series: [
+    {
+      type: 'pie',
+      data: [
+        {
+          value: 0,
+          name: 'Deleted Pods'
+        },
+        {
+          value: 0,
+          name: 'Chaos Jobs'
+        },
+        {
+          value: 0,
+          name: 'Current Chaos Pods'
+        },
+        {
+          value: 0,
+          name: 'Not Running Pods'
+        },
+        {
+          value: 0,
+          name: 'Current Replicas State Delay'
+        },
+        {
+          value: 0,
+          name: 'Latest Replicas State Delay'
+        }
+      ],
+      roseType: 'area'
+    }
+  ]
+};
+
+myMainChaosMetrics.setOption(option);
@@ -205,7 +205,7 @@
    </div>
    <div class="container" id="gameContainer" style="width: 50%; height: 50%;">
        <!-- START FIRST ROW -->
-        <div class="row" style="margin-top: 2%;">
+        <div class="row custom-btn-group" style="margin-top: 2%;">
          <!-- START SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
          <div class="row" style="margin-bottom: 2%;">
            <div class="col text-center" style="margin-bottom: 2%;">
@@ -241,12 +241,12 @@
        <div id="game-buttons" style="display: none;">
          <div class="row container">
            <div class="col text-center">
-              <button type="button" id="controlAutoPilotButton" class="btn btn-light" onclick="controlAutoPilot()">Start</button>
+              <button type="button" id="controlAutoPilotButton" class="btn btn-dark" onclick="controlAutoPilot()">Start</button>
+            </div>
+            <div class="col">
            </div>
            <div class="col">
              <input type="range" id="randomFactorInput" name="randomFactorInput" min="0" max="100" value="50" onclick="changeRandomFactor()">
-            </div>
-            <div class="col text-center">
              <label for="randomFactorInput" class="text-kinv" id="randomFactorText">Random Factor:&nbsp;<span id="currentRandomFactor">50</span></label>
            </div>
          </div>
@@ -277,6 +277,8 @@

              <span style="color: #000000" class="text-kinv" id="currentReplicasStateDelayText">Current Replicas State Delay:&nbsp;&nbsp;</span><span id="fewer_replicas_seconds" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;sec</font></span><br>
              <span style="color: #000000" class="text-kinv" id="latestReplicasStateDelayText">Latest Replicas State Delay:&nbsp;&nbsp;<span id="latest_fewer_replicas_seconds" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;sec</font>&nbsp;</span><br>
+              <div id="mainChaosMetrics" style="width: 50%;height: 50%; margin-top: 1%;"></div>
+              
              <!-- <span style="color: #000000" class="text-kinv" id="podsMatchRegexText">PODs match regex:&nbsp;&nbsp;</span><span id="pods_match_regex" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;</font></span> -->
          </div>
          <!-- <div class="progress" style="margin-top: 1%;">
@@ -377,20 +379,47 @@ experiments:
          </div>
        </div>
        <!-- END CHAOS PROGRAMMING MODE SCREEN --> 
-        <div class="row" style="margin-top: 2%; display: none;" id="httpStatsCanvasDiv">
-          <p id="chaosReportProjectDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
-          <p id="chaosReportAuthorDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
-          <p id="chaosReportDateDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
-          <p id="chaosReportSessionTimeDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
-          <p id="chaosReportCheckSiteURLDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
-          <!-- <label for="httpStatsCanvas" style="font-family: 'Courier New', Courier, monospace; font-size: large;">HTTP Elapsed</label>
-          <canvas id="httpStatsCanvas" width="720" height="100" class="http-stats-code-canvas"></canvas> -->
-          <div id="main" style="width: 600px;height:400px;"></div>
-        </div>
+
        <!-- START GAME MODE SCREEN -->
        <div id="game-screen" style="display: none;">
+          <div class="row" style="margin-top: 2%; display: none;" id="httpStatsCanvasDiv">
+            <div style="margin-top: 1%;" class="custom-btn-group text-justify" id="metricsGroup">
+              <table class="table">
+                <thead>
+                  <tr>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>PROJECT</td>
+                    <td><p id="chaosReportProjectDiv"></p></td>
+                  </tr>
+                  <tr>
+                    <td>AUTHOR</td>
+                    <td><p id="chaosReportAuthorDiv"></p></td>
+                  </tr>
+                    <td>Chaos session date</td>
+                    <td><p id="chaosReportDateDiv"></p></td>
+                  <tr>
+                    <td>Chaos session time</td>
+                    <td><p id="chaosReportSessionTimeDiv"></p></td>
+                  </tr>
+                  <tr>
+                    <td>Checked URL</td>
+                    <td><p id="chaosReportCheckSiteURLDiv"></p></td>   
+                  </tr>   
+                  </tr>
+                </tbody>
+              </table>
+
+              <label for="main" style="margin-left: 2%;">HTTP Elapsed (seconds)</label>
+              <div id="main" style="width: 800px; height:400px;"></div>
+            </div>
+          </div>
          <div class="row" style="margin-top: 2%;">
-            <canvas id="myCanvas" width="720" height="480" class="game-canvas"></canvas>
+            <canvas id="myCanvas" width="720" height="480" class="game-canvas custom-btn-group"></canvas>
          </div>
          <div class="row">
            <div class="col text-center">
@@ -102,6 +102,13 @@ var chaos_report_switch = false;
 var chaos_report_http_elapsed_time_array = [];
 var chaosReportprojectName = "";

+var chart_deleted_pods_total = 0;
+var chart_chaos_jobs_total = 0;
+var chart_current_chaos_job_pod = 0;
+var chart_pods_not_running_on = 0;
+var chart_fewer_replicas_seconds = 0;
+var chart_latest_fewer_replicas_seconds = 0;
+
 function getCodeName() {
    var oReq = new XMLHttpRequest();
    oReq.onreadystatechange = function () {
@@ -140,20 +147,25 @@ function getMetrics() {
        var lines = this.responseText.split('\n');
        for (var i = 0;i < lines.length;i++){
            metric = lines[i].split(' ');
+
            if (metric[0] == "chaos_node_jobs_total") {
-                chaos_jobs_total
                $('#chaos_jobs_total').text(metric[1]);
+                chart_chaos_jobs_total = Number(metric[1]);
            }
            else if (metric[0] == "deleted_pods_total") {
+                chart_deleted_pods_total = Number(metric[1]);
                $('#deleted_pods_total').text(metric[1]);            
            }
            else if (metric[0] == "fewer_replicas_seconds") {
+                chart_fewer_replicas_seconds = Number(metric[1]);
                $('#fewer_replicas_seconds').text(metric[1]);            
            }
            else if (metric[0] == "latest_fewer_replicas_seconds") {
+                chart_latest_fewer_replicas_seconds = Number(metric[1]);
                $('#latest_fewer_replicas_seconds').text(metric[1]);            
            }
            else if (metric[0] == "pods_not_running_on_selected_ns") {
+                chart_pods_not_running_on = Number(metric[1]);
                $('#pods_not_running_on').text(metric[1]);            
            }
            else if (metric[0] == "pods_match_regex:" + random_code) {
@@ -164,6 +176,7 @@ function getMetrics() {
                chaos_jobs_status.set(metrics_split[1] + ":" + metrics_split[2] + ":" +  metrics_split[3], metric[1]);
            }
            else if (metric[0] == "current_chaos_job_pod") {
+                chart_current_chaos_job_pod = Number(metric[1]);
                $('#current_chaos_job_pod').text(metric[1]);
            }
        }
@@ -149,7 +149,7 @@ div {
  font-family: pixel;
 }

-.game-canvas { background: #161616 ; display: block; margin: 0 auto; border:1px solid #ffffff;}
+.game-canvas { background: #161616 ; display: block; margin: 0 auto; }

 .http-stats-code-canvas {
  margin-top: 2%;