continue...

Dockerfile

@@ -3,6 +3,7 @@ FROM nginx:stable
 # Update repo and install some utilities and prerequisites
 RUN apt-get update -y
 RUN apt-get -y install procps git vim wget gnupg ca-certificates jq openssl task-spooler at curl apt-transport-https python3 python3-pip redis libssl-dev
+RUN pip3 install pyyaml
 # --no-install-recommends
 
 # Install kubectl

html5/index.html

@@ -35,7 +35,8 @@
 
       @font-face {
         font-family: pixel;
-        src: url('./fonts/pixel.otf');
+        src: url('./fonts/DotGothic16-Regular.ttf');
+        font-size-adjust: inherit;
       }
 
       div {
@@ -94,7 +95,7 @@
         </div>
       </div>
     </div>
-
+    <!-- Modal -->
     <div class="modal" id="kubeLinterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
       <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
         <div class="modal-content">
@@ -107,7 +108,7 @@
         </div>
       </div>
     </div>
-
+    <!-- Modal -->
     <div class="modal fade" id="setChaosContainerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
@@ -130,7 +131,7 @@
         </div>
       </div>
     </div>
-
+    <!-- Modal -->
     <div class="modal fade" id="showSpecialKeysModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
@@ -149,6 +150,9 @@
                 </p>
               </div>
             </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeSpecialKeysModal()">Close</button>
+            </div>
           </div>
         </div>
       </div>
@@ -225,7 +229,7 @@
               <div id="alert_placeholder" style="margin-top: 1%;"></div>
               <div class="form-group">
                 <label for="chaosProgramTextArea"></label>
-                <textarea class="form-control chaos-prog-area" id="chaosProgramTextArea" rows="50" style="font-family: Courier, monospace;">
+                <textarea class="form-control chaos-prog-area" id="chaosProgramTextArea" rows="50" style="min-width: 100%; font-family: Courier, monospace;">
 jobs:
   cpu-attack:
     additional-labels:
@@ -256,8 +260,10 @@ experiments:
               </form>
 	            <div id="chaosJobLogsDiv" style="margin-top: 2%; overflow-y: scroll; height:1000px;"></div>
             </div>
-            <div class="col">
-              <div id="chaosProgramDiagram">
+            <div class="col" style="margin-top: 4%;">
+              <div id="chaosProgramFlow">
+                <div class="row"><div class="alert alert-dark" role="alert">test attack</div></div>
+                <img src="images/down-arrow.png" width="30" height="30">
               </div>
             </div>
           </div>
@@ -292,17 +298,15 @@ experiments:
       </div>
       <div class="row">
         <div class="col text-center">
-
         </div>
         <div class="col text-center">
           <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomInGameScreenInput2" name="zoomInGameScreenInput2" value="+" onclick="zoomIn()">
           <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomOutGameScreenInput2" name="zoomOutGameScreenInput2" value="-" onclick="zoomOut()">
         </div>
         <div class="col text-center">
-
         </div>
-      </div>      
-  
+      </div> 
+
       <div id="logTailRegexInput" style="display: block;">
         <div class="row" style="margin-top: 2%;">
           <input type="text" style="font-family: Courier New, Courier, monospace;" id="logTailRegex" value='{"pod":".*", "namespace":".*", "labels":".*", "annotations":".*", "containers": ".*"}'/>
@@ -319,10 +323,10 @@ experiments:
       </div>
     </div>
     <div id="footer" style="margin-top: 5%;">
-      <div align="center" style="margin-top: 20%;">
+      <div align="center" style="margin-top: 10%;">
         <img src="images/kubeinvaders_spaceship.png">
       </div>
-      <div class="container text-center" style="margin-top: 2%;">
+      <div class="container text-center" style="margin-top: 1%;">
         <p class="text-muted credit" style="color:#fff">kubeinvaders_version: v1.9.5</p>
       </div>
     </div>
@@ -332,7 +336,6 @@ experiments:
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 
     <script>
-
       function changeRandomFactor() {
         randomFactor = $("#randomFactorInput").val();
         $("#currentRandomFactor").text(randomFactor);
@@ -391,14 +394,18 @@ experiments:
           enableLogTail();
         }
       }
-      
+
       function startGameMode() {
         if (game_mode_switch) {
           game_mode_switch = false;
           $("#gameModeButton").text("Enable Game Mode");
         } else {
           game_mode_switch = true;
+          document.getElementById("gameContainer").style.width = "50%";
+          document.getElementById("gameContainer").style.height = "50%";
           $("#gameModeButton").text("Disable Game Mode");
+          $("#programmingModeButton").text("Enable Prog. Mode");
+          programming_mode_switch = false;
         }
         if (game_buttons.style.display === "none") {
           game_buttons.style.display = "block";
@@ -419,7 +426,11 @@ experiments:
           programming_mode_switch = false;
           $("#programmingModeButton").text("Enable Prog. Mode");
         } else {
+          document.getElementById("gameContainer").style.width = "100%";
+          document.getElementById("gameContainer").style.height = "100%";
           programming_mode_switch = true;
+          game_mode_switch = false;
+          $("#gameModeButton").text("Enable Game Mode");
           $("#programmingModeButton").text("Disable Prog. Mode");
         }
         if (chaos_program_screen.style.display === "none") {
@@ -428,51 +439,55 @@ experiments:
           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";
         }
-          game_buttons.style.display = "none";
-          game_screen.style.display = "none";
-        }
+        game_buttons.style.display = "none";
+        game_screen.style.display = "none";
+      }
 
-        function showSpecialKeys() {
-          $('#showSpecialKeysModal').modal('show');
-          modal_opened = true;
-        }
+      function showSpecialKeys() {
+        $('#showSpecialKeysModal').modal('show');
+        modal_opened = true;
+      }
 
-        function showCurrentChaosContainer() {
-          getCurrentChaosContainer();
-          $('#currentChaosContainerModal').modal('show');
-          modal_opened = true;
-        }
+      function showCurrentChaosContainer() {
+        getCurrentChaosContainer();
+        $('#currentChaosContainerModal').modal('show');
+        modal_opened = true;
+      }
 
-        function closeCurrentChaosJobModal() {
-          $('#currentChaosContainerModal').modal('hide');
-          modal_opened = false;
-        }
+      function closeCurrentChaosJobModal() {
+        $('#currentChaosContainerModal').modal('hide');
+        modal_opened = false;
+      }
 
-        function showSetCurrentChaosContainer() {
-          $('#alert_placeholder2').text('');
-          getCurrentChaosContainer();
-          $('#setChaosContainerModal').modal('show');
-          modal_opened = true;
-        }
+      function showSetCurrentChaosContainer() {
+        $('#alert_placeholder2').text('');
+        getCurrentChaosContainer();
+        $('#setChaosContainerModal').modal('show');
+        modal_opened = true;
+      }
 
-        function closeSetChaosContainerModal() {
-          $('#setChaosContainerModal').modal('hide');
-          modal_opened = false;
-        }
+      function closeSetChaosContainerModal() {
+        $('#setChaosContainerModal').modal('hide');
+        modal_opened = false;
+      }
 
-        function closeKubeLinterModal() {
-          $('#kubeLinterModal').modal('hide');
-          modal_opened = false;
-        }
+      function closeSpecialKeysModal() {
+        $('#showSpecialKeysModal').modal('hide');
+        modal_opened = false;
+      }
 
-        $('textarea').on('input', function() {
-          $('#alert_placeholder2').text('');
-        });
+      function closeKubeLinterModal() {
+        $('#kubeLinterModal').modal('hide');
+        modal_opened = false;
+      }
 
+      $('textarea').on('input', function() {
+        $('#alert_placeholder2').text('');
+      });
     </script>
   </body>
 </html>

html5/kubeinvaders.js

@@ -80,7 +80,16 @@ var latestPodNameY = '';
 var namespacesJumpFlag = false;
 var namespacesJumpStaus = 'Disabled';
 
-function drawChaosProgramDiagram() {
+function isJsonString(str) {
+    try {
+        JSON.parse(str);
+    } catch (e) {
+        return false;
+    }
+    return true;
+}
+
+function drawChaosProgramFlow() {
     var chaosProgram = "";
     chaosProgram = $('#chaosProgramTextArea').text();
     var oReq = new XMLHttpRequest();
@@ -90,7 +99,28 @@ function drawChaosProgramDiagram() {
     oReq.onreadystatechange = function () {
         if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
             console.log(this.responseText);
-            $('#chaosProgramDiagram').html(this.responseText);
+            if (isJsonString(this.responseText)){
+                var flow = JSON.parse(this.responseText);
+                console.log(flow)
+                var flow_html = "";
+
+                let i = 0;
+
+                while (i < flow["experiments"].length) {
+                    flow_html = flow_html + '<div class="row"><div class="alert alert-dark" role="alert">' + flow["experiments"][i]["name"] + '(x' +  flow["experiments"][i]["loop"] +')</div></div>'
+                    if (i < flow["experiments"].length - 1 ) {
+                        flow_html = flow_html + '<img src="images/down-arrow.png" width="30" height="30">'
+                    }
+                    i++;
+                }
+
+                console.log("FLOWHTML" + flow_html);
+
+                $('#chaosProgramFlow').html(flow_html);
+            }
+            else {
+                $('#chaosProgramFlow').html(this.responseText);  
+            }
         }
     };;
 
@@ -153,9 +183,9 @@ function getChaosJobsLogs() {
     oReq.onreadystatechange = function () {
         if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    	    if (programming_mode_switch) {
-            	document.getElementById("chaosJobLogsDiv").innerHTML = "";
+            document.getElementById("chaosJobLogsDiv").innerHTML = "";
         	document.getElementById("chaosJobLogsDiv").innerHTML = this.responseText;
-    	     }
+    	}
 	    if (log_tail_switch) {
             	document.getElementById("logTailDiv").innerHTML = "";
                	document.getElementById("logTailDiv").innerHTML = this.responseText;
@@ -514,6 +544,7 @@ function checkRocketAlienCollision() {
 function shuffleAliens() {
     pods = pods.sort(() => Math.random() - 0.5)
 }
+
 function drawRocket() {
     var image = new Image(); // Image constructor
     image.src = './images/kuberocket.png';
@@ -641,7 +672,8 @@ window.setInterval(function draw() {
         }
     }
     ctx.fillStyle = 'white';
-    ctx.font = '12px pixel';
+    ctx.font = '16px pixel';
+
     ctx.fillText('Cluster: ' + endpoint, 10, 390);
     ctx.fillText('Current Namespace: ' + namespace, 10, 410);
     ctx.fillText('Alien Shuffle: ' + shuffle, 10, 430);
@@ -778,7 +810,9 @@ window.setInterval(function setAliens() {
 }, 1000)
 
 window.setInterval(function chaosProgram() {
-    drawChaosProgramDiagram();
+    if (programming_mode_switch) {
+        drawChaosProgramFlow();
+    }
 }, 2000)
 
 window.setInterval(function metrics() {

nginx/KubeInvaders.conf

@@ -106,25 +106,91 @@ server {
   location /chaos/programs/json-flow {
     content_by_lua_block {
 
+      local function key_exists(data, mykey)
+        for key, value in pairs(data) do
+          if key == mykey then
+            return true
+          end
+        end
+        return false
+      end
+      
+      local function is_key_empty(data, mykey)
+        cnt = 0
+        for key, value in pairs(data[mykey]) do
+          cnt = cnt + 1
+        end
+        if cnt > 0 then
+          return false
+        end
+        return true
+      end
+
       local lyaml = require "lyaml"
+      local json = require 'lunajson'
+
       ngx.header['Access-Control-Allow-Origin'] = '*'
       ngx.header['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
       ngx.header['Access-Control-Allow-Headers'] = 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'
       ngx.header['Access-Control-Expose-Headers'] = 'Content-Length,Content-Range';
+      ngx.req.read_body()
+      data = ngx.req.get_body_data()
+      ngx.log(ngx.ERR, "[programming_mode_diagram] data sent from web interface => " .. data)
       
-      local data = yaml.load(ngx.req.get_body_data())
-      local reponse = ""
-      for key, value in pairs(data) do
-        if key == "experiments" then
-          for exp, expvalue in pairs(key) do
-            reponse = response .. "<div class='row'>"
-            reponse = response .. expvalue
-            reponse = response .. "</div>"
-          end
-        end
-      end
-      ngx.say(reponse)
-    }  
-  }
+      math.randomseed(os.clock()*100000000000)
+      local rand = math.random(999, 9999)
+      local filename = "/tmp/chaosprogram" .. rand
 
+      ngx.log(ngx.ERR, "[programming_mode_diagram] write temp file " .. filename)
+
+      yamlfile = io.open(filename, "w")
+      yamlfile:write(data)
+      yamlfile:close()
+
+      local handle = io.popen("python3 -c 'import yaml, sys; print(yaml.safe_load(sys.stdin))' < " .. filename)
+      local result = handle:read("*a")
+      local rc = handle:close()
+
+      ngx.log(ngx.ERR, "[programming_mode_diagram] Result of yaml syntax check =>||" .. result .. "||")
+
+      if data == nil then
+        error = "[programming_mode_diagram] No chaos program already loaded."
+        ngx.log(ngx.ERR, error)
+        ngx.say(error) 
+  
+      elseif not string.match(result, '{.*}') then
+        error = "[programming_mode_diagram] Chaos program seems not correct. Please check yaml syntax."
+        ngx.log(ngx.ERR, error)
+        ngx.say(error)
+      end
+
+      local yaml_data = lyaml.load(data)
+
+      if not key_exists(yaml_data, "jobs") then
+        error = "[programming_mode_diagram] Chaos program does not contain 'jobs' key. Please fix yaml definition."
+        ngx.log(ngx.ERR, error)
+        ngx.say(error)
+      
+      elseif not key_exists(yaml_data, "experiments") then
+        error = "[programming_mode_diagram] Chaos program does not contain 'experiments' key. Please fix yaml definition"
+        ngx.log(ngx.ERR, error)
+        ngx.say(error)
+      
+      elseif is_key_empty(yaml_data, "jobs") then
+        error = "[programming_mode_diagram] Chaos program does not contain valid 'jobs' key. Please fix yaml definition, add jobs"
+        ngx.log(ngx.ERR, error)
+        ngx.say(error)
+
+      elseif is_key_empty(yaml_data, "experiments") then
+        error = "[programming_mode_diagram] Chaos program does not contain valid 'experiments' key. Please fix yaml definition, add experiments"
+        ngx.log(ngx.ERR, error)
+        ngx.say(error)
+
+      else
+        os.remove(filename)
+        response = json.encode(yaml_data)
+        ngx.say(response)
+      end
+    }
+  }
 }