From da70eb893a90424a33e77a9db1fde0601325bc10 Mon Sep 17 00:00:00 2001
From: lefteris <cs141082@uniwa.gr>
Date: Thu, 1 Apr 2021 22:58:24 +0300
Subject: [PATCH] vuetables api ok

---
 src/components/doclive/AdhocView.vue | 125 +++++++++++++--------------
 src/components/doclive/runLlo.vue    |  48 +++++-----
 2 files changed, 80 insertions(+), 93 deletions(-)

diff --git a/src/components/doclive/AdhocView.vue b/src/components/doclive/AdhocView.vue
index b89883e..ad3080a 100644
--- a/src/components/doclive/AdhocView.vue
+++ b/src/components/doclive/AdhocView.vue
@@ -40,6 +40,18 @@
               >
                 online
               </button>
+              <div v-if="socketonline">
+                <button
+                  type="button"
+                  round
+                  disable
+                  class="btn btn-outline-info btn-sm"
+                  v-if="socketonline"
+                  @click="showHistory"
+                >
+                  {{ this.alllogs }}
+                </button>
+              </div>
               <button
                 type="button"
                 round
@@ -49,15 +61,6 @@
               >
                 socket disconnected
               </button>
-              <button
-                type="button"
-                round
-                class="btn btn-outline-info btn-sm"
-                v-if="socketonline"
-                @click="hotreload()"
-              >
-                Hot_Reload
-              </button>
             </div>
           </b-col>
 
@@ -66,17 +69,6 @@
               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
-                  type="button"
-                  round
-                  class="btn btn-outline-warning btn-sm"
-                  v-if="socketonline"
-                  @click="infoHotreload()"
-                >
-                  Hot_Reload_HowTo
-                </button>
-              </div>
               <div class="input-group-append">
                 <button
                   type="button"
@@ -88,41 +80,28 @@
                   Clear
                 </button>
               </div>
-              <div class="input-group-append">
-                <button
-                  type="button"
-                  round
-                  class="btn btn-outline-info btn-sm"
-                  v-if="cmOptions.keyMap == 'sublime'"
-                  @click="infoFilter"
-                >
-                  i
-                </button>
-              </div>
-              <!--
-                      <div class="input-group-append">
-                        <button  
-                          type="button"
-                          class="btn btn-outline-dark btn-sm"
-                          v-if="tryLLO[active]"
-                          @click="addlloasciisource"
-                          >Create task!</button>
-                      </div>
--->
             </div>
           </b-col>
         </b-row>
 
         <div class="codemirror">
-          <codemirror
-            ref="myCm"
-            :value="code"
-            :options="cmOptions"
-            @cursorActivity="onCmCursorActivity"
-            @ready="onCmReady"
-            @focus="onCmFocus"
-            @input="onCmCodeChange"
-          ></codemirror>
+          <div v-if="history" class="table">
+            <vuetable
+              ref="vuetable"
+              api-url="http://localhost:3000/test"
+              :api-mode="true"
+              :fields="[
+                'message',
+                'timestamp',
+                'type',
+                'process_id',
+                'app_name',
+              ]"
+              data-path=""
+              pagination-path=""
+            >
+            </vuetable>
+          </div>
         </div>
       </b-col>
     </b-row>
@@ -132,6 +111,7 @@
 import { mapState, mapGetters, mapActions, dispatch } from "vuex";
 import Vue from "vue";
 import store from "@/store/index";
+import Vuetable from "vuetable-2";
 
 import { codemirror } from "vue-codemirror";
 import JSZip from "jszip";
@@ -174,11 +154,14 @@ import "codemirror/addon/display/placeholder";
 export default {
   components: {
     codemirror,
+    Vuetable,
   },
   data() {
     return {
+      alllogs: "Show all logs",
       socketonline: false,
       tryConsole: false,
+      history: false,
       ssl: {},
       getinfo: "",
       token: "",
@@ -296,6 +279,15 @@ export default {
       // send to runLLO
       this.$root.$emit("SERVER_socket_connect");
     },
+    showHistory() {
+      if (this.history == false) {
+        this.history = true;
+        this.alllogs = "Hide all logs";
+      } else {
+        this.alllogs = "Show all logs";
+        this.history = false;
+      }
+    },
     clear() {
       this.tryConsole = false;
       this.code = "";
@@ -388,18 +380,18 @@ export default {
                 <td class="text-left">https://git.swarmlab.io:3000/labs/swarmlab-playground-client/raw/branch/master/hot_reload.sh</td>
             </tr>
             <tr>
-                <td class="text-center" colspan="2"><b>and add the proper values</b></td> 
+                <td class="text-center" colspan="2"><b>and add the proper values</b></td>
             </tr>
             <tr>
-              <td class="text-left">token</td> 
+              <td class="text-left">token</td>
               <td class="text-left">${this.token}</td>
             </tr>
             <tr>
-              <td class="text-left">swarmlabname</td> 
+              <td class="text-left">swarmlabname</td>
               <td class="text-left">${this.swarmlabname}</td>
             </tr>
             <tr>
-              <td class="text-center" colspan="2"><b>OR set the variables before exec</b></td> 
+              <td class="text-center" colspan="2"><b>OR set the variables before exec</b></td>
             </tr>
             <tr>
               <td class="text-left" colspan="2">export SWARMLAB_token=${this.token}</td>
@@ -408,7 +400,7 @@ export default {
               <td class="text-left" colspan="2">export SWARMLAB_name=${this.swarmlabname}</td>
             </tr>
             <tr>
-              <td class="text-center" colspan="2"><b>Ready!</b<</td> 
+              <td class="text-center" colspan="2"><b>Ready!</b<</td>
             </tr>
             <tr>
               <td class="text-left" colspan="2"><i>Execute script every time you run git push</i></td>
@@ -464,26 +456,26 @@ export default {
 
         this.code += "\n";
       }
-      /* 
+      /*
         for (let itemlog of logtmp) {
           //console.log('logtmp '+ JSON.stringify(itemlog))
-          this.code += itemlog.message 
+          this.code += itemlog.message
            + ' '
-           + itemlog.tailed_path 
+           + itemlog.tailed_path
            + ' '
-           + itemlog.date 
+           + itemlog.date
 
          //  + itemlog.date.year
          //  + ' '
-         //  + itemlog.date.month 
+         //  + itemlog.date.month
          //  + ' '
-         //  + itemlog.date.day 
+         //  + itemlog.date.day
          //  + ' '
-         //  + itemlog.date.hours 
+         //  + itemlog.date.hours
          //  + ' '
-         //  + itemlog.date.seconds 
+         //  + itemlog.date.seconds
          //  + ' '
-         //  + itemlog.date.milliseconds 
+         //  + itemlog.date.milliseconds
 
           this.code += "\n"
         }
@@ -508,7 +500,7 @@ export default {
     //LEFOS TOKEN ====
     //this.token = new URL(location.href).searchParams.get("token");
     this.token = new URL(
-      "https://api-client.swarmlab.io:8088/?token=8ee68923f567ad2fb5835f579c4d74f0cad6b1d1"
+      "https://api-client.swarmlab.io:8088/?token=59e732744987bc63a98a4f909d50984371b44543"
     ).searchParams.get("token");
 
     this.swarmlabname = new URL(location.href).searchParams.get("pipelinename");
@@ -517,6 +509,9 @@ export default {
 </script>
 
 <style>
+.table {
+  overflow: auto;
+}
 .CodeMirror {
   font-family: monospace;
   height: 550px;
diff --git a/src/components/doclive/runLlo.vue b/src/components/doclive/runLlo.vue
index 5cc6e18..78a2b9a 100644
--- a/src/components/doclive/runLlo.vue
+++ b/src/components/doclive/runLlo.vue
@@ -151,16 +151,6 @@
       <!-- col -->
     </div>
     <!-- row -->
-    <!-- <vuetable
-      ref="vuetable"
-      api-url="https://localhost:3000/test"
-      :api-mode="true"
-      :http-options="httpOptions"
-      :fields="['message', 'timestamp', 'type', 'process_id', 'app_name']"
-      data-path=""
-      pagination-path=""
-    >
-    </vuetable> -->
 
     <div class="row rowlog overflow-auto">
       <div class="col-12" v-for="item in log_path">
@@ -192,7 +182,7 @@
         </b-row>
       </div>
       <!-- col -->
-      <div class="table">
+      <div v-if="onEvent" class="table">
         <vuetable
           ref="vuetable"
           :api-mode="false"
@@ -228,6 +218,8 @@ export default {
       log_path_lenght: [],
       log_path_lenghtstatus: [],
       loglenghttotal: 32,
+      onEvent: false,
+      allHistory: false,
       search: {
         datestart: "",
         dateend: "",
@@ -289,17 +281,12 @@ export default {
       }
     },
     Hotlog() {
-      this.Clearlog();
-      var restapi = "off";
-      var logrestapi = store.dispatch("pipelineLLO/setRestapi", {
-        restapi: restapi,
-      });
+      var logintoken = store.getters["pipelineLLO/gettoken"];
+      //call to start on event logs
+      this.onEvent = true;
     },
     Clearlog() {
-      var log = store.dispatch("pipelineLLO/RMmongolog");
-      this.log_path = [];
-      //var mongolog = store.getters['pipelineLLO/getmongolog'];
-      //console.log("rmmongolog "+JSON.stringify(mongolog))
+      this.onEvent = false;
     },
     logview(item) {
       //console.log('path ' + JSON.stringify(item))
@@ -416,8 +403,11 @@ export default {
   computed: {
     httpOptions() {
       var token = store.getters["pipelineLLO/gettoken"];
-      var p = "headers: {Authorization: token}}"; //table props -> :http-options="httpOptions"
-      return { headers: { Authorization: "Bearer " + token } }; //table props -> :http-options="httpOptions"
+      return {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+        },
+      }; //table props -> :http-options="httpOptions"
     },
   },
   beforeMount() {
@@ -488,7 +478,7 @@ export default {
   created() {
     //var logintoken = new URL(location.href).searchParams.get("token");
     var logintoken = new URL(
-      "https://api-client.swarmlab.io:8088/?token=b2758b309c8aba70588987ebd0faa99beb412ff3"
+      "https://api-client.swarmlab.io:8088/?token=90b573e68eb33d11634d585efe130e50a655f920"
     ).searchParams.get("token");
     this.logintoken = logintoken;
     // === We get the user + check for the token if exists
@@ -499,8 +489,9 @@ export default {
     });
 
     this.socketopen();
-    //var tokentmp =store.getters['pipelineLLO/gettoken'];
-    //console.log("tokennnn "+tokentmp);
+
+    // let p = axios.get("http://localhost:3000/test");
+    // console.log(p);
   },
   /**
    *
@@ -529,7 +520,6 @@ export default {
       this.issocket = "open";
       // send to AdhocView
       this.$root.$emit("SERVER_socket_status", "on");
-      //call to start on event logs
       this.getuser(logintoken);
     },
     /**
@@ -754,8 +744,10 @@ export default {
 
 <style>
 .table {
-  /* overflow: scroll; */
-  max-height: 400px;
+  overflow: scroll;
+  min-width: 700px;
+  max-width: 1200px;
+  max-height: 550px;
 }
 .CodeMirror {
   font-family: monospace;