Optional progress bar on task page, updated with task-progress events

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):

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%;

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,

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>

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),