error output ok

src/components/doclive/runLlo.vue

@@ -141,6 +141,26 @@
                 Clear
               </button>
             </div>
+            <div class="input-group-append">
+              <button
+                class="btn btn-outline-warning"
+                round
+                type="button"
+                @click="Hidelog"
+              >
+                Hide
+              </button>
+            </div>
+            <div class="input-group-append">
+              <button
+                class="btn btn-outline-warning"
+                round
+                type="button"
+                @click="Refresh"
+              >
+                Force Refresh
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -181,7 +201,7 @@
         </b-row>
       </div>
       <!-- col -->
-      <div v-if="onEvent" class="logs">
+      <div v-show="onEvent" class="logs">
         <h2>ON-event logs for all apps (Simplified - ALL)</h2>
         <div class="input-group-append">
           <button
@@ -195,16 +215,15 @@
         </div>
         <div id="applogs" class="table2">
           <vuetable
-            ref="vuetable"
+            ref="apptable"
             :api-mode="false"
-            :data="localData"
             :fields="fields"
             :css="css.table"
           >
           </vuetable>
         </div>
       </div>
-      <div v-if="mongoraw" class="logs">
+      <div v-show="mongoraw" class="logs">
         <h2>ON-event logs for MongoDB only (RAW)</h2>
         <div class="input-group-append">
           <button
@@ -218,16 +237,15 @@
         </div>
         <div id="mongologs" class="table2">
           <vuetable
-            ref="vuetable"
+            ref="mongotable"
             :api-mode="false"
-            :data="mongodata"
             :fields="fields2"
             :css="css.table"
           >
           </vuetable>
         </div>
       </div>
-      <div v-if="raw" class="logs">
+      <div v-show="raw" class="logs">
         <h2>ON-event logs (RAW - ALL)</h2>
         <div class="input-group-append">
           <button
@@ -241,9 +259,8 @@
         </div>
         <div id="rawlogs" class="table2">
           <vuetable
-            ref="vuetable"
+            ref="rawtable"
             :api-mode="false"
-            :data="rawdata"
             :fields="fields3"
             :css="css.table"
           >
@@ -280,7 +297,7 @@ export default {
         {
           name: "message",
           title: "Log",
-          width: "10%",
+          width: "20%",
           visible: true,
           dataClass: "center aligned",
         },
@@ -314,16 +331,25 @@ export default {
           name: "t",
           title: "Timestamp",
           visible: true,
+          width: "30%",
         },
+
         {
           name: "s",
           title: "Severity",
           visible: true,
+          width: "5%",
+        },
+        {
+          name: "attr",
+          title: "Attributes",
+          width: "40%",
         },
         {
           name: "c",
           title: "Components",
           titleClass: "center aligned",
+          width: "10%",
         },
         {
           name: "id",
@@ -333,15 +359,14 @@ export default {
           name: "ctx",
           visible: true,
           title: "Context",
+          width: "5%",
         },
         {
           name: "msg",
           title: "Message",
+          width: "10%",
         },
-        {
+
-          name: "attr",
-          title: "Attributes",
-        },
         // 'timestamp',
         // 'type',
         // 'process_id',
@@ -351,18 +376,29 @@ export default {
         {
           name: "container_id",
           title: "Container_id",
+          width: "30%",
+        },
+        {
+          name: "log",
+          title: "Log",
+          width: "30%",
         },
+
         {
           name: "container_name",
           title: "Container Name",
+          width: "15%",
         },
         {
           name: "source",
           title: "Source",
+          width: "5%",
         },
+
         {
-          name: "log",
+          name: "time",
-          title: "Log",
+          title: "Time",
+          width: "20%",
         },
       ],
       log_path: [],
@@ -391,14 +427,42 @@ export default {
       code: [],
       logdata: [],
       mongodata: [],
+      mongoerror: [],
+      mongoout: [],
       localData: [],
+
+      localDataError: [],
+      localDataOut: [],
       rawdata: [],
+      rawout: [],
+      rawerror: [],
       mongoraw: false,
       allraw: false,
       raw: false,
     };
   },
   methods: {
+    Refresh() {
+      this.checklogs();
+      this.$refs.apptable.reload();
+    },
+    checklogs() {
+      if (this.logcheck.error && !this.logcheck.output) {
+        // console.log("Inside check");
+        this.$refs.apptable.setData(this.localDataError);
+        this.$refs.mongotable.setData(this.mongoerror);
+        this.$refs.rawtable.setData(this.rawerror);
+      } else if (this.logcheck.error && this.logcheck.output) {
+        // console.log("Inside check default");
+        this.$refs.apptable.setData(this.localData);
+        this.$refs.mongotable.setData(this.mongodata);
+        this.$refs.rawtable.setData(this.rawdata);
+      } else if (!this.logcheck.error && this.logcheck.output) {
+        this.$refs.apptable.setData(this.localDataOut);
+        this.$refs.mongotable.setData(this.mongoout);
+        this.$refs.rawtable.setData(this.rawout);
+      }
+    },
     scroll(param) {
       if (param == 1) {
         var container = this.$el.querySelector("#applogs");
@@ -460,11 +524,30 @@ export default {
     allrawf() {
       this.raw = true;
     },
-    Clearlog() {
+    Hidelog() {
       this.onEvent = false;
       this.mongoraw = false;
       this.raw = false;
     },
+    Clearlog() {
+      // this.onEvent = false;
+      // this.mongoraw = false;
+      // this.raw = false;
+
+      this.localData = [];
+      this.localDataError = [];
+      this.localDataOut = [];
+
+      this.rawdata = [];
+      this.rawout = [];
+      this.rawerror = [];
+
+      this.mongodata = [];
+      this.mongoout = [];
+      this.mongoerror = [];
+
+      this.Refresh();
+    },
     logview(item) {
       //console.log('path ' + JSON.stringify(item))
       if (this.logcheck.log) {
@@ -659,7 +742,7 @@ export default {
   created() {
     //var logintoken = new URL(location.href).searchParams.get("token");
     var logintoken = new URL(
-      "https://api-client.swarmlab.io:8088/?token=117ec26cc66cfba79b048cec800a610b00922b2a"
+      "https://api-client.swarmlab.io:8088/?token=daa93d51084c246f1670222d702732345d68f6ec"
     ).searchParams.get("token");
     this.logintoken = logintoken;
     // === We get the user + check for the token if exists
@@ -910,22 +993,32 @@ export default {
     // Lefos --- socket event to add the data to the right tables
     async logsend(val) {
       // ==== LEFOS
-      console.log(" socket message " + JSON.stringify(val));
+      // console.log(" socket message " + JSON.stringify(val));
 
       // var log = val.log;
       // console.log(" LOG:  " + JSON.parse(JSON.stringify(log)));
 
+      //Check which data array to put as data to the tables
+      this.checklogs();
+
       var log = store.dispatch("pipelineLLO/addlog", {
         log: val,
       });
 
+      val.container_id = '<div class="conid">' + val.container_id + "</div>";
+      // console.log("raw before.. " + val.log);
+      // A bit of edit to fit perfectly into the table
+      val.log = val.log.replace(/,/g, ", ");
+      val.log = val.log.replace(/":/g, '": ');
+      // console.log("raw after .. " + val.log);
       // 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>";
+        this.rawout.push(val);
       } else {
         val.source = '<div class="errtype" >' + val.source + "</div>";
+        this.rawerror.push(val);
       }
-      val.container_id = '<div class="conid">' + val.container_id + "</div>";
 
       this.rawdata.push(val);
 
@@ -934,18 +1027,23 @@ export default {
         var test = JSON.parse(val.log);
         if (test.type == "out") {
           test.type = '<div class="outtype" >' + test.type + "</div>";
+          this.localDataOut.push(test);
         } else if (test.type == "err") {
           test.type = '<div class="errtype" >' + test.type + "</div>";
+          this.localDataError.push(test);
         }
         this.localData.push(test);
       } //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>";
+          this.mongoout.push(tmp);
         } else {
           tmp.s = '<div class="errtype" >' + tmp.s + "</div>";
+          this.mongoerror.push(tmp);
         }
         tmp.t = '<div class="mongod">' + JSON.stringify(tmp.t) + "</div>";
         this.mongodata.push(tmp);
@@ -965,6 +1063,8 @@ export default {
           process_id: "Unknown",
           app_name: "Mongo",
         };
+
+        this.localDataOut.push(tmp);
         this.localData.push(tmp);
         console.log("HEY " + JSON.stringify(test));
       } else if (val.container_name == "/redisserver") {
@@ -978,6 +1078,8 @@ export default {
           process_id: "Unknown",
           app_name: "redis",
         };
+
+        this.localDataOut.push(tmp);
         this.localData.push(tmp);
       }
     },
@@ -988,6 +1090,7 @@ export default {
 <style>
 .table2 {
   overflow: auto;
+  /* overflow-anchor: none; */
   max-height: 400px;
   min-width: 100%;
 }
@@ -1032,12 +1135,12 @@ button {
   text-overflow: ellipsis;
   padding: 5px;
   width: 120px;
-  /* position: relative; */
+  height: 100px;
   display: inline-block;
 }
 .conid:hover {
   transition: 0.7s;
-  width: 100%;
+  width: 580px;
   background-color: rgb(63, 61, 61);
   color: #fff;
   border-radius: 6px;
@@ -1048,14 +1151,14 @@ button {
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 5px;
-  width: 120px;
+  width: 110px;
-  height: 100px;
+  height: 140px;
   /* position: relative; */
   display: inline-block;
 }
 .mongod:hover {
   transition: 0.7s;
-  width: 100%;
+  width: 330px;
   background-color: rgb(63, 61, 61);
   color: #fff;
   border-radius: 6px;