feat: update firmware upload status through websocket

public/scripts/components/FirmwareUploadComponent.js

@@ -17,12 +17,15 @@ class FirmwareUploadComponent extends Component {
         if (firmwareFile) {
             this.addEventListener(firmwareFile, 'change', this.handleFileSelect.bind(this));
         }
-        
+
         // Setup deploy button
         const deployBtn = this.findElement('#deploy-btn');
         if (deployBtn) {
             this.addEventListener(deployBtn, 'click', this.handleDeploy.bind(this));
         }
+
+        // Setup WebSocket listener for real-time firmware upload status
+        this.setupWebSocketListeners();
     }
 
     setupViewModelListeners() {
@@ -35,6 +38,213 @@ class FirmwareUploadComponent extends Component {
         this.subscribeToProperty('uploadResults', this.updateUploadResults.bind(this));
     }
 
+    setupWebSocketListeners() {
+        // Listen for real-time firmware upload status updates
+        window.wsClient.on('firmwareUploadStatus', (data) => {
+            this.handleFirmwareUploadStatus(data);
+        });
+    }
+
+    handleFirmwareUploadStatus(data) {
+        const { nodeIp, status, filename, fileSize, timestamp } = data;
+
+        logger.debug('FirmwareUploadComponent: Firmware upload status received:', { nodeIp, status, filename });
+
+        // Check if there's currently an upload in progress
+        const isUploading = this.viewModel.get('isUploading');
+        if (!isUploading) {
+            logger.debug('FirmwareUploadComponent: No active upload, ignoring status update');
+            return;
+        }
+
+        // Find the target node item for this node
+        const targetNodeItem = this.findElement(`[data-node-ip="${nodeIp}"]`);
+        if (!targetNodeItem) {
+            logger.debug('FirmwareUploadComponent: No target node item found for node:', nodeIp);
+            return;
+        }
+
+        // Update the status display based on the received status
+        const statusElement = targetNodeItem.querySelector('.status-indicator');
+
+        if (statusElement) {
+            let displayStatus = status;
+            let statusClass = '';
+
+            logger.debug(`FirmwareUploadComponent: Updating status for node ${nodeIp}: ${status} -> ${displayStatus}`);
+
+            switch (status) {
+                case 'uploading':
+                    displayStatus = 'Uploading...';
+                    statusClass = 'uploading';
+                    break;
+                case 'completed':
+                    displayStatus = 'Completed';
+                    statusClass = 'success';
+                    logger.debug(`FirmwareUploadComponent: Node ${nodeIp} marked as completed`);
+                    break;
+                case 'failed':
+                    displayStatus = 'Failed';
+                    statusClass = 'error';
+                    break;
+                default:
+                    displayStatus = status;
+                    break;
+            }
+
+            statusElement.textContent = displayStatus;
+            statusElement.className = `status-indicator ${statusClass}`;
+        }
+
+        // Update overall progress if we have multiple nodes
+        this.updateOverallProgressFromStatus();
+
+        // Check if all uploads are complete and finalize results
+        this.checkAndFinalizeUploadResults();
+    }
+
+    updateOverallProgressFromStatus() {
+        const targetNodeItems = Array.from(this.findAllElements('.target-node-item'));
+        if (targetNodeItems.length <= 1) {
+            return; // Only update for multi-node uploads
+        }
+
+        let completedCount = 0;
+        let failedCount = 0;
+        let uploadingCount = 0;
+
+        targetNodeItems.forEach(item => {
+            const statusElement = item.querySelector('.status-indicator');
+            if (statusElement) {
+                const status = statusElement.textContent;
+                if (status === 'Completed') {
+                    completedCount++;
+                } else if (status === 'Failed') {
+                    failedCount++;
+                } else if (status === 'Uploading...') {
+                    uploadingCount++;
+                }
+            }
+        });
+
+        const totalNodes = targetNodeItems.length;
+        const successfulUploads = completedCount;
+        const successPercentage = Math.round((successfulUploads / totalNodes) * 100);
+
+        // Update overall progress bar
+        const progressBar = this.findElement('#overall-progress-bar');
+        const progressText = this.findElement('.progress-text');
+
+        if (progressBar && progressText) {
+            progressBar.style.width = `${successPercentage}%`;
+
+            // Update progress bar color based on completion
+            if (successPercentage === 100) {
+                progressBar.style.backgroundColor = '#4ade80';
+            } else if (successPercentage > 50) {
+                progressBar.style.backgroundColor = '#60a5fa';
+            } else {
+                progressBar.style.backgroundColor = '#fbbf24';
+            }
+
+            progressText.textContent = `${successfulUploads}/${totalNodes} Successful (${successPercentage}%)`;
+        }
+
+        // Update progress summary
+        const progressSummary = this.findElement('#progress-summary');
+        if (progressSummary) {
+            if (failedCount > 0) {
+                progressSummary.innerHTML = `<span>${window.icon('warning', { width: 14, height: 14 })} Upload in progress... (${uploadingCount} uploading, ${failedCount} failed)</span>`;
+            } else if (uploadingCount > 0) {
+                progressSummary.innerHTML = `<span>${window.icon('info', { width: 14, height: 14 })} Upload in progress... (${uploadingCount} uploading)</span>`;
+            } else if (completedCount === totalNodes) {
+                progressSummary.innerHTML = `<span>${window.icon('success', { width: 14, height: 14 })} All uploads completed successfully at ${new Date().toLocaleTimeString()}</span>`;
+            }
+        }
+    }
+
+    checkAndFinalizeUploadResults() {
+        const targetNodeItems = Array.from(this.findAllElements('.target-node-item'));
+        if (targetNodeItems.length === 0) return;
+
+        // Check if all uploads are complete (either completed or failed)
+        let allComplete = true;
+        let hasAnyCompleted = false;
+        let hasAnyFailed = false;
+        let uploadingCount = 0;
+
+        const statuses = [];
+        targetNodeItems.forEach(item => {
+            const statusElement = item.querySelector('.status-indicator');
+            if (statusElement) {
+                const status = statusElement.textContent;
+                statuses.push(status);
+
+                if (status !== 'Completed' && status !== 'Failed') {
+                    allComplete = false;
+                    if (status === 'Uploading...') {
+                        uploadingCount++;
+                    }
+                }
+                if (status === 'Completed') {
+                    hasAnyCompleted = true;
+                }
+                if (status === 'Failed') {
+                    hasAnyFailed = true;
+                }
+            }
+        });
+
+        logger.debug('FirmwareUploadComponent: Upload status check:', {
+            totalItems: targetNodeItems.length,
+            allComplete,
+            uploadingCount,
+            hasAnyCompleted,
+            hasAnyFailed,
+            statuses
+        });
+
+        // If all uploads are complete, finalize the results
+        if (allComplete) {
+            logger.debug('FirmwareUploadComponent: All firmware uploads complete, finalizing results');
+
+            // Generate results based on current status
+            const results = targetNodeItems.map(item => {
+                const nodeIp = item.getAttribute('data-node-ip');
+                const nodeName = item.querySelector('.node-name')?.textContent || nodeIp;
+                const statusElement = item.querySelector('.status-indicator');
+                const status = statusElement?.textContent || 'Unknown';
+
+                return {
+                    nodeIp: nodeIp,
+                    hostname: nodeName,
+                    success: status === 'Completed',
+                    error: status === 'Failed' ? 'Upload failed' : undefined,
+                    timestamp: new Date().toISOString()
+                };
+            });
+
+            // Update the header and summary to show final results
+            this.displayUploadResults(results);
+
+            // Hide the progress overlay since upload is complete
+            this.hideProgressOverlay();
+
+            // Now that all uploads are truly complete (confirmed via websocket), mark upload as complete
+            this.viewModel.completeUpload();
+
+            // Reset upload state after a short delay to allow user to see results and re-enable deploy button
+            setTimeout(() => {
+                this.viewModel.resetUploadState();
+                logger.debug('FirmwareUploadComponent: Upload state reset, deploy button should be re-enabled');
+            }, 5000);
+        } else if (uploadingCount > 0) {
+            logger.debug(`FirmwareUploadComponent: ${uploadingCount} uploads still in progress, not finalizing yet`);
+        } else {
+            logger.debug('FirmwareUploadComponent: Some uploads may have unknown status, but not finalizing yet');
+        }
+    }
+
     mount() {
         super.mount();
         
@@ -135,24 +345,23 @@ class FirmwareUploadComponent extends Component {
     async performDeployment(file, targetNodes) {
         try {
             this.viewModel.startUpload();
-            
+
             // Show progress overlay to block UI interactions
             this.showProgressOverlay();
-            
+
             // Show upload progress area
             this.showUploadProgress(file, targetNodes);
-            
+
             // Start batch upload
             const results = await this.performBatchUpload(file, targetNodes);
-            
-            // Display results
-            this.displayUploadResults(results);
-            
-            // Reset interface after successful upload
-            this.viewModel.resetUploadState();
-            
+
+            // NOTE: Don't display results or reset state here!
+            // The upload state should remain active until websocket confirms completion
+            // Status updates and finalization happen via websocket messages in checkAndFinalizeUploadResults()
+            logger.debug('FirmwareUploadComponent: Firmware upload HTTP requests completed, waiting for websocket status updates');
+
         } catch (error) {
-            logger.error('Firmware deployment failed:', error);
+            logger.error('FirmwareUploadComponent: Firmware deployment failed:', error);
             this.showConfirmationDialog({
                 title: 'Deployment Failed',
                 message: `Deployment failed: ${error.message}`,
@@ -161,7 +370,7 @@ class FirmwareUploadComponent extends Component {
                 onConfirm: () => {},
                 onCancel: null
             });
-        } finally {
+            // Only complete upload on error
             this.viewModel.completeUpload();
             this.hideProgressOverlay();
         }
@@ -171,26 +380,28 @@ class FirmwareUploadComponent extends Component {
         const results = [];
         const totalNodes = nodes.length;
         let successfulUploads = 0;
-        
+
+        // Initialize all nodes as uploading first
         for (let i = 0; i < nodes.length; i++) {
             const node = nodes[i];
             const nodeIp = node.ip;
-            
+            this.updateNodeProgress(i + 1, totalNodes, nodeIp, 'Uploading...');
+        }
+
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            const nodeIp = node.ip;
+
             try {
-                // Update progress
-                this.updateNodeProgress(i + 1, totalNodes, nodeIp, 'Uploading...');
-                
-                // Upload to this node
+                // Upload to this node (HTTP call just initiates the upload)
                 const result = await this.performSingleUpload(file, nodeIp);
+
+                // Don't immediately mark as completed - wait for websocket status
+                logger.debug(`FirmwareUploadComponent: Firmware upload initiated for node ${nodeIp}, waiting for completion status via websocket`);
                 results.push(result);
-                successfulUploads++;
-                
-                // Update progress
-                this.updateNodeProgress(i + 1, totalNodes, nodeIp, 'Completed');
-                this.updateOverallProgress(successfulUploads, totalNodes);
-                
+
             } catch (error) {
-                logger.error(`Failed to upload to node ${nodeIp}:`, error);
+                logger.error(`FirmwareUploadComponent: Failed to upload to node ${nodeIp}:`, error);
                 const errorResult = {
                     nodeIp: nodeIp,
                     hostname: node.hostname || nodeIp,
@@ -199,33 +410,38 @@ class FirmwareUploadComponent extends Component {
                     timestamp: new Date().toISOString()
                 };
                 results.push(errorResult);
-                
-                // Update progress
+
+                // For HTTP errors, we can immediately mark as failed since the upload didn't start
                 this.updateNodeProgress(i + 1, totalNodes, nodeIp, 'Failed');
-                this.updateOverallProgress(successfulUploads, totalNodes);
             }
-            
+
             // Small delay between uploads
             if (i < nodes.length - 1) {
                 await new Promise(resolve => setTimeout(resolve, 1000));
             }
         }
-        
+
         return results;
     }
 
     async performSingleUpload(file, nodeIp) {
         try {
             const result = await window.apiClient.uploadFirmware(file, nodeIp);
-            
+
+            // IMPORTANT: This HTTP response is just an acknowledgment that the gateway received the file
+            // The actual firmware processing happens asynchronously on the device
+            // Status updates will come via WebSocket messages, NOT from this HTTP response
+            logger.debug(`FirmwareUploadComponent: HTTP acknowledgment received for ${nodeIp}:`, result);
+            logger.debug(`FirmwareUploadComponent: This does NOT mean upload is complete - waiting for WebSocket status updates`);
+
             return {
                 nodeIp: nodeIp,
                 hostname: nodeIp,
-                success: true,
+                httpAcknowledged: true,  // Changed from 'success' to make it clear this is just HTTP ack
                 result: result,
                 timestamp: new Date().toISOString()
             };
-            
+
         } catch (error) {
             throw new Error(`Upload to ${nodeIp} failed: ${error.message}`);
         }
@@ -260,7 +476,7 @@ class FirmwareUploadComponent extends Component {
                         <span class="progress-text">0/${nodes.length} Successful (0%)</span>
                     </div>
                     <div class="progress-summary" id="progress-summary">
-                        <span>Status: Preparing upload...</span>
+                        <span>Status: Upload in progress...</span>
                     </div>
                 </div>
             `;
@@ -283,7 +499,7 @@ class FirmwareUploadComponent extends Component {
                     <span class="node-ip">${node.ip}</span>
                 </div>
                 <div class="node-status">
-                    <span class="status-indicator pending">Pending...</span>
+                    <span class="status-indicator uploading">Uploading...</span>
                 </div>
             </div>
         `).join('');
@@ -315,12 +531,12 @@ class FirmwareUploadComponent extends Component {
     updateOverallProgress(successfulUploads, totalNodes) {
         const progressBar = this.findElement('#overall-progress-bar');
         const progressText = this.findElement('.progress-text');
-        
+
         if (progressBar && progressText) {
             const successPercentage = Math.round((successfulUploads / totalNodes) * 100);
             progressBar.style.width = `${successPercentage}%`;
             progressText.textContent = `${successfulUploads}/${totalNodes} Successful (${successPercentage}%)`;
-            
+
             // Update progress bar color based on completion
             if (successPercentage === 100) {
                 progressBar.style.backgroundColor = '#4ade80';
@@ -329,16 +545,10 @@ class FirmwareUploadComponent extends Component {
             } else {
                 progressBar.style.backgroundColor = '#fbbf24';
             }
-            
-            // Update progress summary for single-node uploads
-            const progressSummary = this.findElement('#progress-summary');
-            if (progressSummary && totalNodes === 1) {
-                if (successfulUploads === 1) {
-                    progressSummary.innerHTML = '<span>Status: Upload completed successfully</span>';
-                } else if (successfulUploads === 0) {
-                    progressSummary.innerHTML = '<span>Status: Upload failed</span>';
-                }
-            }
+
+            // NOTE: Don't update progress summary here for single-node uploads
+            // The summary should only be updated via websocket status updates
+            // This prevents premature "completed successfully" messages
         }
     }
 
@@ -426,8 +636,6 @@ class FirmwareUploadComponent extends Component {
                 `;
             }
         }
-        
-        this.updateDeployButton();
     }
 
     updateUploadProgress() {