From dc58b303b33e6a5e8243873cd71cc0d86ef86fd3 Mon Sep 17 00:00:00 2001
From: Aditya Hase <aditya@adityahase.com>
Date: Mon, 7 Jan 2019 11:56:26 +0530
Subject: [PATCH] feat(recorder): Allow filtering requests

---
 .../js/frappe/recorder/RecorderDetail.vue     | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/frappe/public/js/frappe/recorder/RecorderDetail.vue b/frappe/public/js/frappe/recorder/RecorderDetail.vue
index 43884408d0..ba0190947e 100644
--- a/frappe/public/js/frappe/recorder/RecorderDetail.vue
+++ b/frappe/public/js/frappe/recorder/RecorderDetail.vue
@@ -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"