test

src/components/doclive/AdhocView.vue

@@ -88,19 +88,33 @@
           <div v-if="history" class="table">
             <vuetable
               ref="vuetable"
-              api-url="http://localhost:3000/test"
+              :api-url="api_url"
               :api-mode="true"
-              :fields="[
+              :fields="fields"
-                'message',
+              :item-actions="itemActions"
-                'timestamp',
+              :sort-order="sortOrder"
-                'type',
+              :show-sort-icons="true"
-                'process_id',
+              :multi-sort="multiSort"
-                'app_name',
-              ]"
               data-path=""
               pagination-path=""
+              :per-page="perpage"
+              wrapper-class="vuetable-wrapper"
+              loading-class="loading"
+              :css="css.table"
             >
             </vuetable>
+            <!-- <div class="vuetable-pagination ui basic segment grid">
+              <vuetable-pagination-info
+                ref="paginationInfo"
+                
+              >
+              </vuetable-pagination-info>
+              <vuetable-pagination
+                ref="pagination"
+                @vuetable-pagination:change-page="onChangePage"
+              >
+              </vuetable-pagination>
+            </div> -->
           </div>
         </div>
       </b-col>
@@ -112,6 +126,7 @@ import { mapState, mapGetters, mapActions, dispatch } from "vuex";
 import Vue from "vue";
 import store from "@/store/index";
 import Vuetable from "vuetable-2";
+import CssConfig from "vuetable-2/src/components/VuetableCssConfig.js";
 
 import { codemirror } from "vue-codemirror";
 import JSZip from "jszip";
@@ -158,6 +173,85 @@ export default {
   },
   data() {
     return {
+      api_url: "http://localhost:3000/test2",
+      fields: [
+        {
+          name: "message",
+          title: "Log",
+          sortField: "message",
+          visible: true,
+        },
+        {
+          name: "timestamp",
+          title: "Time",
+          width: "20%",
+          visible: true,
+        },
+        {
+          name: "type",
+          sortField: "type",
+          titleClass: "center aligned",
+          width: "10%",
+        },
+        {
+          name: "process_id",
+          visible: true,
+        },
+        {
+          name: "app_name",
+          visible: true,
+          title: '<span class="orange"></span>App Name',
+        },
+        // 'timestamp',
+        // 'type',
+        // 'process_id',
+        // 'app_name',
+      ],
+      sortOrder: [
+        {
+          field: "type",
+          direction: "asc",
+        },
+      ],
+      perpage: 5,
+      multiSort: true,
+      paginationComponent: "vuetable-pagination",
+      css: CssConfig,
+      itemActions: [
+        {
+          name: "view-item",
+          label: "",
+          icon: "glyphicon glyphicon-zoom-in",
+          class: "btn btn-info",
+          extra: {
+            title: "View",
+            "data-toggle": "tooltip",
+            "data-placement": "left",
+          },
+        },
+        {
+          name: "edit-item",
+          label: "",
+          icon: "glyphicon glyphicon-pencil",
+          class: "btn btn-warning",
+          extra: {
+            title: "Edit",
+            "data-toggle": "tooltip",
+            "data-placement": "top",
+          },
+        },
+        {
+          name: "delete-item",
+          label: "",
+          icon: "glyphicon glyphicon-remove",
+          class: "btn btn-danger",
+          extra: {
+            title: "Delete",
+            "data-toggle": "tooltip",
+            "data-placement": "right",
+          },
+        },
+      ],
       alllogs: "Show all logs",
       socketonline: false,
       tryConsole: false,
@@ -516,4 +610,7 @@ export default {
   font-family: monospace;
   height: 550px;
 }
+.orange {
+  color: rgb(167, 110, 6);
+}
 </style>

src/components/doclive/runLlo.vue

@@ -188,6 +188,7 @@
           :api-mode="false"
           :data="localData"
           :fields="['message', 'timestamp', 'type', 'process_id', 'app_name']"
+          :css="css.table"
         >
         </vuetable>
       </div>
@@ -206,6 +207,7 @@ import { DateTime } from "luxon";
 import FileSaver from "file-saver";
 import Vuetable from "vuetable-2";
 import axios from "axios";
+import CssConfig from "vuetable-2/src/components/VuetableCssConfig.js";
 
 export default {
   components: {
@@ -214,6 +216,7 @@ export default {
   },
   data() {
     return {
+      css: CssConfig,
       log_path: [],
       log_path_lenght: [],
       log_path_lenghtstatus: [],
@@ -478,7 +481,7 @@ export default {
   created() {
     //var logintoken = new URL(location.href).searchParams.get("token");
     var logintoken = new URL(
-      "https://api-client.swarmlab.io:8088/?token=1a4a350776b73bcb2e80194716bc90d4e78ae9dc"
+      "https://api-client.swarmlab.io:8088/?token=c82ba76a758a518f5c3072d53b359bf3e9bfcf18"
     ).searchParams.get("token");
     this.logintoken = logintoken;
     // === We get the user + check for the token if exists