From f2afceb6e2e495003f643ff05275dca107349ad4 Mon Sep 17 00:00:00 2001
From: Aditya Hase <aditya@adityahase.com>
Date: Sat, 19 Jan 2019 21:51:25 +0530
Subject: [PATCH] feat(recorder): Update request list in realtime

---
 .../js/frappe/recorder/RecorderDetail.vue     | 40 +++++++++----------
 frappe/recorder.py                            |  1 +
 frappe/www/recorder.py                        |  3 +-
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/frappe/public/js/frappe/recorder/RecorderDetail.vue b/frappe/public/js/frappe/recorder/RecorderDetail.vue
index a694e92142..cda8eebe30 100644
--- a/frappe/public/js/frappe/recorder/RecorderDetail.vue
+++ b/frappe/public/js/frappe/recorder/RecorderDetail.vue
@@ -4,16 +4,9 @@
 			<span>Recorder</span>
 			<span class="indicator" :class="status.color">{{ status.status }}</span>
 			<span class="chart-actions btn-group dropdown pull-right" style="float:right; margin-left:15px">
-				<a class="dropdown-toggle" data-toggle="dropdown">
-					<button class="btn btn-default btn-xs"><span class="caret"></span></button>
-				</a>
-				<ul class="dropdown-menu" style="max-height: 300px; overflow-y: auto;">
-					<li><a @click="refresh()">Refresh</a></li>
-					<li v-if="status.status == 'Inactive'" @click="record(true)"><a>Start Recording</a></li>
-					<li v-if="status.status == 'Active'" @click="record(false)"><a>Stop Recording</a></li>
-				</ul>
+				<button v-if="status.status == 'Inactive'" class="btn btn-default btn-primary" @click="record(true)">Start</button>
+				<button v-if="status.status == 'Active'" class="btn btn-default btn-primary" @click="record(false)">Stop</button>
 			</span>
-			<span class="text-muted" style="font-size:12px; float:right" v-html="'Last synced ' + comment_when(last_fetched)"></span>
 		</h1>
 		<table class="table table-hover">
 			<thead>
@@ -35,7 +28,7 @@
 				</tr>
 				<router-link style="cursor: pointer" :to="{name: 'request-detail', params: {request_uuid: request.uuid}}" tag="tr"  v-for="request in paginated(sorted(filtered(requests)))" :key="request.index" v-bind="request">
 					<td>{{ request.index }}</td>
-					<td v-html="comment_when(request.time)"></td>
+					<td>{{ request.time }}</td>
 					<td>{{ request.method }}</td>
 					<td>{{ request.path | elipsize }}</td>
 					<td>{{ request.cmd | elipsize }}</td>
@@ -81,7 +74,8 @@ export default {
 		};
 	},
 	mounted() {
-		this.refresh()
+		frappe.socketio.init(9000)
+		this.fetch_status()
 	},
 	computed: {
 		pages: function() {
@@ -103,9 +97,6 @@ export default {
 		}
 	},
 	methods: {
-		comment_when(value) {
-			return comment_when(value)
-		},
 		filtered: function(requests) {
 			requests = requests.slice()
 			const filters = Object.entries(this.query.filters)
@@ -144,10 +135,7 @@ export default {
 				return "glyphicon-sort"
 			}
 		},
-		refresh: function(){
-			frappe.call("frappe.www.recorder.get_status").then( r => {
-				this.status = r.message
-			})
+		refresh: function() {
 			frappe.call("frappe.www.recorder.get_requests").then( r => {
 				this.requests = r.message
 				this.last_fetched = new Date()
@@ -159,8 +147,20 @@ export default {
 				args: {
 					should_record: should_record
 				}
-			}).then(r => this.refresh())
-		}
+			}).then(r => this.update_status(r.message))
+		},
+		fetch_status: function() {
+			this.refresh()
+			frappe.call("frappe.www.recorder.get_status").then(r => this.update_status(r.message))
+		},
+		update_status: function(status) {
+			this.status = status
+			if(this.status.status == "Active") {
+				frappe.realtime.on("recorder-dump-event", this.refresh)
+			} else {
+				frappe.realtime.off("recorder-dump-event", this.refresh)
+			}
+		},
 	},
 	filters: {
 		elipsize: function (value) {
diff --git a/frappe/recorder.py b/frappe/recorder.py
index 89f930b180..31e7722a37 100644
--- a/frappe/recorder.py
+++ b/frappe/recorder.py
@@ -73,6 +73,7 @@ def record():
 def dump():
 	if hasattr(frappe.local, "_recorder"):
 		frappe.local._recorder.dump()
+		frappe.publish_realtime(event="recorder-dump-event")
 
 
 class Recorder():
diff --git a/frappe/www/recorder.py b/frappe/www/recorder.py
index 6c7522df60..3d50d65f42 100644
--- a/frappe/www/recorder.py
+++ b/frappe/www/recorder.py
@@ -31,12 +31,13 @@ def get_status():
 
 @frappe.whitelist()
 def set_recorder_state(should_record):
-	print(should_record)
 	do_not_record()
 	if should_record == "true":
 		frappe.cache().set("recorder-intercept", 1)
+		return {"status": "Active", "color": "green"}
 	else:
 		frappe.cache().delete("recorder-intercept")
+		return {"status": "Inactive", "color": "red"}
 
 
 @frappe.whitelist()