search and service option

src/App.vue

@@ -157,10 +157,4 @@ body {
 .menoutext {
   font-family: "Lato", sans-serif !important;
 }
-
-thead {
-  background-color: #f8f9fa;
-  position: sticky;
-  top: 0;
-}
 </style>

src/components/doclive/AdhocView.vue

@@ -18,48 +18,63 @@
               >
                 online
               </button>
-              <div v-if="socketonline">
+              <div v-if="socketonline"></div>
               <button
                 type="button"
                 round
-                  disable
                 class="btn btn-outline-info btn-sm"
-                  v-if="socketonline"
-                  @click="showHistory"
+                v-else
+                @click="socketconnect"
               >
-                  {{ this.alllogs }}
+                socket disconnected
               </button>
+            </div>
+          </b-col>
+
+          <b-col cols="3">
+            <div class="input-group input-group-sm sm-3">
+              <div v-if="socketonline" class="search-wrapper">
+                <label class="filters" for="search">Search a log:</label>
+                <input
+                  id="search"
+                  type="text"
+                  v-model="searchparam"
+                  placeholder="Log"
+                />
+              </div>
+              <label class="filters" for="list">Pick a service:</label>
+              <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>
               <button
                 type="button"
                 round
                 disable
                 class="btn btn-outline-info btn-sm"
                 v-if="socketonline"
-                  @click="showChart"
+                @click="showHistory"
               >
-                  {{ this.chartbut }}
+                {{ this.alllogs }}
               </button>
             </div>
+          </b-col>
+
+          <b-col cols="5">
+            <div class="input-group input-group-sm d-flex justify-content-end">
               <button
                 type="button"
                 round
+                disable
                 class="btn btn-outline-info btn-sm"
-                v-else
-                @click="socketconnect"
+                v-if="socketonline"
+                @click="showChart"
               >
-                socket disconnected
+                {{ this.chartbut }}
               </button>
             </div>
-          </b-col>
-
-          <b-col cols="3">
-            <div class="input-group input-group-sm sm-3"></div>
-          </b-col>
-
-          <b-col cols="5">
-            <div
-              class="input-group input-group-sm d-flex justify-content-end"
-            ></div>
             <div class="input-group input-group-sm d-flex justify-content-end">
               <div class="input-group-append">
                 <button
@@ -89,6 +104,8 @@
               :show-sort-icons="true"
               :multi-sort="multiSort"
               :per-page="perpage"
+              :append-params="extraparams"
+              table-height="300px"
               pagination-path="links.pagination"
               detail-row-id="id"
               wrapper-class="vuetable-wrapper"
@@ -209,6 +226,11 @@ export default {
   },
   data() {
     return {
+      items: [],
+      extraparams: {
+        logtext: "",
+      },
+      searchparam: "",
       chartstatus: false,
       chartbut: "Show HighChart",
       chartOptions: {
@@ -240,12 +262,13 @@ export default {
           title: "Log",
           sortField: "message",
           visible: true,
+          width: "45%%",
         },
         {
           name: "timestamp",
           title: "Time",
           sortField: "time",
-          width: "20%",
+          width: "25%",
           visible: true,
         },
         {
@@ -256,13 +279,16 @@ export default {
         },
         {
           name: "process_id",
+          title: "P_ID",
           visible: true,
+          width: "5%",
         },
         {
           name: "app_name",
           visible: true,
           sortField: "app_name",
           title: '<span class="orange"></span>App Name',
+          width: "15%",
         },
         // 'timestamp',
         // 'type',
@@ -314,7 +340,7 @@ export default {
           },
         },
       ],
-      alllogs: "Show app logs",
+      alllogs: "Search",
       socketonline: false,
       tryConsole: false,
       history: false,
@@ -385,7 +411,7 @@ export default {
       LearningObject: "",
       showllo: true,
       showlloedit: true,
-      selected: "sublime",
+      selected: "All",
       options: [
         { text: "vim", value: "vim" },
         { text: "sublime", value: "sublime" },
@@ -481,13 +507,26 @@ export default {
         this.chartbut = "Show HighChart";
       }
     },
+    async getServices() {
+      await axios.get("http://localhost:3000/services").then((res) => {
+        res.data.forEach((val) => {
+          //console.log(val);
+          this.items.push({
+            name: val,
+          });
+        });
+        // this.items.push({
+        //   name: "All",
+        // });
+      });
+    },
     showHistory() {
+      this.extraparams.logtext = this.searchparam;
+      this.extraparams.selected = this.selected;
       if (this.history == false) {
         this.history = true;
-        this.alllogs = "Hide app logs";
       } else {
-        this.alllogs = "Show app logs";
-        this.history = false;
+        this.$refs.vuetable.refresh();
       }
     },
     onPaginationData(paginationData) {
@@ -740,11 +779,13 @@ export default {
     ).searchParams.get("token");
 
     this.swarmlabname = new URL(location.href).searchParams.get("pipelinename");
+
+    this.getServices();
   },
 };
 </script>
 
-<style scoped>
+<style sc oped>
 h2 {
   background-color: dimgray;
   padding: 10px;
@@ -756,11 +797,6 @@ h2 {
   padding-top: 50px;
   max-width: 100%;
 }
-.table3 {
-  min-height: 320px;
-  max-width: 100%;
-  overflow: auto;
-}
 .CodeMirror {
   font-family: monospace;
   max-width: 900px;
@@ -788,4 +824,12 @@ h2 {
 .pagi {
   height: 40px;
 }
+#search {
+  padding: 0px 5px 5px 5px;
+
+  margin: 0px 0px 10px 10px;
+}
+.filters {
+  margin: 0px 0px 0px 10px;
+}
 </style>

src/components/doclive/runLlo.vue

@@ -257,12 +257,13 @@
             Scroll to Bottom
           </button>
         </div>
-        <div id="rawlogs" class="table2">
+        <div id="rawlogs">
           <vuetable
             ref="rawtable"
             :api-mode="false"
             :fields="fields3"
             :css="css.table"
+            table-height="400px"
           >
           </vuetable>
         </div>
@@ -376,29 +377,28 @@ export default {
         {
           name: "container_id",
           title: "Container_id",
-          width: "30%",
+          width: "13%",
         },
         {
           name: "log",
           title: "Log",
-          width: "30%",
+          width: "40%",
         },
 
         {
           name: "container_name",
           title: "Container Name",
-          width: "15%",
+          width: "17%",
         },
         {
           name: "source",
           title: "Source",
-          width: "5%",
+          width: "8%",
         },
-
         {
           name: "time",
           title: "Time",
-          width: "20%",
+          width: "22%",
         },
       ],
       log_path: [],
@@ -742,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=daa93d51084c246f1670222d702732345d68f6ec"
+      "https://api-client.swarmlab.io:8088/?token=82309bbfc2fb9d86bc45e60f347c6d1f8f11f677"
     ).searchParams.get("token");
     this.logintoken = logintoken;
     // === We get the user + check for the token if exists
@@ -1066,7 +1066,7 @@ export default {
 
         this.localDataOut.push(tmp);
         this.localData.push(tmp);
-        console.log("HEY " + JSON.stringify(test));
+        // console.log("HEY " + JSON.stringify(test));
       } else if (val.container_name == "/redisserver") {
         var tmplog = val;
         //timestamp
@@ -1141,8 +1141,9 @@ button {
 .conid:hover {
   transition: 0.7s;
   width: 580px;
-  background-color: rgb(63, 61, 61);
+  background-color: rgb(49, 49, 49);
   color: #fff;
+  position: relative;
   border-radius: 6px;
   padding: 5px;
 }