From 3b14e7ed288f701ae9132abff093e8c38cf1661b Mon Sep 17 00:00:00 2001
From: lefteris <cs141082@uniwa.gr>
Date: Sun, 25 Apr 2021 19:24:30 +0300
Subject: [PATCH] redis ok - more style fixes

---
 src/components/doclive/AdhocView.vue | 16 ++++--
 src/components/doclive/runLlo.vue    | 73 +++++++++++++++++++++++++---
 2 files changed, 77 insertions(+), 12 deletions(-)

diff --git a/src/components/doclive/AdhocView.vue b/src/components/doclive/AdhocView.vue
index e4c424c..3270833 100644
--- a/src/components/doclive/AdhocView.vue
+++ b/src/components/doclive/AdhocView.vue
@@ -78,7 +78,7 @@
 
         <div class="codemirror2">
           <div v-if="history" class="table3">
-            <h2>History of all app logs</h2>
+            <h2>History of all app logs (redis, readmongo, dummy)</h2>
             <vuetable
               ref="vuetable"
               :api-url="api_url"
@@ -121,7 +121,7 @@
           </div>
 
           <div class="highch" v-show="chartstatus">
-            <h2>HighChart with log sum Data</h2>
+            <h2>HighChart with log sum Data (all)</h2>
             <div class="input-group-append">
               <button
                 type="button"
@@ -250,7 +250,7 @@ export default {
         },
         {
           name: "type",
-          sortField: "type",
+          // sortField: "type",
           titleClass: "center aligned",
           width: "10%",
         },
@@ -261,6 +261,7 @@ export default {
         {
           name: "app_name",
           visible: true,
+          sortField: "app_name",
           title: '<span class="orange"></span>App Name',
         },
         // 'timestamp',
@@ -437,10 +438,13 @@ export default {
       var appout = res.data.appout;
       var apperror = res.data.apperror;
       var redis = res.data.redis;
+      var dumout = res.data.dumout;
+      var dumerr = res.data.dumerr;
       if (params == 1) {
         this.chartOptions.series[0].data = [appout, apperror];
         this.chartOptions.series[1].data = [mongol, 0];
         this.chartOptions.series[2].data = [redis, 0];
+        this.chartOptions.series[3].data = [dumout, dumerr];
       } else {
         this.chartOptions.series.push(
           {
@@ -452,8 +456,12 @@ export default {
             data: [mongol, mongoerror],
           },
           {
-            name: "redis",
+            name: "Redis",
             data: [redis, 0],
+          },
+          {
+            name: "Dummy",
+            data: [dumout, dumerr],
           }
         );
       }
diff --git a/src/components/doclive/runLlo.vue b/src/components/doclive/runLlo.vue
index b5b39cd..546d213 100644
--- a/src/components/doclive/runLlo.vue
+++ b/src/components/doclive/runLlo.vue
@@ -182,7 +182,7 @@
       </div>
       <!-- col -->
       <div v-if="onEvent" class="logs">
-        <h2>ON-event logs for all apps (Simplified)</h2>
+        <h2>ON-event logs for all apps (Simplified - ALL)</h2>
         <div class="input-group-append">
           <button
             class="btn btn-outline-primary"
@@ -205,7 +205,7 @@
         </div>
       </div>
       <div v-if="mongoraw" class="logs">
-        <h2>ON-event logs for MongoDB (RAW)</h2>
+        <h2>ON-event logs for MongoDB only (RAW)</h2>
         <div class="input-group-append">
           <button
             class="btn btn-outline-primary"
@@ -228,7 +228,7 @@
         </div>
       </div>
       <div v-if="raw" class="logs">
-        <h2>ON-event logs (RAW)</h2>
+        <h2>ON-event logs (RAW - ALL)</h2>
         <div class="input-group-append">
           <button
             class="btn btn-outline-primary"
@@ -274,6 +274,7 @@ export default {
   },
   data() {
     return {
+      hover: false,
       css: CssConfig,
       fields: [
         {
@@ -348,8 +349,8 @@ export default {
       ],
       fields3: [
         {
-          name: "_id",
-          title: "ID",
+          name: "container_id",
+          title: "Container_id",
         },
         {
           name: "container_name",
@@ -658,7 +659,7 @@ export default {
   created() {
     //var logintoken = new URL(location.href).searchParams.get("token");
     var logintoken = new URL(
-      "https://api-client.swarmlab.io:8088/?token=191f43c5b28084805e7f7b66ceed9c2657a817a3"
+      "https://api-client.swarmlab.io:8088/?token=117ec26cc66cfba79b048cec800a610b00922b2a"
     ).searchParams.get("token");
     this.logintoken = logintoken;
     // === We get the user + check for the token if exists
@@ -906,6 +907,7 @@ export default {
     async message(val) {
       console.log(" socket message " + JSON.stringify(val));
     },
+    // Lefos --- socket event to add the data to the right tables
     async logsend(val) {
       // ==== LEFOS
       console.log(" socket message " + JSON.stringify(val));
@@ -917,12 +919,17 @@ export default {
         log: val,
       });
 
+      // Change color of source for ALL RAW table to be able to see the error logs easy
       if (val.source == "stdout") {
         val.source = '<div class="outtype" >' + val.source + "</div>";
       } else {
         val.source = '<div class="errtype" >' + val.source + "</div>";
       }
+      val.container_id = '<div class="conid">' + val.container_id + "</div>";
+
       this.rawdata.push(val);
+
+      // Check if the log is by a node_service and change color of the type field
       if (val.log.includes("app_name")) {
         var test = JSON.parse(val.log);
         if (test.type == "out") {
@@ -931,14 +938,18 @@ export default {
           test.type = '<div class="errtype" >' + test.type + "</div>";
         }
         this.localData.push(test);
-      } else if (val.container_name == "/mongo") {
+      } //check if the log is by the mongodb and change color
+      else if (val.container_name == "/mongo") {
+        // ========== push data for raw table ============
         var tmp = JSON.parse(val.log);
         if (tmp.s == "I") {
           tmp.s = '<div class="outtype" >' + tmp.s + "</div>";
         } else {
           tmp.s = '<div class="errtype" >' + tmp.s + "</div>";
         }
+        tmp.t = '<div class="mongod">' + JSON.stringify(tmp.t) + "</div>";
         this.mongodata.push(tmp);
+        // ===========
 
         //msg
         var tmplog = JSON.parse(val.log);
@@ -950,12 +961,24 @@ export default {
         var tmp = {
           message: msg2,
           timestamp: time,
-          type: "<div class= 'outtype'>out - mongo</div>",
+          type: "<div class= 'outtype'>out</div>",
           process_id: "Unknown",
           app_name: "Mongo",
         };
         this.localData.push(tmp);
         console.log("HEY " + JSON.stringify(test));
+      } else if (val.container_name == "/redisserver") {
+        var tmplog = val;
+        //timestamp
+        var time = tmplog.time;
+        var tmp = {
+          message: tmplog.log,
+          timestamp: time,
+          type: "<div class= 'outtype'>out</div>",
+          process_id: "Unknown",
+          app_name: "redis",
+        };
+        this.localData.push(tmp);
       }
     },
   },
@@ -1004,4 +1027,38 @@ button {
   padding: 10px 10px 10px 10px;
   margin: 10px 10px 10px 0px;
 }
+.conid {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 5px;
+  width: 120px;
+  /* position: relative; */
+  display: inline-block;
+}
+.conid:hover {
+  transition: 0.7s;
+  width: 100%;
+  background-color: rgb(63, 61, 61);
+  color: #fff;
+  border-radius: 6px;
+  padding: 5px;
+}
+
+.mongod {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 5px;
+  width: 120px;
+  height: 100px;
+  /* position: relative; */
+  display: inline-block;
+}
+.mongod:hover {
+  transition: 0.7s;
+  width: 100%;
+  background-color: rgb(63, 61, 61);
+  color: #fff;
+  border-radius: 6px;
+  padding: 5px;
+}
 </style>