diff --git a/public/scripts/api-client.js b/public/scripts/api-client.js
index 1fc9034..fa0a458 100644
--- a/public/scripts/api-client.js
+++ b/public/scripts/api-client.js
@@ -225,6 +225,9 @@ class WebSocketClient {
case 'node_discovery':
this.emit('nodeDiscovery', data);
break;
+ case 'firmware_upload_status':
+ this.emit('firmwareUploadStatus', data);
+ break;
default:
logger.debug('Unknown WebSocket message type:', data.type);
}
diff --git a/public/scripts/components/FirmwareComponent.js b/public/scripts/components/FirmwareComponent.js
index 535578c..2352603 100644
--- a/public/scripts/components/FirmwareComponent.js
+++ b/public/scripts/components/FirmwareComponent.js
@@ -27,12 +27,15 @@ class FirmwareComponent extends Component {
if (globalFirmwareFile) {
this.addEventListener(globalFirmwareFile, 'change', this.handleFileSelect.bind(this));
}
-
+
// Setup target selection
const targetRadios = this.findAllElements('input[name="target-type"]');
targetRadios.forEach(radio => {
this.addEventListener(radio, 'change', this.handleTargetChange.bind(this));
});
+
+ // Setup WebSocket listener for real-time firmware upload status
+ this.setupWebSocketListeners();
// Setup specific node select change handler
const specificNodeSelect = this.findElement('#specific-node-select');
@@ -258,8 +261,10 @@ class FirmwareComponent extends Component {
await this.uploadToLabelFilteredNodes(file);
}
- // Reset interface after successful upload
- this.viewModel.resetUploadState();
+ // NOTE: Don't reset upload state here!
+ // The upload state should remain active until websocket confirms completion
+ // Status updates and finalization happen via websocket messages in checkAndFinalizeUploadResults()
+ logger.debug('Firmware upload HTTP requests completed, waiting for websocket status updates');
} catch (error) {
logger.error('Firmware deployment failed:', error);
@@ -271,7 +276,7 @@ class FirmwareComponent extends Component {
onConfirm: () => {},
onCancel: null
});
- } finally {
+ // Only complete upload on error
this.viewModel.completeUpload();
}
}
@@ -300,8 +305,8 @@ class FirmwareComponent extends Component {
// Start batch upload
const results = await this.performBatchUpload(file, nodes);
- // Display results
- this.displayUploadResults(results);
+ // Don't display results here - wait for websocket to confirm all uploads complete
+ logger.debug('Batch upload HTTP requests completed, waiting for websocket confirmations');
} catch (error) {
logger.error('Failed to upload firmware to all nodes:', error);
@@ -313,27 +318,23 @@ class FirmwareComponent extends Component {
try {
// Show upload progress area
this.showUploadProgress(file, [{ ip: nodeIp, hostname: nodeIp }]);
-
- // Update progress to show starting
- this.updateNodeProgress(1, 1, nodeIp, 'Uploading...');
-
- // Perform single node upload
+
+ // Note: Status updates will come via websocket messages
+ // We don't update progress here as the HTTP response is just an acknowledgment
+
+ // Perform single node upload (this sends the file and gets acknowledgment)
const result = await this.performSingleUpload(file, nodeIp);
-
- // Update progress to show completion
- this.updateNodeProgress(1, 1, nodeIp, 'Completed');
- this.updateOverallProgress(1, 1);
-
- // Display results
- this.displayUploadResults([result]);
-
+
+ // Don't immediately mark as completed - wait for websocket status updates
+ logger.debug(`Firmware upload initiated for node ${nodeIp}, waiting for completion status via websocket`);
+
} catch (error) {
logger.error(`Failed to upload firmware to node ${nodeIp}:`, error);
-
- // Update progress to show failure
+
+ // For HTTP errors, we can immediately mark as failed since the upload didn't start
this.updateNodeProgress(1, 1, nodeIp, 'Failed');
this.updateOverallProgress(0, 1);
-
+
// Display error results
const errorResult = {
nodeIp: nodeIp,
@@ -343,7 +344,7 @@ class FirmwareComponent extends Component {
timestamp: new Date().toISOString()
};
this.displayUploadResults([errorResult]);
-
+
throw error;
}
}
@@ -369,8 +370,8 @@ class FirmwareComponent extends Component {
// Start batch upload
const results = await this.performBatchUpload(file, nodes);
- // Display results
- this.displayUploadResults(results);
+ // Don't display results here - wait for websocket to confirm all uploads complete
+ logger.debug('Label-filtered upload HTTP requests completed, waiting for websocket confirmations');
} catch (error) {
logger.error('Failed to upload firmware to label-filtered nodes:', error);
throw error;
@@ -381,24 +382,26 @@ class FirmwareComponent 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(`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);
const errorResult = {
@@ -409,18 +412,17 @@ class FirmwareComponent 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;
}
@@ -428,10 +430,16 @@ class FirmwareComponent extends Component {
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(`HTTP acknowledgment received for ${nodeIp}:`, result);
+ logger.debug(`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()
};
@@ -467,7 +475,7 @@ class FirmwareComponent extends Component {
0/${nodes.length} Successful (0%)
- Status: Preparing upload...
+ Status: Upload in progress...
@@ -477,7 +485,7 @@ class FirmwareComponent extends Component {
${node.hostname || node.ip}
${node.ip}
- Pending...
+ Uploading...
`).join('')}
@@ -490,7 +498,7 @@ class FirmwareComponent extends Component {
// Initialize progress for single-node uploads
if (nodes.length === 1) {
const node = nodes[0];
- this.updateNodeProgress(1, 1, node.ip, 'Pending...');
+ this.updateNodeProgress(1, 1, node.ip, 'Uploading...');
}
}
@@ -543,15 +551,9 @@ class FirmwareComponent extends Component {
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 = 'Status: Upload completed successfully';
- } else if (successfulUploads === 0) {
- progressSummary.innerHTML = 'Status: Upload failed';
- }
- }
+ // 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
}
}
@@ -635,6 +637,217 @@ class FirmwareComponent extends Component {
}
}
+ 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('Firmware upload status received:', { nodeIp, status, filename, timestamp: new Date(timestamp).toLocaleTimeString() });
+
+ // Check if there's currently an upload in progress
+ const isUploading = this.viewModel.get('isUploading');
+ if (!isUploading) {
+ logger.debug('No active upload, ignoring status update');
+ return;
+ }
+
+ // Find the progress item for this node
+ const progressItem = this.findElement(`[data-node-ip="${nodeIp}"]`);
+ if (!progressItem) {
+ logger.debug('No progress item found for node:', nodeIp);
+ return;
+ }
+
+ // Update the status display based on the received status
+ const statusElement = progressItem.querySelector('.progress-status');
+ const timeElement = progressItem.querySelector('.progress-time');
+
+ if (statusElement) {
+ let displayStatus = status;
+ let statusClass = '';
+
+ logger.debug(`Updating status for node ${nodeIp}: ${status} -> ${displayStatus}`);
+
+ switch (status) {
+ case 'uploading':
+ displayStatus = 'Uploading...';
+ statusClass = 'uploading';
+ break;
+ case 'completed':
+ displayStatus = 'Completed';
+ statusClass = 'success';
+ logger.debug(`Node ${nodeIp} marked as completed`);
+ break;
+ case 'failed':
+ displayStatus = 'Failed';
+ statusClass = 'error';
+ break;
+ default:
+ displayStatus = status;
+ break;
+ }
+
+ statusElement.textContent = displayStatus;
+ statusElement.className = `progress-status ${statusClass}`;
+
+ // Update timestamp for completed/failed uploads
+ if ((status === 'completed' || status === 'failed') && timeElement) {
+ timeElement.textContent = new Date(timestamp).toLocaleTimeString();
+ } else if (status === 'uploading' && timeElement) {
+ timeElement.textContent = 'Started: ' + new Date(timestamp).toLocaleTimeString();
+ }
+ }
+
+ // Update overall progress if we have multiple nodes
+ this.updateOverallProgressFromStatus();
+
+ // Check if all uploads are complete and finalize results
+ this.checkAndFinalizeUploadResults();
+ }
+
+ checkAndFinalizeUploadResults() {
+ const progressItems = this.findAllElements('.progress-item');
+ if (progressItems.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 = [];
+ progressItems.forEach(item => {
+ const statusElement = item.querySelector('.progress-status');
+ 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('Upload status check:', {
+ totalItems: progressItems.length,
+ allComplete,
+ uploadingCount,
+ hasAnyCompleted,
+ hasAnyFailed,
+ statuses
+ });
+
+ // If all uploads are complete, finalize the results
+ if (allComplete) {
+ logger.debug('All firmware uploads complete, finalizing results');
+
+ // Generate results based on current status
+ const results = progressItems.map(item => {
+ const nodeIp = item.getAttribute('data-node-ip');
+ const nodeName = item.querySelector('.node-name')?.textContent || nodeIp;
+ const statusElement = item.querySelector('.progress-status');
+ 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);
+
+ // 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
+ setTimeout(() => {
+ this.viewModel.resetUploadState();
+ }, 5000);
+ } else if (uploadingCount > 0) {
+ logger.debug(`${uploadingCount} uploads still in progress, not finalizing yet`);
+ } else {
+ logger.debug('Some uploads may have unknown status, but not finalizing yet');
+ }
+ }
+
+ updateOverallProgressFromStatus() {
+ const progressItems = this.findAllElements('.progress-item');
+ if (progressItems.length <= 1) {
+ return; // Only update for multi-node uploads
+ }
+
+ let completedCount = 0;
+ let failedCount = 0;
+ let uploadingCount = 0;
+
+ progressItems.forEach(item => {
+ const statusElement = item.querySelector('.progress-status');
+ if (statusElement) {
+ const status = statusElement.textContent;
+ if (status === 'Completed') {
+ completedCount++;
+ } else if (status === 'Failed') {
+ failedCount++;
+ } else if (status === 'Uploading...') {
+ uploadingCount++;
+ }
+ }
+ });
+
+ const totalNodes = progressItems.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 = `${window.icon('warning', { width: 14, height: 14 })} Upload in progress... (${uploadingCount} uploading, ${failedCount} failed)`;
+ } else if (uploadingCount > 0) {
+ progressSummary.innerHTML = `${window.icon('info', { width: 14, height: 14 })} Upload in progress... (${uploadingCount} uploading)`;
+ } else if (completedCount === totalNodes) {
+ progressSummary.innerHTML = `${window.icon('success', { width: 14, height: 14 })} All uploads completed successfully at ${new Date().toLocaleTimeString()}`;
+ }
+ }
+ }
+
populateNodeSelect() {
const select = this.findElement('#specific-node-select');
if (!select) {
diff --git a/public/scripts/components/FirmwareUploadComponent.js b/public/scripts/components/FirmwareUploadComponent.js
index 05d3859..6467077 100644
--- a/public/scripts/components/FirmwareUploadComponent.js
+++ b/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 = `${window.icon('warning', { width: 14, height: 14 })} Upload in progress... (${uploadingCount} uploading, ${failedCount} failed)`;
+ } else if (uploadingCount > 0) {
+ progressSummary.innerHTML = `${window.icon('info', { width: 14, height: 14 })} Upload in progress... (${uploadingCount} uploading)`;
+ } else if (completedCount === totalNodes) {
+ progressSummary.innerHTML = `${window.icon('success', { width: 14, height: 14 })} All uploads completed successfully at ${new Date().toLocaleTimeString()}`;
+ }
+ }
+ }
+
+ 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 {
0/${nodes.length} Successful (0%)
- Status: Preparing upload...
+ Status: Upload in progress...
`;
@@ -283,7 +499,7 @@ class FirmwareUploadComponent extends Component {
${node.ip}
- Pending...
+ Uploading...
`).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 = 'Status: Upload completed successfully';
- } else if (successfulUploads === 0) {
- progressSummary.innerHTML = 'Status: Upload failed';
- }
- }
+
+ // 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() {