final

src/App.vue

@@ -157,4 +157,16 @@ body {
 .menoutext {
   font-family: "Lato", sans-serif !important;
 }
+.col-4 {
+  max-width: 25%;
+  flex: 0 0 25%;
+}
+.col-3 {
+  max-width: 35%;
+  flex: 0 0 35%;
+}
+.col-5 {
+  max-width: 40%;
+  flex: 0 0 40%;
+}
 </style>

src/components/doclive/AdhocView.vue

@@ -43,13 +43,22 @@
                 />
               </div>
               <div v-if="socketonline" class="selec">
-                <label class="filters" for="list">Pick a service:</label>
+                <label class="filters" for="list">Pick a service:</label> <br />
                 <select class="filters" id="list" v-model="selected">
                   <option selected value="All">All</option>
                   <option v-for="item in this.items" v-bind:value="item.name">
                     {{ item.name }}
                   </option>
                 </select>
+                <!-- <img
+                  id="image"
+                  src="../../assets/refresh.png"
+                  alt=""
+                  @click="getServices"
+                /> -->
+                <button id="btn" v-on:click="getServices">
+                  <img id="image" src="../../assets/refresh.png" />
+                </button>
               </div>
               <button
                 type="button"
@@ -497,6 +506,7 @@ export default {
       }
     },
     async getServices() {
+      this.items.splice(0, this.items.length);
       await axios.get("http://localhost:3000/services").then((res) => {
         res.data.forEach((val) => {
           //console.log(val);
@@ -820,7 +830,26 @@ h2 {
 
   margin: 0px 0px 10px 10px;
 }
+.selec {
+  /* min-width: 100%; */
+}
 .filters {
   margin: 0px 0px 0px 10px;
+  max-width: 80%;
+}
+#image {
+  max-width: 20px;
+  max-height: 20px;
+  /* margin: 0; */
+  padding: 0;
+  /* border-radius: 2rem; */
+}
+#btn {
+  margin: 0 0 0 10px;
+  padding: 0;
+  max-width: 28px;
+  max-height: 28px;
+  background: rgb(158, 226, 226);
+  /* border-radius: 1rem; */
 }
 </style>

src/components/doclive/runLlo.vue

@@ -483,7 +483,7 @@ export default {
       console.log("User: " + data.user + "  Token: " + data.token);
       this.$socket.client.emit("onevent", data.user);
     },
-    async IsJsonString(str) {
+    IsJsonString(str) {
       try {
         JSON.parse(str);
       } catch (e) {
@@ -752,7 +752,7 @@ export default {
   created() {
     //var logintoken = new URL(location.href).searchParams.get("token");
     var logintoken = new URL(
-      "https://api-client.swarmlab.io:8088/?token=e9179d07171a46568fe482568398ca20343d694f"
+      "https://api-client.swarmlab.io:8088/?token=7d01aaaf1c71ab27e6041fb157c9e46077240741"
     ).searchParams.get("token");
     this.logintoken = logintoken;
     // === We get the user + check for the token if exists
@@ -995,6 +995,7 @@ export default {
       // Check if the log is by a node_service and change color of the type field
       if (val.tag.includes("node") && this.IsJsonString(val.log)) {
         var test = JSON.parse(val.log);
+        test.app_name = val.container_name;
         if (test.type == "out") {
           test.type = '<div class="outtype" >' + test.type + "</div>";
           this.localDataOut.push(test);
@@ -1004,7 +1005,34 @@ export default {
         }
         this.localData.push(test);
       } //check if the log is by the mongodb and change color
-      else if (val.tag.includes("mongodb")) {
+      else if (val.tag.includes("node") && !this.IsJsonString(val.log)) {
+        var tmp2;
+        var type;
+        if (val.source.includes("stdout")) {
+          // console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
+          //type = '<div class="outtype" >' + val.source + "</div>";
+          tmp2 = {
+            message: val.log,
+            timestamp: val.time,
+            type: '<div class="outtype" >' + "out" + "</div>",
+            process_id: "-",
+            app_name: val.container_name,
+          };
+          this.localDataOut.push(tmp2);
+          this.localData.push(tmp2);
+        } else if (val.source.includes("stderr")) {
+          //type = '<div class="outtype" >' + val.source + "</div>";
+          tmp2 = {
+            message: val.log,
+            timestamp: val.time,
+            type: '<div class="errtype" >' + "err" + "</div>",
+            process_id: "-",
+            app_name: val.container_name,
+          };
+          this.localDataError.push(tmp2);
+          this.localData.push(tmp2);
+        }
+      } else if (val.tag.includes("mongodb") && this.IsJsonString(val.log)) {
         // ========== push data for raw table ============
         var tmp = JSON.parse(val.log);