fix logs and chaos programming console

html5/index.html

@@ -106,7 +106,7 @@
               <div class="modal-footer">
                 <button type="button" class="btn btn-light" onclick="savePreset('apply')">Save and apply</button>
                 <button type="button" class="btn btn-light" onclick="savePreset('save')">Save</button>
-                <button type="button" class="btn btn-danger" onclick="resetPreset('reset')">Reset to default</button>
+                <button type="button" id="resetToDefaultButton" class="btn btn-light-saved" onclick="resetPreset('reset')">Reset to default</button>
                 <button type="button" class="btn btn-dark" data-dismiss="modal" onclick="closeSetLoadTestModal()">Close</button>
               </div>
             </form>
@@ -151,7 +151,7 @@
             </div>
             <div class="col text-center">
               <div id="programming-mode-buttons" style="display: none;">
-                <button type="button" id="runProgrammingModeButton" class="btn btn-dark" onclick="runChaosProgram()">RUN</button>
+                <!-- <button type="button" id="runProgrammingModeButton" class="btn btn-dark" onclick="runChaosProgram()">RUN</button> -->
               </div>
             </div>
             <div class="col text-center">
@@ -218,7 +218,7 @@
           </div>
           <div class="">
             <div class="row" style="margin-top: 2%;">
-              <font size="2">Load Testing Presets</font>
+              <font size="2">Load Testing Presets & Chaos Programs</font>
             </div>
             <div class="row">
                 <div class="btn-group" id="loadButtonGroup" role="group" aria-label="Basic example" style="overflow-x: scroll; width: 100%; padding-bottom: 2%; padding-top: 2%; scrollbar-color: dark;">
@@ -240,6 +240,10 @@
                   <button type="button" id="loadSSH" class="btn btn-light btn-sm" onclick="loadPreset('SSH', 'python')">SSH</button>
                   <button type="button" id="loadVault" class="btn btn-light btn-sm" onclick="loadPreset('vault', 'python')">Vault</button>
                 </div>
+            </div>
+            <div class="row">
+              <div class="btn-group" id="loadChaosProgramButtonGroup" role="group" aria-label="Basic example" style="overflow-x: scroll; width: 100%; padding-bottom: 2.0%; padding-top: 0.5%; scrollbar-color: dark;">
+              </div>
           </div>
           </div>
         </div>
@@ -248,42 +252,50 @@
         <!-- START CHAOS PROGRAMMING MODE SCREEN -->
         <div id="chaos-program-screen" style="display: none;">
           <div class="row" style="margin-top: 1%;">
-            <div id="alert_placeholder4" style="margin-top: 1%;"></div>
-            <div id="alert_placeholder_programming_mode" style="margin-top: 1%;"></div>
+            <div id="alert_placeholder_programming_mode" style="margin-top: 1%; margin-bottom: 1%;"></div>
             <div class="col">
+              <div class="row" width="10px">
+                <div class="col text-center">
+                  <button type="button" id="saveChaosProgramButton" class="btn btn-light btn-sm" style="width: 50%;" onclick="savePreset('save-chaos-program')">SAVE</button>
+                </div>
+                <div class="col text-center">
+                  <button type="button" id="runChaosProgramButton" class="btn btn-dark" style="width: 50%;" onclick="runChaosProgram()">RUN</button>
+                </div>
+              </div>
               <form>
               <div class="form-group">
                 <label for="chaosProgramTextArea"></label>
                 <textarea class="form-control chaos-prog-area" id="chaosProgramTextArea" rows="50" style="min-width: 100%; font-family: Courier, monospace;">
-  jobs:
-    cpu-attack-job:
-      additional-labels:
-        chaos-controller: kubeinvaders
-        chaos-type: stress-ng
-        chaos-codename: CODENAME_PLACEHOLDER
-      image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
-      command: "stress-ng"
-      args:
-        - --help
+chaos-codename: CODENAME_PLACEHOLDER
+jobs:
+  cpu-attack-job:
+    additional-labels:
+      chaos-controller: kubeinvaders
+      chaos-type: stress-ng
+      chaos-codename: CODENAME_PLACEHOLDER
+    image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
+    command: "stress-ng"
+    args:
+      - --help
 
-    mem-attack-job:
-      additional-labels:
-        chaos-controller: kubeinvaders
-        chaos-type: stress-ng
-        chaos-codename: CODENAME_PLACEHOLDER
-      image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
-      command: "stress-ng"
-      args:
-        - --help
+  mem-attack-job:
+    additional-labels:
+      chaos-controller: kubeinvaders
+      chaos-type: stress-ng
+      chaos-codename: CODENAME_PLACEHOLDER
+    image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
+    command: "stress-ng"
+    args:
+      - --help
 
-  experiments:
-    - name: cpu-attack-exp
-      job: cpu-attack-job
-      loop: 5
+experiments:
+  - name: cpu-attack-exp
+    job: cpu-attack-job
+    loop: 5
 
-    - name: mem-attack-exp
-      job: mem-attack-job
-      loop: 5
+  - name: mem-attack-exp
+    job: mem-attack-job
+    loop: 5
                 </textarea>
               </div>
               </form>

html5/kubeinvaders.js

@@ -100,6 +100,10 @@ const chaos_job_regex = /chaos_jobs_status.*/g;
 var codename_configured = false;
 var chaos_jobs_status = new Map();
 
+function rand_id() {
+    return getRandomInt(9999);
+}
+
 function isJsonString(str) {
     try {
         JSON.parse(str);
@@ -124,6 +128,24 @@ function getCodeName() {
     oReq.send();
 }
 
+function createChaosProgramButton(name, lang) {
+    let btn = document.createElement("button");
+    let capitalizedName = name.charAt(0).toUpperCase() + name.slice(1);
+    console.log("[CREATE-CHAOS-PROGRAM] Creating button for " + name);
+    btn.innerHTML = capitalizedName;
+    btn.type = "button";
+    btn.name = "load" + capitalizedName;
+    btn.id = "load" + capitalizedName;
+    if (document.getElementById("load" + capitalizedName)) {
+        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); 
+    document.getElementById("loadButtonGroup").scrollLeft = document.getElementById("loadButtonGroup").scrollWidth;
+}
+
 function getSavedPresets() {
     var oReq = new XMLHttpRequest();
     oReq.onreadystatechange = function () {
@@ -136,9 +158,16 @@ function getSavedPresets() {
                     currentPresetName = currentPresetName.charAt(0).toUpperCase() + currentPresetName.slice(1);
                     //console.log("[GET-PRESETS] computing preset: " + currentPresetName);
                     var buttonId = "load" + currentPresetName.trim();
-                    console.log("[GET-PRESETS] Change border color of buttonId: " + buttonId);
-                    document.getElementById(buttonId).classList.remove('btn-light');
-                    document.getElementById(buttonId).classList.add('btn-light-saved');
+                    // console.log("[GET-PRESETS] Change border color of buttonId: " + buttonId);
+                    // console.log(document.getElementById(buttonId));
+                    if (document.getElementById(buttonId) == null){
+                        console.log("[GET-PRESETS] Appending button to loadButtonGroup. id: " + buttonId + " presetname: " + currentPresetName.trim());
+                        latest_preset_lang = "k-inv";
+                        createChaosProgramButton(currentPresetName.trim(), latest_preset_lang);                      
+                    } else {
+                        // document.getElementById(buttonId).classList.remove('btn-light');
+                        // document.getElementById(buttonId).classList.add('btn-light-saved');
+                    }
                 }
             } else {
                 console.log("[GET-PRESETS] There is no saved presets in Redis");
@@ -153,7 +182,6 @@ function loadSavedPreset(tool, lang, defaultpreset) {
     var oReq = new XMLHttpRequest();
     oReq.onreadystatechange = function () {
         if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
-            //console.log("response of loadSavedPreset: ||" + this.responseText + "||");
             if (this.responseText.trim() != "nil") {
                 $("#currentLoadTest").val(this.responseText.trim());
             } else {
@@ -174,8 +202,8 @@ function resetPreset() {
         if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
             let capitalizedPreset = latest_preset_name.charAt(0).toUpperCase() + latest_preset_name.slice(1);
             let buttonId = "load" + capitalizedPreset;
-            document.getElementById(buttonId).classList.remove('btn-light-saved');
-            document.getElementById(buttonId).classList.add('btn-light');
+            // document.getElementById(buttonId).classList.remove('btn-light-saved');
+            // document.getElementById(buttonId).classList.add('btn-light');
             closeSetLoadTestModal();
             getSavedPresets();
             console.log("[RESET-PRESETS] " + latest_preset_name + " restored with default preset");
@@ -189,10 +217,32 @@ function resetPreset() {
 }
 
 function savePreset(action) {
+    console.log("[SAVE-PRESET-CHAOSPROGRAM] Saving item...");
     var presetName = "";
     presetBody = $("#currentLoadTest").val();
-    presetLang = latest_preset_lang;
-    presetName = latest_preset_name;
+    console.log("[SAVE-PRESET-CHAOSPROGRAM] Saving " + presetBody);
+
+    if (action == "save-chaos-program") {
+        presetLang = "k-inv";
+        presetName = codename + "-" + rand_id();
+        latest_preset_lang = "k-inv";
+        console.log("[SAVE-PRESET-CHAOSPROGRAM] lang: " + presetLang + " name:" + presetName);
+        presetBody =  $('#chaosProgramTextArea').val();
+        document.getElementById("resetToDefaultButton").style.display = "none";
+    }
+    else if (latest_preset_lang == "k-inv") {
+        presetLang = "k-inv";
+        presetName = codename;
+        latest_preset_lang = "k-inv";
+        console.log("[SAVE-PRESET-CHAOSPROGRAM] lang: " + presetLang + " name:" + codename);
+        presetBody = $('#currentLoadTest').val();
+        document.getElementById("resetToDefaultButton").style.display = "none";
+    }
+    else {
+        presetLang = latest_preset_lang;
+        presetName = latest_preset_name;    
+        document.getElementById("resetToDefaultButton").style.display = "block";
+    }
 
     //console.log("Saving preset. name:" + presetName + ", lang:" + presetName + ", body: " + presetBody);
     var oReq = new XMLHttpRequest();
@@ -200,26 +250,38 @@ function savePreset(action) {
     oReq.open("POST", k8s_url + "/chaos/loadpreset/save?name=" + presetName + "&lang=" + presetLang, true);
 
     oReq.onreadystatechange = function () {
-        if (this.readyState === XMLHttpRequest.DONE && this.status === 200 && action == "apply") {
-            // console.log(this.responseText);
-            // $('#alert_placeholder').replaceWith(this.responseText);
-            presetBody = $('#chaosProgramTextArea').val(`chaos-codename: ${codename}\njobs:
+        if (this.readyState === XMLHttpRequest.DONE && this.status === 200 && (action == "apply" || action == "save-chaos-program")) {
+            if (latest_preset_lang == "k-inv") {
+                console.log("[SAVE-PRESET-CHAOSPROGRAM] Payload: " + $('#currentLoadTest').val());
+                if ($('#currentLoadTest').val() != "") {
+                    presetBody = $('#currentLoadTest').val();
+                } 
+                   
+                //$('#chaosProgramTextArea').val(presetBody);
+                
+                document.getElementById("chaosProgramTextArea").value = presetBody;
+            } 
+            else {
+                presetBody = $('#chaosProgramTextArea').val(`chaos-codename: ${codename}
+jobs:
   ${presetName}-job:
     additional-labels:
-      chaos-controller: kubeinvaders
-      chaos-lang: ${presetLang}
-      chaos-type: loadtest
-      chaos-codename: ${codename}
-    image: docker.io/luckysideburn/chaos-exec:v1.0.0
+        chaos-controller: kubeinvaders
+        chaos-lang: ${presetLang}
+        chaos-type: loadtest
+        chaos-codename: ${codename}
+    image: docker.io/luckysideburn/chaos-exec:v1.0.4
     command: bash
     args:
     - start.sh
     - ${presetLang}
-    - http://kubeinvaders:8080/${presetLang}_${presetName}
+    - code=${btoa(presetBody).trim()}
+
 experiments:
 - name: ${presetName}-exp
   job: ${presetName}-job
   loop: 5`);
+            }
         }
     };;
 
@@ -227,10 +289,16 @@ experiments:
     oReq.send(presetBody);
     closeSetLoadTestModal();
     
-    let presetNameCapitalized = presetName.charAt(0).toUpperCase() + presetName.slice(1);
-    var buttonId = "load" + presetNameCapitalized.trim();
-    document.getElementById(buttonId).classList.remove('btn-light');
-    document.getElementById(buttonId).classList.add('btn-light-saved');
+    if (action != "save-chaos-program") {
+        let presetNameCapitalized = presetName.charAt(0).toUpperCase() + presetName.slice(1);
+        var buttonId = "load" + presetNameCapitalized.trim();
+        // document.getElementById(buttonId).classList.remove('btn-light');
+        // document.getElementById(buttonId).classList.add('btn-light-saved');
+    }
+    else {
+        console.log("[SAVE-PRESET-CHAOSPROGRAM] Creating new button for lang: " + presetLang + " name:" + presetName);
+        createChaosProgramButton(presetName, 'k-inv'); 
+    }
 
     getSavedPresets();
 
@@ -1009,4 +1077,4 @@ document.getElementById("metricsPresetsRow").style.opacity = 0;
 document.getElementById("gameContainer").style.visibility = "visible";
 document.getElementById("metricsPresetsRow").style.visibility = "visible";
 document.getElementById("gameContainer").style.opacity = 1;
-document.getElementById("metricsPresetsRow").style.opacity = 1;
+document.getElementById("metricsPresetsRow").style.opacity = 1;

html5/utils.js

@@ -25,12 +25,23 @@ loadPresetsCodeJson = `{
 
   function loadPreset(tool, lang) {
     let decodedStringAtoB = "";
-    console.log("[GET-PRESETS] Loaded preset for " + tool);
-    loadPresetsCodeParsed = JSON.parse(loadPresetsCodeJson);
-    decodedStringAtoB = atob(loadPresetsCodeParsed[tool]);
+    console.log("[GET-PRESETS] Loaded preset for " + tool + " with lang " + lang);
+
     latest_preset_name = tool;
     latest_preset_lang = lang;
-    loadSavedPreset(tool, lang, decodedStringAtoB);
+    console.log("[GET-PRESETS] |" + lang + "|");
+
+    if (lang == "k-inv") {
+      loadSavedPreset(tool, lang, $('#chaosProgramTextArea').text());
+      document.getElementById("resetToDefaultButton").style.display = "none";
+    } else {
+      console.log("[GET-PRESETS] foo Loaded preset for " + tool + " with lang " + lang);
+      console.log("[GET-PRESET] loadPresetsCodeJson " +loadPresetsCodeJson);
+      loadPresetsCodeParsed = JSON.parse(loadPresetsCodeJson);
+      decodedStringAtoB = atob(loadPresetsCodeParsed[tool]);
+      loadSavedPreset(tool, lang, decodedStringAtoB);
+      document.getElementById("resetToDefaultButton").style.display = "block";
+    }
     $("#presetLang").val(lang);
     $("#presetName").val(tool);
     $('#setLoadTestModal').modal('show');
@@ -189,8 +200,4 @@ loadPresetsCodeJson = `{
   function closeKubeLinterModal() {
     $('#kubeLinterModal').modal('hide');
     modal_opened = false;
-  }
-
-//   $('textarea').on('input', function() {
-//     $('#alert_placeholder2').text('');
-//   });
+  }