[fix] Fixed progress bar behaviour on failed and cancelled

Author: youhaveme9

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

@@ -200,6 +200,18 @@
   background-color: #dc3545;
 }
 
+.batch-progress-fill.aborted {
+  background-color: #6c757d;
+}
+
+.batch-progress-fill.cancelled {
+  background-color: #8b8b8b;
+}
+
+.batch-progress-fill.partial-success {
+  background-color: #fc9240;
+}
+
 .status-cell {
   width: 200px;
   min-width: 200px;
@@ -244,6 +256,10 @@
   background-color: #6c757d;
 }
 
+.upgrade-status-container .upgrade-progress-fill.cancelled {
+  background-color: #8b8b8b;
+}
+
 .upgrade-status-container span {
   font-size: 12px;
   font-weight: 500;
@@ -271,6 +287,10 @@
   color: #6c757d;
 }
 
+.upgrade-status-cancelled {
+  color: #8b8b8b;
+}
+
 .upgrade-status-idle {
   color: #6c757d;
 }
@@ -314,6 +334,18 @@
   background-color: #dc3545;
 }
 
+.batch-main-progress .upgrade-progress-fill.aborted {
+  background-color: #6c757d;
+}
+
+.batch-main-progress .upgrade-progress-fill.cancelled {
+  background-color: #8b8b8b;
+}
+
+.batch-main-progress .upgrade-progress-fill.partial-success {
+  background-color: #ff9800;
+}
+
 .batch-main-progress .upgrade-progress-text {
   color: #000;
   font-weight: bold;

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

@@ -7,11 +7,9 @@ django.jQuery(function ($) {
   if (!batchUpgradeId) {
     return;
   }
-
-  // Initialize existing upgrade operations with progress bars
   initializeExistingBatchUpgradeOperations($);
+  initializeMainProgressBar($);
 
-  // Use the controller API host (always defined in change_form.html)
   const wsHost = owControllerApiHost.host;
   const wsUrl = `${getWebSocketProtocol()}${wsHost}/ws/firmware-upgrader/batch-upgrade-operation/${batchUpgradeId}/`;
 
@@ -47,35 +45,35 @@ function initializeExistingBatchUpgradeOperations($, isRetry = false) {
   if (batchUpgradeOperationsInitialized && isRetry) {
     return;
   }
-
   let statusCells = $("#result_list tbody td.status-cell");
   let processedCount = 0;
-
   statusCells.each(function () {
     let statusCell = $(this);
-    let statusText =
-      statusCell.find(".status-content").text().trim() ||
-      statusCell.text().trim();
-
     if (statusCell.find(".upgrade-status-container").length > 0) {
       return;
     }
-
+    let statusText = statusCell.find(".status-content").text().trim();
+    if (!statusText) {
+      let cellText = statusCell.text().trim();
+      statusText = cellText.replace(/\d+%.*$/, "").trim();
+    }
     if (
       statusText &&
       (statusText.includes("progress") ||
         statusText === "success" ||
         statusText === "completed successfully" ||
+        statusText === "completed with some failures" ||
         statusText === "failed" ||
-        statusText === "aborted")
+        statusText === "aborted" ||
+        statusText === "cancelled")
     ) {
       let operationId = statusCell.attr("data-operation-id") || "unknown";
+
       let operation = {
         status: statusText,
         id: operationId,
         progress: null,
       };
-
       updateBatchStatusWithProgressBar(statusCell, operation);
       processedCount++;
     }
@@ -92,14 +90,21 @@ function initializeExistingBatchUpgradeOperations($, isRetry = false) {
 
 function initBatchUpgradeProgressWebSockets($, batchUpgradeProgressWebSocket) {
   batchUpgradeProgressWebSocket.addEventListener("open", function (e) {
-    batchUpgradeOperationsInitialized = false;
-    requestCurrentBatchState(batchUpgradeProgressWebSocket);
-    initializeExistingBatchUpgradeOperations($, false);
+    let existingContainers = $(
+      "#result_list tbody td.status-cell .upgrade-status-container",
+    );
+    if (existingContainers.length === 0) {
+      batchUpgradeOperationsInitialized = false;
+      requestCurrentBatchState(batchUpgradeProgressWebSocket);
+      initializeExistingBatchUpgradeOperations($, false);
+    } else {
+      // Just request current state without reinitializing
+      requestCurrentBatchState(batchUpgradeProgressWebSocket);
+    }
   });
 
   batchUpgradeProgressWebSocket.addEventListener("close", function (e) {
     batchUpgradeOperationsInitialized = false;
-
     if (e.code === 1006) {
       console.error("WebSocket closed");
     }
@@ -112,7 +117,6 @@ function initBatchUpgradeProgressWebSockets($, batchUpgradeProgressWebSocket) {
   batchUpgradeProgressWebSocket.addEventListener("message", function (e) {
     try {
       let data = JSON.parse(e.data);
-
       if (data.type === "batch_status") {
         updateBatchProgress(data);
       } else if (data.type === "operation_progress") {
@@ -134,33 +138,74 @@ function initBatchUpgradeProgressWebSockets($, batchUpgradeProgressWebSocket) {
 
 function updateBatchProgress(data) {
   let $ = django.jQuery;
-
-  // Update the main progress bar
   let mainProgressElement = $(".batch-main-progress");
   if (mainProgressElement.length > 0) {
     let progressPercentage =
       data.total > 0 ? Math.round((data.completed / data.total) * 100) : 0;
     let statusClass = (data.status || "").replace(/\s+/g, "-");
+    let showPercentageText = true;
 
     if (data.status === "success") {
       progressPercentage = 100;
       statusClass = "completed-successfully";
+      showPercentageText = true;
+    } else if (data.status === "failed") {
+      let successfulOpsCount = $("#result_list tbody tr").filter(function () {
+        let statusText = $(this).find(".status-cell .status-content").text().trim();
+        return statusText === "success" || statusText === "completed successfully";
+      }).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++;
+          }
+        });
+      }
+      if (successfulOpsCount > 0) {
+        // Some operations succeeded - partial success (orange)
+        progressPercentage = 100;
+        statusClass = "partial-success";
+        showPercentageText = false;
+      } else {
+        // All operations failed - total failure (red)
+        progressPercentage = 100;
+        statusClass = "failed";
+        showPercentageText = false;
+      }
     }
 
     let progressHtml = `
       <div class="upgrade-progress-bar">
         <div class="upgrade-progress-fill ${statusClass}" style="width: ${progressPercentage}%"></div>
       </div>
-      <span class="upgrade-progress-text">${progressPercentage}%</span>
     `;
+    if (showPercentageText) {
+      progressHtml += `<span class="upgrade-progress-text">${progressPercentage}%</span>`;
+    }
+
     mainProgressElement.html(progressHtml);
   }
 
+  // Update completion information in the admin form if available
+  if (data.total && data.completed) {
+    let completedInfo = $(".field-completed .readonly");
+    if (completedInfo.length > 0) {
+      completedInfo.text(`${data.completed} out of ${data.total}`);
+    }
+  }
   let statusField = $(".field-status .readonly");
   if (statusField.length > 0 && data.status) {
     let displayStatus = data.status;
     if (data.status === "success") {
       displayStatus = "completed successfully";
+    } else if (data.status === "failed") {
+      displayStatus = "completed with some failures";
     } else if (data.status === "in-progress") {
       displayStatus = "in progress";
     }
@@ -194,15 +239,13 @@ function updateBatchOperationProgress(data) {
 
     if (operationId === data.operation_id) {
       found = true;
-
       let operation = {
         status: data.status,
         id: data.operation_id,
         progress: data.progress,
       };
 
       updateBatchStatusWithProgressBar(statusCell, operation);
-
       if (data.modified) {
         let modifiedCell = row.find("td:nth-child(4)");
         modifiedCell.html(getFormattedDateTimeString(data.modified));
@@ -221,13 +264,10 @@ function addNewOperationRow(data) {
   if (!data.device_name || !data.device_id) {
     return;
   }
-
   let tbody = $("#result_list tbody");
   let existingRows = tbody.find("tr").length;
   let rowClass = existingRows % 2 === 0 ? "row1" : "row2";
-
   tbody.find("tr td[colspan]").parent().remove();
-
   let deviceUrl = `/admin/firmware_upgrader/upgradeoperation/${data.operation_id}/change/`;
   let imageDisplay = data.image_name || "None";
   let modifiedTime = data.modified
@@ -250,40 +290,22 @@ function addNewOperationRow(data) {
   `;
 
   tbody.append(newRowHtml);
-
-  // Update the new row with progress bar
   let newRow = tbody.find(`tr:last`);
   let statusCell = newRow.find(".status-cell");
   let operation = {
     status: data.status,
     id: data.operation_id,
     progress: data.progress,
   };
-
   updateBatchStatusWithProgressBar(statusCell, operation);
 }
 
 function updateBatchStatusWithProgressBar(statusCell, operation) {
   let $ = django.jQuery;
   let status = operation.status;
-  let progressPercentage = getBatchProgressPercentage(
-    status,
-    operation.progress,
-  );
-  let progressClass = status.replace(/\s+/g, "-");
-
-  if (!statusCell.find(".upgrade-status-container").length) {
-    statusCell.find(".status-content").empty();
-    statusCell
-      .find(".status-content")
-      .append('<div class="upgrade-status-container"></div>');
-
-    if (!statusCell.find(".status-content").length) {
-      statusCell.empty();
-      statusCell.append('<div class="upgrade-status-container"></div>');
-    }
-  }
-
+  let progressPercentage = getBatchProgressPercentage(status, operation.progress);
+  statusCell.empty();
+  statusCell.append('<div class="upgrade-status-container"></div>');
   let statusContainer = statusCell.find(".upgrade-status-container");
   let statusHtml = "";
 
@@ -303,30 +325,37 @@ function updateBatchStatusWithProgressBar(statusCell, operation) {
     statusHtml = `<div class="upgrade-progress-bar">
         <div class="upgrade-progress-fill aborted" style="width: 100%"></div>
       </div>`;
+  } else if (status === "cancelled") {
+    statusHtml = `<div class="upgrade-progress-bar">
+        <div class="upgrade-progress-fill cancelled" style="width: 100%"></div>
+      </div>`;
   } else {
     statusHtml = `<div class="upgrade-progress-bar">
         <div class="upgrade-progress-fill" style="width: ${progressPercentage}%"></div>
       </div>`;
   }
-
   statusContainer.html(statusHtml);
 }
 
 function getBatchProgressPercentage(status, operationProgress = null) {
   if (operationProgress !== null && operationProgress !== undefined) {
     return Math.min(100, Math.max(5, operationProgress));
   }
-  if (status === "completed successfully") {
+  if (
+    status === "completed successfully" ||
+    status === "success" ||
+    status === "failed" ||
+    status === "aborted" ||
+    status === "cancelled"
+  ) {
     return 100;
   }
   return 5;
 }
 
 function getBatchUpgradeIdFromUrl() {
   try {
-    let matches = window.location.pathname.match(
-      /\/batchupgradeoperation\/([^\/]+)\//,
-    );
+    let matches = window.location.pathname.match(/\/batchupgradeoperation\/([^\/]+)\//);
     return matches && matches[1] ? matches[1] : null;
   } catch (error) {
     console.error("Error extracting batch ID from URL:", error);
@@ -342,6 +371,52 @@ function getWebSocketProtocol() {
   return protocol;
 }
 
+function initializeMainProgressBar($) {
+  let statusField = $(".field-status .readonly");
+  if (statusField.length > 0) {
+    let currentStatusText = statusField
+      .contents()
+      .filter(function () {
+        return this.nodeType === 3 && this.textContent.trim();
+      })
+      .first()
+      .text()
+      .trim();
+
+    let mainProgressElement = $(".batch-main-progress");
+    if (mainProgressElement.length > 0 && currentStatusText) {
+      let progressPercentage = 100;
+      let statusClass = "";
+      let showPercentageText = true;
+
+      if (currentStatusText === "completed successfully") {
+        statusClass = "completed-successfully";
+        showPercentageText = true;
+      } else if (currentStatusText === "completed with some failures") {
+        statusClass = "partial-success";
+        showPercentageText = false;
+      } else if (currentStatusText === "in progress") {
+        statusClass = "in-progress";
+        showPercentageText = true;
+        progressPercentage = 0;
+      } else {
+        statusClass = "failed";
+        showPercentageText = false;
+      }
+
+      let progressHtml = `
+        <div class="upgrade-progress-bar">
+          <div class="upgrade-progress-fill ${statusClass}" style="width: ${progressPercentage}%"></div>
+        </div>
+      `;
+      if (showPercentageText) {
+        progressHtml += `<span class="upgrade-progress-text">${progressPercentage}%</span>`;
+      }
+      mainProgressElement.html(progressHtml);
+    }
+  }
+}
+
 function getFormattedDateTimeString(dateTimeString) {
   let dateTime = new Date(dateTimeString);
   return dateTime.toLocaleString();