iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update firmware upload status through websocket

Browse Source
This commit is contained in:
0x1d
2025-10-21 13:00:02 +02:00
parent 85802c68db
commit 6ed42f9c90
3 changed files with 529 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/scripts/api-client.js
View File

@@ -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);
}

323
public/scripts/components/FirmwareComponent.js
View File

@@ -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 {
<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>
<div class="progress-list" id="progress-list">
@@ -477,7 +485,7 @@ class FirmwareComponent extends Component {
<span class="node-name">${node.hostname || node.ip}</span>
<span class="node-ip">${node.ip}</span>
</div>
<div class="progress-status">Pending...</div>
<div class="progress-status uploading">Uploading...</div>
<div class="progress-time" id="time-${node.ip}"></div>
</div>
`).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 = '<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
}
}
@@ -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 = `<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>`;
}
}
}
populateNodeSelect() {
const select = this.findElement('#specific-node-select');
if (!select) {

308
public/scripts/components/FirmwareUploadComponent.js
View File

@@ -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() {