add webclient

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

@@ -127,14 +127,14 @@ export default {
     hintOptions:{
       completeSingle: false
     },
-    keyMap: "sublime",
+    //keyMap: "sublime",
-    //keyMap: "vim",
+    keyMap: "vim",
     matchBrackets: true,
     showCursorWhenSelecting: true,
     indentUnit:this.ADOC_html_code,
     lineWrapping: true,
-    //theme: 'neat',
+    theme: 'neat',
-    theme: 'paraiso-light',
+    //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
 			})

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,34 +154,52 @@ export default {
         } else {
           regexoutput = false;
         }
+                console.log(message)
+                console.log(regexpath)
         if(regexoutput){
                //var logtmp = store.getters['pipelineLLO/getlog'];
-          var logtmp = message.log.message;
+               var logtmp = message.message
                 //var itemlog = ''
-          code += "";
+                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");
+                        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 += logtmp + ' ' + message.tailed_path
-              code += "\n";
+                            code += "\n"
                           // -------------------------------------
                           // send to grep rungrep to view 
                           // -------------------------------------
-              this.$root.$emit("GREP_view_data", code);
+                            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));
+        }
+        */
         });
       });
   },

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: '<span class="orange"></span>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],

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

@@ -228,8 +228,8 @@ export default {
       fields: [
         {
           name: "message",
-          title: "Log",
+          title: "Message",
-          width: "20%",
+          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: '<span class="orange"></span>App Name',
+          title: '<span class="orange"></span>App',
         },
         // 'timestamp',
         // 'type',
@@ -306,25 +307,27 @@ export default {
       ],
       fields3: [
         {
-          name: "container_id",
+          name: "_id",
-          title: "Container_id",
+          title: "_id",
           width: "13%",
+          visible: false,
         },
         {
-          name: "log",
+          name: "message",
-          title: "Log",
+          title: "message",
           width: "40%",
         },
 
         {
-          name: "container_name",
+          name: "tailed_path",
-          title: "Container Name",
+          title: "Name",
-          width: "17%",
+          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
+          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,
             type: '<div class="errtype" >' + "err" + "</div>",
             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 = '<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);
-      }
     },
   },
 };

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.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);
     },
     setRestapi({ commit }, value) {