From 2b015ad65f0b8943583879a44a673fc20ad4dbdf Mon Sep 17 00:00:00 2001
From: Eugenio Marzo <eugenio.marzo@sourcesense.com>
Date: Sun, 23 Oct 2022 15:27:16 +0200
Subject: [PATCH] fix html

---
 html5/index.html      | 2 +-
 html5/kubeinvaders.js | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/html5/index.html b/html5/index.html
index 367cf67..e5a1d46 100644
--- a/html5/index.html
+++ b/html5/index.html
@@ -179,7 +179,7 @@
         <div id="chaos-program-screen" style="display: none;">
           <div class="row" style="margin-top: 1%;">
             <form>
-              <div id="alert_placeholder" style="margin-top: 1%; margin-botton: 1%"></div>
+              <div id="alert_placeholder" style="margin-top: 1%;"></div>
               <div class="form-group">
                 <label for="chaosProgramTextArea"></label>
                 <textarea class="form-control" id="chaosProgramTextArea" rows="20" style="font-family: Courier, monospace;">
diff --git a/html5/kubeinvaders.js b/html5/kubeinvaders.js
index bbe386e..7bf1d20 100644
--- a/html5/kubeinvaders.js
+++ b/html5/kubeinvaders.js
@@ -84,7 +84,7 @@ var help = false;
 var chaos_nodes = true;
 var chaos_pods = true;
 
-var alert_div = '<div id="alert_placeholder" style="margin-top: 2%; background-color:#000000; color: #0cf52b" class="alert" role="alert">';
+var alert_div = '<div id="alert_placeholder" style="margin-top: 2%; margin-bottom: 1%; background-color:#000000; color: #0cf52b" class="alert" role="alert">';
 var alert_div_webtail = '<div id="alert_placeholder3" style="margin-top: 2%; background-color:#000000; color: #0cf52b" class="alert" role="alert">';
 
 var kubelinter = '';
@@ -247,6 +247,9 @@ function setChaosContainer() {
 }
 
 function runChaosProgram() {
+
+    $('#alert_placeholder').replaceWith(alert_div + 'Loading chaos program...</div>');
+
     var oReq = new XMLHttpRequest();
     oReq.open("POST", "https://" + clu_endpoint + "/kube/chaos/programming_mode", true);
     oReq.onreadystatechange = function () {