From d9acd807d12efe72add705402ba8d99cf0a4abb5 Mon Sep 17 00:00:00 2001 From: zeus Date: Wed, 24 Nov 2021 00:01:41 +0200 Subject: [PATCH] add webclient --- .../src/components/docgrep/GrepView.vue | 9 +- .../src/components/docgrep/rungrep.vue | 78 +++++++----- .../src/components/doclive/AdhocView.vue | 13 +- .../src/components/doclive/runLlo.vue | 116 ++++-------------- .../src/store/modules/create_pipelineLLO.js | 8 +- 5 files changed, 85 insertions(+), 139 deletions(-) diff --git a/playground-client/src/components/docgrep/GrepView.vue b/playground-client/src/components/docgrep/GrepView.vue index bb54ad9..d6455ed 100644 --- a/playground-client/src/components/docgrep/GrepView.vue +++ b/playground-client/src/components/docgrep/GrepView.vue @@ -127,14 +127,14 @@ export default { hintOptions:{ completeSingle: false }, - keyMap: "sublime", - //keyMap: "vim", + //keyMap: "sublime", + keyMap: "vim", matchBrackets: true, showCursorWhenSelecting: true, indentUnit:this.ADOC_html_code, lineWrapping: true, - //theme: 'neat', - theme: 'paraiso-light', + theme: 'neat', + //theme: 'paraiso-light', refresh:true, readOnly: true, autofocus: false, @@ -190,6 +190,7 @@ export default { this.$root.$on('GREP_view_data', (v) => { this.$nextTick(function () { + console.log(v) this.code += v this.tryConsole=true }) diff --git a/playground-client/src/components/docgrep/rungrep.vue b/playground-client/src/components/docgrep/rungrep.vue index bc5224d..12fa3a5 100644 --- a/playground-client/src/components/docgrep/rungrep.vue +++ b/playground-client/src/components/docgrep/rungrep.vue @@ -144,10 +144,8 @@ export default { mounted() { this.$root.$on("GREP_on_data", (message) => { 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)) var code = ""; var regexoutput = false; @@ -156,36 +154,54 @@ export default { } else { regexoutput = false; } - if (regexoutput) { - //var logtmp = store.getters['pipelineLLO/getlog']; - var logtmp = message.log.message; - //var itemlog = '' - code += ""; - //itemlog = logtmp.filter(item1 => item1.tailed_path === path); - //console.log('logtmp22 '+ JSON.stringify(itemlog)) - for (let regex of regexpath) { - //console.log(regex.regex) - if (regex.case) { - var re = new RegExp(regex.regex, "i"); - //console.log("true"); - } else { - var re = new RegExp(regex.regex); - //console.log("false"); - } - if (re.test(logtmp)) { - code += logtmp + " " + message.log.tailed_path; - code += "\n"; - // ------------------------------------- - // send to grep rungrep to view - // ------------------------------------- - this.$root.$emit("GREP_view_data", code); - } else { - console.log("Not found"); - } + console.log(message) + console.log(regexpath) + if(regexoutput){ + //var logtmp = store.getters['pipelineLLO/getlog']; + var logtmp = message.message + //var itemlog = '' + code += '' + //itemlog = logtmp.filter(item1 => item1.tailed_path === path); + //console.log('logtmp22 '+ JSON.stringify(itemlog)) + for (let regex of regexpath) { + //console.log(regex.regex) + if( regex.case){ + var re = new RegExp(regex.regex, 'i'); + //console.log("true"); + }else{ + var re = new RegExp(regex.regex); + //console.log("false"); + } + if (re.test(logtmp)) { + code += logtmp + ' ' + message.tailed_path + code += "\n" + // ------------------------------------- + // send to grep rungrep to view + // ------------------------------------- + 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() { this.$root.$off("GREP_on_data"); diff --git a/playground-client/src/components/doclive/AdhocView.vue b/playground-client/src/components/doclive/AdhocView.vue index 6819855..2780e0d 100644 --- a/playground-client/src/components/doclive/AdhocView.vue +++ b/playground-client/src/components/doclive/AdhocView.vue @@ -270,10 +270,10 @@ export default { fields: [ { name: "message", - title: "Log", + title: "Message", sortField: "message", visible: true, - width: "45%%", + width: "35%%", }, { name: "timestamp", @@ -287,19 +287,21 @@ export default { // sortField: "type", titleClass: "center aligned", width: "10%", + visible: false, }, { name: "process_id", title: "P_ID", visible: true, width: "5%", + visible: false, }, { name: "app_name", visible: true, sortField: "app_name", title: 'App Name', - width: "15%", + width: "25%", }, // 'timestamp', // 'type', @@ -472,9 +474,10 @@ export default { async callback(params) { var res = await axios.get(process.env.VUE_APP_BASE_SERVER_URL + "length"); //new code + // console.log(res); if (params == 1) { this.chartOptions.series.splice(0, this.chartOptions.series.length); - res["data"].forEach((val) => { + res.data["data"].forEach((val) => { this.chartOptions.series.push({ name: val.name, data: [val.lengtho, val.lengthe], @@ -482,7 +485,7 @@ export default { }); } else { console.log(res["data"]); - res["data"].forEach((val) => { + res.data["data"].forEach((val) => { this.chartOptions.series.push({ name: val.name, data: [val.lengtho, val.lengthe], diff --git a/playground-client/src/components/doclive/runLlo.vue b/playground-client/src/components/doclive/runLlo.vue index b75afa5..0cc3e63 100644 --- a/playground-client/src/components/doclive/runLlo.vue +++ b/playground-client/src/components/doclive/runLlo.vue @@ -228,8 +228,8 @@ export default { fields: [ { name: "message", - title: "Log", - width: "20%", + title: "Message", + width: "40%", visible: true, dataClass: "center aligned", }, @@ -243,15 +243,16 @@ export default { name: "type", titleClass: "center aligned", width: "10%", + visible: false }, { name: "process_id", - visible: true, + visible: false, }, { name: "app_name", visible: true, - title: 'App Name', + title: 'App', }, // 'timestamp', // 'type', @@ -306,25 +307,27 @@ export default { ], fields3: [ { - name: "container_id", - title: "Container_id", + name: "_id", + title: "_id", width: "13%", + visible: false, }, { - name: "log", - title: "Log", + name: "message", + title: "message", width: "40%", }, { - name: "container_name", - title: "Container Name", - width: "17%", + name: "tailed_path", + title: "Name", + width: "27%", }, { name: "source", title: "Source", width: "8%", + visible: false, }, { name: "time", @@ -808,8 +811,8 @@ export default { // 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, '": '); + //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 @@ -823,95 +826,18 @@ export default { this.countIndex++; 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 - 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 = '
' + test.type + "
"; - this.localDataOut.push(test); - } else if (test.type == "err") { - test.type = '
' + test.type + "
"; - 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 = '
' + val.source + "
"; - tmp2 = { - message: val.log, - timestamp: val.time, - type: '
' + "out" + "
", - process_id: "-", - app_name: val.container_name, - }; - this.localDataOut.push(tmp2); - this.localData.push(tmp2); - } else if (val.source.includes("stderr")) { - //type = '
' + val.source + "
"; - tmp2 = { - message: val.log, + var tmp2 = { + message: val.message, timestamp: val.time, type: '
' + "err" + "
", process_id: "-", - app_name: val.container_name, + app_name: val.tailed_path, }; 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); - - if (tmp.s == "I") { - tmp.s = '
' + tmp.s + "
"; - this.mongoout.push(tmp); - } else { - tmp.s = '
' + tmp.s + "
"; - this.mongoerror.push(tmp); - } - tmp.t = '
' + JSON.stringify(tmp.t) + "
"; - 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: "
out
", - 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: "
out
", - process_id: "Unknown", - app_name: val.container_name, - }; - - this.localDataOut.push(tmp); - this.localData.push(tmp); - } }, }, }; diff --git a/playground-client/src/store/modules/create_pipelineLLO.js b/playground-client/src/store/modules/create_pipelineLLO.js index 5474c60..02e1993 100644 --- a/playground-client/src/store/modules/create_pipelineLLO.js +++ b/playground-client/src/store/modules/create_pipelineLLO.js @@ -97,11 +97,11 @@ export default { commit("rmmongolog"); }, addlog({ commit }, value) { - //console.log("container "+value) + //console.log(value) var tt = {}; - tt.message = value.log.log.message; - tt.tailed_path = value.log.log.tailed_path; - tt.date = value.log.date; + tt.message = value.message; + tt.tailed_path = value.tailed_path; + tt.date = value.time; commit("add_log", tt); }, setRestapi({ commit }, value) {