preparing metrics visualization

html5/index.html

@@ -69,14 +69,42 @@
 
     <div class="container" style="width: 50%;">
       <div class="starter-template">
-        <div class="row">
-          <img src="./logo.png" class="rounded mx-auto d-bloc" style="max-width: 25%; height: auto; margin-bottom: 0%;" alt="Responsive image">
+        <div class="container" style="margin-bottom: 2%;">
+          <div class="row" style="margin-top: 2%;">
+            <div class="col-sm  d-flex align-items-start flex-column">
+              <div class="card d-flex justify-content-center" style="max-width: 70%;">
+                <div class="card-header">
+                  Stats
+                </div>
+                <div class="card-body">
+                  <p class="card-text">Deleted Pod Total:&nbsp;<span id="deleted_pods_total" style="color: #3700ff">0</span></p> 
+                  <p class="card-text">Chaos Jobs Total:&nbsp;<span id="chaos_jobs_total" style="color: #3700ff">0</span></p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm">
+              <img src="./logo.png" class="rounded mx-auto d-bloc" style="max-width: 90%; max-height: 80%; margin-bottom: 0%;" alt="Responsive image">
+            </div>
+            <div class="col-sm d-flex align-items-end flex-column">
+              <div class="card" style="max-width: 70%;">
+                <div class="card-header">
+                  Speed
+                </div>
+                <div class="card-body">
+                  <h5 class="card-subtitle mb-2 text-muted"><font size=2>Latest speed of return to the desired state</font></h5>
+                  <div class="d-flex justify-content-center">
+                    <h2 class="card-text" style="justify-content: center;"><span id="chaos_pod_total" style="color: #3700ff">0</span></h2> 
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div id="alert_placeholder"></div>
         <div class="row">
           <canvas id="myCanvas" width="720" height="480"></canvas>
         </div>
       </div>
+      <div id="alert_placeholder" style="margin-top: 3%;"></div>
     </div>
     <div class="container" style="width: 50%; margin-top: 2%; margin-bottom: 2%;">
       <div class="card">

html5/kubeinvaders.js

@@ -92,18 +92,37 @@ function contains(a, obj) {
     return false;
 }
 
+function getMetrics() {
+    var oReq = new XMLHttpRequest();
+    oReq.onload = function () {
+    	console.log(this.responseText);
+        var lines = this.responseText.split('\n');
+        for (var i = 0;i < lines.length;i++){
+            metric = lines[i].split(' ');
+            if (metric[0] == "chaos_node_jobs_total") {
+                chaos_jobs_total
+                $('#chaos_jobs_total').text(metric[1]);
+            }
+            else if (metric[0] == "deleted_pods_total") {
+                $('#deleted_pods_total').text(metric[1]);            
+            } 
+        }
+    };;
+    oReq.open("GET", "https://ENDPOINT_PLACEHOLDER/metrics");
+    oReq.send();
+}
+
 function getNamespaces() {
     var oReq = new XMLHttpRequest();
     oReq.onload = function () {
     	namespaces = this.responseText;
-	namespaces = namespaces.split(",");
-	namespace = namespaces[namespaces_index];
+	    namespaces = namespaces.split(",");
+	    namespace = namespaces[namespaces_index];
     };;
     oReq.open("GET", "https://ENDPOINT_PLACEHOLDER/kube/namespaces");
     oReq.send();
 }
 
-
 function getEndpoint() {
     var oReq = new XMLHttpRequest();
     oReq.onload = function () {
@@ -150,7 +169,7 @@ function startChaosNode(node_name) {
     oReq.onload = function () {
         //console.log(JSON.parse(this.responseText))
     };;
-    $('#alert_placeholder').replaceWith('<div id="alert_placeholder" class="alert alert-info" role="alert">Latest action: Start Chaos Job on ' + node_name + '</div>');
+    $('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Start Chaos Job on ' + node_name + '</div>');
     oReq.open("GET", "https://ENDPOINT_PLACEHOLDER/kube/chaos/nodes?nodename=" + node_name + "&namespace=" + namespace);
     oReq.send();
 }
@@ -160,7 +179,7 @@ function deletePods(pod_name) {
     oReq.onload = function () {
         //console.log(JSON.parse(this.responseText))
     };;
-    $('#alert_placeholder').replaceWith('<div id="alert_placeholder" class="alert alert-info" role="alert">Latest action: Kill ' + pod_name + '</div>');
+    $('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Kill ' + pod_name + '</div>');
     oReq.open("GET", "https://ENDPOINT_PLACEHOLDER/kube/pods?action=delete&pod_name=" + pod_name + "&namespace=" + namespace);
     oReq.send();
 }
@@ -210,6 +229,7 @@ window.setInterval(function getKubeItems() {
 
 function keyDownHandler(e) {
     if (!modal_opened) {
+        e.preventDefault();
         if(e.key == "Right" || e.key == "ArrowRight") {
             rightPressed = true;
             //console.log("Go right");
@@ -237,13 +257,13 @@ function keyDownHandler(e) {
         else if(e.keyCode == 83) {
             if (shuffle) {
                 shuffle = false;
-                $('#alert_placeholder').replaceWith('<div id="alert_placeholder" class="alert alert-info" role="alert">Latest action: Disable shuffle</div>');
+                $('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Disable shuffle</div>');
                 //console.log("Deactivate shuffle");
             }
             else {
                 shuffle = true
                 //console.log("Activate shuffle");
-                $('#alert_placeholder').replaceWith('<div id="alert_placeholder" class="alert alert-info" role="alert">Latest action: Enable shuffle</div>');
+                $('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Enable shuffle</div>');
             }
         }
         else if(e.keyCode == 32) {
@@ -259,7 +279,7 @@ function keyDownHandler(e) {
                 namespaces_index = 0;
             }
             namespace = namespaces[namespaces_index];
-            $('#alert_placeholder').replaceWith('<div id="alert_placeholder" class="alert alert-info" role="alert">Latest action: Change target namespace to ' + namespace + '</div>');
+            $('#alert_placeholder').replaceWith('<div id="alert_placeholder" class="alert alert-info" style="margin-top: 3%;" role="alert">Latest action: Change target namespace to ' + namespace + '</div>');
             aliens = [];
             pods = [];
         }
@@ -274,22 +294,22 @@ function keyDownHandler(e) {
         else if(e.keyCode == 67) {
             if (chaos_nodes) {
                 chaos_nodes = false;
-                $('#alert_placeholder').replaceWith('<div id="alert_placeholder" class="alert alert-info" role="alert">Latest action: Show nodes</div>');
+                $('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Hide nodes</div>');
 
             }
             else {
                 chaos_nodes = true
-                $('#alert_placeholder').replaceWith('<div id="alert_placeholder" class="alert alert-info" role="alert">Latest action: Hide nodes</div>');
+                $('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Show nodes</div>');
             }
         }
         else if(e.keyCode == 80) {
             if (chaos_pods) {
                 chaos_pods = false;
-                $('#alert_placeholder').replaceWith('<div id="alert_placeholder" class="alert alert-info" role="alert">Latest action: Show pods</div>');
+                $('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Hide pods</div>');
             }
             else {
                 chaos_pods = true
-                $('#alert_placeholder').replaceWith('<div id="alert_placeholder" class="alert alert-info" role="alert">Latest action: Hide pods</div>');
+                $('#alert_placeholder').replaceWith('<div id="alert_placeholder" style="margin-top: 3%;" class="alert alert-info" role="alert">Latest action: Show pods</div>');
             }
         }
     }
@@ -528,5 +548,9 @@ window.setInterval(function setAliens() {
     }
 }, 1000)
 
+window.setInterval(function metrics() {
+    getMetrics()
+}, 2000)
+
 getEndpoint();
 getNamespaces();

scripts/metrics.lua

@@ -1,43 +1,10 @@
 local redis = require "resty.redis"
 local arg = ngx.req.get_uri_args()
 local incr = 0
-if ngx.var.request_method == "DELETE" then
-  local red = redis:new()
-  local okredis, errredis = red:connect("unix:/tmp/redis.sock")
-  
-  if okredis then
-    ngx.log(ngx.ERR, "Connection to Redis is ok")
-  else
-    ngx.log(ngx.ERR, "Connection to Redis is not ok")
-    ngx.log(ngx.ERR, errredis)
-  end
-  -- Count the total of deleted pods
-  local res, err = red:get("deleted_pods_total")
-  
-  if res == ngx.null then
-    ngx.say(err)
-    red:set("deleted_pods_total", 1)
-  else
-      incr = res + 1
-      red:set("deleted_pods_total", incr)      
-  end
 
-  -- TODO: Make a better regular expression!
-  local namespace_pods = string.match(ngx.var.request_uri, '^.*/namespaces/(.*)/.*$')
-  local namespace = namespace_pods:gsub("/pods", "")
-  
-  -- Count the total of deleted pods for namespace
-  local res, err = red:get("deleted_pods_total_on_" .. namespace)
-  
-  if res == ngx.null then
-    red:set("deleted_pods_total_on_" .. namespace, 1)
-  else
-    incr = res + 1
-    red:set("deleted_pods_total_on_" .. namespace, incr)
-  end
-  
+-- TO DO put all metrics into this metrics.lua. Actually in pod.lua are written other metrics in Redis
 
-elseif ngx.var.request_method == "GET" and string.match(ngx.var.request_uri, "^.*/chaos[-]node.*$") then
+if ngx.var.request_method == "GET" and string.match(ngx.var.request_uri, "^.*/chaos[-]node.*$") then
   local red = redis:new()
   local okredis, errredis = red:connect("unix:/tmp/redis.sock")
   
@@ -52,7 +19,7 @@ elseif ngx.var.request_method == "GET" and string.match(ngx.var.request_uri, "^.
   
   if chaos_node_res == ngx.null then
     ngx.say(err)
-    red:set("chaos_node_jobs_total", 0)
+    red:set("chaos_node_jobs_total", 1)
   else
     local incr = chaos_node_res + 1
     local res, err = red:set("chaos_node_jobs_total",incr)      

scripts/pod.lua

@@ -25,7 +25,6 @@ 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';
 
-
 if action == "delete" then
   local red = redis:new()
   local okredis, errredis = red:connect("unix:/tmp/redis.sock")
@@ -38,6 +37,18 @@ if action == "delete" then
   end
   -- Count the total of deleted pods
 
+  local res, err = red:get("deleted_pods_total")
+
+  if res == ngx.null then
+    ngx.say(err)
+    ngx.log(ngx.ERR, "deleted_pods_total is not present on Redis. Creating it..")
+    red:set("deleted_pods_total", 1)
+  else
+      incr = res + 1
+      ngx.log(ngx.ERR, "deleted_pods_total is present on Redis. Incrementing it..")
+      red:set("deleted_pods_total", incr)      
+  end
+
   -- Count the total of deleted pods for namespace
   local res, err = red:get("deleted_pods_total_on_" .. namespace)
 
@@ -49,7 +60,6 @@ if action == "delete" then
   end
 end
 
-
 if action == "list" then
   url = k8s_url.. "/api/v1/namespaces/" .. namespace  .. "/pods"