6 changed files with 713 additions and 597 deletions
@ -1,216 +1,205 @@ |
|||||
<template> |
<template> |
||||
<div |
<div class="runGrep"> |
||||
class="runGrep" |
<div class="row"> |
||||
> |
<div class="col-12"> |
||||
|
<div class="input-group mb-2"> |
||||
<div class="row"> |
<div class="input-group-prepend"> |
||||
<div class="col-12"> |
<div class="input-group-text">/</div> |
||||
<div class="input-group mb-2"> |
</div> |
||||
|
|
||||
<div class="input-group-prepend"> |
<input |
||||
<div class="input-group-text">/</div> |
type="text" |
||||
</div> |
class="form-control" |
||||
|
placeholder="regex" |
||||
<input type="text" class="form-control" placeholder="regex" |
v-model="search.regex" |
||||
v-model="search.regex" |
/> |
||||
|
|
||||
|
<div class="input-group-append"> |
||||
|
<div class="input-group-text">/</div> |
||||
|
|
||||
|
<div class="form-control custom-switch"> |
||||
|
<input |
||||
|
id="customSwitch1" |
||||
|
type="checkbox" |
||||
|
class="custom-control-input" |
||||
|
v-model="search.case" |
||||
|
/> |
||||
|
<label class="custom-control-label" for="customSwitch1" |
||||
|
>Ignore case</label |
||||
> |
> |
||||
|
|
||||
<div class="input-group-append"> |
|
||||
<div class="input-group-text">/</div> |
|
||||
|
|
||||
<div class="form-control custom-switch"> |
|
||||
<input |
|
||||
id="customSwitch1" |
|
||||
type="checkbox" |
|
||||
class="custom-control-input" |
|
||||
v-model="search.case" |
|
||||
> |
|
||||
<label class="custom-control-label" for="customSwitch1">Ignore case</label> |
|
||||
</div> |
|
||||
|
|
||||
|
|
||||
</div> |
|
||||
</div> |
</div> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> <!-- row --> |
</div> |
||||
|
</div> |
||||
<div class="row"> |
<!-- row --> |
||||
<div class="col-9"> |
|
||||
<div class="input-group mb-2"> |
<div class="row"> |
||||
|
<div class="col-9"> |
||||
<div class="input-group-prepend"> |
<div class="input-group mb-2"> |
||||
<div class="input-group-text">Log</div> |
<div class="input-group-prepend"> |
||||
</div> |
<div class="input-group-text">Log</div> |
||||
<input type="text" class="form-control" placeholder="file" |
</div> |
||||
v-model="search.log" |
<input |
||||
> |
type="text" |
||||
<input type="text" class="form-control" placeholder="desc" |
class="form-control" |
||||
v-model="search.desc" |
placeholder="file" |
||||
> |
v-model="search.log" |
||||
</div> |
/> |
||||
</div> <!-- col --> |
<input |
||||
|
type="text" |
||||
<div class="col-3"> |
class="form-control" |
||||
<button |
placeholder="desc" |
||||
class="btn btn-outline-secondary" |
v-model="search.desc" |
||||
round |
/> |
||||
type="button" |
</div> |
||||
@click="setregex" |
</div> |
||||
> |
<!-- col --> |
||||
Search |
|
||||
</button> |
<div class="col-3"> |
||||
</div> <!-- col --> |
<button |
||||
</div> <!-- row --> |
class="btn btn-outline-secondary" |
||||
|
round |
||||
|
type="button" |
||||
<div class="row"> |
@click="setregex" |
||||
<div class="col-12 viewGrep"> |
> |
||||
|
Search |
||||
<table class="table table-hover"> |
</button> |
||||
<thead> |
</div> |
||||
<tr> |
<!-- col --> |
||||
<th scope="col">Action</th> |
</div> |
||||
<th scope="col">Log</th> |
<!-- row --> |
||||
<th scope="col">Regex</th> |
|
||||
<th scope="col">IC</th> |
<div class="row"> |
||||
<th scope="col">Desc</th> |
<div class="col-12 viewGrep"> |
||||
</tr> |
<table class="table table-hover"> |
||||
</thead> |
<thead> |
||||
<tbody |
<tr> |
||||
v-for="item in log" |
<th scope="col">Action</th> |
||||
> |
<th scope="col">Log</th> |
||||
<tr> |
<th scope="col">Regex</th> |
||||
<td |
<th scope="col">IC</th> |
||||
> |
<th scope="col">Desc</th> |
||||
<span class="badge badge-danger badge-pill" |
</tr> |
||||
style="cursor: pointer" |
</thead> |
||||
@click="removeregex(item.id)" |
<tbody v-for="item in log"> |
||||
>Remove</span> |
<tr> |
||||
|
<td> |
||||
</td> |
<span |
||||
<td |
class="badge badge-danger badge-pill" |
||||
style="cursor: pointer" |
style="cursor: pointer" |
||||
>{{item.log}}</td> |
@click="removeregex(item.id)" |
||||
<td |
>Remove</span |
||||
style="cursor: pointer" |
> |
||||
>{{item.regex}}</td> |
</td> |
||||
<td |
<td style="cursor: pointer">{{ item.log }}</td> |
||||
style="cursor: pointer" |
<td style="cursor: pointer">{{ item.regex }}</td> |
||||
>{{item.case}}</td> |
<td style="cursor: pointer">{{ item.case }}</td> |
||||
<td |
<td style="cursor: pointer">{{ item.desc }}</td> |
||||
style="cursor: pointer" |
</tr> |
||||
>{{item.desc}}</td> |
</tbody> |
||||
</tr> |
</table> |
||||
</tbody> |
</div> |
||||
</table> |
<!-- col --> |
||||
|
</div> |
||||
</div> <!-- col --> |
<!-- row --> |
||||
</div> <!-- row --> |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
import {mapState, mapGetters, mapActions,dispatch} from 'vuex' |
import { mapState, mapGetters, mapActions, dispatch } from "vuex"; |
||||
import Vue from 'vue' |
import Vue from "vue"; |
||||
import store from '@/store/index' |
import store from "@/store/index"; |
||||
export default { |
export default { |
||||
components: { |
components: {}, |
||||
}, |
data() { |
||||
data () { |
|
||||
return { |
return { |
||||
search:{ |
search: { |
||||
log: '', |
log: "", |
||||
regex: '', |
regex: "", |
||||
desc: '', |
desc: "", |
||||
case: true |
case: true, |
||||
}, |
}, |
||||
obj:1, |
obj: 1, |
||||
log:[] |
log: [], |
||||
} |
}; |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
removeregex (index){ |
removeregex(index) { |
||||
let ind = this.log.map(item => item.id).indexOf(index) // find index |
let ind = this.log.map((item) => item.id).indexOf(index); // find index |
||||
this.log.splice(ind, 1); |
this.log.splice(ind, 1); |
||||
//console.log(JSON.stringify(index)) |
//console.log(JSON.stringify(index)) |
||||
//console.log(JSON.stringify(this.log)) |
//console.log(JSON.stringify(this.log)) |
||||
|
}, |
||||
|
setregex() { |
||||
|
var o = {}; |
||||
|
o.id = this.obj++; |
||||
|
o.log = this.search.log; |
||||
|
o.regex = this.search.regex; |
||||
|
o.case = this.search.case; |
||||
|
o.desc = this.search.desc; |
||||
|
this.log.push(o); |
||||
|
//console.log(JSON.stringify(this.log)) |
||||
}, |
}, |
||||
setregex (){ |
|
||||
var o = {} |
|
||||
o.id = this.obj++ |
|
||||
o.log = this.search.log |
|
||||
o.regex = this.search.regex |
|
||||
o.case = this.search.case |
|
||||
o.desc = this.search.desc |
|
||||
this.log.push(o) |
|
||||
//console.log(JSON.stringify(this.log)) |
|
||||
} |
|
||||
}, |
}, |
||||
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.log.tailed_path |
||||
//console.log('regexpath2 '+ JSON.stringify(regexpath)) |
); |
||||
var code = '' |
|
||||
var regexoutput = false; |
//console.log('regexpath2 '+ JSON.stringify(regexpath)) |
||||
if (Array.isArray(regexpath) && regexpath.length){ |
var code = ""; |
||||
regexoutput = true; |
var regexoutput = false; |
||||
}else{ |
if (Array.isArray(regexpath) && regexpath.length) { |
||||
regexoutput = false; |
regexoutput = true; |
||||
} |
} else { |
||||
if(regexoutput){ |
regexoutput = false; |
||||
|
} |
||||
//var logtmp = store.getters['pipelineLLO/getlog']; |
if (regexoutput) { |
||||
var logtmp = message.log.message |
//var logtmp = store.getters['pipelineLLO/getlog']; |
||||
//var itemlog = '' |
var logtmp = message.log.message; |
||||
code += '' |
//var itemlog = '' |
||||
//itemlog = logtmp.filter(item1 => item1.tailed_path === path); |
code += ""; |
||||
//console.log('logtmp22 '+ JSON.stringify(itemlog)) |
//itemlog = logtmp.filter(item1 => item1.tailed_path === path); |
||||
for (let regex of regexpath) { |
//console.log('logtmp22 '+ JSON.stringify(itemlog)) |
||||
//console.log(regex.regex) |
for (let regex of regexpath) { |
||||
if( regex.case){ |
//console.log(regex.regex) |
||||
var re = new RegExp(regex.regex, 'i'); |
if (regex.case) { |
||||
//console.log("true"); |
var re = new RegExp(regex.regex, "i"); |
||||
}else{ |
//console.log("true"); |
||||
var re = new RegExp(regex.regex); |
} else { |
||||
//console.log("false"); |
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"); |
|
||||
} |
|
||||
} |
|
||||
} |
} |
||||
|
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"); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
this.$root.$off("GREP_on_data"); |
||||
}, |
}, |
||||
beforeDestroy () { |
|
||||
this.$root.$off('GREP_on_data') |
|
||||
} |
|
||||
}; |
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style> |
||||
.runGrep { |
.runGrep { |
||||
font-family: monospace; |
font-family: monospace; |
||||
height: 350px; |
height: 350px; |
||||
} |
} |
||||
.viewGrep { |
.viewGrep { |
||||
height:300px; |
height: 300px; |
||||
overflow-y:auto; |
overflow-y: auto; |
||||
} |
} |
||||
|
|
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue