From 5950665330b5717b4de0c9ffce16ff2b95063ddd Mon Sep 17 00:00:00 2001
From: luckysideburn <luckysideburn@gmail.com>
Date: Thu, 29 Feb 2024 21:19:39 +0000
Subject: [PATCH] feature/resilience_namespace_report

---
 html5/chaos_report.js | 73 ++++++++++++++++++++++++++++++++++++++++---
 html5/index.html      | 13 +++++---
 2 files changed, 77 insertions(+), 9 deletions(-)

diff --git a/html5/chaos_report.js b/html5/chaos_report.js
index 430bddd..d735380 100644
--- a/html5/chaos_report.js
+++ b/html5/chaos_report.js
@@ -83,6 +83,8 @@ function sendSavedChaosReport() {
   startGameMode()
   chaos_report_switch = true;
   document.getElementById("httpStatsCanvasDiv").style.display = "block";
+  document.getElementById("chartDiv").style.display = "block";
+
   drawCanvasHTTPStatusCodeStats()
   var presetBodyDict = {
     "chaosReportAuthor": $("#chaosReportAuthor").val(),
@@ -137,6 +139,17 @@ function sendSavedChaosReport() {
   console.log("[SAVE-CHAOS-REPORT-CONF] Sending configuration to Nginx: " + JSON.stringify(presetBodyDict));
   oReq.send(JSON.stringify(presetBodyDict));
   closePrepareChaosReportModal();
+  
+  if(myHTTPStatusCodeChart != null && myHTTPStatusCodeChart != undefined){
+    myHTTPStatusCodeChart.resize();
+  }
+  if(myMainChaosMetrics != null && myMainChaosMetrics != undefined){
+    myMainChaosMetrics.resize();
+  }
+  if(myHTTPElapsedChart != null && myHTTPElapsedChart != undefined){
+    myHTTPElapsedChart.resize();
+  }
+
 }
 
 function readContentOfUploadedFile() {
@@ -209,7 +222,7 @@ function updateChaosReportStartTime(projectName) {
 function drawCanvasHTTPStatusCodeStats() {
   console.log("[SAVE-CHAOS-REPORT-CONF] Updating chart");
   
-  myChart.setOption({
+  myHTTPElapsedChart.setOption({
     xAxis: {},
     yAxis: {
       data: chaos_report_http_elapsed_time_array,
@@ -329,7 +342,7 @@ function drawCanvasHTTPStatusCodeStats() {
 //   }
 }
 
-var myChart = echarts.init(document.getElementById('main'));
+var myHTTPElapsedChart = echarts.init(document.getElementById('httpElapsedChart'));
 
 option = {
   legend: {
@@ -353,7 +366,7 @@ option = {
     }
   ]
 };
-myChart.setOption(option);
+myHTTPElapsedChart.setOption(option);
 
 
 var myMainChaosMetrics = echarts.init(document.getElementById('mainChaosMetrics'));
@@ -393,4 +406,56 @@ option = {
   ]
 };
 
-myMainChaosMetrics.setOption(option);
\ No newline at end of file
+myMainChaosMetrics.setOption(option);
+
+var myHTTPStatusCodeChart = echarts.init(document.getElementById('httpStatusCodeChart'));
+
+option = {
+  series: [
+    {
+      type: 'pie',
+      data: [
+        {
+          value: 23,
+          name: '200',
+          itemStyle: {color: 'green'},
+        },
+        {
+          value: 34,
+          name: '500',
+          itemStyle: {color: 'red'},
+        },
+        {
+          value: 34,
+          name: '502',
+          itemStyle: {color: 'grey'},
+        },
+        {
+          value: 34,
+          name: '504',
+          itemStyle: {color: 'black'},
+        },
+        {
+          value: 34,
+          name: 'other',
+          itemStyle: {color: 'yellow'},
+        },
+      ],
+      roseType: 'area'
+    }
+  ]
+};
+
+myHTTPStatusCodeChart.setOption(option);
+
+$(window).on('resize', function(){
+  if(myHTTPStatusCodeChart != null && myHTTPStatusCodeChart != undefined){
+    myHTTPStatusCodeChart.resize();
+  }
+  if(myMainChaosMetrics != null && myMainChaosMetrics != undefined){
+    myMainChaosMetrics.resize();
+  }
+  if(myHTTPElapsedChart != null && myHTTPElapsedChart != undefined){
+    myHTTPElapsedChart.resize();
+  }
+});
\ No newline at end of file
diff --git a/html5/index.html b/html5/index.html
index 23b2a32..585d0d9 100644
--- a/html5/index.html
+++ b/html5/index.html
@@ -379,7 +379,7 @@ experiments:
           </div>
         </div>
         <!-- END CHAOS PROGRAMMING MODE SCREEN --> 
-
+  
         <!-- START GAME MODE SCREEN -->
         <div id="game-screen" style="display: none;">
           <div class="row" style="margin-top: 2%; display: none;" id="httpStatsCanvasDiv">
@@ -413,11 +413,14 @@ experiments:
                   </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 id="chartDiv" style="display: none;">
+              <label for="httpElapsedChart" style="margin-left: 2%; margin-top: 2%">HTTP Elapsed (seconds)</label>
+              <div id="httpElapsedChart" style="width: 100%; height: 400px;" ></div>
+              <label for="httpStatusCodeChart" style="margin-left: 2%;">HTTP Status Code</label>
+              <div id="httpStatusCodeChart" style="width: 50%; height: 200;"></div>
+            </div>
+          </div>          
           <div class="row" style="margin-top: 2%;">
             <canvas id="myCanvas" width="720" height="480" class="game-canvas custom-btn-group"></canvas>
           </div>