[feature] Add multicolor progress bar for mass upgrade operations #349

Closes #349

Author: nishantharkut

openwisp_firmware_upgrader/static/firmware-upgrader/css/batch-upgrade-operation.css

@@ -200,12 +200,16 @@
 .batch-main-progress {
   display: flex;
   align-items: center;
-  gap: 20px;
+  flex-wrap: wrap;
+  gap: 6px 20px;
   margin-left: 20px;
+  min-width: 0;
 }
 
 .batch-main-progress .upgrade-progress-bar {
-  width: 300px;
+  display: flex;
+  width: 100%;
+  max-width: 300px;
   height: 12px;
   background-color: #d9d9d9;
   border-radius: 4px;
@@ -215,10 +219,21 @@
 
 .batch-main-progress .upgrade-progress-fill {
   height: 100%;
-  border-radius: 2px;
   transition: width 0.5s ease;
 }
 
+.batch-main-progress .upgrade-progress-fill:first-child {
+  border-radius: 2px 0 0 2px;
+}
+
+.batch-main-progress .upgrade-progress-fill:last-child {
+  border-radius: 0 2px 2px 0;
+}
+
+.batch-main-progress .upgrade-progress-fill:only-child {
+  border-radius: 2px;
+}
+
 .batch-main-progress .upgrade-progress-fill.idle {
   background-color: #6c757d;
 }
@@ -254,6 +269,43 @@
   white-space: nowrap;
 }
 
+.batch-progress-legend {
+  display: flex;
+  flex-basis: 100%;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  font-size: 12px;
+  color: var(--body-quiet-color);
+}
+
+.batch-progress-legend .legend-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.batch-progress-legend .legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.batch-progress-legend .legend-dot.success {
+  background-color: #70bf2b;
+}
+
+.batch-progress-legend .legend-dot.failed {
+  background-color: #dc3545;
+}
+
+.batch-progress-legend .legend-dot.aborted {
+  background-color: #6c757d;
+}
+
+.batch-progress-legend .legend-dot.cancelled {
+  background-color: #8b8b8b;
+}
+
 /* Adjustments for list filters */
 #main #content .left-arrow {
   left: -1.125rem;

openwisp_firmware_upgrader/static/firmware-upgrader/js/batch-upgrade-progress.js

@@ -140,61 +140,127 @@ function updateBatchProgress(data) {
   let $ = django.jQuery;
   let mainProgressElement = $(".batch-main-progress");
   if (mainProgressElement.length > 0) {
-    let progressPercentage =
-      data.total > 0 ? Math.round((data.completed / data.total) * 100) : 0;
+    let total = data.total || 0;
+    let completed = data.completed || 0;
+    let progressPercentage = total > 0 ? Math.round((completed / total) * 100) : 0;
     let showPercentageText = true;
-    let statusClass = FW_UPGRADE_CSS_CLASSES.IN_PROGRESS; // Safe default
+    let progressHtml = "";
+    let legendHtml = "";
 
-    if (data.status === FW_UPGRADE_STATUS.SUCCESS) {
-      progressPercentage = 100;
-      statusClass = FW_UPGRADE_CSS_CLASSES.COMPLETED_SUCCESSFULLY;
-      showPercentageText = true;
-    } else if (data.status === FW_UPGRADE_STATUS.CANCELLED) {
-      progressPercentage = 100;
-      statusClass = FW_UPGRADE_CSS_CLASSES.CANCELLED;
-      showPercentageText = false;
-    } else if (data.status === FW_UPGRADE_STATUS.FAILED) {
-      let successfulOpsCount = $("#result_list tbody tr").filter(function () {
-        let statusText = $(this).find(".status-cell .status-content").text().trim();
-        return FW_STATUS_GROUPS.SUCCESS.has(statusText);
-      }).length;
-      // Also check individual operation containers for success
-      if (successfulOpsCount === 0) {
-        $("#result_list tbody tr").each(function () {
-          let statusContainer = $(this).find(".upgrade-status-container");
-          if (
-            statusContainer.length &&
-            statusContainer.find(".upgrade-progress-fill.success").length
-          ) {
-            successfulOpsCount++;
-          }
+    let statusCountSum =
+      (data.successful || 0) +
+      (data.failed || 0) +
+      (data.aborted || 0) +
+      (data.cancelled || 0);
+    if (data.successful !== undefined && total > 0 && statusCountSum > 0) {
+      // Multicolor status which shows proportional segments per status
+      let successful = data.successful || 0;
+      let failed = data.failed || 0;
+      let aborted = data.aborted || 0;
+      let cancelled = data.cancelled || 0;
+      let segments = [];
+      if (successful > 0) {
+        segments.push({
+          cssClass: FW_UPGRADE_CSS_CLASSES.SUCCESS,
+          count: successful,
+          label: FW_UPGRADE_DISPLAY_STATUS.SUCCESS,
+        });
+      }
+      if (failed > 0) {
+        segments.push({
+          cssClass: FW_UPGRADE_CSS_CLASSES.FAILED,
+          count: failed,
+          label: FW_UPGRADE_DISPLAY_STATUS.FAILED,
         });
       }
-      if (successfulOpsCount > 0) {
-        // Some operations succeeded - partial success (orange)
+      if (aborted > 0) {
+        segments.push({
+          cssClass: FW_UPGRADE_CSS_CLASSES.ABORTED,
+          count: aborted,
+          label: FW_UPGRADE_DISPLAY_STATUS.ABORTED,
+        });
+      }
+      if (cancelled > 0) {
+        segments.push({
+          cssClass: FW_UPGRADE_CSS_CLASSES.CANCELLED,
+          count: cancelled,
+          label: FW_UPGRADE_DISPLAY_STATUS.CANCELLED,
+        });
+      }
+      let usedWidth = 0;
+      let cumulativeCount = 0;
+      let segmentsHtml = segments
+        .map(function (seg) {
+          cumulativeCount += seg.count;
+          let cumulativeWidth = Math.round(
+            (cumulativeCount / total) * progressPercentage,
+          );
+          let segmentWidth = Math.max(cumulativeWidth - usedWidth, 0);
+          usedWidth = cumulativeWidth;
+          return (
+            '<div class="upgrade-progress-fill ' +
+            escapeHtml(seg.cssClass) +
+            '" style="width: ' +
+            escapeHtml(String(segmentWidth)) +
+            '%"></div>'
+          );
+        })
+        .join("");
+      progressHtml = '<div class="upgrade-progress-bar">' + segmentsHtml + "</div>";
+      // legend building function
+      if (segments.length > 0) {
+        let legendItems = segments
+          .map(function (seg) {
+            return (
+              '<span class="legend-item">' +
+              '<span class="legend-dot ' +
+              escapeHtml(seg.cssClass) +
+              '"></span>' +
+              escapeHtml(String(seg.count)) +
+              " " +
+              escapeHtml(seg.label) +
+              "</span>"
+            );
+          })
+          .join("");
+        legendHtml = '<div class="batch-progress-legend">' + legendItems + "</div>";
+      }
+      if (
+        data.status === FW_UPGRADE_STATUS.FAILED ||
+        data.status === FW_UPGRADE_STATUS.CANCELLED
+      ) {
+        showPercentageText = false;
+      }
+    } else {
+      // Fallback: single-color will be rendered when per-status counts are not available
+      let statusClass = FW_UPGRADE_CSS_CLASSES.IN_PROGRESS;
+      if (data.status === FW_UPGRADE_STATUS.SUCCESS) {
         progressPercentage = 100;
-        statusClass = FW_UPGRADE_CSS_CLASSES.PARTIAL_SUCCESS;
+        statusClass = FW_UPGRADE_CSS_CLASSES.COMPLETED_SUCCESSFULLY;
+      } else if (data.status === FW_UPGRADE_STATUS.CANCELLED) {
+        progressPercentage = 100;
+        statusClass = FW_UPGRADE_CSS_CLASSES.CANCELLED;
         showPercentageText = false;
-      } else {
-        // All operations failed - total failure (red)
+      } else if (data.status === FW_UPGRADE_STATUS.FAILED) {
         progressPercentage = 100;
         statusClass = FW_UPGRADE_CSS_CLASSES.FAILED;
         showPercentageText = false;
       }
+      progressHtml =
+        '<div class="upgrade-progress-bar">' +
+        '<div class="upgrade-progress-fill ' +
+        escapeHtml(statusClass) +
+        '" style="width: ' +
+        escapeHtml(String(progressPercentage)) +
+        '%"></div></div>';
     }
-    let progressHtml = `
-      <div class="upgrade-progress-bar">
-        <div class="upgrade-progress-fill ${escapeHtml(statusClass)}"
-             style="width: ${escapeHtml(String(progressPercentage))}%">
-        </div>
-      </div>
-    `;
     if (showPercentageText) {
-      progressHtml += `<span class="upgrade-progress-text">
-        ${escapeHtml(String(progressPercentage))}%
-      </span>`;
+      progressHtml +=
+        '<span class="upgrade-progress-text">' +
+        escapeHtml(String(progressPercentage)) +
+        "%</span>";
     }
-    mainProgressElement.html(progressHtml);
+    mainProgressElement.html(progressHtml + legendHtml);
   }
   // Update completion information in the admin form if available
   if (data.total !== undefined && data.completed !== undefined) {

openwisp_firmware_upgrader/tests/test_websockets.py

@@ -182,6 +182,10 @@ async def test_batch_upgrade_progress_consumer_connection(self):
                         "status": "in-progress",
                         "completed": 0,
                         "total": 2,
+                        "successful": 0,
+                        "failed": 0,
+                        "aborted": 0,
+                        "cancelled": 0,
                     },
                 },
             )
@@ -190,6 +194,19 @@ async def test_batch_upgrade_progress_consumer_connection(self):
             self.assertEqual(response["status"], "in-progress")
             self.assertEqual(response["completed"], 0)
             self.assertEqual(response["total"], 2)
+            self.assertEqual(response["successful"], 0)
+            self.assertEqual(response["failed"], 0)
+            self.assertEqual(response["aborted"], 0)
+            self.assertEqual(response["cancelled"], 0)
+
+            await communicator.send_json_to({"type": "request_current_state"})
+            response = await communicator.receive_json_from()
+            self.assertEqual(response["type"], "batch_state")
+            self.assertEqual(response["batch_status"]["successful"], 0)
+            self.assertEqual(response["batch_status"]["failed"], 0)
+            self.assertEqual(response["batch_status"]["aborted"], 0)
+            self.assertEqual(response["batch_status"]["cancelled"], 0)
+
             # Send operation progress message
             await channel_layer.group_send(
                 group_name,
@@ -400,12 +417,24 @@ def test_batch_upgrade_progress_publisher(self):
         with patch.object(
             publisher.channel_layer, "group_send", new_callable=AsyncMock
         ) as mock_group_send:
-            publisher.publish_batch_status("success", 5, 10)
+            publisher.publish_batch_status(
+                "success",
+                5,
+                10,
+                successful=4,
+                failed=1,
+                aborted=0,
+                cancelled=0,
+            )
             call_args = mock_group_send.call_args[0]
             self.assertEqual(call_args[1]["data"]["type"], "batch_status")
             self.assertEqual(call_args[1]["data"]["status"], "success")
             self.assertEqual(call_args[1]["data"]["completed"], 5)
             self.assertEqual(call_args[1]["data"]["total"], 10)
+            self.assertEqual(call_args[1]["data"]["successful"], 4)
+            self.assertEqual(call_args[1]["data"]["failed"], 1)
+            self.assertEqual(call_args[1]["data"]["aborted"], 0)
+            self.assertEqual(call_args[1]["data"]["cancelled"], 0)
 
     async def test_websocket_connection_errors(self):
         """Test WebSocket connection error handling."""

openwisp_firmware_upgrader/websockets.py

@@ -248,19 +248,21 @@ async def _handle_current_state_request(self, content):
                 operations_data = await sync_to_async(
                     lambda: UpgradeOperationSerializer(operations_list, many=True).data
                 )()
-                # Calculate counts
-                total_operations = len(operations_list)
-                completed_operations = sum(
-                    1 for op in operations_list if op.status != "in-progress"
-                )
+                batch_status, stats = await sync_to_async(
+                    batch_operation.calculate_and_update_status
+                )()
                 # Send everything in ONE message
                 await self.send_json(
                     {
                         "type": "batch_state",
                         "batch_status": {
-                            "status": batch_operation.status,
-                            "completed": completed_operations,
-                            "total": total_operations,
+                            "status": batch_status,
+                            "completed": stats["completed"],
+                            "total": stats["total_operations"],
+                            "successful": stats["successful"],
+                            "failed": stats["failed"],
+                            "aborted": stats["aborted"],
+                            "cancelled": stats["cancelled"],
                         },
                         "operations": operations_data,
                     }
@@ -496,13 +498,26 @@ def publish_operation_progress(
             )
         self.publish_progress(progress_data)
 
-    def publish_batch_status(self, status, completed, total):
+    def publish_batch_status(
+        self,
+        status,
+        completed,
+        total,
+        successful=0,
+        failed=0,
+        aborted=0,
+        cancelled=0,
+    ):
         self.publish_progress(
             {
                 "type": "batch_status",
                 "status": status,
                 "completed": completed,
                 "total": total,
+                "successful": successful,
+                "failed": failed,
+                "aborted": aborted,
+                "cancelled": cancelled,
             }
         )
 
@@ -514,6 +529,10 @@ def update_batch_status(self, batch_instance):
             batch_status,
             stats["completed"],
             stats["total_operations"],
+            successful=stats["successful"],
+            failed=stats["failed"],
+            aborted=stats["aborted"],
+            cancelled=stats["cancelled"],
         )
 
     @classmethod