From f34cb4f89713c5aea84639d559ad7d844a59da95 Mon Sep 17 00:00:00 2001
From: lefteris <cs141082@uniwa.gr>
Date: Thu, 15 Apr 2021 20:36:48 +0300
Subject: [PATCH] layout fix

---
 gitpush.sh                           |   3 +
 src/components/DocLive.vue           | 271 +++++++++++++--------------
 src/components/doclive/AdhocView.vue | 143 ++++++++------
 src/components/doclive/runLlo.vue    |  28 +--
 4 files changed, 241 insertions(+), 204 deletions(-)
 create mode 100755 gitpush.sh

diff --git a/gitpush.sh b/gitpush.sh
new file mode 100755
index 0000000..5f71c25
--- /dev/null
+++ b/gitpush.sh
@@ -0,0 +1,3 @@
+git add .
+git commit -m "layout fix"
+git push origin
\ No newline at end of file
diff --git a/src/components/DocLive.vue b/src/components/DocLive.vue
index f8727a6..39e3faa 100644
--- a/src/components/DocLive.vue
+++ b/src/components/DocLive.vue
@@ -1,75 +1,73 @@
 <template>
-<div>
-
+  <div>
     <!--  menou -->
-    <div class="row"
-      v-show="showmenou == 1"
-    >
-
-              <div class="col-3">
-                  <div class="input-group-append">
-                      <button type="button"
-                        round
-                        v-if="columnviewdefault == '0'"
-                        class="ti-layout-sidebar-none btn btn-outline-info btn-sm"
-                        @click="fullscreen('max')">
-                        Max-Notebook View </button>
-
-                      <button type="button"
-                        round
-                        v-if="columnviewdefault == '1'"
-                        class="ti-layout-sidebar-right btn btn-outline-info btn-sm"
-                        @click="fullscreen('min')">
-                        Min-Notebook View</button>
-                   </div>
-               </div>
-
-               <div class="col-6">
-                <span></span>
-               </div>
-
-              <div class="col-3">
-                  <div class="input-group-prepend">
-                      <button type="button"
-                        round
-                        v-if="columncodedefault == '0'"
-                        class="ti-layout-sidebar-none btn btn-outline-info btn-sm"
-                        style="float: right;"
-                        @click="fullscreen('codemax')">
-                        Max-Code View </button>
-
-                      <button type="button"
-                        round
-                        v-if="columncodedefault == '1'"
-                        style="float: right;"
-                        class="ti-layout-sidebar-left btn btn-outline-info btn-sm"
-                        @click="fullscreen('codemin')">
-                        Min-Code View</button>
-                   </div>
-               </div>
+    <div class="row" v-show="showmenou == 1">
+      <div class="col-3">
+        <div class="input-group-append">
+          <button
+            type="button"
+            round
+            v-if="columnviewdefault == '0'"
+            class="ti-layout-sidebar-none btn btn-outline-info btn-sm"
+            @click="fullscreen('max')"
+          >
+            Max-Notebook View
+          </button>
+
+          <button
+            type="button"
+            round
+            v-if="columnviewdefault == '1'"
+            class="ti-layout-sidebar-right btn btn-outline-info btn-sm"
+            @click="fullscreen('min')"
+          >
+            Min-Notebook View
+          </button>
+        </div>
+      </div>
+
+      <div class="col-6">
+        <span></span>
+      </div>
+
+      <div class="col-3">
+        <div class="input-group-prepend">
+          <button
+            type="button"
+            round
+            v-if="columncodedefault == '0'"
+            class="ti-layout-sidebar-none btn btn-outline-info btn-sm"
+            style="float: right;"
+            @click="fullscreen('codemax')"
+          >
+            Max-Code View
+          </button>
+
+          <button
+            type="button"
+            round
+            v-if="columncodedefault == '1'"
+            style="float: right;"
+            class="ti-layout-sidebar-left btn btn-outline-info btn-sm"
+            @click="fullscreen('codemin')"
+          >
+            Min-Code View
+          </button>
+        </div>
+      </div>
     </div>
     <!-- menou -->
 
+    <div class="row">
+      <div :class="columnview">
+        <ad-hoc style="background-color: #f8f9fa"> </ad-hoc>
+      </div>
 
-
-    <div class="row" >
-
-                <div :class="columnview">
-                  <ad-hoc
-                    style="background-color: #f8f9fa"
-                  >
-                  </ad-hoc>
-                </div>
-
-                <div :class="columncode">
-                  <run-llo
-                    style="background-color: #f8f9fa"
-                  >
-                  </run-llo>
-                </div>
+      <div :class="columncode">
+        <run-llo style="background-color: #f8f9fa"> </run-llo>
+      </div>
     </div>
-
- </div>
+  </div>
 </template>
 
 <script>
@@ -77,86 +75,85 @@ import RunLlo from "./doclive/runLlo.vue";
 import AdHoc from "./doclive/AdhocView.vue";
 
 export default {
-  name: 'DocLive',
-  props: {
-  }, 
+  name: "DocLive",
+  props: {},
   components: {
     RunLlo,
-    AdHoc
+    AdHoc,
+  },
+  data() {
+    return {
+      loading: false,
+      showhistory: 0,
+      productIndex: 1,
+      showmenou: 1,
+      columnviewdefault: 0,
+      columncodedefault: 0,
+      columnview: "col-7 order-first",
+      columncode: "col-5 order-last",
+      tutorMenou: "student",
+    };
   },
-  data () {
-      return {
-        loading: false,
-        showhistory : 0,
-        productIndex: 1,
-        showmenou: 1,
-        columnviewdefault : 0,
-        columncodedefault : 0,
-        columnview : 'col-7 order-first',
-        columncode : 'col-5 order-last',
-        tutorMenou: 'student'
+  created: function() {},
+  mounted() {
+    this.$root.$on("LLOshowmenounotebooks", () => {
+      this.showmenou = 1;
+    }),
+      this.$root.$on("lloshowchallengehistory", (llo, active) => {
+        this.showhistory = 1;
+      });
+  },
+  beforeDestroy() {
+    this.$root.$off("LLOshowmenounotebooks"),
+      this.$root.$off("lloshowchallengehistory"); // working
+  },
+  methods: {
+    fullscreen(action) {
+      if (action == "max") {
+        this.columnview = "col-11 order-first";
+        this.columncode = "col-1 order-last";
+        this.columnviewdefault = 1;
+        this.columncodedefault = 0;
+        //set height iframe
+        this.$root.$emit("LLOresizemenounotebooks", "max");
+        console.log(this.columnview);
+      } else if (action == "min") {
+        this.columnview = "col-7 order-first";
+        this.columncode = "col-5 order-last";
+        this.columnviewdefault = 0;
+        this.columncodedefault = 1;
+        //set height iframe
+        this.$root.$emit("LLOresizemenounotebooks", "min");
+        console.log(this.columnview);
+      } else if (action == "codemax") {
+        this.columnview = "col-1 order-first";
+        this.columncode = "col-11 order-last";
+        this.columnviewdefault = 0;
+        this.columncodedefault = 1;
+        console.log(this.columnview);
+      } else if (action == "codemin") {
+        this.columnview = "col-7 order-first";
+        this.columncode = "col-5 order-last";
+        this.columnviewdefault = 1;
+        this.columncodedefault = 0;
+        this.$root.$emit("LLOresizemenounotebooks", "min");
+        console.log(this.columnview);
       }
     },
-      created: function () {
+    async onAction(action) {
+      this.tutorMenou = "tutor";
+      //this.tutorMenou='student'
     },
-  mounted() {
-      this.$root.$on('LLOshowmenounotebooks', () => {
-        this.showmenou = 1
-      }),
-    this.$root.$on('lloshowchallengehistory', (llo,active) => {
-      this.showhistory = 1
-    })
-    },
-   beforeDestroy () {
-    this.$root.$off('LLOshowmenounotebooks'),
-    this.$root.$off('lloshowchallengehistory') // working
-   },
- methods: {
-         fullscreen(action){
-          if(action == 'max'){
-              this.columnview = 'col-11 order-first'
-              this.columncode = 'col-1 order-last'
-              this.columnviewdefault = 1
-              this.columncodedefault = 0
-              //set height iframe
-              this.$root.$emit('LLOresizemenounotebooks','max')
-              console.log(this.columnview)
-           }
-           else if(action == 'min'){
-              this.columnview = 'col-7 order-first'
-              this.columncode = 'col-5 order-last'
-              this.columnviewdefault = 0
-              this.columncodedefault = 1
-              //set height iframe
-              this.$root.$emit('LLOresizemenounotebooks','min')
-              console.log(this.columnview)
-           }
-           else if(action == 'codemax'){
-              this.columnview = 'col-1 order-first'
-              this.columncode = 'col-11 order-last'
-              this.columnviewdefault = 0
-              this.columncodedefault = 1
-              console.log(this.columnview)
-           }
-           else if(action == 'codemin'){
-              this.columnview = 'col-7 order-first'
-              this.columncode = 'col-5 order-last'
-              this.columnviewdefault = 1
-              this.columncodedefault = 0
-              this.$root.$emit('LLOresizemenounotebooks','min')
-              console.log(this.columnview)
-           }
-         },
-          async onAction (action) {
-              this.tutorMenou='tutor'
-              //this.tutorMenou='student'
-          }
-    }
-
-
-}
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.col-7 {
+  max-width: 48%;
+}
+.col-5 {
+  max-width: 50%;
+}
 </style>
diff --git a/src/components/doclive/AdhocView.vue b/src/components/doclive/AdhocView.vue
index b6d976b..e76113c 100644
--- a/src/components/doclive/AdhocView.vue
+++ b/src/components/doclive/AdhocView.vue
@@ -4,32 +4,10 @@
       <b-col cols="12" sm="12" md="12">
         <b-row>
           <b-col cols="4">
-            <div class="input-group input-group-sm sm-3">
-              <!--
-                    <select
-                     class="custom-select custom-select-sm "
-                      @change="setKeymap"
-                      v-model="selected">
-                      <option 
-                        v-for="option in options" 
-                        v-bind:value="option.value">
-                          {{ option.text }}
-                      </option>
-                    </select>
-                    <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>
-          </b-col>
-
-          <b-col cols="3">
-            <div class="input-group input-group-sm sm-3">
+            <div
+              class="input-group input-group-sm sm-3"
+              style="padding-top: 10px;"
+            >
               <button
                 type="button"
                 round
@@ -51,6 +29,16 @@
                 >
                   {{ this.alllogs }}
                 </button>
+                <button
+                  type="button"
+                  round
+                  disable
+                  class="btn btn-outline-info btn-sm"
+                  v-if="socketonline"
+                  @click="showChart"
+                >
+                  {{ this.chartbut }}
+                </button>
               </div>
               <button
                 type="button"
@@ -64,6 +52,10 @@
             </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"
@@ -86,6 +78,7 @@
 
         <div class="codemirror">
           <div v-if="history" class="table2">
+            <h2>History of all app logs</h2>
             <vuetable
               ref="vuetable"
               :api-url="api_url"
@@ -107,29 +100,34 @@
             >
             </vuetable>
           </div>
-          <div v-if="history" class="vuetable-pagination ui basic segment grid">
-            <vuetable-pagination-info
-              ref="paginationInfo"
-              :css="css.paginationInfo"
-            >
-            </vuetable-pagination-info>
-            <vuetable-pagination
-              :css="css.pagination"
-              ref="pagination"
-              @vuetable-pagination:change-page="onChangePage"
+          <br />
+          <div class="pagi">
+            <div
+              v-if="history"
+              class="vuetable-pagination ui basic segment grid"
             >
-            </vuetable-pagination>
+              <vuetable-pagination-info
+                ref="paginationInfo"
+                :css="css.paginationInfo"
+              >
+              </vuetable-pagination-info>
+              <vuetable-pagination
+                :css="css.pagination"
+                ref="pagination"
+                @vuetable-pagination:change-page="onChangePage"
+              >
+              </vuetable-pagination>
+            </div>
           </div>
 
-          <div class="highch" v-if="history">
-            <transition name="bounce" appear>
-              <highcharts
-                class="hc"
-                :options="chartOptions"
-                :callback="callback"
-                ref="chart"
-              ></highcharts>
-            </transition>
+          <div class="highch" v-show="chartstatus">
+            <h2>HighChart with log sum Data</h2>
+            <highcharts
+              class="hc"
+              :options="chartOptions"
+              :callback="callback"
+              ref="chart"
+            ></highcharts>
           </div>
         </div>
       </b-col>
@@ -200,6 +198,8 @@ export default {
   },
   data() {
     return {
+      chartstatus: false,
+      chartbut: "Show HighChart",
       chartOptions: {
         title: {
           text: "Length of logs chart",
@@ -213,11 +213,11 @@ export default {
           type: "column",
         },
         xAxis: {
-          categories: ["JobjLogs", "jobj_console"],
+          categories: ["Out Logs", "Error Logs"],
         },
         yAxis: {
           title: {
-            text: "Count",
+            text: "Counter",
           },
         },
         series: [],
@@ -302,7 +302,7 @@ export default {
           },
         },
       ],
-      alllogs: "Show all logs",
+      alllogs: "Show app logs",
       socketonline: false,
       tryConsole: false,
       history: false,
@@ -423,14 +423,16 @@ export default {
       //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: "swarm-app-Stats",
-          data: ["1", "2"],
+          name: "Readmongo service",
+          data: [one, two],
         },
         {
-          name: "swarm-app-Stats2",
-          data: ["1", "2"],
+          name: "MongoDB",
+          data: [one, two],
         }
       );
     },
@@ -438,12 +440,21 @@ export default {
       // send to runLLO
       this.$root.$emit("SERVER_socket_connect");
     },
+    showChart() {
+      if (this.chartstatus == false) {
+        this.chartstatus = true;
+        this.chartbut = "Hide HighChart";
+      } else {
+        this.chartstatus = false;
+        this.chartbut = "Show HighChart";
+      }
+    },
     showHistory() {
       if (this.history == false) {
         this.history = true;
-        this.alllogs = "Hide all logs";
+        this.alllogs = "Hide app logs";
       } else {
-        this.alllogs = "Show all logs";
+        this.alllogs = "Show app logs";
         this.history = false;
       }
     },
@@ -701,18 +712,38 @@ export default {
 </script>
 
 <style scoped>
+h2 {
+  background-color: dimgray;
+  padding: 10px;
+  color: white;
+  margin-top: 20px;
+  border-radius: 5px;
+}
 .highch {
   padding-top: 50px;
+  max-width: 900px;
 }
 .table2 {
   min-height: 320px;
+  max-width: 900px;
   overflow: auto;
 }
 .CodeMirror {
   font-family: monospace;
-  height: 550px;
+  max-width: 900px;
+  min-height: 500px;
+}
+.codemirror {
+  min-height: 500px;
 }
 .orange {
   color: rgb(167, 110, 6);
 }
+.pagi {
+  max-width: 900px;
+}
+.btn {
+  padding: 10px;
+  margin: 10px;
+}
 </style>
diff --git a/src/components/doclive/runLlo.vue b/src/components/doclive/runLlo.vue
index 3cf51e2..cf410c0 100644
--- a/src/components/doclive/runLlo.vue
+++ b/src/components/doclive/runLlo.vue
@@ -182,8 +182,8 @@
         </b-row>
       </div>
       <!-- col -->
+      <h2 v-if="onEvent">ON-event logs for all apps (Simplified)</h2>
       <div v-if="onEvent" class="table2">
-        <h1>App Logs - Simplified (ON EVENT)</h1>
         <vuetable
           ref="vuetable"
           :api-mode="false"
@@ -192,10 +192,10 @@
           :css="css.table"
         >
         </vuetable>
-        <hr />
       </div>
+
+      <h2 v-if="onEvent">ON-event logs for MongoDB (RAW)</h2>
       <div v-if="onEvent" class="table2">
-        <h1>Mongo Logs - RAW (More details - ON EVENT)</h1>
         <vuetable
           ref="vuetable"
           :api-mode="false"
@@ -234,7 +234,9 @@ export default {
         {
           name: "message",
           title: "Log",
+          width: "10%",
           visible: true,
+          dataClass: "center aligned",
         },
         {
           name: "timestamp",
@@ -278,7 +280,7 @@ export default {
         },
         {
           name: "id",
-          visible: true,
+          visible: false,
         },
         {
           name: "ctx",
@@ -563,7 +565,7 @@ export default {
   created() {
     //var logintoken = new URL(location.href).searchParams.get("token");
     var logintoken = new URL(
-      "https://api-client.swarmlab.io:8088/?token=741662728073939963b63bb0b90da41e706333e6"
+      "https://api-client.swarmlab.io:8088/?token=5b39802077f68ac7499066391067e10535a7053a"
     ).searchParams.get("token");
     this.logintoken = logintoken;
     // === We get the user + check for the token if exists
@@ -851,19 +853,23 @@ export default {
 </script>
 
 <style scoped>
-.table {
-  min-height: 0px;
-  max-width: 600px;
-}
 .table2 {
   overflow: auto;
+  max-height: 400px;
+  min-width: 100%;
+}
+h2 {
+  background-color: dimgray;
+  padding: 10px;
+  color: white;
+  margin-top: 20px;
+  border-radius: 5px;
+  width: 100%;
 }
 .CodeMirror {
   font-family: monospace;
-  height: 750px;
 }
 .rowlog {
   display: flex; /* equal height of the children */
-  height: 470px;
 }
 </style>