From a50ca60856ebc43a11875b208299df1ca9db46ac Mon Sep 17 00:00:00 2001
From: luckysideburn <luckysideburn@gmail.com>
Date: Fri, 30 Aug 2024 07:51:26 +0000
Subject: [PATCH] some improvements

---
 html5/index.html        | 129 ++++++++++++++++++++++++++++-
 html5/kubeinvaders.js   |  57 ++++++++++++-
 html5/settings.html     | 174 ++++++++++++++++++++++++++++++++++++++++
 html5/utils.js          |   1 -
 nginx/KubeInvaders.conf |  19 +++++
 5 files changed, 375 insertions(+), 5 deletions(-)
 create mode 100644 html5/settings.html
diff --git a/html5/index.html b/html5/index.html
index a3ca1d8..46e9cc4 100644
--- a/html5/index.html
+++ b/html5/index.html
@@ -97,6 +97,50 @@
         left: 10px;
         z-index: 999; /* Ensure it's above other elements */
       }
+
+      .settings {
+        background: #fff;
+        padding: 20px;
+        margin-top: 20px;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0,0,0,0.1);
+      }
+      
+      .settings h2 {
+        margin-top: 0;
+      }
+        
+      .setting-group {
+        margin-bottom: 20px;
+      }
+        
+      .setting-group label {
+        display: block;
+        margin-bottom: 5px;
+      }
+        
+      .setting-group input,
+      .setting-group select {
+        width: 100%;
+        padding: 8px;
+        margin-bottom: 10px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+      }
+      
+      .setting-group button {
+        background: #333;
+        color: #fff;
+        border: none;
+        padding: 10px 20px;
+        cursor: pointer;
+        border-radius: 4px;
+      }
+        
+      .setting-group button:hover {
+        background: #555;
+      }
+
     </style>
   </head>
   <body id="kinvBody">  
@@ -399,7 +443,7 @@ Using YAML programming, you can define your own chaos engineering experiments an
             <!-- START METRICS ROW -->
             <div class="row text-justify" align="center" id="metricsPresetsRow">
               <div style="margin-top: 1%;" class="text-justify" id="metricsGroup">
-  
+                  <!--   
                   <span style="color: #b2afaf;" class="text-kinv text-wrap" id="currentGameNamespaceLabel">Selected Namespace:&nbsp;&nbsp;<span id="currentGameNamespace" style="color: #3ac961;" class="text-break">NULL</span></span><br>
                   <span style="color: #b2afaf;" class="text-kinv" id="deletedPodsTotalText">Deleted Pods Total:&nbsp;&nbsp;<span id="deleted_pods_total" style="color: #3ac961">0</span></span><br>
                   <span style="color: #b2afaf"  class="text-kinv" id="chaosJobTotalText">Chaos Jobs Total:&nbsp;&nbsp;<span id="chaos_jobs_total" style="color: #3ac961">0</span></span><br>
@@ -409,8 +453,71 @@ Using YAML programming, you can define your own chaos engineering experiments an
   
                   <span style="color: #b2afaf" 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: #b2afaf" 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: 100%;height: 70%; margin-top: 1%;"></div>
-                  
+                  <div id="mainChaosMetrics" style="width: 100%;height: 70%; margin-top: 1%;"></div> 
+                  -->
+                <style>
+                  .status-label {
+                    color: #444242; /* Colore per le etichette */
+                    font-weight: bold;
+                    font-size: 14px;
+                  }
+                
+                  .status-value {
+                    color: #000000; /* Colore blu scuro per i valori */
+                    font-weight: normal;
+                    font-size: 14px;
+                  }
+                
+                  .status-unit {
+                    color: #6c757d; /* Colore per le unità */
+                    font-size: 12px;
+                  }
+                
+                  .status-container {
+                    margin-bottom: 8px; /* Spazio tra le righe */
+                  }
+                </style>
+                
+                <div class="status-container">
+                  <span class="status-label">Selected Namespace:&nbsp;</span>
+                  <span id="currentGameNamespace" class="status-value">NULL</span>
+                </div>
+                
+                <div class="status-container">
+                  <span class="status-label">Deleted Pods Total:&nbsp;</span>
+                  <span id="deleted_pods_total" class="status-value">0</span>
+                </div>
+                
+                <div class="status-container">
+                  <span class="status-label">Chaos Jobs Total:&nbsp;</span>
+                  <span id="chaos_jobs_total" class="status-value">0</span>
+                </div>
+                
+                <div class="status-container">
+                  <span class="status-label">Current Chaos Pods:&nbsp;</span>
+                  <span id="current_chaos_job_pod" class="status-value">0</span>
+                </div>
+                
+                <div class="status-container">
+                  <span class="status-label">Not Running Pods:&nbsp;</span>
+                  <span id="pods_not_running_on" class="status-value">0</span>
+                </div>
+                
+                <div class="status-container">
+                  <span class="status-label">Current Replicas State Delay:&nbsp;</span>
+                  <span id="fewer_replicas_seconds" class="status-value">0</span>
+                  <span class="status-unit">sec</span>
+                </div>
+                
+                <div class="status-container">
+                  <span class="status-label">Latest Replicas State Delay:&nbsp;</span>
+                  <span id="latest_fewer_replicas_seconds" class="status-value">0</span>
+                  <span class="status-unit">sec</span>
+                </div>
+                
+                <div id="mainChaosMetrics" style="width: 100%; height: 70%; margin-top: 16px;"></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%;">
@@ -574,6 +681,22 @@ k8s_jobs:
               <div id="alert_placeholder" style="margin-top: 3%;"></div>
               <div id="alert_placeholder3" style="margin-top: 3%;"></div>
             </div>
+            <div class="settings">
+                <h2></h2>
+                <div class="setting-group">
+                    <label for="sys_cluster_endpoint">k-inv url</label>
+                    <input type="text" id="sys_cluster_endpoint" name="sys_cluster_endpoint" readonly="true">
+                    <label for="sys_insecure_endpoint_flag">Insecure Endpoint Flag</label>
+                    <input type="text" id="sys_insecure_endpoint_flag" name="sys_insecure_endpoint_flag" readonly="true">
+                    <label for="sys_k8s_proxied_api_http_status_code">k-inv/k8s http status code</label>
+                    <input type="text" id="sys_k8s_proxied_api_http_status_code" name="sys_k8s_proxied_api_http_status_code" readonly="true">
+                    <label for="sys_openresty_env_vars">OpenResty Environment Variables</label>
+                    <input type="text" id="sys_openresty_env_vars" name="sys_openresty_env_vars" readonly="true">                                       
+                </div>
+            </div>
+            <div class="setting-group" style="margin-top: 2%;">
+              <button class="export-button" onclick="exportSettings()">Export</button>
+            </div>
         </div>
   
         <div id="footer" style="margin-top: 5%;">
diff --git a/html5/kubeinvaders.js b/html5/kubeinvaders.js
index 27ced69..fc2b3a4 100644
--- a/html5/kubeinvaders.js
+++ b/html5/kubeinvaders.js
@@ -14,6 +14,7 @@ var clu_insecure = insecure_endpoint_placeholder;
 var demo_mode = demo_mode_placeholder;
 var k8s_url = "";
 var chaos_report_post_data = "";
+var selected_env_vars = "selected_env_vars_placeholder";
 
 // when zoomIn is 12
 var maxAliensPerRow = 20;
@@ -140,9 +141,62 @@ var chart_status_code_dict = {
     "Other": 1
 };
 
+
+function checkHTTP(url, elementId) {
+    var oReq = new XMLHttpRequest();
+    oReq.onreadystatechange = function () {
+        if (this.readyState === XMLHttpRequest.DONE) {
+            $("#" + elementId).val(this.status);
+        }
+    };;
+    oReq.open("GET", url);
+    oReq.send();
+}
+
+function exportSettings() {
+    // Crea un oggetto con i dati delle impostazioni
+    const settings = {
+        sys_cluster_endpoint: document.getElementById('sys_cluster_endpoint').value,
+        sys_insecure_endpoint_flag: document.getElementById('sys_insecure_endpoint_flag').value,
+        sys_k8s_proxied_api_http_status_code: document.getElementById('sys_k8s_proxied_api_http_status_code').value,
+        sys_openresty_env_vars:  document.getElementById('sys_openresty_env_vars').value
+    };
+  
+    // Converti l'oggetto in una stringa JSON
+    const jsonSettings = JSON.stringify(settings, null, 2);
+  
+    // Crea un blob e un URL per il download
+    const blob = new Blob([jsonSettings], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+  
+    // Crea un link temporaneo per il download
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'settings.json';
+    document.body.appendChild(a);
+    a.click();
+  
+    // Pulisci
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+  
+function setSystemSettings() {
+    var sys_element = document.getElementById('sys_cluster_endpoint');
+    sys_element.value = k8s_url;
+
+    sys_element = document.getElementById('sys_insecure_endpoint_flag');
+    sys_element.value = clu_insecure;
+
+    sys_element = document.getElementById('sys_openresty_env_vars');
+    sys_element.value = selected_env_vars;
+    
+    checkHTTP(k8s_url, 'sys_k8s_proxied_api_http_status_code')
+}
+
 function currentChaosContainerJsonTextAreaVal() {
     return editor_chaos_container_definition.getValue();
-  }
+}
 
 function getCodeName() {
     const prefixes = ['astro', 'cosmo', 'space', 'star', 'nova', 'nebula', 'galaxy', 'super', 'hyper', 'quantum'];
@@ -918,6 +972,7 @@ window.setInterval(function backgroundTasks() {
 document.addEventListener("keydown", keyDownHandler, false);
 document.addEventListener("keyup", keyUpHandler, false);
 
+setSystemSettings();
 getEndpoint();
 getNamespaces();
 getSavedPresets();
diff --git a/html5/settings.html b/html5/settings.html
new file mode 100644
index 0000000..dbc6cdd
--- /dev/null
+++ b/html5/settings.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>KubeInvaders</title>
+    <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./bootstrap-5.0.0-dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="./codemirror.css">
+    <link rel="stylesheet" href="./dracula.css">
+    <script src="./codemirror.js"></script>
+    <script src="./utils.js"></script>
+    <script src="./programming_mode.js"></script>
+    <script src="./modals.js"></script>
+    <script src="./mode_controls.js"></script>
+    <script src="./game_console.js"></script>
+    <script src="./bootstrap-5.0.0-dist/js/bootstrap.min.js"></script>
+    <script src="./js/jquery-3.6.0.min.js"></script>
+    <script src="./js/popper.min.js"></script>
+    <script src="./kubeinvaders.js"></script>
+    <script src="./echarts/echarts.min.js"></script>
+    <script src="./chaos_report.js"></script>
+    <script>
+
+
+
+    </script>
+    <style>
+      /* Adjust styling for sidebar */
+      *, button, div, canvas,a,p,h1,h2,h3,h4,h5 {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        font-weight: bold;
+      }
+      #mainChaosMetrics > div > canvas {
+        width: 100% !important;
+      }
+      #mainChaosMetrics > div {
+        width: 100% !important;
+      }
+      #httpStatusCodeChart > div > canvas {
+        width: 100% !important;
+        height: 100% !important;
+      }
+      #httpStatusCodeChart > div {
+        width: 100% !important;
+        height: 100% !important;
+      }
+      #httpElapsedChart > div > canvas {
+        width: 100% !important;
+        height: 100% !important;
+      }
+      #httpElapsedChart > div {
+        width: 100% !important;
+        height: 100% !important;
+      }
+
+      .sidebar {
+        height: 100%;
+        width: 250px;
+        position: fixed;
+        top: 0;
+        left: 0; /* Initially hide sidebar */
+        background-color: black; /* Dark color */
+        padding-top: 60px; /* Adjust according to your navbar height */
+        transition: left 0.3s ease; /* Smooth transition */
+      }
+      
+      .sidebar a {
+        padding: 10px 15px;
+        text-decoration: none;
+        font-size: 18px;
+        color: #ffffff;
+        display: block;
+      }
+
+      .sidebar #gameModeButton{
+        padding: 10px 15px;
+        text-decoration: none;
+        font-size: 18px;
+        color: #ffffff;
+        display: block;
+      }
+
+      .sidebar #programmingModeButton{
+        padding: 10px 15px;
+        text-decoration: none;
+        font-size: 18px;
+        color: #ffffff;
+        display: block;
+      }
+      
+      .sidebar a:hover {
+        background-color: #495057; /* Darker color on hover */
+      }
+      
+      /* Adjust styling for main content */
+      .main-content {
+        margin-left: 0; /* Initially no margin */
+        padding: 20px;
+        transition: margin-left 0.3s ease; /* Smooth transition */
+      }
+      
+      /* Adjust styling for toggler icon */
+      .toggler-icon {
+        color: #ffffff;
+        cursor: pointer;
+        position: fixed;
+        top: 20px;
+        left: 10px;
+        z-index: 999; /* Ensure it's above other elements */
+      }
+
+      .settings {
+            background: #fff;
+            padding: 20px;
+            margin-top: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        }
+        .settings h2 {
+            margin-top: 0;
+        }
+        .setting-group {
+            margin-bottom: 20px;
+        }
+        .setting-group label {
+            display: block;
+            margin-bottom: 5px;
+        }
+        .setting-group input,
+        .setting-group select {
+            width: 100%;
+            padding: 8px;
+            margin-bottom: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        .setting-group button {
+            background: #333;
+            color: #fff;
+            border: none;
+            padding: 10px 20px;
+            cursor: pointer;
+            border-radius: 4px;
+        }
+        .setting-group button:hover {
+            background: #555;
+        }
+
+    </style>
+  </head>
+  <body id="kinvBody">
+    <div class="container">
+      <div class="setting-group" style="margin-top: 5%;">
+        <button class="export-button btn-sm" onclick="window.location='./index.html';" id="homeButton">Home</button>
+        <button class="export-button btn-sm" onclick="exportSettings()">Export</button>
+      </div>
+      <div class="settings">
+          <h2>k8s</h2>
+          <div class="setting-group">
+              <label for="site-name">Kubernetes API Endpoint</label>
+              <input type="text" id="sys_cluster_endpoint" name="sys_cluster_endpoint" readonly="true">
+              <label for="site-name">Insicure Endpoint Flag</label>
+              <input type="text" id="sys_insecure_endpoint_flag" name="sys_insecure_endpoint_flag" readonly="true">
+              <label for="site-name">Selected Namespaces</label>
+              <input type="text" id="sys_selected_namespaces" name="sys_selected_namespaces" readonly="true">
+          </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/html5/utils.js b/html5/utils.js
index 1749ed1..c211cdb 100644
--- a/html5/utils.js
+++ b/html5/utils.js
@@ -47,4 +47,3 @@ function demo_mode_alert() {
 function is_demo_mode() {
   return demo_mode;
 }
-
diff --git a/nginx/KubeInvaders.conf b/nginx/KubeInvaders.conf
index 70ff140..e953e88 100644
--- a/nginx/KubeInvaders.conf
+++ b/nginx/KubeInvaders.conf
@@ -27,6 +27,24 @@ server {
     end
   }
 
+  set_by_lua_block $selected_env_vars {
+    local selected_env_vars = {"KUBERNETES_SERVICE_HOST", "KUBERNETES_SERVICE_PORT_HTTPS", "NAMESPACE", "INSECURE_ENDPOINT"}
+
+    local result = {}
+
+    for _, var_name in ipairs(selected_env_vars) do
+        local value = os.getenv(var_name)
+        if value then
+            table.insert(result, var_name .. " = " .. value)
+        else
+            table.insert(result, var_name .. " = nil")
+        end
+    end
+
+    return table.concat(result, ", ")
+
+  }
+
   location / {
     add_header 'Access-Control-Allow-Origin' '*';
     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
@@ -41,6 +59,7 @@ server {
     sub_filter demo_mode_placeholder $demo_mode;
     sub_filter endpoint_placeholder $endpoint;
     sub_filter insecure_endpoint_placeholder $insecure_endpoint;
+    sub_filter selected_env_vars_placeholder $selected_env_vars;
   }
 
   location /kube/ingress/get {
