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

last changes

master
lefteris 4 years ago
parent
ddea9670af
commit
e8c0869881
5 changed files with 880 additions and 864 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. 102
      src/App.vue
  2. 6
      src/components/doclive/config.js
  3. 400
      src/components/doclive/runLlo.vue
  4. 39
      src/main.js
  5. 161
      src/store/modules/create_pipelineLLO.js

102
src/App.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div id="app"> <div id="app">
<!-- ***************** nav items ****************** --> <!-- ***************** nav items ****************** -->
<b-navbar toggleable="md" class="navbar-secondary"> <b-navbar toggleable="md" class="navbar-secondary">
<b-navbar-toggle target="nav_collapse"> </b-navbar-toggle> <b-navbar-toggle target="nav_collapse"> </b-navbar-toggle>
@ -8,16 +7,20 @@
Swarmlab.io Playground Swarmlab.io Playground
</b-navbar-brand> </b-navbar-brand>
<b-collapse is-nav id="nav_collapse"> <b-collapse is-nav id="nav_collapse">
<b-navbar-nav> <b-navbar-nav> </b-navbar-nav>
</b-navbar-nav>
<!-- Right aligned nav items --> <!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto"> <b-navbar-nav class="ml-auto">
<b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit"> Swarmlab_git </b-nav-item> <b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit">
Swarmlab_git
</b-nav-item>
<b-nav-item> | </b-nav-item> <b-nav-item> | </b-nav-item>
<b-nav-item :href="'https://api-client.swarmlab.io:8088/?token='+ token" target="_swarmlab"> Lab_onDemand </b-nav-item> <b-nav-item
:href="'https://api-client.swarmlab.io:8088/?token=' + token"
target="_swarmlab"
>
Lab_onDemand
</b-nav-item>
<b-nav-item> | </b-nav-item> <b-nav-item> | </b-nav-item>
<!-- <!--
<b-nav-form> <b-nav-form>
@ -53,100 +56,78 @@
@click="saveDocLive"> @click="saveDocLive">
Save As Zip</button> Save As Zip</button>
--> -->
</b-navbar-nav> </b-navbar-nav>
</b-collapse> </b-collapse>
</b-navbar> </b-navbar>
<!-- ***************** container items ****************** --> <!-- ***************** container items ****************** -->
<b-row> <b-row>
<b-col cols="12"> <b-col cols="12">
<doc-live style="background-color: #f8f9fa"> </doc-live>
<doc-live
style="background-color: #f8f9fa"
>
</doc-live>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col cols="12"> <b-col cols="12">
<doc-grep style="background-color: #f8f9fa"> </doc-grep>
<doc-grep
style="background-color: #f8f9fa"
>
</doc-grep>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
</template> </template>
<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 "@/assets/css/themify-icons.css"; import "@/assets/css/themify-icons.css";
export default { export default {
name: 'app', name: "app",
components: { components: {
DocLive, DocLive,
DocGrep DocGrep,
}, },
data() { data() {
return { return {
show: true, show: true,
token: '', token: "",
SwarmabAsciiLabTemplate:'' SwarmabAsciiLabTemplate: "",
} };
},
mounted() {
}, },
mounted() {},
created() { created() {
var url_string = window.location.href var url_string = window.location.href;
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);
}, },
methods: { methods: {
saveDocLive() { saveDocLive() {
this.$root.$emit('asciilive_save','save') this.$root.$emit("asciilive_save", "save");
}, },
async connect_to_iot(iot) { async connect_to_iot(iot) {
if (iot == "mesh") {
if( iot == 'mesh' ){
this.SwarmabAsciiLabTemplate = { this.SwarmabAsciiLabTemplate = {
"iot5": { iot5: {
"id": 5, id: 5,
"name": "auto5", name: "auto5",
"img": "rinse.png", img: "rinse.png",
"Servicios": [ Servicios: [
{"model":"Sentra", "doors":4}, { model: "Sentra", doors: 4 },
{"model":"Maxima", "doors":4}, { model: "Maxima", doors: 4 },
{"model":"Skyline", "doors":2} { model: "Skyline", doors: 2 },
] ],
} },
} };
}
}
}
} }
},
},
};
</script> </script>
<style> <style>
@import url('https://fonts.googleapis.com/css?family=Lato:400,700'); @import url("https://fonts.googleapis.com/css?family=Lato:400,700");
body { body {
background: #EEF1F4 !important; background: #eef1f4 !important;
} }
.nav-background { .nav-background {
@ -161,7 +142,7 @@ export default {
font-weight: 300; font-weight: 300;
content: "\e606"; content: "\e606";
color: #222; color: #222;
color: #74B3C8; color: #74b3c8;
border-color: #c60000; border-color: #c60000;
} }
@ -170,7 +151,6 @@ export default {
} }
.menoutext { .menoutext {
font-family: 'Lato', sans-serif !important; font-family: "Lato", sans-serif !important;
} }
</style> </style>

6
src/components/doclive/config.js
View File

@ -0,0 +1,6 @@
var config = {};
//hardcoded token for testing
config.token = "c96e7fe836f9ffaf83e1fb7bc2b49819251057b0";
module.exports = config;

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

@ -7,7 +7,6 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<div class="input-group input-group-sm sm-6"> <div class="input-group input-group-sm sm-6">
<!-- --------------------------------------------------------- --> <!-- --------------------------------------------------------- -->
@ -15,9 +14,9 @@
<!-- --------------------------------------------------------- --> <!-- --------------------------------------------------------- -->
<div class="input-group input-group-sm mb-3"> <div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"> <div class="input-group-prepend">
<button class="btn btn-outline-secondary" <button class="btn btn-outline-secondary" type="button">
type="button" Start date
>Start date </button> </button>
</div> </div>
<date-picker <date-picker
type="date" type="date"
@ -29,7 +28,8 @@
</date-picker> </date-picker>
</div> </div>
</div> </div>
</div> <!-- col --> </div>
<!-- col -->
<div class="col-6"> <div class="col-6">
<div class="input-group input-group-sm sm-6"> <div class="input-group input-group-sm sm-6">
@ -38,9 +38,9 @@
<!-- --------------------------------------------------------- --> <!-- --------------------------------------------------------- -->
<div class="input-group input-group-sm mb-3"> <div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"> <div class="input-group-prepend">
<button class="btn btn-outline-secondary" <button class="btn btn-outline-secondary" type="button">
type="button" End date
>End date </button> </button>
</div> </div>
<date-picker <date-picker
type="date" type="date"
@ -56,48 +56,67 @@
class="btn btn-outline-primary" class="btn btn-outline-primary"
round round
type="button" type="button"
@click="setFilter"> @click="setFilter"
Go</button> >
Go
</button>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- col --> </div>
<!-- col -->
</div> <!-- row --> </div>
<!-- row -->
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<div class="input-group input-group-sm sm-6"> <div class="input-group input-group-sm sm-6">
<div class="input-group-prepend"> <div class="input-group-prepend">
<div
<div class="form-control custom-control custom-switch custom-control-inline"> class="form-control custom-control custom-switch custom-control-inline"
<input type="checkbox" class="custom-control-input" id="log_logerror" >
<input
type="checkbox"
class="custom-control-input"
id="log_logerror"
v-model="logcheck.error" v-model="logcheck.error"
/>
<label class="custom-control-label" for="log_logerror"
>Error</label
> >
<label class="custom-control-label" for="log_logerror">Error</label>
</div> </div>
<div class="form-control custom-control custom-switch custom-control-inline"> <div
<input type="checkbox" class="custom-control-input" id="log_output" class="form-control custom-control custom-switch custom-control-inline"
>
<input
type="checkbox"
class="custom-control-input"
id="log_output"
v-model="logcheck.output" v-model="logcheck.output"
data-size="large" data-size="large"
data-toggle="toggle" data-toggle="toggle"
/>
<label class="custom-control-label" for="log_output"
>Output</label
> >
<label class="custom-control-label" for="log_output">Output</label>
</div> </div>
<div class="form-control custom-control custom-switch custom-control-inline"> <div
<input type="checkbox" class="custom-control-input" id="log_log" class="form-control custom-control custom-switch custom-control-inline"
v-model="logcheck.log"
> >
<input
type="checkbox"
class="custom-control-input"
id="log_log"
v-model="logcheck.log"
/>
<label class="custom-control-label" for="log_log">Log</label> <label class="custom-control-label" for="log_log">Log</label>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- col --> </div>
<!-- col -->
<div class="col-5"> <div class="col-5">
<div class="input-group input-group-sm sm-5 justify-content-end "> <div class="input-group input-group-sm sm-5 justify-content-end ">
@ -107,8 +126,10 @@
class="btn btn-outline-warning" class="btn btn-outline-warning"
round round
type="button" type="button"
@click="Clearlog"> @click="Clearlog"
Clear</button> >
Clear
</button>
</div> </div>
<div class="input-group-append"> <div class="input-group-append">
@ -116,73 +137,68 @@
class="btn btn-outline-primary" class="btn btn-outline-primary"
round round
type="button" type="button"
@click="Hotlog"> @click="Hotlog"
Hot_log</button> >
Hot_log
</button>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- col --> </div>
<!-- col -->
<div class="col-1">
</div> <!-- col -->
</div> <!-- row -->
<div class="col-1"></div>
<!-- col -->
</div>
<!-- row -->
<div class="row rowlog overflow-auto"> <div class="row rowlog overflow-auto">
<div class="col-12" <div class="col-12" v-for="item in log_path">
v-for="item in log_path" <b-row class="border-bottom" v-if="logview(item) === true">
>
<b-row
class="border-bottom"
v-if="logview(item) === true"
>
<b-col cols="2"> <b-col cols="2">
<span class="badge badge-danger badge-pill" <span
class="badge badge-danger badge-pill"
style="cursor: pointer" style="cursor: pointer"
@click="clearLog()" @click="clearLog()"
>Clear</span> >Clear</span
>
</b-col> </b-col>
<b-col cols="8" <b-col cols="8" style="cursor: pointer" @click="selectPath(item)">
style="cursor: pointer"
@click="selectPath(item)"
>
{{ item }} {{ item }}
</b-col> </b-col>
<b-col cols="2"> <b-col cols="2">
<span class="badge badge-secondary badge-pill" <span
class="badge badge-secondary badge-pill"
v-if="log_path_lenght[item] == log_path_lenghtstatus[item]" v-if="log_path_lenght[item] == log_path_lenghtstatus[item]"
>{{log_path_lenght[item]}}</span> >{{ log_path_lenght[item] }}</span
>
<span class="badge badge-primary badge-pill" <span class="badge badge-primary badge-pill" v-else>{{
v-else log_path_lenght[item]
>{{log_path_lenght[item]}}</span> }}</span>
</b-col> </b-col>
</b-row> </b-row>
</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";
import JSZip from 'jszip'; import JSZip from "jszip";
import DatePicker from 'vue2-datepicker' 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";
export default { export default {
components: { components: {
DatePicker DatePicker,
}, },
data() { data() {
return { return {
@ -195,130 +211,133 @@ export default {
dateend: "", dateend: "",
log: "", log: "",
output: "", output: "",
error: "" error: "",
}, },
logcheck: { logcheck: {
log: true, log: true,
error: true, error: true,
output: true output: true,
}, },
selected: [], selected: [],
showlloedit: true, showlloedit: true,
issocket:'close', issocket: "close",
socketdata:'', socketdata: "",
logintoken:'', logintoken: "",
code: [], code: [],
logdata: [] logdata: [],
} };
}, },
methods: { methods: {
Hotlog() { Hotlog() {
this.Clearlog() this.Clearlog();
var restapi = "off" var restapi = "off";
var logrestapi = store.dispatch("pipelineLLO/setRestapi", { var logrestapi = store.dispatch("pipelineLLO/setRestapi", {
restapi:restapi restapi: restapi,
}) });
}, },
Clearlog() { Clearlog() {
var log = store.dispatch("pipelineLLO/RMmongolog") var log = store.dispatch("pipelineLLO/RMmongolog");
this.log_path = [] this.log_path = [];
//var mongolog = store.getters['pipelineLLO/getmongolog']; //var mongolog = store.getters['pipelineLLO/getmongolog'];
//console.log("rmmongolog "+JSON.stringify(mongolog)) //console.log("rmmongolog "+JSON.stringify(mongolog))
}, },
logview(item) { logview(item) {
//console.log('path ' + JSON.stringify(item)) //console.log('path ' + JSON.stringify(item))
if (this.logcheck.log) { if (this.logcheck.log) {
if(item.endsWith('-log')){ if (item.endsWith("-log")) {
return true; return true;
} }
} }
if (this.logcheck.error) { if (this.logcheck.error) {
if(item.endsWith('-error')){ if (item.endsWith("-error")) {
return true; return true;
} }
} }
if (this.logcheck.output) { if (this.logcheck.output) {
if(item.endsWith('-output')){ if (item.endsWith("-output")) {
return true; return true;
} }
} }
}, },
async selectPath(path) { async selectPath(path) {
console.log('path ' + JSON.stringify(path)) console.log("path " + JSON.stringify(path));
var statuslenght = this.log_path_lenght[path] var statuslenght = this.log_path_lenght[path];
Vue.set(this.log_path_lenghtstatus, path, statuslenght); Vue.set(this.log_path_lenghtstatus, path, statuslenght);
// ------------------------------------- // -------------------------------------
// send to AdhocView to view in code // send to AdhocView to view in code
// ------------------------------------- // -------------------------------------
this.$root.$emit('playground_log_in',path) this.$root.$emit("playground_log_in", path);
}, },
async clearLog(path) { async clearLog(path) {
console.log('path ' + JSON.stringify(path)) console.log("path " + JSON.stringify(path));
Vue.set(this.log_path_lenght, path, 0); Vue.set(this.log_path_lenght, path, 0);
Vue.set(this.log_path_lenghtstatus, path, 0); Vue.set(this.log_path_lenghtstatus, path, 0);
var log = store.dispatch("pipelineLLO/rmlog", { var log = store.dispatch("pipelineLLO/rmlog", {
path:path path: path,
}) });
}, },
async setFilter() { async setFilter() {
console.log(JSON.stringify(this.search)) console.log(JSON.stringify(this.search));
var ddd8 = JSON.stringify(this.search.datestart) var ddd8 = JSON.stringify(this.search.datestart);
ddd8 = ddd8.replace(/"/g,''); //" ddd8 = ddd8.replace(/"/g, ""); //"
var datestart = DateTime.fromISO(ddd8, { zone: "Europe/Athens" }); var datestart = DateTime.fromISO(ddd8, { zone: "Europe/Athens" });
//console.log(datestart.zoneName); //=> 'Europe/Paris' //console.log(datestart.zoneName); //=> 'Europe/Paris'
//console.log(datestart.toString()); //=> 'Europe/Paris' //console.log(datestart.toString()); //=> 'Europe/Paris'
var ddd18 = JSON.stringify(this.search.dateend) var ddd18 = JSON.stringify(this.search.dateend);
ddd18 = ddd18.replace(/"/g,''); //" ddd18 = ddd18.replace(/"/g, ""); //"
var dateend = DateTime.fromISO(ddd18, { zone: "Europe/Athens" }); var dateend = DateTime.fromISO(ddd18, { zone: "Europe/Athens" });
var restapi = "on" var restapi = "on";
var logrestapi = await store.dispatch("pipelineLLO/setRestapi", { var logrestapi = await store.dispatch("pipelineLLO/setRestapi", {
restapi:restapi restapi: restapi,
}) });
var swarmlabname = new URL(location.href).searchParams.get('pipelinename'); var swarmlabname = new URL(location.href).searchParams.get(
"pipelinename"
);
var log = await store.dispatch("pipelineLLO/get_log", { var log = await store.dispatch("pipelineLLO/get_log", {
datestart: datestart.toISODate(), datestart: datestart.toISODate(),
dateend: dateend.toISODate(), dateend: dateend.toISODate(),
swarmlabname:swarmlabname swarmlabname: swarmlabname,
}) });
var mongolog = store.getters['pipelineLLO/getmongolog']; var mongolog = store.getters["pipelineLLO/getmongolog"];
console.log("paramp "+JSON.stringify(mongolog)) console.log("paramp " + JSON.stringify(mongolog));
//this.$root.$emit('GREP_on_data',mongolog.data.data) //this.$root.$emit('GREP_on_data',mongolog.data.data)
// list files from data // list files from data
this.log_path = [...new Set(mongolog.map(item => item.tailed_path))]; this.log_path = [...new Set(mongolog.map((item) => item.tailed_path))];
var loglenght = '' var loglenght = "";
for (let item of this.log_path) { for (let item of this.log_path) {
loglenght = mongolog.filter(item1 => item1.tailed_path === item).length; loglenght = mongolog.filter((item1) => item1.tailed_path === item)
.length;
Vue.set(this.log_path_lenght, item, loglenght); Vue.set(this.log_path_lenght, item, loglenght);
if (loglenght > this.loglenghttotal) { if (loglenght > this.loglenghttotal) {
// ------------------------------------- // -------------------------------------
// Save store // Save store
// ------------------------------------- // -------------------------------------
var ltotal1 = store.dispatch("pipelineLLO/taillog", { var ltotal1 = store.dispatch("pipelineLLO/taillog", {
path:item path: item,
}) });
} }
} }
}, },
async resetFilter() { async resetFilter() {
console.log(JSON.stringify(this.logdata)) console.log(JSON.stringify(this.logdata));
}, },
async socketopen() { async socketopen() {
this.$socket.client.open(); this.$socket.client.open();
}, },
async socketauthenticate() { async socketauthenticate() {
var tokentmp = store.getters['pipelineLLO/gettoken']; var tokentmp = store.getters["pipelineLLO/gettoken"];
this.$socket.client.emit('authenticate', tokentmp); // pernaw hardcoded to token
var test = "c96e7fe836f9ffaf83e1fb7bc2b49819251057b0";
this.$socket.client.emit("authenticate", test);
}, },
async socketreconnect() { async socketreconnect() {
var log = await this.socketopen() var log = await this.socketopen();
this.socketauthenticate() this.socketauthenticate();
}, },
/** /**
* *
@ -330,16 +349,15 @@ export default {
* ---- * ----
* *
*/ */
async socketclose() { async socketclose() {
this.$socket.client.close(); this.$socket.client.close();
}
}, },
computed: {
}, },
computed: {},
beforeMount() { beforeMount() {
this.socketauthenticate() this.socketauthenticate();
console.log('send') console.log("send1");
}, },
/** /**
* *
@ -357,11 +375,11 @@ export default {
*/ */
mounted() { mounted() {
// from AdhocView // from AdhocView
this.$root.$on('SERVER_socket_connect', (v) => { this.$root.$on("SERVER_socket_connect", (v) => {
this.$nextTick(function() { this.$nextTick(function() {
this.socketreconnect() this.socketreconnect();
}) });
}) });
}, },
/** /**
* *
@ -381,7 +399,7 @@ export default {
* *
*/ */
beforeDestroy() { beforeDestroy() {
this.$root.$off('SERVER_socket_socket') this.$root.$off("SERVER_socket_socket");
}, },
/** /**
* *
@ -402,11 +420,13 @@ export default {
*/ */
created() { created() {
this.socketopen() this.socketopen();
var logintoken = new URL(location.href).searchParams.get('token'); var logintoken = new URL(location.href).searchParams.get("token");
// hardcoded token
var hardtoken = "c96e7fe836f9ffaf83e1fb7bc2b49819251057b0";
var log = store.dispatch("pipelineLLO/settoken", { var log = store.dispatch("pipelineLLO/settoken", {
token:logintoken token: hardtoken,
}) });
//var tokentmp =store.getters['pipelineLLO/gettoken']; //var tokentmp =store.getters['pipelineLLO/gettoken'];
//console.log("tokennnn "+tokentmp); //console.log("tokennnn "+tokentmp);
@ -423,9 +443,12 @@ export default {
*/ */
sockets: { sockets: {
connect() { connect() {
this.$socket.client.emit('authenticate', 'logintoken'); //hardtoken
var hardtoken = "c96e7fe836f9ffaf83e1fb7bc2b49819251057b0";
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'
//var roomname = 'roomname' //var roomname = 'roomname'
//this.$socket.client.emit('setUsername',{user:username}); //this.$socket.client.emit('setUsername',{user:username});
@ -433,10 +456,10 @@ export default {
//this.$socket.client.emit('joinRooom',{room:roomname}); //this.$socket.client.emit('joinRooom',{room:roomname});
//var msg = {user:username,room:roomname,msg:'hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii'} //var msg = {user:username,room:roomname,msg:'hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii'}
//this.$socket.client.emit('sendMessage',msg); //this.$socket.client.emit('sendMessage',msg);
console.log('socket connected '+ 'socketdatasend' ) console.log("socket connected " + "socketdatasend");
this.issocket = 'open' this.issocket = "open";
// send to AdhocView // send to AdhocView
this.$root.$emit('SERVER_socket_status','on') this.$root.$emit("SERVER_socket_status", "on");
}, },
/** /**
* *
@ -444,10 +467,10 @@ export default {
* *
*/ */
error(error) { error(error) {
console.log("socket error "+JSON.stringify(error)) console.log("socket error " + JSON.stringify(error));
this.issocket = 'close' this.issocket = "close";
// send to AdhocView // send to AdhocView
this.$root.$emit('SERVER_socket_status','off') this.$root.$emit("SERVER_socket_status", "off");
}, },
/** /**
* *
@ -455,11 +478,11 @@ export default {
* *
*/ */
connect_error(error) { connect_error(error) {
console.log("socket connect_error "+JSON.stringify(error)) console.log("socket connect_error " + JSON.stringify(error));
this.issocket = 'close' this.issocket = "close";
// send to AdhocView // send to AdhocView
this.$root.$emit('SERVER_socket_status','off') this.$root.$emit("SERVER_socket_status", "off");
this.socketreconnect() this.socketreconnect();
}, },
/** /**
* *
@ -467,11 +490,11 @@ export default {
* *
*/ */
disconnect(reason) { disconnect(reason) {
console.log("socket disconnect "+JSON.stringify(reason)) console.log("socket disconnect " + JSON.stringify(reason));
this.issocket = 'close' this.issocket = "close";
// send to AdhocView // send to AdhocView
this.$root.$emit('SERVER_socket_status','off') this.$root.$emit("SERVER_socket_status", "off");
this.socketreconnect() this.socketreconnect();
}, },
/** /**
* *
@ -479,11 +502,11 @@ export default {
* *
*/ */
connect_timeout(reason) { connect_timeout(reason) {
console.log("socket timeout "+JSON.stringify(reason)) console.log("socket timeout " + JSON.stringify(reason));
this.issocket = 'close' this.issocket = "close";
// send to AdhocView // send to AdhocView
this.$root.$emit('SERVER_socket_status','off') this.$root.$emit("SERVER_socket_status", "off");
this.socketreconnect() this.socketreconnect();
}, },
/** /**
* *
@ -491,10 +514,12 @@ export default {
* *
*/ */
reconnect(attemptNumber) { reconnect(attemptNumber) {
console.log("socket reconnect attemptNumber "+JSON.stringify(attemptNumber)) console.log(
"socket reconnect attemptNumber " + JSON.stringify(attemptNumber)
);
// send to AdhocView // send to AdhocView
this.$root.$emit('SERVER_socket_status','off') this.$root.$emit("SERVER_socket_status", "off");
this.socketreconnect() this.socketreconnect();
}, },
/** /**
* *
@ -502,10 +527,10 @@ export default {
* *
*/ */
reconnect_attempt(attemptNumber) { reconnect_attempt(attemptNumber) {
console.log("socket reconnect_attempt "+JSON.stringify(attemptNumber)) console.log("socket reconnect_attempt " + JSON.stringify(attemptNumber));
// send to AdhocView // send to AdhocView
this.$root.$emit('SERVER_socket_status','off') this.$root.$emit("SERVER_socket_status", "off");
this.socketreconnect() this.socketreconnect();
}, },
/** /**
* *
@ -513,9 +538,9 @@ export default {
* *
*/ */
reconnecting(attemptNumber) { reconnecting(attemptNumber) {
console.log("socket reconnecting "+JSON.stringify(attemptNumber)) console.log("socket reconnecting " + JSON.stringify(attemptNumber));
this.$root.$emit('SERVER_socket_status','off') this.$root.$emit("SERVER_socket_status", "off");
this.socketreconnect() this.socketreconnect();
}, },
/** /**
* *
@ -523,11 +548,11 @@ export default {
* *
*/ */
reconnect_error(error) { reconnect_error(error) {
console.log("socket reconnect_error "+JSON.stringify(error)) console.log("socket reconnect_error " + JSON.stringify(error));
this.issocket = 'close' this.issocket = "close";
// send to AdhocView // send to AdhocView
this.$root.$emit('SERVER_socket_status','off') this.$root.$emit("SERVER_socket_status", "off");
this.socketreconnect() this.socketreconnect();
}, },
/** /**
* *
@ -535,10 +560,10 @@ export default {
* *
*/ */
unauthorized(val) { unauthorized(val) {
console.log("socket unauthorized "+JSON.stringify(val)) console.log("socket unauthorized " + JSON.stringify(val));
this.issocket = 'close' this.issocket = "close";
// send to AdhocView // send to AdhocView
this.$root.$emit('SERVER_socket_status','off') this.$root.$emit("SERVER_socket_status", "off");
}, },
/** /**
* *
@ -546,9 +571,9 @@ export default {
* *
*/ */
socket_id_emit(val) { socket_id_emit(val) {
console.log("socket id from server "+JSON.stringify(val)) console.log("socket id from server " + JSON.stringify(val));
console.log("socket id from serveri saved "+JSON.stringify(socketsave)) console.log("socket id from serveri saved " + JSON.stringify(socketsave));
this.issocket = 'open' this.issocket = "open";
}, },
/** /**
* *
@ -587,17 +612,17 @@ export default {
}, },
*/ */
async logdata(val) { async logdata(val) {
console.log(" socket from logdata "+JSON.stringify(val)) console.log(" socket from logdata " + JSON.stringify(val));
// ------------------------------------- // -------------------------------------
// Save store // Save store
// ------------------------------------- // -------------------------------------
var log = store.dispatch("pipelineLLO/addlog", { var log = store.dispatch("pipelineLLO/addlog", {
log:val log: val,
}) });
// ------------------------------------- // -------------------------------------
// send to grep rungrep to view // send to grep rungrep to view
// ------------------------------------- // -------------------------------------
this.$root.$emit('GREP_on_data',val) this.$root.$emit("GREP_on_data", val);
// ------------------------------------- // -------------------------------------
// send to AdhocView to view in code // send to AdhocView to view in code
// ------------------------------------- // -------------------------------------
@ -605,23 +630,23 @@ export default {
// ------------------------------------- // -------------------------------------
// send to AdhocView for socket status // send to AdhocView for socket status
// ------------------------------------- // -------------------------------------
this.$root.$emit('SERVER_socket_status','on') this.$root.$emit("SERVER_socket_status", "on");
var ltmp = store.getters['pipelineLLO/getlog']; var ltmp = store.getters["pipelineLLO/getlog"];
//console.log('logtmpltmp '+ JSON.stringify(ltmp)) //console.log('logtmpltmp '+ JSON.stringify(ltmp))
this.log_path = [...new Set(ltmp.map(item => item.tailed_path))]; this.log_path = [...new Set(ltmp.map((item) => item.tailed_path))];
var loglenght = '' var loglenght = "";
for (let item of this.log_path) { for (let item of this.log_path) {
//console.log('l1find '+ JSON.stringify(item)) //console.log('l1find '+ JSON.stringify(item))
loglenght = ltmp.filter(item1 => item1.tailed_path === item).length; loglenght = ltmp.filter((item1) => item1.tailed_path === item).length;
Vue.set(this.log_path_lenght, item, loglenght); Vue.set(this.log_path_lenght, item, loglenght);
if (loglenght > this.loglenghttotal) { if (loglenght > this.loglenghttotal) {
// ------------------------------------- // -------------------------------------
// Save store // Save store
// ------------------------------------- // -------------------------------------
var ltotal1 = store.dispatch("pipelineLLO/taillog", { var ltotal1 = store.dispatch("pipelineLLO/taillog", {
path:item path: item,
}) });
} }
/* /*
this.log_path_lenght[item] = ltmp.filter(function(item1){ this.log_path_lenght[item] = ltmp.filter(function(item1){
@ -635,20 +660,16 @@ export default {
//console.log('l2 '+ this.log_path_lenght[item] ) //console.log('l2 '+ this.log_path_lenght[item] )
} }
//console.log('l1 '+ JSON.stringify(this.log_path)) //console.log('l1 '+ JSON.stringify(this.log_path))
}, },
async message(val) { async message(val) {
console.log(" socket message "+JSON.stringify(val)) console.log(" socket message " + JSON.stringify(val));
} },
} },
}; };
</script> </script>
<style> <style>
.CodeMirror { .CodeMirror {
font-family: monospace; font-family: monospace;
height: 750px; height: 750px;
} }
@ -656,5 +677,4 @@ export default {
display: flex; /* equal height of the children */ display: flex; /* equal height of the children */
height: 470px; height: 470px;
} }
</style> </style>

39
src/main.js
View File

@ -1,20 +1,16 @@
import Vue from 'vue' import Vue from "vue";
import App from './App.vue' import App from "./App.vue";
import store from '@/store/index' import store from "@/store/index";
import BootstrapVue from 'bootstrap-vue' import BootstrapVue from "bootstrap-vue";
import 'bootstrap/dist/css/bootstrap.css' import "bootstrap/dist/css/bootstrap.css";
import 'bootstrap-vue/dist/bootstrap-vue.css' import "bootstrap-vue/dist/bootstrap-vue.css";
import VueSweetalert2 from 'vue-sweetalert2'; import VueSweetalert2 from "vue-sweetalert2";
Vue.use(VueSweetalert2); Vue.use(VueSweetalert2);
import VueSocketIOExt from "vue-socket.io-extended";
import io from "socket.io-client";
const socket = io("localhost:3000", {
import VueSocketIOExt from 'vue-socket.io-extended';
import io from 'socket.io-client';
const socket = io('https://factory.swarmlab.io:55527', {
//const socket = io('http://factory.swarmlab.io:55528', { //const socket = io('http://factory.swarmlab.io:55528', {
//autoConnect: false //autoConnect: false
autoConnect: false, autoConnect: false,
@ -24,22 +20,19 @@ const socket = io('https://factory.swarmlab.io:55527', {
pingInterval: 25000, pingInterval: 25000,
pingTimeout: 60000, pingTimeout: 60000,
//transports: ["websocket"], //transports: ["websocket"],
transports: [ 'websocket', 'polling' ], transports: ["websocket", "polling"],
//transports: ["polling"], //transports: ["polling"],
secure: true, secure: true,
rejectUnauthorized: false rejectUnauthorized: false,
}); });
Vue.use(VueSocketIOExt, socket); Vue.use(VueSocketIOExt, socket);
Vue.use(BootstrapVue); Vue.use(BootstrapVue);
Vue.config.productionTip = false Vue.config.productionTip = false;
new Vue({ new Vue({
el: '#app', el: "#app",
store, store,
render: h => h(App) render: (h) => h(App),
}) });

161
src/store/modules/create_pipelineLLO.js
View File

@ -1,44 +1,44 @@
import { mapState, mapActions, commit } from 'vuex' import { mapState, mapActions, commit } from "vuex";
import store from '@/store/index' import store from "@/store/index";
import axios from 'axios' import axios from "axios";
export default { export default {
namespaced: true, namespaced: true,
state: { state: {
token: '', token: "",
llo: {}, llo: {},
log: [], log: [],
mongolog: [], mongolog: [],
socketid:'', socketid: "",
restapi:'off' restapi: "off",
}, },
getters: { getters: {
getrestapi(state, container) { getrestapi(state, container) {
//console.log("js1 get "+JSON.stringify(state.llo)) //console.log("js1 get "+JSON.stringify(state.llo))
return state.restapi return state.restapi;
//return state.log //return state.log
}, },
getmongolog(state, container) { getmongolog(state, container) {
//console.log("js1 get "+JSON.stringify(state.llo)) //console.log("js1 get "+JSON.stringify(state.llo))
return state.mongolog return state.mongolog;
//return state.log //return state.log
}, },
getlog(state, container) { getlog(state, container) {
//console.log("js1 get "+JSON.stringify(state.llo)) //console.log("js1 get "+JSON.stringify(state.llo))
return state.log return state.log;
}, },
gettoken(state, container) { gettoken(state, container) {
//console.log("js1 get "+JSON.stringify(state.llo)) //console.log("js1 get "+JSON.stringify(state.llo))
return state.token return state.token;
}, },
getllosrc(state, container) { getllosrc(state, container) {
//console.log("js1 get "+JSON.stringify(state.llo)) //console.log("js1 get "+JSON.stringify(state.llo))
return state.llo return state.llo;
}, },
getsocketid(state, container) { getsocketid(state, container) {
//console.log("js1 get "+JSON.stringify(state.llo)) //console.log("js1 get "+JSON.stringify(state.llo))
return state.socketid return state.socketid;
} },
}, },
mutations: { mutations: {
add_log(state, data) { add_log(state, data) {
@ -47,7 +47,7 @@ export default {
}, },
setrestapi(state, data) { setrestapi(state, data) {
//console.log("js1 set "+JSON.stringify(data)) //console.log("js1 set "+JSON.stringify(data))
state.restapi=data state.restapi = data;
}, },
set_token(state, data) { set_token(state, data) {
//console.log("js1 set "+JSON.stringify(data)) //console.log("js1 set "+JSON.stringify(data))
@ -58,16 +58,18 @@ export default {
state.log = state.log.filter((item) => item.tailed_path !== path); state.log = state.log.filter((item) => item.tailed_path !== path);
//const filteredArray = myarr.filter(obj => obj.name !== 'foo'); //const filteredArray = myarr.filter(obj => obj.name !== 'foo');
//console.log("js1 set "+JSON.stringify(filterlog)) //console.log("js1 set "+JSON.stringify(filterlog))
console.log("js1 setrm "+JSON.stringify(state.log)) console.log("js1 setrm " + JSON.stringify(state.log));
//state.log = filterlog; //state.log = filterlog;
}, },
tail_log(state, path) { tail_log(state, path) {
//console.log("js1 set "+JSON.stringify(data)) //console.log("js1 set "+JSON.stringify(data))
state.log = state.log.filter((item) => item.tailed_path !== path).splice(0, 4); state.log = state.log
.filter((item) => item.tailed_path !== path)
.splice(0, 4);
//const filteredArray = myarr.filter(obj => obj.name !== 'foo'); //const filteredArray = myarr.filter(obj => obj.name !== 'foo');
//console.log("js1 set "+JSON.stringify(filterlog)) //console.log("js1 set "+JSON.stringify(filterlog))
console.log("js1 setrmrmrmrmrmrmrmrm "+JSON.stringify(state.log)) console.log("js1 setrmrmrmrmrmrmrmrm " + JSON.stringify(state.log));
//state.log = filterlog; //state.log = filterlog;
}, },
@ -88,66 +90,67 @@ export default {
setsocketid(state, data) { setsocketid(state, data) {
//console.log("js1 set "+JSON.stringify(data)) //console.log("js1 set "+JSON.stringify(data))
state.socketid = data; state.socketid = data;
} },
}, },
actions: { actions: {
RMmongolog({ commit }, value) { RMmongolog({ commit }, value) {
commit('rmmongolog') commit("rmmongolog");
}, },
addlog({ commit }, value) { addlog({ commit }, value) {
//console.log("container "+value) //console.log("container "+value)
var tt = {} var tt = {};
tt.message = value.log.log.message tt.message = value.log.log.message;
tt.tailed_path = value.log.log.tailed_path tt.tailed_path = value.log.log.tailed_path;
tt.date = value.log.date tt.date = value.log.date;
commit('add_log', tt) commit("add_log", tt);
}, },
setRestapi({ commit }, value) { setRestapi({ commit }, value) {
//console.log("container "+value) //console.log("container "+value)
commit('setrestapi', value.restapi) commit("setrestapi", value.restapi);
}, },
settoken({ commit }, value) { settoken({ commit }, value) {
//console.log("container "+value) //console.log("container "+value)
commit('set_token', value.token) commit("set_token", value.token);
}, },
rmlog({ commit }, value) { rmlog({ commit }, value) {
//console.log("containerirm "+value) //console.log("containerirm "+value)
commit('rm_log', value.path) commit("rm_log", value.path);
}, },
taillog({ commit }, value) { taillog({ commit }, value) {
console.log("containerirm "+value) console.log("containerirm " + value);
commit('tail_log', value.path) commit("tail_log", value.path);
}, },
async get_data({ commit, rootGetters }, value) { async get_data({ commit, rootGetters }, value) {
try { try {
let p = await axios.get("https://factory.swarmlab.io:55527/run", { let p = await axios.get("https://factory.swarmlab.io:55527/run", {
timeout: 45000, timeout: 45000,
params: { params: {
code: value.code code: value.code,
} },
}); });
//var p = value.code //var p = value.code
console.log("paramp "+JSON.stringify(p)) console.log("paramp " + JSON.stringify(p));
store.dispatch('pipelineLLO/setScriptllo', p) store.dispatch("pipelineLLO/setScriptllo", p);
return p; return p;
} catch (e) { } catch (e) {
if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){ if (
window.location.href = 'https://api-login.swarmlab.io:8089'; e.message == "Request failed with status code 401" ||
/401/i.test(e.message)
) {
window.location.href = "https://api-login.swarmlab.io:8089";
} else { } else {
var R = { var R = {
ERROR_str: e, ERROR_str: e,
ERROR: 'yes' ERROR: "yes",
} };
return R; return R;
} }
} }
}, },
async get_log({ commit, rootGetters }, value) { async get_log({ commit, rootGetters }, value) {
try { try {
var token = store.getters['pipelineLLO/gettoken']; var token = store.getters["pipelineLLO/gettoken"];
let p = await axios.get("https://factory.swarmlab.io:55527/get_log", { let p = await axios.get("https://factory.swarmlab.io:55527/get_log", {
timeout: 45000, timeout: 45000,
@ -155,54 +158,68 @@ export default {
token: token, token: token,
start: value.datestart, start: value.datestart,
end: value.dateend, end: value.dateend,
swarmlabname: value.swarmlabname swarmlabname: value.swarmlabname,
} },
}); });
//var p = value.code //var p = value.code
console.log("paramp-------------------------- "+JSON.stringify(value)) console.log(
store.dispatch('pipelineLLO/set_mongolog', p) "paramp-------------------------- " + JSON.stringify(value)
);
store.dispatch("pipelineLLO/set_mongolog", p);
return p; return p;
} catch (e) { } catch (e) {
if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){ if (
window.location.href = 'https://api-login.swarmlab.io:8089'; e.message == "Request failed with status code 401" ||
/401/i.test(e.message)
) {
window.location.href = "https://api-login.swarmlab.io:8089";
} else { } else {
var R = { var R = {
ERROR_str: e, ERROR_str: e,
ERROR: 'yes' ERROR: "yes",
} };
return R; return R;
} }
} }
}, },
async hotreload({ commit, rootGetters }, value) { async hotreload({ commit, rootGetters }, value) {
try { try {
var token = value.token var token = value.token;
var params = { var params = {
swarmlabname: value.swarmlabname swarmlabname: value.swarmlabname,
} };
var options = { var options = {
headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` }, headers: {
"content-type": "application/x-www-form-urlencoded",
Authorization: `Bearer ${token}`,
},
}; };
var p = await axios.post('https://api.swarmlab.io/swarmlabrunhotreload',params,options); var p = await axios.post(
"https://api.swarmlab.io/swarmlabrunhotreload",
params,
options
);
if (p.error == "invalid_token") { if (p.error == "invalid_token") {
console.log(p) console.log(p);
console.log(JSON.stringify(p)) console.log(JSON.stringify(p));
} else { } else {
} }
//console.log(value.token) //console.log(value.token)
//console.log(value.swarmlabname) //console.log(value.swarmlabname)
console.log(JSON.stringify(p)) console.log(JSON.stringify(p));
} catch (e) { } catch (e) {
if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){ if (
e.message == "Request failed with status code 401" ||
/401/i.test(e.message)
) {
//console.log('error '+JSON.stringify(e)) //console.log('error '+JSON.stringify(e))
window.location.href = 'https://api-login.swarmlab.io:8089'; window.location.href = "https://api-login.swarmlab.io:8089";
} else { } else {
var R = { var R = {
ERROR_str: e, ERROR_str: e,
ERROR: 'yes' ERROR: "yes",
} };
return R; return R;
} }
} }
@ -212,26 +229,26 @@ export default {
//commit('setmongolog', value) //commit('setmongolog', value)
for (let item of value.data.data) { for (let item of value.data.data) {
//console.log(JSON.stringify(item)) //console.log(JSON.stringify(item))
var itemobj = {} var itemobj = {};
itemobj.message = item.message itemobj.message = item.message;
itemobj.tailed_path = item.tailed_path itemobj.tailed_path = item.tailed_path;
itemobj.date = item.time itemobj.date = item.time;
//console.log('vvvvvvvvvvvvvvvvvvvvvvvv '+JSON.stringify(itemobj)) //console.log('vvvvvvvvvvvvvvvvvvvvvvvv '+JSON.stringify(itemobj))
commit('setmongolog', itemobj) commit("setmongolog", itemobj);
} }
}, },
setScriptllo({ commit }, value) { setScriptllo({ commit }, value) {
//console.log("container "+value) //console.log("container "+value)
commit('setllo', value) commit("setllo", value);
}, },
setsocketllo({ commit }, value) { setsocketllo({ commit }, value) {
//console.log("container "+value) //console.log("container "+value)
commit('setsocketid', value) commit("setsocketid", value);
}, },
setScriptCodlogAction({ commit }, value) { setScriptCodlogAction({ commit }, value) {
//console.log("container "+value) //console.log("container "+value)
commit('setScriptCodelog', value) commit("setScriptCodelog", value);
} },
} },
} };

Write Preview
Loading…
Cancel
Save