feat(recorder): Allow sorting requests

frappe/public/js/frappe/recorder/RecorderDetail.vue

@@ -2,30 +2,20 @@
 	<table class="table table-hover">
 		<thead>
 			<tr>
-				<th>UUID</th>
-				<th>Path</th>
-				<th>CMD</th>
-				<th>Time</th>
-				<th>Method</th>
+				<th>Index<button v-on:click=" key='index'">Sort</button></th>
+				<th>Time<button v-on:click=" key='time'">Sort</button></th>
+				<th>Method<button v-on:click=" key='method'">Sort</button></th>
+				<th>Path<button v-on:click=" key='path'">Sort</button></th>
+				<th>CMD<button v-on:click=" key='cmd'">Sort</button></th>
 			</tr>
 		</thead>
 		<tbody>
-			<router-link style="cursor: pointer" :to="{name: 'request-detail', params: {request_uuid: request.uuid}}" tag="tr"  v-for="request in requests" :key="request.uuid" v-bind="request">
-				<td>
-					{{ request.uuid }}
-				</td>
-				<td>
-					{{ request.path }}
-				</td>
-				<td>
-					{{ request.cmd }}
-				</td>
-				<td>
-					{{ request.time }}
-				</td>
-				<td>
-					{{ request.method }}
-				</td>
+			<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">
+				<td>{{ request.index }}</td>
+				<td>{{ request.time }}</td>
+				<td>{{ request.method }}</td>
+				<td>{{ request.path }}</td>
+				<td>{{ request.cmd }}</td>
 			</router-link>
 		</tbody>
 	</table>
@@ -37,6 +27,7 @@ export default {
 	data() {
 		return {
 			requests: [],
+			key: "index",
 		};
 	},
 	mounted() {
@@ -44,5 +35,10 @@ export default {
 			this.requests = r.message
 		})
 	},
+	computed: {
+		sortedRequests: function() {
+			return this.requests.sort((a,b) => (a[this.key] > b[this.key]) ? 1 : -1)
+		}
+	},
 };
 </script>

frappe/www/recorder.py

@@ -27,6 +27,8 @@ def get_requests():
 	do_not_record()
 	requests = frappe.cache().lrange("recorder-requests", 0, -1)
 	requests = list(map(lambda request: json.loads(request.decode()), requests))
+	for index, request in enumerate(requests, start=1):
+		request["index"] = index
 	return requests