From ba7ee519d4c9f09eb7aa2a9cd5d17180c9ea719b Mon Sep 17 00:00:00 2001
From: Eugene Zolotarev <eugzol@gmail.com>
Date: Sun, 7 Feb 2021 18:32:13 +0300
Subject: [PATCH] Optional progress bar on task page, updated with
 task-progress events

---
 flower/api/events.py         |  3 ++-
 flower/static/css/flower.css |  3 +++
 flower/static/js/flower.js   | 33 +++++++++++++++++++++++++++++++++
 flower/templates/task.html   |  9 +++++++++
 flower/urls.py               |  1 +
 5 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/flower/api/events.py b/flower/api/events.py
index 7ab9d3a31..b6a655d24 100644
--- a/flower/api/events.py
+++ b/flower/api/events.py
@@ -16,7 +16,8 @@ def send_message(cls, event):
 
 
 EVENTS = ('task-sent', 'task-received', 'task-started', 'task-succeeded',
-          'task-failed', 'task-revoked', 'task-retried', 'task-custom')
+          'task-failed', 'task-revoked', 'task-retried', 'task-custom',
+          'task-progress')
 
 
 def getClassName(eventname):
diff --git a/flower/static/css/flower.css b/flower/static/css/flower.css
index a4b2c1832..35a60684d 100644
--- a/flower/static/css/flower.css
+++ b/flower/static/css/flower.css
@@ -90,6 +90,9 @@
 .panel>.table, .panel>.table-responsive>.table {
       margin-bottom: 0;
 }
+.progress {
+  margin-bottom: 5px; !important
+}
 
 .filter-column {
   width: 50%;
diff --git a/flower/static/js/flower.js b/flower/static/js/flower.js
index b19b029c6..90a2b587f 100644
--- a/flower/static/js/flower.js
+++ b/flower/static/js/flower.js
@@ -658,6 +658,39 @@ var flower = (function () {
 
     });
 
+    $(document).ready(function () {
+        if (!active_page('/task/')) {
+            return;
+        }
+
+        var taskid = $('#taskid').text();
+
+        var location = window.location;
+        var api_uri;
+
+        if (location.protocol === 'https:') {
+            api_uri = 'wss:';
+        } else {
+            api_uri = 'ws:';
+        }
+
+        api_uri += '//' + location.host + '/';
+        api_uri += 'api/task/events/task-progress/' + taskid;
+
+        var ws = new WebSocket(api_uri);
+        ws.onmessage = function(event) {
+            var data = JSON.parse(event.data);
+
+            var current = data.current;
+            var total = data.total;
+
+            $('#task-progress-bar').width(Math.round(current / total * 100).toString() + '%');
+            $('#task-progress-bar-label').text(current.toString() + '/' + total.toString());
+            $('#task-progress-bar-container').removeClass('hidden');
+        }
+
+    });
+
     return {
         on_alert_close: on_alert_close,
         on_worker_refresh: on_worker_refresh,
diff --git a/flower/templates/task.html b/flower/templates/task.html
index bcb141492..417ed72cd 100644
--- a/flower/templates/task.html
+++ b/flower/templates/task.html
@@ -56,6 +56,15 @@ <h2>{{ getattr(task, 'name', None) }}
                 <td>Result</td>
                 <td>{{ getattr(task, 'result', '') }}</td>
               </tr>
+              <tr id="task-progress-bar-container" class="hidden">
+                <td>Progress</td>
+                <td>
+                  <div class="progress progress-striped active">
+                    <div id="task-progress-bar" class="bar" style="width: 0%;"></div>
+                  </div>
+                  <div id="task-progress-bar-label" class="pagination-centered"></div>
+                </td>
+              </tr>
               </tbody>
             </table>
           </div>
diff --git a/flower/urls.py b/flower/urls.py
index 2d64cc0b4..a11612bc3 100644
--- a/flower/urls.py
+++ b/flower/urls.py
@@ -66,6 +66,7 @@
     (r"/api/task/events/task-revoked/(.*)", events.TaskRevoked),
     (r"/api/task/events/task-retried/(.*)", events.TaskRetried),
     (r"/api/task/events/task-custom/(.*)", events.TaskCustom),
+    (r"/api/task/events/task-progress/(.*)", events.TaskProgress),
     # Metrics
     (r"/metrics", monitor.Metrics),
     (r"/healthcheck", monitor.Healthcheck),