feat(recorder): Allow filtering requests

This commit is contained in:
Aditya Hase 2019-01-07 11:56:26 +05:30
parent 9120302898
commit dc58b303b3

View file

@ -1,16 +1,17 @@
<template>
<table class="table table-hover">
{{this.query}}
<thead>
<tr>
<th>Index<button @click=" sort('index') ">Sort</button></th>
<th>Time<button @click=" sort('time') ">Sort</button></th>
<th>Method<button @click=" sort('method') ">Sort</button></th>
<th>Path<button @click=" sort('path') ">Sort</button></th>
<th>CMD<button @click=" sort('cmd') ">Sort</button></th>
<th>Method<button @click=" sort('method') ">Sort</button><input v-model="query.filters.method"/></th>
<th>Path<button @click=" sort('path') ">Sort</button><input v-model="query.filters.path"/></th>
<th>CMD<button @click=" sort('cmd') ">Sort</button><input v-model="query.filters.cmd"/></th>
</tr>
</thead>
<tbody>
<router-link style="cursor: pointer" :to="{name: 'request-detail', params: {request_uuid: request.uuid}}" tag="tr" v-for="request in sortedRequests" :key="request.index" v-bind="request">
<router-link style="cursor: pointer" :to="{name: 'request-detail', params: {request_uuid: request.uuid}}" tag="tr" v-for="request in sorted(filtered(requests))" :key="request.index" v-bind="request">
<td>{{ request.index }}</td>
<td>{{ request.time }}</td>
<td>{{ request.method }}</td>
@ -30,6 +31,7 @@ export default {
query: {
sort: "index",
order: "asc",
filters: {},
},
};
},
@ -39,13 +41,21 @@ export default {
})
},
computed: {
sortedRequests: function() {
const order = (this.query.order == "asc") ? 1 : -1
const sort = this.query.sort
return this.requests.sort((a,b) => (a[sort] > b[sort]) ? order : -order)
}
},
methods: {
filtered: function(requests) {
requests = requests.slice()
const filters = Object.entries(this.query.filters)
return requests.filter(
(r) => filters.map((f) => (r[f[0]] || "").match(f[1])).every(Boolean)
)
},
sorted: function(requests) {
requests = requests.slice()
const order = (this.query.order == "asc") ? 1 : -1
const sort = this.query.sort
return requests.sort((a,b) => (a[sort] > b[sort]) ? order : -order)
},
sort: function(key) {
if(key == this.query.sort) {
this.query.order = (this.query.order == "asc") ? "desc" : "asc"