out-error + all raw

src/components/doclive/AdhocView.vue

@@ -76,8 +76,8 @@
           </b-col>
         </b-row>
 
-        <div class="codemirror">
-          <div v-if="history" class="table2">
+        <div class="codemirror2">
+          <div v-if="history" class="table3">
             <h2>History of all app logs</h2>
             <vuetable
               ref="vuetable"
@@ -748,7 +748,7 @@ h2 {
   padding-top: 50px;
   max-width: 100%;
 }
-.table2 {
+.table3 {
   min-height: 320px;
   max-width: 100%;
   overflow: auto;
@@ -758,7 +758,7 @@ h2 {
   max-width: 900px;
   min-height: 500px;
 }
-.codemirror {
+.codemirror2 {
   min-height: 600px;
   box-shadow: 3px 3px 10px 10px rgba(0, 0, 0, 0.281);
   margin-top: 10px;
@@ -777,4 +777,7 @@ h2 {
   padding: 10px;
   margin: 10px;
 }
+.pagi {
+  height: 40px;
+}
 </style>

src/components/doclive/runLlo.vue

@@ -405,9 +405,10 @@ export default {
       } else if (param == 2) {
         var container = this.$el.querySelector("#mongologs");
         container.scrollTop = container.scrollHeight;
-      } else {
+      } else if (param == 3) {
+        console.log("moving scroll bar of raw logs");
         var container = this.$el.querySelector("#rawlogs");
-        container.scrollTOp = container.scrollHeight;
+        container.scrollTop = container.scrollHeight;
       }
     },
     async getuser(token) {
@@ -657,7 +658,7 @@ export default {
   created() {
     //var logintoken = new URL(location.href).searchParams.get("token");
     var logintoken = new URL(
-      "https://api-client.swarmlab.io:8088/?token=06227b41168224d853a1863d3195cff946f15217"
+      "https://api-client.swarmlab.io:8088/?token=191f43c5b28084805e7f7b66ceed9c2657a817a3"
     ).searchParams.get("token");
     this.logintoken = logintoken;
     // === We get the user + check for the token if exists
@@ -916,13 +917,28 @@ export default {
         log: val,
       });
 
-      this.rawdata = val;
+      if (val.source == "stdout") {
+        val.source = '<div class="outtype" >' + val.source + "</div>";
+      } else {
+        val.source = '<div class="errtype" >' + val.source + "</div>";
+      }
+      this.rawdata.push(val);
       if (val.log.includes("app_name")) {
         var test = JSON.parse(val.log);
-
+        if (test.type == "out") {
+          test.type = '<div class="outtype" >' + test.type + "</div>";
+        } else if (test.type == "err") {
+          test.type = '<div class="errtype" >' + test.type + "</div>";
+        }
         this.localData.push(test);
       } else if (val.container_name == "/mongo") {
-        this.mongodata.push(JSON.parse(val.log));
+        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>";
+        }
+        this.mongodata.push(tmp);
 
         //msg
         var tmplog = JSON.parse(val.log);
@@ -934,7 +950,7 @@ export default {
         var tmp = {
           message: msg2,
           timestamp: time,
-          type: "out - mongo",
+          type: "<div class= 'outtype'>out - mongo</div>",
           process_id: "Unknown",
           app_name: "Mongo",
         };
@@ -946,13 +962,22 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 .table2 {
   overflow: auto;
   max-height: 400px;
   min-width: 100%;
 }
-
+.outtype {
+  color: rgb(0, 0, 0) !important;
+  background-color: rgba(13, 233, 13, 0.411) !important;
+  padding: 5px;
+}
+.errtype {
+  color: white;
+  background-color: rgb(197, 29, 29);
+  padding: 5px;
+}
 h2 {
   background-color: dimgray;
   padding: 10px;