Browse Source

add webclient

master
zeus 3 years ago
parent
commit
d9acd807d1
  1. 9
      playground-client/src/components/docgrep/GrepView.vue
  2. 78
      playground-client/src/components/docgrep/rungrep.vue
  3. 13
      playground-client/src/components/doclive/AdhocView.vue
  4. 116
      playground-client/src/components/doclive/runLlo.vue
  5. 8
      playground-client/src/store/modules/create_pipelineLLO.js

9
playground-client/src/components/docgrep/GrepView.vue

@ -127,14 +127,14 @@ export default {
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,
@ -190,6 +190,7 @@ export default {
this.$root.$on('GREP_view_data', (v) => { this.$root.$on('GREP_view_data', (v) => {
this.$nextTick(function () { this.$nextTick(function () {
console.log(v)
this.code += v this.code += v
this.tryConsole=true this.tryConsole=true
}) })

78
playground-client/src/components/docgrep/rungrep.vue

@ -144,10 +144,8 @@ export default {
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.tailed_path);
);
//console.log('regexpath2 '+ JSON.stringify(regexpath)) //console.log('regexpath2 '+ JSON.stringify(regexpath))
var code = ""; var code = "";
var regexoutput = false; var regexoutput = false;
@ -156,36 +154,54 @@ export default {
} else { } else {
regexoutput = false; regexoutput = false;
} }
if (regexoutput) { console.log(message)
//var logtmp = store.getters['pipelineLLO/getlog']; console.log(regexpath)
var logtmp = message.log.message; if(regexoutput){
//var itemlog = '' //var logtmp = store.getters['pipelineLLO/getlog'];
code += ""; var logtmp = message.message
//itemlog = logtmp.filter(item1 => item1.tailed_path === path); //var itemlog = ''
//console.log('logtmp22 '+ JSON.stringify(itemlog)) code += ''
for (let regex of regexpath) { //itemlog = logtmp.filter(item1 => item1.tailed_path === path);
//console.log(regex.regex) //console.log('logtmp22 '+ JSON.stringify(itemlog))
if (regex.case) { for (let regex of regexpath) {
var re = new RegExp(regex.regex, "i"); //console.log(regex.regex)
//console.log("true"); if( regex.case){
} else { var re = new RegExp(regex.regex, 'i');
var re = new RegExp(regex.regex); //console.log("true");
//console.log("false"); }else{
} var re = new RegExp(regex.regex);
if (re.test(logtmp)) { //console.log("false");
code += logtmp + " " + message.log.tailed_path; }
code += "\n"; if (re.test(logtmp)) {
// ------------------------------------- code += logtmp + ' ' + message.tailed_path
// send to grep rungrep to view code += "\n"
// ------------------------------------- // -------------------------------------
this.$root.$emit("GREP_view_data", code); // send to grep rungrep to view
} else { // -------------------------------------
console.log("Not found"); this.$root.$emit('GREP_view_data',code)
} } else {
console.log("Not found");
}
}
} }
//rootapostolos
/*
if (message) {
console.log("code")
console.log(message)
var tmp2 = {
message: message.message,
timestamp: message.time,
dprocess_id: message._id,
app_name: message.tailed_path,
};
console.log(message)
this.$root.$emit("GREP_view_data", JSON.stringify(tmp2));
} }
*/
});
}); });
});
}, },
beforeDestroy() { beforeDestroy() {
this.$root.$off("GREP_on_data"); this.$root.$off("GREP_on_data");

13
playground-client/src/components/doclive/AdhocView.vue

@ -270,10 +270,10 @@ export default {
fields: [ fields: [
{ {
name: "message", name: "message",
title: "Log", title: "Message",
sortField: "message", sortField: "message",
visible: true, visible: true,
width: "45%%", width: "35%%",
}, },
{ {
name: "timestamp", name: "timestamp",
@ -287,19 +287,21 @@ export default {
// sortField: "type", // sortField: "type",
titleClass: "center aligned", titleClass: "center aligned",
width: "10%", width: "10%",
visible: false,
}, },
{ {
name: "process_id", name: "process_id",
title: "P_ID", title: "P_ID",
visible: true, visible: true,
width: "5%", width: "5%",
visible: false,
}, },
{ {
name: "app_name", name: "app_name",
visible: true, visible: true,
sortField: "app_name", sortField: "app_name",
title: '<span class="orange"></span>App Name', title: '<span class="orange"></span>App Name',
width: "15%", width: "25%",
}, },
// 'timestamp', // 'timestamp',
// 'type', // 'type',
@ -472,9 +474,10 @@ export default {
async callback(params) { async callback(params) {
var res = await axios.get(process.env.VUE_APP_BASE_SERVER_URL + "length"); var res = await axios.get(process.env.VUE_APP_BASE_SERVER_URL + "length");
//new code //new code
// console.log(res);
if (params == 1) { if (params == 1) {
this.chartOptions.series.splice(0, this.chartOptions.series.length); this.chartOptions.series.splice(0, this.chartOptions.series.length);
res["data"].forEach((val) => { res.data["data"].forEach((val) => {
this.chartOptions.series.push({ this.chartOptions.series.push({
name: val.name, name: val.name,
data: [val.lengtho, val.lengthe], data: [val.lengtho, val.lengthe],
@ -482,7 +485,7 @@ export default {
}); });
} else { } else {
console.log(res["data"]); console.log(res["data"]);
res["data"].forEach((val) => { res.data["data"].forEach((val) => {
this.chartOptions.series.push({ this.chartOptions.series.push({
name: val.name, name: val.name,
data: [val.lengtho, val.lengthe], data: [val.lengtho, val.lengthe],

116
playground-client/src/components/doclive/runLlo.vue

@ -228,8 +228,8 @@ export default {
fields: [ fields: [
{ {
name: "message", name: "message",
title: "Log", title: "Message",
width: "20%", width: "40%",
visible: true, visible: true,
dataClass: "center aligned", dataClass: "center aligned",
}, },
@ -243,15 +243,16 @@ export default {
name: "type", name: "type",
titleClass: "center aligned", titleClass: "center aligned",
width: "10%", width: "10%",
visible: false
}, },
{ {
name: "process_id", name: "process_id",
visible: true, visible: false,
}, },
{ {
name: "app_name", name: "app_name",
visible: true, visible: true,
title: '<span class="orange"></span>App Name', title: '<span class="orange"></span>App',
}, },
// 'timestamp', // 'timestamp',
// 'type', // 'type',
@ -306,25 +307,27 @@ export default {
], ],
fields3: [ fields3: [
{ {
name: "container_id", name: "_id",
title: "Container_id", title: "_id",
width: "13%", width: "13%",
visible: false,
}, },
{ {
name: "log", name: "message",
title: "Log", title: "message",
width: "40%", width: "40%",
}, },
{ {
name: "container_name", name: "tailed_path",
title: "Container Name", title: "Name",
width: "17%", width: "27%",
}, },
{ {
name: "source", name: "source",
title: "Source", title: "Source",
width: "8%", width: "8%",
visible: false,
}, },
{ {
name: "time", name: "time",
@ -808,8 +811,8 @@ export default {
// 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
@ -823,95 +826,18 @@ export default {
this.countIndex++; this.countIndex++;
this.rawdata.push(val); this.rawdata.push(val);
// grep
this.$root.$emit("GREP_on_data", val);
// Check if the log is by a node_service and change color of the type field var tmp2 = {
if (val.tag.includes("node") && this.IsJsonString(val.log)) { message: val.message,
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);
} else if (test.type == "err") {
test.type = '<div class="errtype" >' + test.type + "</div>";
this.localDataError.push(test);
}
this.localData.push(test);
} //check if the log is by the mongodb and change color
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, timestamp: val.time,
type: '<div class="errtype" >' + "err" + "</div>", type: '<div class="errtype" >' + "err" + "</div>",
process_id: "-", process_id: "-",
app_name: val.container_name, app_name: val.tailed_path,
}; };
this.localDataError.push(tmp2); this.localDataError.push(tmp2);
this.localData.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);
if (tmp.s == "I") {
tmp.s = '<div class="outtype" >' + tmp.s + "</div>";
this.mongoout.push(tmp);
} else {
tmp.s = '<div class="errtype" >' + tmp.s + "</div>";
this.mongoerror.push(tmp);
}
tmp.t = '<div class="mongod">' + JSON.stringify(tmp.t) + "</div>";
this.mongodata.push(tmp);
// ===========
//msg
var tmplog = JSON.parse(val.log);
var msg2 = tmplog.msg;
//timestam
var time = tmplog.t;
time = time.$date;
var tmp = {
message: msg2,
timestamp: time,
type: "<div class= 'outtype'>out</div>",
process_id: "Unknown",
app_name: val.container_name,
};
this.localDataOut.push(tmp);
this.localData.push(tmp);
// console.log("HEY " + JSON.stringify(test));
} else if (val.tag.includes("redis")) {
var tmplog = val;
//timestamp
var time = tmplog.time;
var tmp = {
message: tmplog.log,
timestamp: time,
type: "<div class= 'outtype'>out</div>",
process_id: "Unknown",
app_name: val.container_name,
};
this.localDataOut.push(tmp);
this.localData.push(tmp);
}
}, },
}, },
}; };

8
playground-client/src/store/modules/create_pipelineLLO.js

@ -97,11 +97,11 @@ export default {
commit("rmmongolog"); commit("rmmongolog");
}, },
addlog({ commit }, value) { addlog({ commit }, value) {
//console.log("container "+value) //console.log(value)
var tt = {}; var tt = {};
tt.message = value.log.log.message; tt.message = value.message;
tt.tailed_path = value.log.log.tailed_path; tt.tailed_path = value.tailed_path;
tt.date = value.log.date; tt.date = value.time;
commit("add_log", tt); commit("add_log", tt);
}, },
setRestapi({ commit }, value) { setRestapi({ commit }, value) {

Loading…
Cancel
Save