latest

package-lock.json

@@ -10872,6 +10872,45 @@
         "date-format-parse": "^0.2.6"
       }
     },
+    "vuetable-2": {
+      "version": "2.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/vuetable-2/-/vuetable-2-2.0.0-beta.4.tgz",
+      "integrity": "sha512-sWSdKIPYiATI9hOuPlQ09iSWEFAfhe6sPovl4hK2SemvqvgxLIF8UjG3LwJJC7idWS9UPpK9fRrSXoFJhRcluQ==",
+      "requires": {
+        "axios": "^0.15.3"
+      },
+      "dependencies": {
+        "axios": {
+          "version": "0.15.3",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.15.3.tgz",
+          "integrity": "sha1-LJ1jiy4ZGgjqHWzJiOrda6W9wFM=",
+          "requires": {
+            "follow-redirects": "1.0.0"
+          }
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.0.0.tgz",
+          "integrity": "sha1-jjQpjL0uF28lTv/sdaHHjMhJ/Tc=",
+          "requires": {
+            "debug": "^2.2.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "vuex": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",

package.json

@@ -32,6 +32,7 @@
     "vue-sweetalert2": "^4.1.1",
     "vue-template-compiler": "^2.6.12",
     "vue2-datepicker": "^3.8.2",
+    "vuetable-2": "^2.0.0-beta.4",
     "vuex": "^3.6.0"
   },
   "devDependencies": {

src/App.vue

@@ -77,6 +77,7 @@
 <script>
 import DocLive from "./components/DocLive.vue";
 import DocGrep from "./components/DocGrep.vue";
+import axios from "axios";
 import "@/assets/css/themify-icons.css";
 
 export default {
@@ -94,12 +95,52 @@ export default {
   },
   mounted() {},
   created() {
-    var url_string = window.location.href;
+    //var url_string = window.location.href;
+    //hardcoded token
+    var url_string =
+      "https://api-client.swarmlab.io:8088/?token=8ee68923f567ad2fb5835f579c4d74f0cad6b1d1";
     var url = new URL(url_string);
     this.token = url.searchParams.get("token");
     console.log("token " + this.token);
+
+    //LEFOS === CHECK TOKEN IF VALID ELSE REDIRECT TO GET A NEW ONE
+    this.checktoken(this.token);
   },
   methods: {
+    //LEFOS === CHECK TOKEN IF VALID ELSE REDIRECT TO GET A NEW ONE
+    async checktoken(value) {
+      try {
+        var token = value;
+        var pipelines = {
+          source: "ssologin",
+        };
+        var params = {
+          pipeline: pipelines,
+        };
+
+        var options = {
+          headers: {
+            "content-type": "application/x-www-form-urlencoded",
+            Authorization: `Bearer ${token}`,
+          },
+        };
+        var pipelineApi = await axios.post(
+          "https://api.swarmlab.io/istokenvalidsso",
+          params,
+          options
+        );
+        return pipelineApi;
+      } catch (e) {
+        if (
+          e.message == "Request failed with status code 401" ||
+          /401/i.test(e.message)
+        ) {
+          window.location.href = "https://api-login.swarmlab.io:8089";
+        }
+        console.error(e);
+      }
+    },
+
     saveDocLive() {
       this.$root.$emit("asciilive_save", "save");
     },

src/components/docgrep/rungrep.vue

@@ -1,19 +1,18 @@
 <template>
-  <div
-     class="runGrep" 
-   >
-
+  <div class="runGrep">
     <div class="row">
       <div class="col-12">
         <div class="input-group mb-2">
-
           <div class="input-group-prepend">
             <div class="input-group-text">/</div>
           </div>
 
-              <input type="text" class="form-control"  placeholder="regex"
+          <input
+            type="text"
+            class="form-control"
+            placeholder="regex"
             v-model="search.regex"
-              >
+          />
 
           <div class="input-group-append">
             <div class="input-group-text">/</div>
@@ -24,31 +23,38 @@
                 type="checkbox"
                 class="custom-control-input"
                 v-model="search.case"
+              />
+              <label class="custom-control-label" for="customSwitch1"
+                >Ignore case</label
               >
-                        <label class="custom-control-label" for="customSwitch1">Ignore case</label>
             </div>
-
-
           </div>
         </div>
       </div>
-      </div> <!-- row -->
+    </div>
+    <!-- row -->
 
     <div class="row">
       <div class="col-9">
         <div class="input-group mb-2">
-
           <div class="input-group-prepend">
             <div class="input-group-text">Log</div>
           </div>
-                    <input type="text" class="form-control"  placeholder="file"
+          <input
+            type="text"
+            class="form-control"
+            placeholder="file"
             v-model="search.log"
-                    >
-                    <input type="text" class="form-control"  placeholder="desc"
+          />
+          <input
+            type="text"
+            class="form-control"
+            placeholder="desc"
             v-model="search.desc"
-                    >
+          />
+        </div>
       </div>
-        </div> <!-- col --> 
+      <!-- col -->
 
       <div class="col-3">
         <button
@@ -59,13 +65,13 @@
         >
           Search
         </button>
-       </div> <!-- col -->
-      </div> <!-- row -->
-
+      </div>
+      <!-- col -->
+    </div>
+    <!-- row -->
 
     <div class="row">
       <div class="col-12 viewGrep">
-
         <table class="table table-hover">
           <thead>
             <tr>
@@ -76,88 +82,74 @@
               <th scope="col">Desc</th>
             </tr>
           </thead>
-  <tbody
-       v-for="item in log"
-  >
+          <tbody v-for="item in log">
             <tr>
-      <td
-      >
-          <span class="badge badge-danger badge-pill"
+              <td>
+                <span
+                  class="badge badge-danger badge-pill"
                   style="cursor: pointer"
                   @click="removeregex(item.id)"
-          >Remove</span>
-
+                  >Remove</span
+                >
               </td>
-      <td
-              style="cursor: pointer"
-      >{{item.log}}</td>
-          <td
-              style="cursor: pointer"
-          >{{item.regex}}</td>
-      <td
-              style="cursor: pointer"
-      >{{item.case}}</td>
-      <td
-              style="cursor: pointer"
-      >{{item.desc}}</td>
+              <td style="cursor: pointer">{{ item.log }}</td>
+              <td style="cursor: pointer">{{ item.regex }}</td>
+              <td style="cursor: pointer">{{ item.case }}</td>
+              <td style="cursor: pointer">{{ item.desc }}</td>
             </tr>
           </tbody>
         </table>
-
-       </div> <!-- col -->
-      </div> <!-- row -->
-
-
-
-
-
-
+      </div>
+      <!-- col -->
+    </div>
+    <!-- row -->
   </div>
 </template>
 <script>
-import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
-import Vue from 'vue'
-import store from '@/store/index'                              
+import { mapState, mapGetters, mapActions, dispatch } from "vuex";
+import Vue from "vue";
+import store from "@/store/index";
 export default {
-   components: {
-   },
+  components: {},
   data() {
     return {
       search: {
-        log: '',
-        regex: '',
-        desc: '',
-        case: true
+        log: "",
+        regex: "",
+        desc: "",
+        case: true,
       },
       obj: 1,
-      log:[]
-   }
+      log: [],
+    };
   },
   methods: {
     removeregex(index) {
-        let ind = this.log.map(item => item.id).indexOf(index) // find index
+      let ind = this.log.map((item) => item.id).indexOf(index); // find index
       this.log.splice(ind, 1);
       //console.log(JSON.stringify(index))
       //console.log(JSON.stringify(this.log))
     },
     setregex() {
-        var o = {}
-        o.id   = this.obj++
-        o.log   = this.search.log
-        o.regex = this.search.regex
-        o.case =  this.search.case
-        o.desc  = this.search.desc
-        this.log.push(o) 
+      var o = {};
+      o.id = this.obj++;
+      o.log = this.search.log;
+      o.regex = this.search.regex;
+      o.case = this.search.case;
+      o.desc = this.search.desc;
+      this.log.push(o);
       //console.log(JSON.stringify(this.log))
-    }
+    },
   },
   mounted() {
-     this.$root.$on('GREP_on_data', (message) => {
+    this.$root.$on("GREP_on_data", (message) => {
       this.$nextTick(function() {
-         var regexpath = this.log.filter((item) => item.log === message.log.tailed_path); 
+        var regexpath = this.log.filter(
+          (item) => item.log === message.log.tailed_path
+        );
 
         //console.log('regexpath2 '+ JSON.stringify(regexpath))
-          var code = ''
+        var code = "";
         var regexoutput = false;
         if (Array.isArray(regexpath) && regexpath.length) {
           regexoutput = true;
@@ -165,41 +157,39 @@ export default {
           regexoutput = false;
         }
         if (regexoutput) {
-
           //var logtmp = store.getters['pipelineLLO/getlog'];
-                 var logtmp = message.log.message
+          var logtmp = message.log.message;
           //var itemlog = ''
-                  code += ''
+          code += "";
           //itemlog = logtmp.filter(item1 => item1.tailed_path === path);
           //console.log('logtmp22 '+ JSON.stringify(itemlog))
           for (let regex of regexpath) {
             //console.log(regex.regex)
             if (regex.case) {
-                          var re = new RegExp(regex.regex, 'i');
+              var re = new RegExp(regex.regex, "i");
               //console.log("true");
             } else {
               var re = new RegExp(regex.regex);
               //console.log("false");
             }
             if (re.test(logtmp)) {
-                              code += logtmp + ' ' + message.log.tailed_path
-                              code += "\n"
+              code += logtmp + " " + message.log.tailed_path;
+              code += "\n";
               // -------------------------------------
               // send to grep rungrep to view
               // -------------------------------------
-                              this.$root.$emit('GREP_view_data',code)
+              this.$root.$emit("GREP_view_data", code);
             } else {
               console.log("Not found");
             }
           }
         }
-
-        })
-    })
+      });
+    });
   },
   beforeDestroy() {
-    this.$root.$off('GREP_on_data') 
-  }
+    this.$root.$off("GREP_on_data");
+  },
 };
 </script>
 
@@ -212,5 +202,4 @@ export default {
   height: 300px;
   overflow-y: auto;
 }
-
 </style>

src/components/doclive/AdhocView.vue

@@ -1,11 +1,7 @@
 <template>
   <div>
-
-                <b-row  no-gutters w-100 h-100 
-                  v-if="showlloedit"
-                >
+    <b-row no-gutters w-100 h-100 v-if="showlloedit">
       <b-col cols="12" sm="12" md="12">
-
         <b-row>
           <b-col cols="4">
             <div class="input-group input-group-sm sm-3">
@@ -34,57 +30,74 @@
 
           <b-col cols="3">
             <div class="input-group input-group-sm sm-3">
-                        <button type="button"
+              <button
+                type="button"
                 round
                 disable
                 class="btn btn-outline-info btn-sm"
                 v-if="socketonline"
                 @click="socketconnect"
               >
-                         online </button>
-                        <button type="button"
+                online
+              </button>
+              <button
+                type="button"
                 round
                 class="btn btn-outline-info btn-sm"
                 v-else
                 @click="socketconnect"
               >
-                        socket disconnected</button>
-                        <button type="button"
+                socket disconnected
+              </button>
+              <button
+                type="button"
                 round
                 class="btn btn-outline-info btn-sm"
                 v-if="socketonline"
-                          @click="hotreload()">
-                          Hot_Reload</button>
+                @click="hotreload()"
+              >
+                Hot_Reload
+              </button>
             </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>
             <div class="input-group input-group-sm d-flex justify-content-end">
               <div class="input-group-append">
-                        <button type="button"
+                <button
+                  type="button"
                   round
                   class="btn btn-outline-warning btn-sm"
                   v-if="socketonline"
-                          @click="infoHotreload()">
-                          Hot_Reload_HowTo</button>
+                  @click="infoHotreload()"
+                >
+                  Hot_Reload_HowTo
+                </button>
               </div>
               <div class="input-group-append">
-                        <button type="button"
+                <button
+                  type="button"
                   round
                   class="btn btn-outline-warning btn-sm"
                   v-if="tryConsole"
-                          @click="clear()">
-                          Clear</button>
+                  @click="clear()"
+                >
+                  Clear
+                </button>
               </div>
               <div class="input-group-append">
-                        <button type="button"
+                <button
+                  type="button"
                   round
                   class="btn btn-outline-info btn-sm"
                   v-if="cmOptions.keyMap == 'sublime'"
-                          @click="infoFilter">
-                          i</button>
+                  @click="infoFilter"
+                >
+                  i
+                </button>
               </div>
               <!--
                       <div class="input-group-append">
@@ -113,153 +126,154 @@
         </div>
       </b-col>
     </b-row>
-
-
-
   </div>
 </template>
 <script>
-import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
-import Vue from 'vue'
-import store from '@/store/index'                              
-
-
-import { codemirror } from 'vue-codemirror'
-import JSZip from 'jszip';
-import FileSaver from 'file-saver';
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/theme/neat.css'
-  import 'codemirror/theme/paraiso-light.css'
-import'codemirror/addon/selection/active-line.js'
-
-import'codemirror/addon/hint/show-hint.js'
-import'codemirror/addon/hint/show-hint.css'
-import'codemirror/addon/hint/javascript-hint.js'
-import'codemirror/addon/selection/active-line.js'
-import'codemirror/addon/scroll/annotatescrollbar.js'
-import'codemirror/addon/search/matchesonscrollbar.js'
-import'codemirror/addon/search/searchcursor.js'
-import'codemirror/addon/search/match-highlighter.js'
-
-import'codemirror/mode/shell/shell.js'
-import'codemirror/addon/edit/matchbrackets.js'
-import'codemirror/addon/comment/comment.js'
-import'codemirror/addon/dialog/dialog.js'
-import'codemirror/addon/dialog/dialog.css'
-import'codemirror/addon/search/searchcursor.js'
-import'codemirror/addon/search/search.js'
-import'codemirror/keymap/sublime.js'
-import'codemirror/keymap/vim.js'
-
-import'codemirror/addon/fold/foldgutter.css'
-import'codemirror/addon/fold/brace-fold.js'
-import'codemirror/addon/fold/comment-fold.js'
-import'codemirror/addon/fold/foldcode.js'
-import'codemirror/addon/fold/foldgutter.js'
-import'codemirror/addon/fold/indent-fold.js'
-import'codemirror/addon/fold/markdown-fold.js'
-import'codemirror/addon/fold/xml-fold.js'
-import 'codemirror/lib/codemirror';
-import 'codemirror/addon/display/placeholder';
+import { mapState, mapGetters, mapActions, dispatch } from "vuex";
+import Vue from "vue";
+import store from "@/store/index";
+
+import { codemirror } from "vue-codemirror";
+import JSZip from "jszip";
+import FileSaver from "file-saver";
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/neat.css";
+import "codemirror/theme/paraiso-light.css";
+import "codemirror/addon/selection/active-line.js";
+
+import "codemirror/addon/hint/show-hint.js";
+import "codemirror/addon/hint/show-hint.css";
+import "codemirror/addon/hint/javascript-hint.js";
+import "codemirror/addon/selection/active-line.js";
+import "codemirror/addon/scroll/annotatescrollbar.js";
+import "codemirror/addon/search/matchesonscrollbar.js";
+import "codemirror/addon/search/searchcursor.js";
+import "codemirror/addon/search/match-highlighter.js";
+
+import "codemirror/mode/shell/shell.js";
+import "codemirror/addon/edit/matchbrackets.js";
+import "codemirror/addon/comment/comment.js";
+import "codemirror/addon/dialog/dialog.js";
+import "codemirror/addon/dialog/dialog.css";
+import "codemirror/addon/search/searchcursor.js";
+import "codemirror/addon/search/search.js";
+import "codemirror/keymap/sublime.js";
+import "codemirror/keymap/vim.js";
+
+import "codemirror/addon/fold/foldgutter.css";
+import "codemirror/addon/fold/brace-fold.js";
+import "codemirror/addon/fold/comment-fold.js";
+import "codemirror/addon/fold/foldcode.js";
+import "codemirror/addon/fold/foldgutter.js";
+import "codemirror/addon/fold/indent-fold.js";
+import "codemirror/addon/fold/markdown-fold.js";
+import "codemirror/addon/fold/xml-fold.js";
+import "codemirror/lib/codemirror";
+import "codemirror/addon/display/placeholder";
 
 export default {
   components: {
-			codemirror
+    codemirror,
   },
   data() {
     return {
       socketonline: false,
       tryConsole: false,
       ssl: {},
-      getinfo:'',
-      token:'',
-      swarmlabname:'',
+      getinfo: "",
+      token: "",
+      swarmlabname: "",
 
-      code: '',
-      editchoice: '',
+      code: "",
+      editchoice: "",
       optionsedit: [
-        { text: 'code', value: 'code' },
-        { text: 'text', value: 'text' }
+        { text: "code", value: "code" },
+        { text: "text", value: "text" },
+      ],
+      llodesc: [
+        {
+          llo_url: "",
+          llo_name: "",
+          llo_author: "",
+          llo_intro: "",
+        },
       ],
-     llodesc:[{
-          llo_url                 : '',
-          llo_name                : '',
-          llo_author              : '',
-          llo_intro               : ''
-       }],
-     llo:[{
+      llo: [
+        {
           id: 0,
           rm: false,
-          data_info                   : 'Asciidoc \n',
-          data_code                   : '#Your source code',
-          data_service                : '',
-          code_datafile               : 'url',
-          code_name                   : '',
-          code_exec                   : '',
-          code_options                : '',
-          code_mime                   : '',
-          code_info                   : '',
-          code_code                   : '',
-          code_codeout                : '',
-          code_codeoutput             : 'console',
-          points                      : '',
-          challenge_question          : '',
-          code_challenge_question     : '',
-          challenge_answer            : '',
-          challenge_answer_hint       : '',
-          code_challenge_answer_hint  : '',
-          challenge_answer_source     : '',
-          challenge_answer_code_out   : '',
-          challenge_answer_code       : '',
-          code_challenge_answer_code  : ''
-       }],
+          data_info: "Asciidoc \n",
+          data_code: "#Your source code",
+          data_service: "",
+          code_datafile: "url",
+          code_name: "",
+          code_exec: "",
+          code_options: "",
+          code_mime: "",
+          code_info: "",
+          code_code: "",
+          code_codeout: "",
+          code_codeoutput: "console",
+          points: "",
+          challenge_question: "",
+          code_challenge_question: "",
+          challenge_answer: "",
+          challenge_answer_hint: "",
+          code_challenge_answer_hint: "",
+          challenge_answer_source: "",
+          challenge_answer_code_out: "",
+          challenge_answer_code: "",
+          code_challenge_answer_code: "",
+        },
+      ],
       searchLLO: [],
       searchLLOactive: false,
-      ADOC_html_code:'',
+      ADOC_html_code: "",
       challenge: [],
-      action:'',
+      action: "",
       tryLLO: [],
-      service:'os2',
+      service: "os2",
       active: 0,
       activecount: 0,
-      remove:'',
-      activeField:'',
+      remove: "",
+      activeField: "",
       bootstrap: false,
       firstbootstrap: 0,
-      htmlasciitmp:'',
-      datafile: 'https://git.swarmlab.io:3000/labs/examples-mpi2/raw/branch/master/0_netstat/data',
-      datadir: '0_netstat/data',
-      LearningObject:'',
+      htmlasciitmp: "",
+      datafile:
+        "https://git.swarmlab.io:3000/labs/examples-mpi2/raw/branch/master/0_netstat/data",
+      datadir: "0_netstat/data",
+      LearningObject: "",
       showllo: true,
       showlloedit: true,
- 		selected: 'sublime',
+      selected: "sublime",
       options: [
-      { text: 'vim', value: 'vim' },
-      { text: 'sublime', value: 'sublime' }
+        { text: "vim", value: "vim" },
+        { text: "sublime", value: "sublime" },
       ],
       optionsmime: [
-      { text: 'sh', value: 'bash' },
-      { text: 'javascript', value: 'javascript' },
-      { text: 'python', value: 'python' },
-      { text: 'php', value: 'php' },
-      { text: 'sql', value: 'sq;' },
-      { text: 'xml', value: 'xml' },
-      { text: 'c', value: 'c' }
+        { text: "sh", value: "bash" },
+        { text: "javascript", value: "javascript" },
+        { text: "python", value: "python" },
+        { text: "php", value: "php" },
+        { text: "sql", value: "sq;" },
+        { text: "xml", value: "xml" },
+        { text: "c", value: "c" },
       ],
       pValidate: false,
       cmOptions: {
         tabSize: 2,
         styleActiveLine: true,
         lineNumbers: true,
-    lineSeparator:'\n',
+        lineSeparator: "\n",
         line: true,
         foldGutter: true,
         gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
         highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
         styleSelectedText: true,
-    mode: 'shell',
+        mode: "shell",
         hintOptions: {
-      completeSingle: false
+          completeSingle: false,
         },
         keyMap: "sublime",
         //keyMap: "vim",
@@ -268,60 +282,54 @@ export default {
         indentUnit: this.ADOC_html_code,
         lineWrapping: true,
         //theme: 'neat',
-    theme: 'paraiso-light',
+        theme: "paraiso-light",
         refresh: true,
         readOnly: true,
         autofocus: false,
-    extraKeys: { "Ctrl": "autocomplete"  }
+        extraKeys: { Ctrl: "autocomplete" },
       },
-    ADOC_html:[]
-   }
+      ADOC_html: [],
+    };
   },
   methods: {
-
     socketconnect() {
       // send to runLLO
-    this.$root.$emit('SERVER_socket_connect')
+      this.$root.$emit("SERVER_socket_connect");
     },
     clear() {
-      this.tryConsole = false
-      this.code = ''
+      this.tryConsole = false;
+      this.code = "";
     },
     async getdata() {
-
-              var field = this.getinfo
+      var field = this.getinfo;
       var log = await store.dispatch("pipelineLLO/get_data", {
-                code:field 
-              })
-
+        code: field,
+      });
     },
 
     async showactive(index) {
-      this.topwindow(index)
+      this.topwindow(index);
     },
     onCmReady(cm) {
-      cm.on('change', (cm, chg) => {
-      }),
-      cm.on('keypress', () => {
-          cm.showHint({completeSingle:false})
-      })
-    },
-    onCmCursorActivity(a, b, c) {
-    },
-    onCmFocus(cm) {
+      cm.on("change", (cm, chg) => {}),
+        cm.on("keypress", () => {
+          cm.showHint({ completeSingle: false });
+        });
     },
+    onCmCursorActivity(a, b, c) {},
+    onCmFocus(cm) {},
     onCmCodeChange(newCode) {
-      this.code = newCode
+      this.code = newCode;
       //this.$root.$emit('socket_add',this.code)
     },
-    handleChange() {
-    },
+    handleChange() {},
     setKeymap() {
-      this.cmOptions.keyMap = this.selected
+      this.cmOptions.keyMap = this.selected;
     },
     infoFilter() {
-				var title1='<h3>Playbook Images</h3>'
-					var winfop='<table  class="table table-striped table-sm ">'+
+      var title1 = "<h3>Playbook Images</h3>";
+      var winfop =
+        '<table  class="table table-striped table-sm ">' +
         '<tr><td class="text-left">Shift-Tab</td> <td class="text-left">indentLess</td></tr>' +
         '<tr><td class="text-left">Alt-Q</td> <td class="text-left">wrapLines</td></tr>' +
         '<tr><td class="text-left">Ctrl-Up</td> <td class="text-left">scrollLineUp</td></tr>' +
@@ -346,25 +354,25 @@ export default {
         '<tr><td class="text-left">Shift-Ctrl-[</td> <td class="text-left">fold</td></tr>' +
         '<tr><td class="text-left">Shift-Ctrl-]</td> <td class="text-left">unfold</td></tr>' +
         '<tr><td class="text-left">Ctrl-F</td> <td class="text-left">find</td></tr>' +
-'</table>'
+        "</table>";
 
-					var title1=''
-					var winfo=''
+      var title1 = "";
+      var winfo = "";
       this.$swal({
-					title: '<strong>Key bindings</strong>',
-					type: 'info',
+        title: "<strong>Key bindings</strong>",
+        type: "info",
         html: winfop + title1 + winfo,
         showCloseButton: true,
         showLoaderOnConfirm: false,
-					allowOutsideClick: false
-				})
+        allowOutsideClick: false,
+      });
     },
     async hotreload() {
-              var field = this.getinfo
+      var field = this.getinfo;
       var log = await store.dispatch("pipelineLLO/hotreload", {
         token: this.token,
-                swarmlabname:this.swarmlabname 
-              })
+        swarmlabname: this.swarmlabname,
+      });
     },
     infoHotreload() {
       var html1 = ` <div style="overflow-x: auto;"> <table  class="table table-striped table-sm ">
@@ -406,61 +414,55 @@ export default {
               <td class="text-left" colspan="2"><i>Execute script every time you run git push</i></td>
             </tr>
 </tbody>
-</table></div>`
-
-
+</table></div>`;
 
       this.$swal({
-					title: '<strong>HowTo</strong>',
-					type: 'info',
+        title: "<strong>HowTo</strong>",
+        type: "info",
         html: html1,
         showCloseButton: true,
         showLoaderOnConfirm: false,
-					allowOutsideClick: false
-				})
-		}
-
+        allowOutsideClick: false,
+      });
+    },
   },
   computed: {
     codemirror() {
-      return this.$refs.myCm.codemirror
-   }
-
+      return this.$refs.myCm.codemirror;
+    },
   },
   mounted() {
     // from runLLO
-		this.$root.$on('SERVER_socket_status', (v) => {
+    this.$root.$on("SERVER_socket_status", (v) => {
       this.$nextTick(function() {
-        if(v == 'off'){
-          this.socketonline = false
-        }else if(v == 'on'){
-          this.socketonline = true
+        if (v == "off") {
+          this.socketonline = false;
+        } else if (v == "on") {
+          this.socketonline = true;
         }
-			})
-		})
+      });
+    });
     // from runLLO
-		this.$root.$on('playground_log_in', (path) => {
+    this.$root.$on("playground_log_in", (path) => {
       //this.$nextTick(function () {
-        var restapi = store.getters['pipelineLLO/getrestapi'];
-        if(restapi == "off"){  // rest off ara socket
-          var logtmp = store.getters['pipelineLLO/getlog'];
-        }else if(restapi == "on"){ // rest on ara read from rest not from socket
-          var logtmp = store.getters['pipelineLLO/getmongolog'];
+      var restapi = store.getters["pipelineLLO/getrestapi"];
+      if (restapi == "off") {
+        // rest off ara socket
+        var logtmp = store.getters["pipelineLLO/getlog"];
+      } else if (restapi == "on") {
+        // rest on ara read from rest not from socket
+        var logtmp = store.getters["pipelineLLO/getmongolog"];
       }
-        console.log('logtmp-roi '+ JSON.stringify(logtmp))
-          var itemlog = ''
-          this.code = ''
-             itemlog = logtmp.filter(item1 => item1.tailed_path === path);
+      console.log("logtmp-roi " + JSON.stringify(logtmp));
+      var itemlog = "";
+      this.code = "";
+      itemlog = logtmp.filter((item1) => item1.tailed_path === path);
       //Vue.set(this.log_path_lenght, item, loglenght);
-             console.log('logtmp22 '+ JSON.stringify(itemlog))
+      console.log("logtmp22 " + JSON.stringify(itemlog));
       for (let iteml of itemlog) {
-              this.code += iteml.message 
-               + ' '
-               + iteml.tailed_path 
-               + ' '
-               + iteml.date 
+        this.code += iteml.message + " " + iteml.tailed_path + " " + iteml.date;
 
-               this.code += "\n"
+        this.code += "\n";
       }
       /* 
         for (let itemlog of logtmp) {
@@ -489,30 +491,34 @@ export default {
 
       //this.code += v
       //this.code += "\n"
-        this.$refs.myCm.codemirror.setCursor(this.$refs.myCm.codemirror.lineCount(), 0);
-        this.tryConsole=true
+      this.$refs.myCm.codemirror.setCursor(
+        this.$refs.myCm.codemirror.lineCount(),
+        0
+      );
+      this.tryConsole = true;
       //})
-		})
-
+    });
   },
   beforeDestroy() {
-		this.$root.$off('SERVER_socket_status')
-		this.$root.$off('playground_log_in')
+    this.$root.$off("SERVER_socket_status");
+    this.$root.$off("playground_log_in");
   },
 
   created() {
-      this.token = new  URL(location.href).searchParams.get('token');
-      this.swarmlabname = new  URL(location.href).searchParams.get('pipelinename');
-		}
+    //LEFOS TOKEN ====
+    //this.token = new URL(location.href).searchParams.get("token");
+    this.token = new URL(
+      "https://api-client.swarmlab.io:8088/?token=8ee68923f567ad2fb5835f579c4d74f0cad6b1d1"
+    ).searchParams.get("token");
+
+    this.swarmlabname = new URL(location.href).searchParams.get("pipelinename");
+  },
 };
 </script>
 
 <style>
 .CodeMirror {
-
-
   font-family: monospace;
   height: 550px;
 }
-
 </style>

src/components/doclive/runLlo.vue

@@ -149,8 +149,26 @@
 
       <div class="col-1"></div>
       <!-- col -->
+
+      <vuetable
+        ref="vuetable"
+        :api-mode="false"
+        :data="localData"
+        :fields="['message', 'timestamp', 'type', 'process_id', 'app_name']"
+      >
+      </vuetable>
     </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">
@@ -195,9 +213,12 @@ import DatePicker from "vue2-datepicker";
 import "vue2-datepicker/index.css";
 import { DateTime } from "luxon";
 import FileSaver from "file-saver";
+import Vuetable from "vuetable-2";
+import axios from "axios";
 
 export default {
   components: {
+    Vuetable,
     DatePicker,
   },
   data() {
@@ -225,6 +246,7 @@ export default {
       logintoken: "",
       code: [],
       logdata: [],
+      localData: [],
     };
   },
   methods: {
@@ -332,8 +354,7 @@ export default {
     async socketauthenticate() {
       var tokentmp = store.getters["pipelineLLO/gettoken"];
       // pernaw hardcoded to token
-      var test = "cd2189ebbef3f0b43c5e73fac1cfb7e8cbe0d47c";
-      this.$socket.client.emit("authenticate", test);
+      this.$socket.client.emit("authenticate", tokentmp);
     },
     async socketreconnect() {
       var log = await this.socketopen();
@@ -354,11 +375,18 @@ export default {
       this.$socket.client.close();
     },
   },
-  computed: {},
+  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"
+    },
+  },
   beforeMount() {
     this.socketauthenticate();
     console.log("send1");
   },
+
   /**
  *
  * == Socket subscribe
@@ -420,14 +448,16 @@ export default {
    */
 
   created() {
-    this.socketopen();
-    var logintoken = new URL(location.href).searchParams.get("token");
-    // hardcoded token
-    var hardtoken = "cd2189ebbef3f0b43c5e73fac1cfb7e8cbe0d47c";
+    //var logintoken = new URL(location.href).searchParams.get("token");
+    var logintoken = new URL(
+      "https://api-client.swarmlab.io:8088/?token=8ee68923f567ad2fb5835f579c4d74f0cad6b1d1"
+    ).searchParams.get("token");
+    this.logintoken = logintoken;
+
     var log = store.dispatch("pipelineLLO/settoken", {
-      token: hardtoken,
+      token: logintoken,
     });
-
+    this.socketopen();
     //var tokentmp =store.getters['pipelineLLO/gettoken'];
     //console.log("tokennnn "+tokentmp);
   },
@@ -443,10 +473,8 @@ export default {
    */
   sockets: {
     connect() {
-      //hardtoken
-      var hardtoken = "cd2189ebbef3f0b43c5e73fac1cfb7e8cbe0d47c";
-      this.$socket.client.emit("authenticate", hardtoken);
-      //this.$socket.client.emit("authenticate", "logintoken");
+      var logintoken = store.getters["pipelineLLO/gettoken"];
+      this.$socket.client.emit("authenticate", logintoken);
 
       this.$socket.client.emit("socket_id_get", "socketdatasend");
       //var username = 'username'
@@ -665,15 +693,27 @@ export default {
       console.log(" socket message " + JSON.stringify(val));
     },
     async logsend(val) {
+      // ==== LEFOS
       console.log(" socket message " + JSON.stringify(val));
-      var log = val.log;
-      console.log(" LOG:  " + JSON.parse(JSON.stringify(log)));
+
+      // var log = val.log;
+      // console.log(" LOG:  " + JSON.parse(JSON.stringify(log)));
+
+      var log = store.dispatch("pipelineLLO/addlog", {
+        log: val,
+      });
+
+      this.localData.push(val);
     },
   },
 };
 </script>
 
 <style>
+.table {
+  overflow: scroll;
+  max-height: 400px;
+}
 .CodeMirror {
   font-family: monospace;
   height: 750px;