Lefteris
/
playground-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

latest

master
lefteris 4 years ago
parent
848b05dc19
commit
080d7496a3
6 changed files with 713 additions and 597 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      package-lock.json
  2. 1
      package.json
  3. 43
      src/App.vue
  4. 193
      src/components/docgrep/rungrep.vue
  5. 558
      src/components/doclive/AdhocView.vue
  6. 70
      src/components/doclive/runLlo.vue

39
package-lock.json
View File

@ -10872,6 +10872,45 @@
"date-format-parse": "^0.2.6" "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": { "vuex": {
"version": "3.6.0", "version": "3.6.0",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",

1
package.json
View File

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

43
src/App.vue
View File

@ -77,6 +77,7 @@
<script> <script>
import DocLive from "./components/DocLive.vue"; import DocLive from "./components/DocLive.vue";
import DocGrep from "./components/DocGrep.vue"; import DocGrep from "./components/DocGrep.vue";
import axios from "axios";
import "@/assets/css/themify-icons.css"; import "@/assets/css/themify-icons.css";
export default { export default {
@ -94,12 +95,52 @@ export default {
}, },
mounted() {}, mounted() {},
created() { 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); var url = new URL(url_string);
this.token = url.searchParams.get("token"); this.token = url.searchParams.get("token");
console.log("token " + this.token); console.log("token " + this.token);
//LEFOS === CHECK TOKEN IF VALID ELSE REDIRECT TO GET A NEW ONE
this.checktoken(this.token);
}, },
methods: { 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() { saveDocLive() {
this.$root.$emit("asciilive_save", "save"); this.$root.$emit("asciilive_save", "save");
}, },

193
src/components/docgrep/rungrep.vue
View File

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

558
src/components/doclive/AdhocView.vue
View File

@ -1,15 +1,11 @@
<template> <template>
<div> <div>
<b-row no-gutters w-100 h-100 v-if="showlloedit">
<b-row no-gutters w-100 h-100 <b-col cols="12" sm="12" md="12">
v-if="showlloedit" <b-row>
>
<b-col cols="12" sm="12" md="12" >
<b-row >
<b-col cols="4"> <b-col cols="4">
<div class="input-group input-group-sm sm-3"> <div class="input-group input-group-sm sm-3">
<!-- <!--
<select <select
class="custom-select custom-select-sm " class="custom-select custom-select-sm "
@change="setKeymap" @change="setKeymap"
@ -34,59 +30,76 @@
<b-col cols="3"> <b-col cols="3">
<div class="input-group input-group-sm sm-3"> <div class="input-group input-group-sm sm-3">
<button type="button" <button
type="button"
round round
disable disable
class="btn btn-outline-info btn-sm" class="btn btn-outline-info btn-sm"
v-if="socketonline" v-if="socketonline"
@click="socketconnect" @click="socketconnect"
> >
online </button> online
<button type="button" </button>
<button
type="button"
round round
class="btn btn-outline-info btn-sm" class="btn btn-outline-info btn-sm"
v-else v-else
@click="socketconnect" @click="socketconnect"
> >
socket disconnected</button> socket disconnected
<button type="button" </button>
<button
type="button"
round round
class="btn btn-outline-info btn-sm" class="btn btn-outline-info btn-sm"
v-if="socketonline" v-if="socketonline"
@click="hotreload()"> @click="hotreload()"
Hot_Reload</button> >
Hot_Reload
</button>
</div> </div>
</b-col> </b-col>
<b-col cols="5" > <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 input-group-sm d-flex justify-content-end">
<div class="input-group-append"> <div class="input-group-append">
<button type="button" <button
type="button"
round round
class="btn btn-outline-warning btn-sm" class="btn btn-outline-warning btn-sm"
v-if="socketonline" v-if="socketonline"
@click="infoHotreload()"> @click="infoHotreload()"
Hot_Reload_HowTo</button> >
Hot_Reload_HowTo
</button>
</div> </div>
<div class="input-group-append"> <div class="input-group-append">
<button type="button" <button
type="button"
round round
class="btn btn-outline-warning btn-sm" class="btn btn-outline-warning btn-sm"
v-if="tryConsole" v-if="tryConsole"
@click="clear()"> @click="clear()"
Clear</button> >
Clear
</button>
</div> </div>
<div class="input-group-append"> <div class="input-group-append">
<button type="button" <button
type="button"
round round
class="btn btn-outline-info btn-sm" class="btn btn-outline-info btn-sm"
v-if="cmOptions.keyMap == 'sublime'" v-if="cmOptions.keyMap == 'sublime'"
@click="infoFilter"> @click="infoFilter"
i</button> >
i
</button>
</div> </div>
<!-- <!--
<div class="input-group-append"> <div class="input-group-append">
<button <button
type="button" type="button"
@ -100,7 +113,7 @@
</b-col> </b-col>
</b-row> </b-row>
<div class="codemirror" > <div class="codemirror">
<codemirror <codemirror
ref="myCm" ref="myCm"
:value="code" :value="code"
@ -113,258 +126,253 @@
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
</template> </template>
<script> <script>
import {mapState, mapGetters, mapActions,dispatch} from 'vuex' import { mapState, mapGetters, mapActions, dispatch } from "vuex";
import Vue from 'vue' import Vue from "vue";
import store from '@/store/index' import store from "@/store/index";
import { codemirror } from "vue-codemirror";
import { codemirror } from 'vue-codemirror' import JSZip from "jszip";
import JSZip from 'jszip'; import FileSaver from "file-saver";
import FileSaver from 'file-saver'; import "codemirror/lib/codemirror.css";
import 'codemirror/lib/codemirror.css' import "codemirror/theme/neat.css";
import 'codemirror/theme/neat.css' import "codemirror/theme/paraiso-light.css";
import 'codemirror/theme/paraiso-light.css' import "codemirror/addon/selection/active-line.js";
import'codemirror/addon/selection/active-line.js'
import "codemirror/addon/hint/show-hint.js";
import'codemirror/addon/hint/show-hint.js' import "codemirror/addon/hint/show-hint.css";
import'codemirror/addon/hint/show-hint.css' import "codemirror/addon/hint/javascript-hint.js";
import'codemirror/addon/hint/javascript-hint.js' import "codemirror/addon/selection/active-line.js";
import'codemirror/addon/selection/active-line.js' import "codemirror/addon/scroll/annotatescrollbar.js";
import'codemirror/addon/scroll/annotatescrollbar.js' import "codemirror/addon/search/matchesonscrollbar.js";
import'codemirror/addon/search/matchesonscrollbar.js' import "codemirror/addon/search/searchcursor.js";
import'codemirror/addon/search/searchcursor.js' import "codemirror/addon/search/match-highlighter.js";
import'codemirror/addon/search/match-highlighter.js'
import "codemirror/mode/shell/shell.js";
import'codemirror/mode/shell/shell.js' import "codemirror/addon/edit/matchbrackets.js";
import'codemirror/addon/edit/matchbrackets.js' import "codemirror/addon/comment/comment.js";
import'codemirror/addon/comment/comment.js' import "codemirror/addon/dialog/dialog.js";
import'codemirror/addon/dialog/dialog.js' import "codemirror/addon/dialog/dialog.css";
import'codemirror/addon/dialog/dialog.css' import "codemirror/addon/search/searchcursor.js";
import'codemirror/addon/search/searchcursor.js' import "codemirror/addon/search/search.js";
import'codemirror/addon/search/search.js' import "codemirror/keymap/sublime.js";
import'codemirror/keymap/sublime.js' import "codemirror/keymap/vim.js";
import'codemirror/keymap/vim.js'
import "codemirror/addon/fold/foldgutter.css";
import'codemirror/addon/fold/foldgutter.css' import "codemirror/addon/fold/brace-fold.js";
import'codemirror/addon/fold/brace-fold.js' import "codemirror/addon/fold/comment-fold.js";
import'codemirror/addon/fold/comment-fold.js' import "codemirror/addon/fold/foldcode.js";
import'codemirror/addon/fold/foldcode.js' import "codemirror/addon/fold/foldgutter.js";
import'codemirror/addon/fold/foldgutter.js' import "codemirror/addon/fold/indent-fold.js";
import'codemirror/addon/fold/indent-fold.js' import "codemirror/addon/fold/markdown-fold.js";
import'codemirror/addon/fold/markdown-fold.js' import "codemirror/addon/fold/xml-fold.js";
import'codemirror/addon/fold/xml-fold.js' import "codemirror/lib/codemirror";
import 'codemirror/lib/codemirror'; import "codemirror/addon/display/placeholder";
import 'codemirror/addon/display/placeholder';
export default { export default {
components: { components: {
codemirror codemirror,
}, },
data () { data() {
return { return {
socketonline:false, socketonline: false,
tryConsole:false, tryConsole: false,
ssl:{}, ssl: {},
getinfo:'', getinfo: "",
token:'', token: "",
swarmlabname:'', swarmlabname: "",
code: '', code: "",
editchoice: '', editchoice: "",
optionsedit: [ optionsedit: [
{ text: 'code', value: 'code' }, { text: "code", value: "code" },
{ text: 'text', value: 'text' } { text: "text", value: "text" },
],
llodesc: [
{
llo_url: "",
llo_name: "",
llo_author: "",
llo_intro: "",
},
],
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: "",
},
], ],
llodesc:[{
llo_url : '',
llo_name : '',
llo_author : '',
llo_intro : ''
}],
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 : ''
}],
searchLLO: [], searchLLO: [],
searchLLOactive : false, searchLLOactive: false,
ADOC_html_code:'', ADOC_html_code: "",
challenge:[], challenge: [],
action:'', action: "",
tryLLO:[], tryLLO: [],
service:'os2', service: "os2",
active:0, active: 0,
activecount:0, activecount: 0,
remove:'', remove: "",
activeField:'', activeField: "",
bootstrap:false, bootstrap: false,
firstbootstrap:0, firstbootstrap: 0,
htmlasciitmp:'', htmlasciitmp: "",
datafile: 'https://git.swarmlab.io:3000/labs/examples-mpi2/raw/branch/master/0_netstat/data', datafile:
datadir: '0_netstat/data', "https://git.swarmlab.io:3000/labs/examples-mpi2/raw/branch/master/0_netstat/data",
LearningObject:'', datadir: "0_netstat/data",
showllo:true, LearningObject: "",
showlloedit:true, showllo: true,
selected: 'sublime', showlloedit: true,
selected: "sublime",
options: [ options: [
{ text: 'vim', value: 'vim' }, { text: "vim", value: "vim" },
{ text: 'sublime', value: 'sublime' } { text: "sublime", value: "sublime" },
], ],
optionsmime: [ optionsmime: [
{ text: 'sh', value: 'bash' }, { text: "sh", value: "bash" },
{ text: 'javascript', value: 'javascript' }, { text: "javascript", value: "javascript" },
{ text: 'python', value: 'python' }, { text: "python", value: "python" },
{ text: 'php', value: 'php' }, { text: "php", value: "php" },
{ text: 'sql', value: 'sq;' }, { text: "sql", value: "sq;" },
{ text: 'xml', value: 'xml' }, { text: "xml", value: "xml" },
{ text: 'c', value: 'c' } { text: "c", value: "c" },
], ],
pValidate: false, pValidate: false,
cmOptions: { cmOptions: {
tabSize: 2, tabSize: 2,
styleActiveLine: true, styleActiveLine: true,
lineNumbers: true, lineNumbers: true,
lineSeparator:'\n', lineSeparator: "\n",
line: true, line: true,
foldGutter: true, foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
styleSelectedText: true, styleSelectedText: true,
mode: 'shell', mode: "shell",
hintOptions:{ hintOptions: {
completeSingle: false completeSingle: false,
}, },
keyMap: "sublime", keyMap: "sublime",
//keyMap: "vim", //keyMap: "vim",
matchBrackets: true, matchBrackets: true,
showCursorWhenSelecting: true, showCursorWhenSelecting: true,
indentUnit:this.ADOC_html_code, indentUnit: this.ADOC_html_code,
lineWrapping: true, lineWrapping: true,
//theme: 'neat', //theme: 'neat',
theme: 'paraiso-light', theme: "paraiso-light",
refresh:true, refresh: true,
readOnly: true, readOnly: true,
autofocus: false, autofocus: false,
extraKeys: { "Ctrl": "autocomplete" } extraKeys: { Ctrl: "autocomplete" },
}, },
ADOC_html:[] ADOC_html: [],
} };
}, },
methods: { methods: {
socketconnect() {
socketconnect () {
// send to runLLO // send to runLLO
this.$root.$emit('SERVER_socket_connect') this.$root.$emit("SERVER_socket_connect");
}, },
clear () { clear() {
this.tryConsole = false this.tryConsole = false;
this.code = '' this.code = "";
}, },
async getdata () { async getdata() {
var field = this.getinfo;
var field = this.getinfo var log = await store.dispatch("pipelineLLO/get_data", {
var log = await store.dispatch("pipelineLLO/get_data",{ code: field,
code:field });
})
}, },
async showactive(index) { async showactive(index) {
this.topwindow(index) this.topwindow(index);
}, },
onCmReady(cm) { onCmReady(cm) {
cm.on('change', (cm, chg) => { cm.on("change", (cm, chg) => {}),
}), cm.on("keypress", () => {
cm.on('keypress', () => { cm.showHint({ completeSingle: false });
cm.showHint({completeSingle:false}) });
})
},
onCmCursorActivity(a, b, c) {
},
onCmFocus(cm) {
}, },
onCmCursorActivity(a, b, c) {},
onCmFocus(cm) {},
onCmCodeChange(newCode) { onCmCodeChange(newCode) {
this.code = newCode this.code = newCode;
//this.$root.$emit('socket_add',this.code) //this.$root.$emit('socket_add',this.code)
}, },
handleChange() { handleChange() {},
}, setKeymap() {
setKeymap () { this.cmOptions.keyMap = this.selected;
this.cmOptions.keyMap = this.selected
}, },
infoFilter() { infoFilter() {
var title1='<h3>Playbook Images</h3>' var title1 = "<h3>Playbook Images</h3>";
var winfop='<table class="table table-striped table-sm ">'+ var winfop =
'<tr><td class="text-left">Shift-Tab</td> <td class="text-left">indentLess</td></tr>'+ '<table class="table table-striped table-sm ">' +
'<tr><td class="text-left">Alt-Q</td> <td class="text-left">wrapLines</td></tr>'+ '<tr><td class="text-left">Shift-Tab</td> <td class="text-left">indentLess</td></tr>' +
'<tr><td class="text-left">Ctrl-Up</td> <td class="text-left">scrollLineUp</td></tr>'+ '<tr><td class="text-left">Alt-Q</td> <td class="text-left">wrapLines</td></tr>' +
'<tr><td class="text-left">Ctrl-Down</td> <td class="text-left">scrollLineDown</td></tr>'+ '<tr><td class="text-left">Ctrl-Up</td> <td class="text-left">scrollLineUp</td></tr>' +
'<tr><td class="text-left">Ctrl-L</td> <td class="text-left">selectLine</td></tr>'+ '<tr><td class="text-left">Ctrl-Down</td> <td class="text-left">scrollLineDown</td></tr>' +
'<tr><td class="text-left">Esc</td> <td class="text-left">singleSelectionTop</td></tr>'+ '<tr><td class="text-left">Ctrl-L</td> <td class="text-left">selectLine</td></tr>' +
'<tr><td class="text-left">Ctrl-Enter</td> <td class="text-left">insertLineAfter</td></tr>'+ '<tr><td class="text-left">Esc</td> <td class="text-left">singleSelectionTop</td></tr>' +
'<tr><td class="text-left">Ctrl-D</td> <td class="text-left">selectNextOccurrence</td></tr>'+ '<tr><td class="text-left">Ctrl-Enter</td> <td class="text-left">insertLineAfter</td></tr>' +
'<tr><td class="text-left">Shift-Ctrl-Space</td> <td class="text-left">selectScope</td></tr>'+ '<tr><td class="text-left">Ctrl-D</td> <td class="text-left">selectNextOccurrence</td></tr>' +
'<tr><td class="text-left">Shift-Ctrl-M</td> <td class="text-left">selectBetweenBrackets</td></tr>'+ '<tr><td class="text-left">Shift-Ctrl-Space</td> <td class="text-left">selectScope</td></tr>' +
'<tr><td class="text-left">Ctrl-M</td> <td class="text-left">goToBracket</td></tr>'+ '<tr><td class="text-left">Shift-Ctrl-M</td> <td class="text-left">selectBetweenBrackets</td></tr>' +
'<tr><td class="text-left">Ctrl-K Ctrl-Y</td> <td class="text-left">sublimeYank</td></tr>'+ '<tr><td class="text-left">Ctrl-M</td> <td class="text-left">goToBracket</td></tr>' +
'<tr><td class="text-left">Ctrl-K Ctrl-C</td> <td class="text-left">showInCenter</td></tr>'+ '<tr><td class="text-left">Ctrl-K Ctrl-Y</td> <td class="text-left">sublimeYank</td></tr>' +
'<tr><td class="text-left">Ctrl-K Ctrl-G</td> <td class="text-left">clearBookmarks</td></tr>'+ '<tr><td class="text-left">Ctrl-K Ctrl-C</td> <td class="text-left">showInCenter</td></tr>' +
'<tr><td class="text-left">Ctrl-K Ctrl-Backspace</td> <td class="text-left">delLineLeft</td></tr>'+ '<tr><td class="text-left">Ctrl-K Ctrl-G</td> <td class="text-left">clearBookmarks</td></tr>' +
'<tr><td class="text-left">Ctrl-K Ctrl-0</td> <td class="text-left">unfoldAll</td></tr>'+ '<tr><td class="text-left">Ctrl-K Ctrl-Backspace</td> <td class="text-left">delLineLeft</td></tr>' +
'<tr><td class="text-left">Ctrl-K Ctrl-J</td> <td class="text-left">unfoldAll</td></tr>'+ '<tr><td class="text-left">Ctrl-K Ctrl-0</td> <td class="text-left">unfoldAll</td></tr>' +
'<tr><td class="text-left">Ctrl-Alt-Up</td> <td class="text-left">addCursorToPrevLine</td></tr>'+ '<tr><td class="text-left">Ctrl-K Ctrl-J</td> <td class="text-left">unfoldAll</td></tr>' +
'<tr><td class="text-left">Ctrl-Alt-Down</td> <td class="text-left">addCursorToNextLine</td></tr>'+ '<tr><td class="text-left">Ctrl-Alt-Up</td> <td class="text-left">addCursorToPrevLine</td></tr>' +
'<tr><td class="text-left">Ctrl-F3</td> <td class="text-left">findUnder</td></tr>'+ '<tr><td class="text-left">Ctrl-Alt-Down</td> <td class="text-left">addCursorToNextLine</td></tr>' +
'<tr><td class="text-left">Shift-Ctrl-F3</td> <td class="text-left">findUnderPrevious</td></tr>'+ '<tr><td class="text-left">Ctrl-F3</td> <td class="text-left">findUnder</td></tr>' +
'<tr><td class="text-left">Shift-Ctrl-[</td> <td class="text-left">fold</td></tr>'+ '<tr><td class="text-left">Shift-Ctrl-F3</td> <td class="text-left">findUnderPrevious</td></tr>' +
'<tr><td class="text-left">Shift-Ctrl-]</td> <td class="text-left">unfold</td></tr>'+ '<tr><td class="text-left">Shift-Ctrl-[</td> <td class="text-left">fold</td></tr>' +
'<tr><td class="text-left">Ctrl-F</td> <td class="text-left">find</td></tr>'+ '<tr><td class="text-left">Shift-Ctrl-]</td> <td class="text-left">unfold</td></tr>' +
'</table>' '<tr><td class="text-left">Ctrl-F</td> <td class="text-left">find</td></tr>' +
"</table>";
var title1=''
var winfo='' var title1 = "";
var winfo = "";
this.$swal({ this.$swal({
title: '<strong>Key bindings</strong>', title: "<strong>Key bindings</strong>",
type: 'info', type: "info",
html: winfop+title1+winfo, html: winfop + title1 + winfo,
showCloseButton: true, showCloseButton: true,
showLoaderOnConfirm: false, showLoaderOnConfirm: false,
allowOutsideClick: false allowOutsideClick: false,
}) });
}, },
async hotreload() { async hotreload() {
var field = this.getinfo var field = this.getinfo;
var log = await store.dispatch("pipelineLLO/hotreload",{ var log = await store.dispatch("pipelineLLO/hotreload", {
token:this.token, token: this.token,
swarmlabname:this.swarmlabname swarmlabname: this.swarmlabname,
}) });
}, },
infoHotreload() { infoHotreload() {
var html1 = ` <div style="overflow-x: auto;"> <table class="table table-striped table-sm "> 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> <td class="text-left" colspan="2"><i>Execute script every time you run git push</i></td>
</tr> </tr>
</tbody> </tbody>
</table></div>` </table></div>`;
this.$swal({ this.$swal({
title: '<strong>HowTo</strong>', title: "<strong>HowTo</strong>",
type: 'info', type: "info",
html: html1, html: html1,
showCloseButton: true, showCloseButton: true,
showLoaderOnConfirm: false, showLoaderOnConfirm: false,
allowOutsideClick: false allowOutsideClick: false,
}) });
} },
}, },
computed: { computed: {
codemirror() { codemirror() {
return this.$refs.myCm.codemirror return this.$refs.myCm.codemirror;
} },
}, },
mounted() { mounted() {
// from runLLO // from runLLO
this.$root.$on('SERVER_socket_status', (v) => { this.$root.$on("SERVER_socket_status", (v) => {
this.$nextTick(function () { this.$nextTick(function() {
if(v == 'off'){ if (v == "off") {
this.socketonline = false this.socketonline = false;
}else if(v == 'on'){ } else if (v == "on") {
this.socketonline = true this.socketonline = true;
} }
}) });
}) });
// from runLLO // from runLLO
this.$root.$on('playground_log_in', (path) => { this.$root.$on("playground_log_in", (path) => {
//this.$nextTick(function () { //this.$nextTick(function () {
var restapi = store.getters['pipelineLLO/getrestapi']; var restapi = store.getters["pipelineLLO/getrestapi"];
if(restapi == "off"){ // rest off ara socket if (restapi == "off") {
var logtmp = store.getters['pipelineLLO/getlog']; // rest off ara socket
}else if(restapi == "on"){ // rest on ara read from rest not from socket var logtmp = store.getters["pipelineLLO/getlog"];
var logtmp = store.getters['pipelineLLO/getmongolog']; } 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)) console.log("logtmp-roi " + JSON.stringify(logtmp));
var itemlog = '' var itemlog = "";
this.code = '' this.code = "";
itemlog = logtmp.filter(item1 => item1.tailed_path === path); itemlog = logtmp.filter((item1) => item1.tailed_path === path);
//Vue.set(this.log_path_lenght, item, loglenght); //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) { for (let iteml of itemlog) {
this.code += iteml.message this.code += iteml.message + " " + iteml.tailed_path + " " + iteml.date;
+ ' '
+ iteml.tailed_path
+ ' '
+ iteml.date
this.code += "\n" this.code += "\n";
} }
/* /*
for (let itemlog of logtmp) { for (let itemlog of logtmp) {
@ -489,30 +491,34 @@ export default {
//this.code += v //this.code += v
//this.code += "\n" //this.code += "\n"
this.$refs.myCm.codemirror.setCursor(this.$refs.myCm.codemirror.lineCount(), 0); this.$refs.myCm.codemirror.setCursor(
this.tryConsole=true this.$refs.myCm.codemirror.lineCount(),
0
);
this.tryConsole = true;
//}) //})
}) });
}, },
beforeDestroy () { beforeDestroy() {
this.$root.$off('SERVER_socket_status') this.$root.$off("SERVER_socket_status");
this.$root.$off('playground_log_in') this.$root.$off("playground_log_in");
}, },
created () { created() {
this.token = new URL(location.href).searchParams.get('token'); //LEFOS TOKEN ====
this.swarmlabname = new URL(location.href).searchParams.get('pipelinename'); //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> </script>
<style> <style>
.CodeMirror { .CodeMirror {
font-family: monospace; font-family: monospace;
height: 550px; height: 550px;
} }
</style> </style>

70
src/components/doclive/runLlo.vue
View File

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

Write Preview
Loading…
Cancel
Save