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. 95
      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-chain": "^6.4.0",
"webpack-dev-server": "^3.11.0", "webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2" "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": { "@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": { "vue-socket.io-extended": {
"version": "4.0.5", "version": "4.0.5",
"resolved": "https://registry.npmjs.org/vue-socket.io-extended/-/vue-socket.io-extended-4.0.5.tgz", "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 { .menoutext {
font-family: "Lato", sans-serif !important; 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> </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>
<div v-if="socketonline" class="selec"> <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"> <select class="filters" id="list" v-model="selected">
<option selected value="All">All</option> <option selected value="All">All</option>
<option v-for="item in this.items" v-bind:value="item.name"> <option v-for="item in this.items" v-bind:value="item.name">
{{ item.name }} {{ item.name }}
</option> </option>
</select> </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> </div>
<button <button
type="button" type="button"
@ -461,38 +470,25 @@ export default {
methods: { methods: {
async callback(params) { async callback(params) {
var res = await axios.get("http://localhost:3000/length"); var res = await axios.get("http://localhost:3000/length");
var mongol = res.data.mongolength; //new code
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;
if (params == 1) { if (params == 1) {
this.chartOptions.series[0].data = [appout, apperror]; this.chartOptions.series.splice(0, this.chartOptions.series.length);
this.chartOptions.series[1].data = [mongol, 0]; res["data"].forEach((val) => {
this.chartOptions.series[2].data = [redis, 0]; this.chartOptions.series.push({
this.chartOptions.series[3].data = [dumout, dumerr]; name: val.name,
data: [val.lengtho, val.lengthe],
});
});
} else { } else {
this.chartOptions.series.push( console.log(res["data"]);
{ res["data"].forEach((val) => {
name: "Readmongo service", this.chartOptions.series.push({
data: [appout, apperror], name: val.name,
}, data: [val.lengtho, val.lengthe],
{ });
name: "MongoDB", });
data: [mongol, mongoerror],
},
{
name: "Redis",
data: [redis, 0],
},
{
name: "Dummy",
data: [dumout, dumerr],
}
);
} }
//new code end
}, },
socketconnect() { socketconnect() {
//asd //asd
@ -510,6 +506,7 @@ export default {
} }
}, },
async getServices() { async getServices() {
this.items.splice(0, this.items.length);
await axios.get("http://localhost:3000/services").then((res) => { await axios.get("http://localhost:3000/services").then((res) => {
res.data.forEach((val) => { res.data.forEach((val) => {
//console.log(val); //console.log(val);
@ -833,7 +830,26 @@ h2 {
margin: 0px 0px 10px 10px; margin: 0px 0px 10px 10px;
} }
.selec {
/* min-width: 100%; */
}
.filters { .filters {
margin: 0px 0px 0px 10px; 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> </style>

95
src/components/doclive/runLlo.vue

@ -483,6 +483,14 @@ export default {
console.log("User: " + data.user + " Token: " + data.token); console.log("User: " + data.user + " Token: " + data.token);
this.$socket.client.emit("onevent", data.user); this.$socket.client.emit("onevent", data.user);
}, },
IsJsonString(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
},
async checktoken(value) { async checktoken(value) {
try { try {
var token = value; var token = value;
@ -744,7 +752,11 @@ export default {
created() { created() {
//var logintoken = new URL(location.href).searchParams.get("token"); //var logintoken = new URL(location.href).searchParams.get("token");
var logintoken = new URL( var logintoken = new URL(
<<<<<<< HEAD
"https://api-client.swarmlab.io:8088/?token=08b677fbc99c39e100b5b64e90e1d7d77c3e3e7c" "https://api-client.swarmlab.io:8088/?token=08b677fbc99c39e100b5b64e90e1d7d77c3e3e7c"
=======
"https://api-client.swarmlab.io:8088/?token=7d01aaaf1c71ab27e6041fb157c9e46077240741"
>>>>>>> b797d1044cf18e8173e1cfbe39db8c644e33ccb2
).searchParams.get("token"); ).searchParams.get("token");
this.logintoken = logintoken; this.logintoken = logintoken;
// === We get the user + check for the token if exists // === We get the user + check for the token if exists
@ -909,35 +921,6 @@ 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) { async logdata(val) {
console.log(" socket from logdata " + JSON.stringify(val)); console.log(" socket from logdata " + JSON.stringify(val));
@ -976,15 +959,6 @@ export default {
path: item, 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('l2 '+ this.log_path_lenght[item] )
} }
//console.log('l1 '+ JSON.stringify(this.log_path)) //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 // Lefos --- socket event to add the data to the right tables
async logsend(val) { async logsend(val) {
// ==== LEFOS // ==== 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 //Check which data array to put as data to the tables
this.checklogs(); this.checklogs();
@ -1009,10 +978,12 @@ export default {
val.container_id = '<div class="conid">' + val.container_id + "</div>"; val.container_id = '<div class="conid">' + val.container_id + "</div>";
// console.log("raw before.. " + val.log); // console.log("raw before.. " + val.log);
// A bit of edit to fit perfectly into the table // A bit of edit to fit perfectly into the table
val.log = val.log.replace(/,/g, ", "); val.log = val.log.replace(/,/g, ", ");
val.log = val.log.replace(/":/g, '": '); val.log = val.log.replace(/":/g, '": ');
// console.log("raw after .. " + val.log); // console.log("raw after .. " + val.log);
// Change color of source for ALL RAW table to be able to see the error logs easy // Change color of source for ALL RAW table to be able to see the error logs easy
if (val.source == "stdout") { if (val.source == "stdout") {
val.source = '<div class="outtype" >' + val.source + "</div>"; val.source = '<div class="outtype" >' + val.source + "</div>";
@ -1026,8 +997,9 @@ export default {
this.rawdata.push(val); this.rawdata.push(val);
// Check if the log is by a node_service and change color of the type field // 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); var test = JSON.parse(val.log);
test.app_name = val.container_name;
if (test.type == "out") { if (test.type == "out") {
test.type = '<div class="outtype" >' + test.type + "</div>"; test.type = '<div class="outtype" >' + test.type + "</div>";
this.localDataOut.push(test); this.localDataOut.push(test);
@ -1037,7 +1009,34 @@ export default {
} }
this.localData.push(test); this.localData.push(test);
} //check if the log is by the mongodb and change color } //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 ============ // ========== push data for raw table ============
var tmp = JSON.parse(val.log); var tmp = JSON.parse(val.log);
@ -1064,13 +1063,13 @@ export default {
timestamp: time, timestamp: time,
type: "<div class= 'outtype'>out</div>", type: "<div class= 'outtype'>out</div>",
process_id: "Unknown", process_id: "Unknown",
app_name: "Mongo", app_name: val.container_name,
}; };
this.localDataOut.push(tmp); this.localDataOut.push(tmp);
this.localData.push(tmp); this.localData.push(tmp);
// console.log("HEY " + JSON.stringify(test)); // console.log("HEY " + JSON.stringify(test));
} else if (val.container_name == "/redisserver") { } else if (val.tag.includes("redis")) {
var tmplog = val; var tmplog = val;
//timestamp //timestamp
var time = tmplog.time; var time = tmplog.time;
@ -1079,7 +1078,7 @@ export default {
timestamp: time, timestamp: time,
type: "<div class= 'outtype'>out</div>", type: "<div class= 'outtype'>out</div>",
process_id: "Unknown", process_id: "Unknown",
app_name: "redis", app_name: val.container_name,
}; };
this.localDataOut.push(tmp); this.localDataOut.push(tmp);

Loading…
Cancel
Save