Browse Source

Merge branch 'master' of git.swarmlab.io:Lefteris/playground-client

master
lefteris 3 years ago
parent
commit
a6a8188995
  1. 40
      VuetableCssConfig.js
  2. 162
      package-lock.json
  3. 12
      src/App.vue
  4. BIN
      src/assets/refresh.png
  5. 76
      src/components/doclive/AdhocView.vue
  6. 97
      src/components/doclive/runLlo.vue

40
VuetableCssConfig.js

@ -0,0 +1,40 @@
export default {
table: {
tableWrapper: '',
tableHeaderClass: 'mb-0',
tableBodyClass: 'mb-0',
tableClass: 'table table-bordered table-hover table-sm table-condensed whitespace',
loadingClass: 'loading',
ascendingIcon: 'fa fa-chevron-up',
descendingIcon: 'fa fa-chevron-down',
ascendingClass: 'sorted-asc',
descendingClass: 'sorted-desc',
sortableIcon: 'fa fa-sort',
detailRowClass: 'vuetable-detail-row',
handleIcon: 'fa fa-bars text-secondary',
renderIcon: function(classes, options) {
return `<i class="${classes.join(" ")}" ${options}></span>`;
}
},
paginationInfo: {
infoClass: 'pull-left float-left align-self-end'
},
pagination: {
wrapperClass: "pagination pull-right float-right",
activeClass: "active",
disabledClass: "disabled",
pageClass: "btn btn-border",
linkClass: "btn btn-border",
paginationClass: "pagination",
paginationInfoClass: "float-left",
//pagination-info-class=""
//pagination-component-class=""
dropdownClass: "form-control",
icons: {
first: "",
prev: "",
next: "",
last: ""
}
}
}

162
package-lock.json

@ -1781,6 +1781,87 @@
"webpack-chain": "^6.4.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.2.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
"integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
"@vue/cli-shared-utils": {
@ -10744,87 +10825,6 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.2.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
"integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-socket.io-extended": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/vue-socket.io-extended/-/vue-socket.io-extended-4.0.5.tgz",

12
src/App.vue

@ -157,4 +157,16 @@ body {
.menoutext {
font-family: "Lato", sans-serif !important;
}
.col-4 {
max-width: 25%;
flex: 0 0 25%;
}
.col-3 {
max-width: 35%;
flex: 0 0 35%;
}
.col-5 {
max-width: 40%;
flex: 0 0 40%;
}
</style>

BIN
src/assets/refresh.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

76
src/components/doclive/AdhocView.vue

@ -43,13 +43,22 @@
/>
</div>
<div v-if="socketonline" class="selec">
<label class="filters" for="list">Pick a service:</label>
<label class="filters" for="list">Pick a service:</label> <br />
<select class="filters" id="list" v-model="selected">
<option selected value="All">All</option>
<option v-for="item in this.items" v-bind:value="item.name">
{{ item.name }}
</option>
</select>
<!-- <img
id="image"
src="../../assets/refresh.png"
alt=""
@click="getServices"
/> -->
<button id="btn" v-on:click="getServices">
<img id="image" src="../../assets/refresh.png" />
</button>
</div>
<button
type="button"
@ -461,38 +470,25 @@ export default {
methods: {
async callback(params) {
var res = await axios.get("http://localhost:3000/length");
var mongol = res.data.mongolength;
var mongoerror = res.data.mongolerror;
var appout = res.data.appout;
var apperror = res.data.apperror;
var redis = res.data.redis;
var dumout = res.data.dumout;
var dumerr = res.data.dumerr;
//new code
if (params == 1) {
this.chartOptions.series[0].data = [appout, apperror];
this.chartOptions.series[1].data = [mongol, 0];
this.chartOptions.series[2].data = [redis, 0];
this.chartOptions.series[3].data = [dumout, dumerr];
this.chartOptions.series.splice(0, this.chartOptions.series.length);
res["data"].forEach((val) => {
this.chartOptions.series.push({
name: val.name,
data: [val.lengtho, val.lengthe],
});
});
} else {
this.chartOptions.series.push(
{
name: "Readmongo service",
data: [appout, apperror],
},
{
name: "MongoDB",
data: [mongol, mongoerror],
},
{
name: "Redis",
data: [redis, 0],
},
{
name: "Dummy",
data: [dumout, dumerr],
}
);
console.log(res["data"]);
res["data"].forEach((val) => {
this.chartOptions.series.push({
name: val.name,
data: [val.lengtho, val.lengthe],
});
});
}
//new code end
},
socketconnect() {
//asd
@ -510,6 +506,7 @@ export default {
}
},
async getServices() {
this.items.splice(0, this.items.length);
await axios.get("http://localhost:3000/services").then((res) => {
res.data.forEach((val) => {
//console.log(val);
@ -833,7 +830,26 @@ h2 {
margin: 0px 0px 10px 10px;
}
.selec {
/* min-width: 100%; */
}
.filters {
margin: 0px 0px 0px 10px;
max-width: 80%;
}
#image {
max-width: 20px;
max-height: 20px;
/* margin: 0; */
padding: 0;
/* border-radius: 2rem; */
}
#btn {
margin: 0 0 0 10px;
padding: 0;
max-width: 28px;
max-height: 28px;
background: rgb(158, 226, 226);
/* border-radius: 1rem; */
}
</style>

97
src/components/doclive/runLlo.vue

@ -483,6 +483,14 @@ export default {
console.log("User: " + data.user + " Token: " + data.token);
this.$socket.client.emit("onevent", data.user);
},
IsJsonString(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
},
async checktoken(value) {
try {
var token = value;
@ -744,7 +752,11 @@ export default {
created() {
//var logintoken = new URL(location.href).searchParams.get("token");
var logintoken = new URL(
<<<<<<< HEAD
"https://api-client.swarmlab.io:8088/?token=08b677fbc99c39e100b5b64e90e1d7d77c3e3e7c"
=======
"https://api-client.swarmlab.io:8088/?token=7d01aaaf1c71ab27e6041fb157c9e46077240741"
>>>>>>> b797d1044cf18e8173e1cfbe39db8c644e33ccb2
).searchParams.get("token");
this.logintoken = logintoken;
// === We get the user + check for the token if exists
@ -909,36 +921,7 @@ export default {
*
*/
/*
async adhocEmit(val) {
console.log("socket from server "+JSON.stringify(val))
this.issocket = 'open'
this.$wait.start('myRunInstance1');
// render begin
this.tryLLO = 'on'
if(this.firstbootstrap === 0 ){
await this.bootsrapllo();
this.firstbootstrap = 1
}
var output = log.data.out
var mydinfunction = `
<div class="row">
<b-col class="" cols="12" sm="12" md="12" >
${output}
</b-col>
</div>`
try {
let divascii = document.createElement('div');
divascii.setAttribute("class", "container-fluid w-100 p-3 llotry")
divascii.innerHTML = mydinfunction
this.addtask(divascii);
}catch (ex) {
console.log(" logi error1 "+JSON.stringify(ex))
return
}
this.$wait.end('myRunInstance1');
},
*/
*/
async logdata(val) {
console.log(" socket from logdata " + JSON.stringify(val));
// -------------------------------------
@ -976,15 +959,6 @@ export default {
path: item,
});
}
/*
this.log_path_lenght[item] = ltmp.filter(function(item1){
if (item1.tailed_path === item) {
return true;
} else {
return false;
}
}).length;/
*/
//console.log('l2 '+ this.log_path_lenght[item] )
}
//console.log('l1 '+ JSON.stringify(this.log_path))
@ -995,11 +969,6 @@ export default {
// Lefos --- socket event to add the data to the right tables
async logsend(val) {
// ==== LEFOS
// console.log(" socket message " + JSON.stringify(val));
// var log = val.log;
// console.log(" LOG: " + JSON.parse(JSON.stringify(log)));
//Check which data array to put as data to the tables
this.checklogs();
@ -1009,10 +978,12 @@ export default {
val.container_id = '<div class="conid">' + val.container_id + "</div>";
// console.log("raw before.. " + val.log);
// A bit of edit to fit perfectly into the table
val.log = val.log.replace(/,/g, ", ");
val.log = val.log.replace(/":/g, '": ');
// console.log("raw after .. " + val.log);
// Change color of source for ALL RAW table to be able to see the error logs easy
if (val.source == "stdout") {
val.source = '<div class="outtype" >' + val.source + "</div>";
@ -1026,8 +997,9 @@ export default {
this.rawdata.push(val);
// Check if the log is by a node_service and change color of the type field
if (val.log.includes("app_name")) {
if (val.tag.includes("node") && this.IsJsonString(val.log)) {
var test = JSON.parse(val.log);
test.app_name = val.container_name;
if (test.type == "out") {
test.type = '<div class="outtype" >' + test.type + "</div>";
this.localDataOut.push(test);
@ -1037,7 +1009,34 @@ export default {
}
this.localData.push(test);
} //check if the log is by the mongodb and change color
else if (val.container_name == "/mongo") {
else if (val.tag.includes("node") && !this.IsJsonString(val.log)) {
var tmp2;
var type;
if (val.source.includes("stdout")) {
// console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
//type = '<div class="outtype" >' + val.source + "</div>";
tmp2 = {
message: val.log,
timestamp: val.time,
type: '<div class="outtype" >' + "out" + "</div>",
process_id: "-",
app_name: val.container_name,
};
this.localDataOut.push(tmp2);
this.localData.push(tmp2);
} else if (val.source.includes("stderr")) {
//type = '<div class="outtype" >' + val.source + "</div>";
tmp2 = {
message: val.log,
timestamp: val.time,
type: '<div class="errtype" >' + "err" + "</div>",
process_id: "-",
app_name: val.container_name,
};
this.localDataError.push(tmp2);
this.localData.push(tmp2);
}
} else if (val.tag.includes("mongodb") && this.IsJsonString(val.log)) {
// ========== push data for raw table ============
var tmp = JSON.parse(val.log);
@ -1064,13 +1063,13 @@ export default {
timestamp: time,
type: "<div class= 'outtype'>out</div>",
process_id: "Unknown",
app_name: "Mongo",
app_name: val.container_name,
};
this.localDataOut.push(tmp);
this.localData.push(tmp);
// console.log("HEY " + JSON.stringify(test));
} else if (val.container_name == "/redisserver") {
} else if (val.tag.includes("redis")) {
var tmplog = val;
//timestamp
var time = tmplog.time;
@ -1079,7 +1078,7 @@ export default {
timestamp: time,
type: "<div class= 'outtype'>out</div>",
process_id: "Unknown",
app_name: "redis",
app_name: val.container_name,
};
this.localDataOut.push(tmp);

Loading…
Cancel
Save