Lefteris
/
playground-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

ALL RAW

master
lefteris 4 years ago
parent
1701b085b4
commit
847044c148
3 changed files with 161 additions and 85 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/App.vue
  2. 17
      src/components/doclive/AdhocView.vue
  3. 215
      src/components/doclive/runLlo.vue

6
src/App.vue
View File

@ -157,4 +157,10 @@ body {
.menoutext { .menoutext {
font-family: "Lato", sans-serif !important; font-family: "Lato", sans-serif !important;
} }
thead {
background-color: #f8f9fa;
position: sticky;
top: 0;
}
</style> </style>

17
src/components/doclive/AdhocView.vue
View File

@ -100,7 +100,7 @@
> >
</vuetable> </vuetable>
</div> </div>
<br />
<div class="pagi"> <div class="pagi">
<div <div
v-if="history" v-if="history"
@ -433,11 +433,14 @@ export default {
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; var mongol = res.data.mongolength;
var mongoerror = res.data.mongolerror;
var appout = res.data.appout; var appout = res.data.appout;
var apperror = res.data.apperror; var apperror = res.data.apperror;
var redis = res.data.redis;
if (params == 1) { if (params == 1) {
this.chartOptions.series[0].data = [appout, apperror]; this.chartOptions.series[0].data = [appout, apperror];
this.chartOptions.series[1].data = [mongol, 0]; this.chartOptions.series[1].data = [mongol, 0];
this.chartOptions.series[2].data = [redis, 0];
} else { } else {
this.chartOptions.series.push( this.chartOptions.series.push(
{ {
@ -446,7 +449,11 @@ export default {
}, },
{ {
name: "MongoDB", name: "MongoDB",
data: [mongol, 0], data: [mongol, mongoerror],
},
{
name: "redis",
data: [redis, 0],
} }
); );
} }
@ -739,11 +746,11 @@ h2 {
} }
.highch { .highch {
padding-top: 50px; padding-top: 50px;
max-width: 900px; max-width: 100%;
} }
.table2 { .table2 {
min-height: 320px; min-height: 320px;
max-width: 900px; max-width: 100%;
overflow: auto; overflow: auto;
} }
.CodeMirror { .CodeMirror {
@ -752,7 +759,7 @@ h2 {
min-height: 500px; min-height: 500px;
} }
.codemirror { .codemirror {
min-height: 500px; min-height: 600px;
box-shadow: 3px 3px 10px 10px rgba(0, 0, 0, 0.281); box-shadow: 3px 3px 10px 10px rgba(0, 0, 0, 0.281);
margin-top: 10px; margin-top: 10px;
margin-bottom: 40px; margin-bottom: 40px;

215
src/components/doclive/runLlo.vue
View File

@ -2,30 +2,55 @@
<div> <div>
<div class="row"> <div class="row">
<div class="col-12 d-flex justify-content-center text-center"> <div class="col-12 d-flex justify-content-center text-center">
<h4 class="text-info">Search</h4> <!-- <h4 class="text-info">Search</h4> -->
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<div class="input-group input-group-sm sm-6"> <div class="input-group input-group-sm sm-6">
<!-- --------------------------------------------------------- -->
<!-- -------- date satrt----------------------------------- -->
<!-- --------------------------------------------------------- -->
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"> <div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button"> <div
Start date class="form-control custom-control custom-switch custom-control-inline"
</button> >
<input
type="checkbox"
class="custom-control-input"
id="log_logerror"
v-model="logcheck.error"
/>
<label class="custom-control-label" for="log_logerror"
>Error</label
>
</div> </div>
<date-picker
type="date" <div
autocomplete="off" class="form-control custom-control custom-switch custom-control-inline"
v-model="search.datestart"
format="YYYY-MM-DD"
lang="en"
> >
</date-picker> <input
type="checkbox"
class="custom-control-input"
id="log_output"
v-model="logcheck.output"
data-size="large"
data-toggle="toggle"
/>
<label class="custom-control-label" for="log_output"
>Output</label
>
</div>
<!-- <div
class="form-control custom-control custom-switch custom-control-inline"
>
<input
type="checkbox"
class="custom-control-input"
id="log_log"
v-model="logcheck.log"
/>
<label class="custom-control-label" for="log_log">Log</label>
</div> -->
</div> </div>
</div> </div>
</div> </div>
@ -36,7 +61,7 @@
<!-- --------------------------------------------------------- --> <!-- --------------------------------------------------------- -->
<!-- -------- date ----------------------------------- --> <!-- -------- date ----------------------------------- -->
<!-- --------------------------------------------------------- --> <!-- --------------------------------------------------------- -->
<div class="input-group input-group-sm mb-3"> <!-- <div class="input-group input-group-sm mb-3">
<div class="input-group-prepend"> <div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button"> <button class="btn btn-outline-secondary" type="button">
End date End date
@ -61,7 +86,7 @@
Go Go
</button> </button>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
<!-- col --> <!-- col -->
@ -70,49 +95,34 @@
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<div class="input-group input-group-sm sm-6"> <div class="input-group-append">
<div class="input-group-prepend"> <button
<div class="btn btn-outline-primary"
class="form-control custom-control custom-switch custom-control-inline" round
> type="button"
<input @click="Hotlog"
type="checkbox"
class="custom-control-input"
id="log_logerror"
v-model="logcheck.error"
/>
<label class="custom-control-label" for="log_logerror"
>Error</label
> >
Hot_log ALL
</button>
</div> </div>
<div class="input-group-append">
<div <button
class="form-control custom-control custom-switch custom-control-inline" class="btn btn-outline-primary"
> round
<input type="button"
type="checkbox" @click="mongorawf"
class="custom-control-input"
id="log_output"
v-model="logcheck.output"
data-size="large"
data-toggle="toggle"
/>
<label class="custom-control-label" for="log_output"
>Output</label
> >
</div> Hot_log MONGO RAW
</button>
<div <div class="input-group-append">
class="form-control custom-control custom-switch custom-control-inline" <button
class="btn btn-outline-primary"
round
type="button"
@click="allrawf"
> >
<input Hot_log RAW ALL
type="checkbox" </button>
class="custom-control-input"
id="log_log"
v-model="logcheck.log"
/>
<label class="custom-control-label" for="log_log">Log</label>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -131,17 +141,6 @@
Clear Clear
</button> </button>
</div> </div>
<div class="input-group-append">
<button
class="btn btn-outline-primary"
round
type="button"
@click="Hotlog"
>
Hot_log
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -204,7 +203,8 @@
> >
</vuetable> </vuetable>
</div> </div>
</div>
<div v-if="mongoraw" class="logs">
<h2>ON-event logs for MongoDB (RAW)</h2> <h2>ON-event logs for MongoDB (RAW)</h2>
<div class="input-group-append"> <div class="input-group-append">
<button <button
@ -227,6 +227,29 @@
</vuetable> </vuetable>
</div> </div>
</div> </div>
<div v-if="raw" class="logs">
<h2>ON-event logs (RAW)</h2>
<div class="input-group-append">
<button
class="btn btn-outline-primary"
round
type="button"
@click="scroll(3)"
>
Scroll to Bottom
</button>
</div>
<div id="rawlogs" class="table2">
<vuetable
ref="vuetable"
:api-mode="false"
:data="rawdata"
:fields="fields3"
:css="css.table"
>
</vuetable>
</div>
</div>
</div> </div>
<!-- row --> <!-- row -->
</div> </div>
@ -288,16 +311,17 @@ export default {
fields2: [ fields2: [
{ {
name: "t", name: "t",
title: "t", title: "Timestamp",
visible: true, visible: true,
}, },
{ {
name: "s", name: "s",
title: "s", title: "Severity",
visible: true, visible: true,
}, },
{ {
name: "c", name: "c",
title: "Components",
titleClass: "center aligned", titleClass: "center aligned",
}, },
{ {
@ -307,21 +331,39 @@ export default {
{ {
name: "ctx", name: "ctx",
visible: true, visible: true,
title: "ctx", title: "Context",
}, },
{ {
name: "msg", name: "msg",
title: "msg", title: "Message",
}, },
{ {
name: "attr", name: "attr",
title: "attr", title: "Attributes",
}, },
// 'timestamp', // 'timestamp',
// 'type', // 'type',
// 'process_id', // 'process_id',
// 'app_name', // 'app_name',
], ],
fields3: [
{
name: "_id",
title: "ID",
},
{
name: "container_name",
title: "Container Name",
},
{
name: "source",
title: "Source",
},
{
name: "log",
title: "Log",
},
],
log_path: [], log_path: [],
log_path_lenght: [], log_path_lenght: [],
log_path_lenghtstatus: [], log_path_lenghtstatus: [],
@ -349,6 +391,10 @@ export default {
logdata: [], logdata: [],
mongodata: [], mongodata: [],
localData: [], localData: [],
rawdata: [],
mongoraw: false,
allraw: false,
raw: false,
}; };
}, },
methods: { methods: {
@ -356,9 +402,12 @@ export default {
if (param == 1) { if (param == 1) {
var container = this.$el.querySelector("#applogs"); var container = this.$el.querySelector("#applogs");
container.scrollTop = container.scrollHeight; container.scrollTop = container.scrollHeight;
} else { } else if (param == 2) {
var container = this.$el.querySelector("#mongologs"); var container = this.$el.querySelector("#mongologs");
container.scrollTop = container.scrollHeight; container.scrollTop = container.scrollHeight;
} else {
var container = this.$el.querySelector("#rawlogs");
container.scrollTOp = container.scrollHeight;
} }
}, },
async getuser(token) { async getuser(token) {
@ -403,8 +452,16 @@ export default {
//call to start on event logs //call to start on event logs
this.onEvent = true; this.onEvent = true;
}, },
mongorawf() {
this.mongoraw = true;
},
allrawf() {
this.raw = true;
},
Clearlog() { Clearlog() {
this.onEvent = false; this.onEvent = false;
this.mongoraw = false;
this.raw = false;
}, },
logview(item) { logview(item) {
//console.log('path ' + JSON.stringify(item)) //console.log('path ' + JSON.stringify(item))
@ -600,7 +657,7 @@ 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(
"https://api-client.swarmlab.io:8088/?token=95bbe80eeae557be3e4e9fa25109bf2187f2c313" "https://api-client.swarmlab.io:8088/?token=06227b41168224d853a1863d3195cff946f15217"
).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
@ -859,6 +916,7 @@ export default {
log: val, log: val,
}); });
this.rawdata = val;
if (val.log.includes("app_name")) { if (val.log.includes("app_name")) {
var test = JSON.parse(val.log); var test = JSON.parse(val.log);
@ -894,6 +952,7 @@ export default {
max-height: 400px; max-height: 400px;
min-width: 100%; min-width: 100%;
} }
h2 { h2 {
background-color: dimgray; background-color: dimgray;
padding: 10px; padding: 10px;
@ -907,7 +966,7 @@ h2 {
} }
.rowlog { .rowlog {
display: flex; /* equal height of the children */ display: flex; /* equal height of the children */
min-height: 500px; min-height: 600px;
box-shadow: 3px 3px 10px 10px rgba(0, 0, 0, 0.281); box-shadow: 3px 3px 10px 10px rgba(0, 0, 0, 0.281);
margin-bottom: 40px; margin-bottom: 40px;
margin-top: 20px; margin-top: 20px;
@ -916,4 +975,8 @@ h2 {
.logs { .logs {
width: 100%; width: 100%;
} }
button {
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 0px;
}
</style> </style>

Write Preview
Loading…
Cancel
Save