From 1701b085b42ec065dcfbf33d144604cf7bb49d5e Mon Sep 17 00:00:00 2001
From: lefteris <cs141082@uniwa.gr>
Date: Sun, 18 Apr 2021 17:05:39 +0300
Subject: [PATCH] latest

---
 src/components/DocLive.vue           |  1 +
 src/components/doclive/AdhocView.vue | 58 ++++++++++++------
 src/components/doclive/runLlo.vue    | 90 +++++++++++++++++++++-------
 3 files changed, 109 insertions(+), 40 deletions(-)

diff --git a/src/components/DocLive.vue b/src/components/DocLive.vue
index 39e3faa..198ac1d 100644
--- a/src/components/DocLive.vue
+++ b/src/components/DocLive.vue
@@ -154,6 +154,7 @@ export default {
   max-width: 48%;
 }
 .col-5 {
+  flex: 0 0 50%;
   max-width: 50%;
 }
 </style>
diff --git a/src/components/doclive/AdhocView.vue b/src/components/doclive/AdhocView.vue
index e76113c..69887d7 100644
--- a/src/components/doclive/AdhocView.vue
+++ b/src/components/doclive/AdhocView.vue
@@ -66,7 +66,7 @@
                   type="button"
                   round
                   class="btn btn-outline-warning btn-sm"
-                  v-if="tryConsole"
+                  v-if="socketonline"
                   @click="clear()"
                 >
                   Clear
@@ -122,6 +122,16 @@
 
           <div class="highch" v-show="chartstatus">
             <h2>HighChart with log sum Data</h2>
+            <div class="input-group-append">
+              <button
+                type="button"
+                round
+                class="btn btn-outline-warning btn-sm"
+                @click="callback(1)"
+              >
+                Refresh
+              </button>
+            </div>
             <highcharts
               class="hc"
               :options="chartOptions"
@@ -184,6 +194,7 @@ import "codemirror/addon/display/placeholder";
 import { Chart } from "highcharts-vue";
 import Highcharts from "highcharts";
 import exportingInit from "highcharts/modules/exporting";
+import axios from "axios";
 
 exportingInit(Highcharts);
 
@@ -419,25 +430,31 @@ export default {
     };
   },
   methods: {
-    callback(params) {
-      //this.console = store.getters["statsmodule/getCountConsole"];
-      // var JobjLogs = store.getters["statsmodule/getCountLogs"];
-      // var jobj_console = store.getters["statsmodule/getCountConsole"];
-      var one = 1;
-      var two = 2;
-      this.chartOptions.series.push(
-        {
-          name: "Readmongo service",
-          data: [one, two],
-        },
-        {
-          name: "MongoDB",
-          data: [one, two],
-        }
-      );
+    async callback(params) {
+      var res = await axios.get("http://localhost:3000/length");
+      var mongol = res.data.mongolength;
+      var appout = res.data.appout;
+      var apperror = res.data.apperror;
+      if (params == 1) {
+        this.chartOptions.series[0].data = [appout, apperror];
+        this.chartOptions.series[1].data = [mongol, 0];
+      } else {
+        this.chartOptions.series.push(
+          {
+            name: "Readmongo service",
+            data: [appout, apperror],
+          },
+          {
+            name: "MongoDB",
+            data: [mongol, 0],
+          }
+        );
+      }
     },
     socketconnect() {
+      //asd
       // send to runLLO
+      console.log("socketcoonect adhoc");
       this.$root.$emit("SERVER_socket_connect");
     },
     showChart() {
@@ -623,6 +640,7 @@ export default {
   },
   computed: {
     codemirror() {
+      //test
       return this.$refs.myCm.codemirror;
     },
   },
@@ -735,6 +753,12 @@ h2 {
 }
 .codemirror {
   min-height: 500px;
+  box-shadow: 3px 3px 10px 10px rgba(0, 0, 0, 0.281);
+  margin-top: 10px;
+  margin-bottom: 40px;
+  margin-right: 10px;
+  margin-left: 10px;
+  padding: 5px;
 }
 .orange {
   color: rgb(167, 110, 6);
diff --git a/src/components/doclive/runLlo.vue b/src/components/doclive/runLlo.vue
index cf410c0..fd10a4a 100644
--- a/src/components/doclive/runLlo.vue
+++ b/src/components/doclive/runLlo.vue
@@ -182,28 +182,50 @@
         </b-row>
       </div>
       <!-- col -->
-      <h2 v-if="onEvent">ON-event logs for all apps (Simplified)</h2>
-      <div v-if="onEvent" class="table2">
-        <vuetable
-          ref="vuetable"
-          :api-mode="false"
-          :data="localData"
-          :fields="fields"
-          :css="css.table"
-        >
-        </vuetable>
-      </div>
+      <div v-if="onEvent" class="logs">
+        <h2>ON-event logs for all apps (Simplified)</h2>
+        <div class="input-group-append">
+          <button
+            class="btn btn-outline-primary"
+            round
+            type="button"
+            @click="scroll(1)"
+          >
+            Scroll to Bottom
+          </button>
+        </div>
+        <div id="applogs" class="table2">
+          <vuetable
+            ref="vuetable"
+            :api-mode="false"
+            :data="localData"
+            :fields="fields"
+            :css="css.table"
+          >
+          </vuetable>
+        </div>
 
-      <h2 v-if="onEvent">ON-event logs for MongoDB (RAW)</h2>
-      <div v-if="onEvent" class="table2">
-        <vuetable
-          ref="vuetable"
-          :api-mode="false"
-          :data="mongodata"
-          :fields="fields2"
-          :css="css.table"
-        >
-        </vuetable>
+        <h2>ON-event logs for MongoDB (RAW)</h2>
+        <div class="input-group-append">
+          <button
+            class="btn btn-outline-primary"
+            round
+            type="button"
+            @click="scroll(2)"
+          >
+            Scroll to Bottom
+          </button>
+        </div>
+        <div id="mongologs" class="table2">
+          <vuetable
+            ref="vuetable"
+            :api-mode="false"
+            :data="mongodata"
+            :fields="fields2"
+            :css="css.table"
+          >
+          </vuetable>
+        </div>
       </div>
     </div>
     <!-- row -->
@@ -330,6 +352,15 @@ export default {
     };
   },
   methods: {
+    scroll(param) {
+      if (param == 1) {
+        var container = this.$el.querySelector("#applogs");
+        container.scrollTop = container.scrollHeight;
+      } else {
+        var container = this.$el.querySelector("#mongologs");
+        container.scrollTop = container.scrollHeight;
+      }
+    },
     async getuser(token) {
       var data = await this.checktoken(token);
       console.log("User: " + data.user + "  Token: " + data.token);
@@ -461,14 +492,17 @@ export default {
       console.log(JSON.stringify(this.logdata));
     },
     async socketopen() {
+      console.log("inside socketopen()");
       this.$socket.client.open();
     },
     async socketauthenticate() {
-      var tokentmp = store.getters["pipelineLLO/gettoken"];
+      var tokentmp = this.logintoken;
       // pernaw hardcoded to token
+      console.log("Inside socket authenticate");
       this.$socket.client.emit("authenticate", tokentmp);
     },
     async socketreconnect() {
+      console.log("inside socketreconnect() --- sending to socketopen()");
       var log = await this.socketopen();
       this.socketauthenticate();
     },
@@ -520,6 +554,7 @@ export default {
     // from AdhocView
     this.$root.$on("SERVER_socket_connect", (v) => {
       this.$nextTick(function() {
+        console.log("socket recconect inside runllo");
         this.socketreconnect();
       });
     });
@@ -565,7 +600,7 @@ export default {
   created() {
     //var logintoken = new URL(location.href).searchParams.get("token");
     var logintoken = new URL(
-      "https://api-client.swarmlab.io:8088/?token=5b39802077f68ac7499066391067e10535a7053a"
+      "https://api-client.swarmlab.io:8088/?token=95bbe80eeae557be3e4e9fa25109bf2187f2c313"
     ).searchParams.get("token");
     this.logintoken = logintoken;
     // === We get the user + check for the token if exists
@@ -608,6 +643,7 @@ export default {
       // send to AdhocView
       this.$root.$emit("SERVER_socket_status", "on");
       this.getuser(logintoken);
+      //asd
     },
     /**
      *
@@ -871,5 +907,13 @@ h2 {
 }
 .rowlog {
   display: flex; /* equal height of the children */
+  min-height: 500px;
+  box-shadow: 3px 3px 10px 10px rgba(0, 0, 0, 0.281);
+  margin-bottom: 40px;
+  margin-top: 20px;
+  padding: 5px;
+}
+.logs {
+  width: 100%;
 }
 </style>