Merge branch 'master' of github.com:lucky-sideburn/kubeinvaders

README.md

@@ -288,7 +288,35 @@ spec:
   tls:
     termination: Edge
 ```
-
+## Add simple nginx Deployment for Pods to shot at
+```bash
+cat >deployment.yaml <<EOF
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: nginx-deployment
+spec:
+  selector:
+    matchLabels:
+      app: nginx
+  replicas: 20 # tells deployment to run 20 pods matching the template
+  template:
+    metadata:
+      labels:
+        app: nginx
+    spec:
+      containers:
+      - name: nginx
+        image: nginx:1.24.0
+        ports:
+        - containerPort: 81
+EOF
+```
+Apply Nginx Deployment in namespace1 and namespace2
+```bash
+sudo kubectl apply -f deployment.yaml -n namespace1
+sudo kubectl apply -f deployment.yaml -n namespace2
+```
 ## Usage
 
 At the top you will find some metrics as described below:
@@ -301,10 +329,6 @@ This is a control-plane you can use to switch off & on various features.
 
 ![Alt Text](./doc_images/control-plane.png)
 
-### YouTube HowTo
-
-[Video How To of version v1.9](https://www.youtube.com/watch?v=wD7ngPlNEjY)
-
 ### Start The Chaos Experiment
 
 Press the "Start" button to initiate the automatic pilot (the button changes to "Stop" to disable this feature).

html5/chaos_report.js

@@ -1,5 +1,5 @@
 function setChaosReportURL(select) {
-  var selectedValue = select.options[select.selectedIndex].value; 
+  var selectedValue = select.options[select.selectedIndex].value;
   document.getElementById("chaosReportCheckSiteURL").value = selectedValue;
 }
 
@@ -26,24 +26,24 @@ function parseIngressListJSON(ingressList) {
 }
 
 function resizeCharts() {
-  if(myHTTPStatusCodeChart != null && myHTTPStatusCodeChart != undefined){
+  if (myHTTPStatusCodeChart != null && myHTTPStatusCodeChart != undefined) {
     myHTTPStatusCodeChart.resize();
   }
-  if(myMainChaosMetrics != null && myMainChaosMetrics != undefined){
+  if (myMainChaosMetrics != null && myMainChaosMetrics != undefined) {
     myMainChaosMetrics.resize();
   }
-  if(myHTTPElapsedChart != null && myHTTPElapsedChart != undefined){
+  if (myHTTPElapsedChart != null && myHTTPElapsedChart != undefined) {
     myHTTPElapsedChart.resize();
   }
 }
 
 function getIngressLists() {
-  var oReq = new XMLHttpRequest();  
+  var oReq = new XMLHttpRequest();
   oReq.onreadystatechange = function () {
     if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
       console.log("[SAVE-CHAOS-REPORT-INGRESS-LISTS]" + JSON.parse(this.responseText));
       parseIngressListJSON(JSON.parse(this.responseText));
-    } 
+    }
   };;
   oReq.open("GET", k8s_url + "/kube/ingress/get?namespace=" + namespace, true);
   oReq.setRequestHeader("Content-Type", "application/json");
@@ -108,8 +108,8 @@ function chaosReportHttpEndpointAdd() {
     </div>
   </div>
   `);
-  
-  if(is_demo_mode()) {
+
+  if (is_demo_mode()) {
     document.getElementById("chaosReportCheckSiteURL").readOnly = true;
   }
 }
@@ -121,7 +121,7 @@ function isValidURL(string) {
     return false;
   }
   return true;
-} 
+}
 
 function headerAreLikePythonRequestHeaders(headers) {
   var headersDict = {};
@@ -210,7 +210,7 @@ function sendSavedChaosReport() {
   oReq.setRequestHeader("Content-Type", "application/json");
   // console.log("[SAVE-CHAOS-REPORT-CONF] Sending configuration to Nginx: " + JSON.stringify(presetBodyDict));
   oReq.send(JSON.stringify(presetBodyDict));
-  closePrepareChaosReportModal();  
+  closePrepareChaosReportModal();
   resizeCharts();
   document.getElementById("myCanvas").scrollIntoView(true);
   document.getElementById("flagChaosReport").checked = true;
@@ -244,11 +244,11 @@ function updateElapsedTimeArray(projectName) {
   $("#chaosReportSessionTimeDiv").html(diffBetweenTwoDates(chaos_report_start_date, new Date()) + " seconds");
   // console.log("[SAVE-CHAOS-REPORT-CONF] Diff Between Dates: " + toString(diffBetweenTwoDates(chaos_report_start_date, new Date())));
   // console.log("[SAVE-CHAOS-REPORT-CONF] Updating elapsed time array for project: " + projectName);
-  
+
   var oReq = new XMLHttpRequest();
   var redis_key = projectName + "_check_url_elapsed_time";
   // console.log("[SAVE-CHAOS-REPORT-CONF] Redis key: " + redis_key);
-  
+
   oReq.onreadystatechange = function () {
     if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
       // console.log("[SAVE-CHAOS-REPORT-CONF] Elapsed time array received from Redis: " + parseFloat(this.responseText));
@@ -256,7 +256,7 @@ function updateElapsedTimeArray(projectName) {
       while (chaos_report_http_elapsed_time_array.length > 40) {
         chaos_report_http_elapsed_time_array.shift();
       }
-    } 
+    }
   };;
 
   oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
@@ -267,17 +267,17 @@ function updateElapsedTimeArray(projectName) {
 
 function updateStatusCodePieChart(projectName) {
   // console.log("[SAVE-CHAOS-REPORT-CONF] Updating Status Code Pie Chart for project: " + projectName);
-  
+
   var oReq = new XMLHttpRequest();
   var redis_key = projectName + "_check_url_status_code";
   // console.log("[SAVE-CHAOS-REPORT-CONF] Redis key: " + redis_key);
-  
+
   oReq.onreadystatechange = function () {
     if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
       var status_code = this.responseText.trim();
       // console.log("[SAVE-CHAOS-REPORT-CONF] Status Code Pie Chart received from Redis: |" + status_code + "|");
 
-      chart_status_code_dict[status_code] =  chart_status_code_dict[status_code] + 1
+      chart_status_code_dict[status_code] = chart_status_code_dict[status_code] + 1
 
       myHTTPStatusCodeChart.setOption({
         series: [
@@ -287,64 +287,64 @@ function updateStatusCodePieChart(projectName) {
               {
                 value: chart_status_code_dict["200"],
                 name: '200',
-                itemStyle: {color: 'green'},
+                itemStyle: { color: 'green' },
               },
               {
                 value: chart_status_code_dict["500"],
                 name: '500',
-                itemStyle: {color: 'red'},
+                itemStyle: { color: 'red' },
               },
               {
                 value: chart_status_code_dict["502"],
                 name: '502',
-                itemStyle: {color: 'red'},
+                itemStyle: { color: 'red' },
               },
               {
                 value: chart_status_code_dict["503"],
                 name: '503',
-                itemStyle: {color: 'red'},
+                itemStyle: { color: 'red' },
               },
               {
                 value: chart_status_code_dict["504"],
                 name: '504',
-                itemStyle: {color: 'red'},
+                itemStyle: { color: 'red' },
               },
               {
                 value: chart_status_code_dict["400"],
                 name: '400',
-                itemStyle: {color: 'yellow'},
+                itemStyle: { color: 'yellow' },
               },
               {
                 value: chart_status_code_dict["401"],
                 name: '401',
-                itemStyle: {color: 'yellow'},
+                itemStyle: { color: 'yellow' },
               },
               {
                 value: chart_status_code_dict["403"],
                 name: '403',
-                itemStyle: {color: 'yellow'},
+                itemStyle: { color: 'yellow' },
               },
               {
                 value: chart_status_code_dict["404"],
                 name: '404',
-                itemStyle: {color: 'yellow'},
+                itemStyle: { color: 'yellow' },
               },
               {
                 value: chart_status_code_dict["Connection Error"],
                 name: 'Connection Error',
-                itemStyle: {color: 'black'},
+                itemStyle: { color: 'black' },
               },
               {
                 value: chart_status_code_dict["Other"],
                 name: 'Other',
-                itemStyle: {color: 'grey'},
+                itemStyle: { color: 'grey' },
               },
             ],
             roseType: 'area'
           }
         ]
       });
-    } 
+    }
   };;
 
   oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
@@ -354,15 +354,15 @@ function updateStatusCodePieChart(projectName) {
 
 function updateChaosReportStartTime(projectName) {
   // console.log("[SAVE-CHAOS-REPORT-CONF] Updating Start Time for project: " + projectName);
-  
+
   var oReq = new XMLHttpRequest();
   var redis_key = projectName + "_check_url_start_time";
   // console.log("[SAVE-CHAOS-REPORT-CONF] Redis key: " + redis_key);
-  
+
   oReq.onreadystatechange = function () {
     if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
       $("#chaosReportDateDiv").html(this.responseText);
-    } 
+    }
   };;
 
   oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
@@ -391,11 +391,11 @@ function updateMainMetricsChart() {
             name: 'Not Running Pods'
           },
           {
-            value:  Number(chart_fewer_replicas_seconds),
+            value: Number(chart_fewer_replicas_seconds),
             name: 'Current Replicas State Delay'
           },
           {
-            value:  Number(chart_latest_fewer_replicas_seconds),
+            value: Number(chart_latest_fewer_replicas_seconds),
             name: 'Latest Replicas State Delay'
           }
         ],
@@ -407,7 +407,7 @@ function updateMainMetricsChart() {
 
 function drawCanvasHTTPStatusCodeStats() {
   // // console.log("[SAVE-CHAOS-REPORT-CONF] Updating chart");
-  
+
   myHTTPElapsedChart.setOption({
     xAxis: {},
     yAxis: {
@@ -491,57 +491,57 @@ option = {
         {
           value: chart_status_code_dict["200"],
           name: '200',
-          itemStyle: {color: 'green'},
+          itemStyle: { color: 'green' },
         },
         {
           value: chart_status_code_dict["500"],
           name: '500',
-          itemStyle: {color: 'red'},
+          itemStyle: { color: 'red' },
         },
         {
           value: chart_status_code_dict["502"],
           name: '502',
-          itemStyle: {color: 'red'},
+          itemStyle: { color: 'red' },
         },
         {
           value: chart_status_code_dict["503"],
           name: '503',
-          itemStyle: {color: 'red'},
+          itemStyle: { color: 'red' },
         },
         {
           value: chart_status_code_dict["504"],
           name: '504',
-          itemStyle: {color: 'red'},
+          itemStyle: { color: 'red' },
         },
         {
           value: chart_status_code_dict["400"],
           name: '400',
-          itemStyle: {color: 'yellow'},
+          itemStyle: { color: 'yellow' },
         },
         {
           value: chart_status_code_dict["401"],
           name: '401',
-          itemStyle: {color: 'yellow'},
+          itemStyle: { color: 'yellow' },
         },
         {
           value: chart_status_code_dict["403"],
           name: '403',
-          itemStyle: {color: 'yellow'},
+          itemStyle: { color: 'yellow' },
         },
         {
           value: chart_status_code_dict["404"],
           name: '404',
-          itemStyle: {color: 'yellow'},
+          itemStyle: { color: 'yellow' },
         },
         {
           value: chart_status_code_dict["Connection Error"],
           name: 'Connection Error',
-          itemStyle: {color: 'black'},
+          itemStyle: { color: 'black' },
         },
         {
           value: chart_status_code_dict["Other"],
           name: 'Other',
-          itemStyle: {color: 'grey'},
+          itemStyle: { color: 'grey' },
         },
       ],
       roseType: 'area'
@@ -551,6 +551,6 @@ option = {
 
 myHTTPStatusCodeChart.setOption(option);
 
-$(window).on('resize', function(){
+$(window).on('resize', function () {
   resizeCharts();
 });

html5/game_console.js

@@ -3,7 +3,7 @@ function zoomIn() {
   document.getElementById("gameContainer").style.width = "100%"
   document.getElementById("gameContainer").style.height = "100%";
   document.getElementById("zoomInGameScreenInput").disabled = true;
-  document.getElementById("zoomOutGameScreenInput").disabled = false; 
+  document.getElementById("zoomOutGameScreenInput").disabled = false;
   document.getElementById("zoomInGameScreenInput2").disabled = true;
   document.getElementById("zoomOutGameScreenInput2").disabled = false;
   document.getElementById("loadButtonGroup").style.width = "1200px";
@@ -14,10 +14,10 @@ function zoomOut() {
   var gameContainerHeight = document.getElementById("gameContainer").style.height;
   document.getElementById("gameContainer").style.width = "50%"
   document.getElementById("gameContainer").style.height = "50%"
-  document.getElementById("zoomInGameScreenInput").disabled = false; 
+  document.getElementById("zoomInGameScreenInput").disabled = false;
   document.getElementById("zoomOutGameScreenInput").disabled = true;
-  document.getElementById("zoomInGameScreenInput2").disabled = false; 
-  document.getElementById("zoomOutGameScreenInput2").disabled = true; 
+  document.getElementById("zoomInGameScreenInput2").disabled = false;
+  document.getElementById("zoomOutGameScreenInput2").disabled = true;
   document.getElementById("loadButtonGroup").style.width = "900px";
 }
 
@@ -52,17 +52,17 @@ function switchColorMode() {
     bodyElement.style.backgroundColor = "#0a0a0a";
     current_color_mode = "dark";
 
-    for (var i = 0; i < buttonsLightElement.length; i++) { 
+    for (var i = 0; i < buttonsLightElement.length; i++) {
       console.log("[COLOR-MODE-BUTTONS] Change color of " + buttonsLightElement[i].id);
       document.getElementById(buttonsLightElement[i].id).style.backgroundColor = "#1ed931";
     }
 
-    for (var i = 0; i < textkinv.length; i++) { 
+    for (var i = 0; i < textkinv.length; i++) {
       console.log("[COLOR-MODE-TEXT-KINV] Change color of " + textkinv[i].id);
       document.getElementById(textkinv[i].id).style.color = "#1ed931";
     }
 
-    for (var i = 0; i < alertkinv.length; i++) { 
+    for (var i = 0; i < alertkinv.length; i++) {
       console.log("[COLOR-MODE-ALERT-KINV] Change color of " + alertkinv[i].id);
       document.getElementById(alertkinv[i].id).style.color = "#1ed931";
       document.getElementById(alertkinv[i].id).style.backgroundColor = "#0a0a0a";
@@ -83,17 +83,17 @@ function switchColorMode() {
     bodyElement.style.backgroundColor = "#ffffff";
     current_color_mode = "light";
 
-    for (var i = 0; i < buttonsLightElement.length; i++) { 
+    for (var i = 0; i < buttonsLightElement.length; i++) {
       console.log("[COLOR-MODE-BUTTONS] Change color of " + buttonsLightElement[i].id);
       document.getElementById(buttonsLightElement[i].id).style.backgroundColor = "";
     }
 
-    for (var i = 0; i < textkinv.length; i++) { 
+    for (var i = 0; i < textkinv.length; i++) {
       console.log("[COLOR-MODE-TEXT-KINV] Change color of " + textkinv[i].id);
       document.getElementById(textkinv[i].id).style.color = "";
     }
 
-    for (var i = 0; i < alertkinv.length; i++) { 
+    for (var i = 0; i < alertkinv.length; i++) {
       console.log("[COLOR-MODE-ALERT-KINV] Change color of " + alertkinv[i].id);
       document.getElementById(alertkinv[i].id).style.color = "";
       document.getElementById(alertkinv[i].id).style.backgroundColor = "";
@@ -112,11 +112,11 @@ function switchColorMode() {
 }
 
 function switchNamespace() {
-  if (namespaces_index < namespaces.length-1) {
-      namespaces_index +=1 ;
+  if (namespaces_index < namespaces.length - 1) {
+    namespaces_index += 1;
   }
   else {
-      namespaces_index = 0;
+    namespaces_index = 0;
   }
   namespace = namespaces[namespaces_index];
   $('#currentGameNamespace').text(namespace);
@@ -134,18 +134,18 @@ function createChaosProgramButton(name, lang) {
   btn.name = "load" + capitalizedName;
   btn.id = "load" + capitalizedName;
   if (document.getElementById("load" + capitalizedName)) {
-      return;
+    return;
   }
   btn.style = "padding: 0% 2%;"
   btn.classList = "btn btn-light btn-sm";
-  btn.addEventListener("click", function(){ loadPreset(name, lang); });
-  document.getElementById("loadButtonGroup").appendChild(btn); 
+  btn.addEventListener("click", function () { loadPreset(name, lang); });
+  document.getElementById("loadButtonGroup").appendChild(btn);
   document.getElementById("loadButtonGroup").scrollLeft = document.getElementById("loadButtonGroup").scrollWidth;
 }
 
 function deleteChaosProgramButton(name) {
   let capitalizedName = name.charAt(0).toUpperCase() + name.slice(1);
-  document.getElementById("loadButtonGroup").removeChild(document.getElementById("load" + capitalizedName)); 
+  document.getElementById("loadButtonGroup").removeChild(document.getElementById("load" + capitalizedName));
 }
 
 function setLogConsole() {

html5/mode_controls.js

@@ -6,8 +6,8 @@ function startGameMode() {
     $("#gameModeButton").text("Enable Game Mode");
   } else {
     game_mode_switch = true;
-    document.getElementById("gameContainer").style.width = "50%";
-    document.getElementById("gameContainer").style.height = "50%";
+    document.getElementById("gameContainer").style.width = "100%";
+    document.getElementById("gameContainer").style.height = "100%";
     //document.getElementById("loadButtonGroup").style.width = "650px";
     $("#gameModeButton").text("Disable Game Mode");
     $("#programmingModeButton").text("Enable Prog. Mode");
@@ -54,7 +54,7 @@ function startProgrammingMode() {
     chaos_program_screen.style.display = "none";
   }
   if (programming_mode_buttons.style.display === "none") {
-      programming_mode_buttons.style.display = "block";
+    programming_mode_buttons.style.display = "block";
   } else {
     programming_mode_buttons.style.display = "none";
   }

html5/style.css

@@ -8,36 +8,35 @@
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0; /* Opacità iniziale */
-    }
-    to {
-        opacity: 1; /* Opacità finale */
-    }
+  from {
+    opacity: 0; /* Opacità iniziale */
+  }
+  to {
+    opacity: 1; /* Opacità finale */
+  }
 }
 
 /* #kinvBody {
   display: none;
 } */
 
-input[type="text"]
-{
-  font-family: 'Courier New', Courier, monospace;
+input[type="text"] {
+  font-family: "Courier New", Courier, monospace;
 }
 
 .transition {
   visibility: hidden;
   opacity: 0;
-  transition: visibility 0s, opacity 1.0s linear;
+  transition: visibility 0s, opacity 1s linear;
 }
 
 .navbar-toggler-icon {
-  background-image: url("./images/sprite_invader_ready.png")
+  background-image: url("./images/sprite_invader_ready.png");
 }
 
 .navbar-toggler {
   border-color: rgb(255, 255, 255);
-} 
+}
 
 hr {
   margin-top: 1rem;
@@ -49,38 +48,37 @@ hr {
 .alert-logs-namespace {
   background-color: #7116d8;
   color: #ffffff;
-  border-color: #FFF;
+  border-color: #fff;
   border-radius: 1px;
-  font-size: 14px; 
+  font-size: 14px;
   font-family: Courier New, Courier, monospace;
 }
 
 .alert-logs-pod {
   background-color: #7116d8;
   color: #ffffff;
-  border-color: #FFF;
+  border-color: #fff;
   border-radius: 1px;
-  font-size: 14px; 
+  font-size: 14px;
   font-family: Courier New, Courier, monospace;
 }
 
 .alert-logs-container {
   background-color: #7116d8;
   color: #ffffff;
-  border-color: #FFF;
+  border-color: #fff;
   border-radius: 1px;
-  font-size: 14px; 
+  font-size: 14px;
   font-family: Courier New, Courier, monospace;
 }
 
 .custom-btn-group {
   margin-top: 2%;
-  border: 5px solid #b2afaf;
   border-radius: 5px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   padding: 5px;
-  border-image-slice: 5;    
+  border-image-slice: 5;
 }
 
 .logtail-group {
@@ -90,7 +88,7 @@ hr {
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   padding: 5px;
-  border-image-slice: 5;    
+  border-image-slice: 5;
 }
 
 .chaos-prog-area {
@@ -102,11 +100,15 @@ hr {
   border-image-slice: 5;
 }
 
-.btn-light  {
+.btn-light {
   border-color: #000000;
 }
 
-.btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active, .open .dropdown-toggle.btn-default {
+.btn-light:hover,
+.btn-light:focus,
+.btn-light:active,
+.btn-light.active,
+.open .dropdown-toggle.btn-default {
   background-color: #b0b3b1;
   color: #000000;
   border-color: #000000;
@@ -129,14 +131,14 @@ hr {
 
 .log-row {
   color: #4fa80b;
-  font-size: 14px; 
+  font-size: 14px;
   font-family: Courier New, Courier, monospace;
   margin-top: 0.5%;
 }
 
 .log-title {
   color: #7c737f;
-  font-size: 12px; 
+  font-size: 12px;
 }
 
 .btn-green {
@@ -147,7 +149,7 @@ hr {
 
 @font-face {
   font-family: pixel;
-  src: url('./fonts/pixel.otf');
+  src: url("./fonts/pixel.otf");
   font-size-adjust: inherit;
 }
 
@@ -171,7 +173,11 @@ div {
   font-family: pixel;
 }
 
-.game-canvas { background: #161616 ; display: block; margin: 0 auto; }
+.game-canvas {
+  background: #161616;
+  display: block;
+  margin: 0 auto;
+}
 
 .http-stats-code-canvas {
   margin-top: 2%;
@@ -180,7 +186,7 @@ div {
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   padding: 5px;
-  border-image-slice: 5;    
+  border-image-slice: 5;
 }
 
 .td-grey {
@@ -208,6 +214,10 @@ div {
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}