feat: firmware upload on the cluster view
This commit is contained in:
@@ -95,6 +95,11 @@ class ClusterMembersComponent extends Component {
|
||||
});
|
||||
}
|
||||
|
||||
// Get currently filtered members (public method for external access)
|
||||
getFilteredMembers() {
|
||||
return this.filterMembers(this.allMembers);
|
||||
}
|
||||
|
||||
// Update filter dropdowns with current label data
|
||||
updateFilterDropdowns() {
|
||||
// Get currently filtered members to determine available options
|
||||
|
||||
@@ -47,6 +47,9 @@ class ClusterViewComponent extends Component {
|
||||
// Set up refresh button event listener (since it's in the cluster header, not in the members container)
|
||||
this.setupRefreshButton();
|
||||
|
||||
// Set up deploy button event listener
|
||||
this.setupDeployButton();
|
||||
|
||||
// Only load data if we haven't already or if the view model is empty
|
||||
const members = this.viewModel.get('members');
|
||||
const shouldLoadData = true; // always perform initial refresh quickly
|
||||
@@ -86,6 +89,133 @@ class ClusterViewComponent extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
setupDeployButton() {
|
||||
logger.debug('ClusterViewComponent: Setting up deploy button...');
|
||||
|
||||
const deployBtn = this.findElement('#deploy-firmware-btn');
|
||||
logger.debug('ClusterViewComponent: Found deploy button:', !!deployBtn, deployBtn);
|
||||
|
||||
if (deployBtn) {
|
||||
logger.debug('ClusterViewComponent: Adding click event listener to deploy button');
|
||||
this.addEventListener(deployBtn, 'click', this.handleDeploy.bind(this));
|
||||
logger.debug('ClusterViewComponent: Event listener added successfully');
|
||||
} else {
|
||||
logger.error('ClusterViewComponent: Deploy button not found!');
|
||||
logger.debug('ClusterViewComponent: Container HTML:', this.container.innerHTML);
|
||||
logger.debug('ClusterViewComponent: All buttons in container:', this.container.querySelectorAll('button'));
|
||||
}
|
||||
}
|
||||
|
||||
async handleDeploy() {
|
||||
logger.debug('ClusterViewComponent: Deploy button clicked, opening firmware upload drawer...');
|
||||
|
||||
// Get current filtered members from cluster members component
|
||||
const filteredMembers = this.clusterMembersComponent ? this.clusterMembersComponent.getFilteredMembers() : [];
|
||||
|
||||
if (!filteredMembers || filteredMembers.length === 0) {
|
||||
alert('No nodes available for firmware deployment. Please ensure cluster members are loaded and visible.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Open drawer with firmware upload interface
|
||||
this.openFirmwareUploadDrawer(filteredMembers);
|
||||
}
|
||||
|
||||
openFirmwareUploadDrawer(targetNodes) {
|
||||
logger.debug('ClusterViewComponent: Opening firmware upload drawer for', targetNodes.length, 'nodes');
|
||||
|
||||
// Get display name for drawer title
|
||||
const nodeCount = targetNodes.length;
|
||||
const displayName = `Firmware Deployment - ${nodeCount} node${nodeCount !== 1 ? 's' : ''}`;
|
||||
|
||||
// Open drawer with content callback (hide terminal button for firmware upload)
|
||||
this.clusterMembersComponent.drawer.openDrawer(displayName, (contentContainer, setActiveComponent) => {
|
||||
// Create firmware upload view model and component
|
||||
const firmwareUploadVM = new ClusterFirmwareViewModel();
|
||||
firmwareUploadVM.setTargetNodes(targetNodes);
|
||||
|
||||
// Create HTML for firmware upload interface
|
||||
contentContainer.innerHTML = `
|
||||
<div class="firmware-upload-drawer">
|
||||
<div class="firmware-upload-section">
|
||||
<!--div class="firmware-upload-header">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px; vertical-align: -2px;">
|
||||
<path d="M4 7l8-4 8 4v10l-8 4-8-4z"/>
|
||||
<path d="M12 8v8"/>
|
||||
</svg>
|
||||
Firmware Upload
|
||||
</h3>
|
||||
</div-->
|
||||
|
||||
<div class="firmware-upload-controls">
|
||||
<div class="file-input-wrapper">
|
||||
<div class="file-input-left">
|
||||
<input type="file" id="firmware-file" accept=".bin,.hex" style="display: none;">
|
||||
<button class="upload-btn-compact" onclick="document.getElementById('firmware-file').click()">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="margin-right:6px; vertical-align: -2px;">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<path d="M14 2v6h6"/>
|
||||
</svg>
|
||||
Choose File
|
||||
</button>
|
||||
<span class="file-info" id="file-info">No file selected</span>
|
||||
</div>
|
||||
<button class="deploy-btn-compact" id="deploy-btn" disabled>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="margin-right:6px; vertical-align: -2px;">
|
||||
<path d="M12 16V4"/>
|
||||
<path d="M8 8l4-4 4 4"/>
|
||||
<path d="M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2"/>
|
||||
</svg>
|
||||
Deploy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="target-nodes-section">
|
||||
<h3>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px; vertical-align: -2px;">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
Target Nodes (${targetNodes.length})
|
||||
</h3>
|
||||
<div class="target-nodes-list">
|
||||
${targetNodes.map(node => `
|
||||
<div class="target-node-item" data-node-ip="${node.ip}">
|
||||
<div class="node-info">
|
||||
<span class="node-name">${node.hostname || node.ip}</span>
|
||||
<span class="node-ip">${node.ip}</span>
|
||||
</div>
|
||||
<div class="node-status">
|
||||
<span class="status-indicator ready">Ready</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="firmware-progress-container">
|
||||
<!-- Progress will be shown here during upload -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Create and mount firmware upload component
|
||||
const firmwareUploadComponent = new FirmwareUploadComponent(contentContainer, firmwareUploadVM, this.eventBus);
|
||||
setActiveComponent(firmwareUploadComponent);
|
||||
firmwareUploadComponent.mount();
|
||||
|
||||
}, null, () => {
|
||||
// Close callback - clear any upload state
|
||||
logger.debug('ClusterViewComponent: Firmware upload drawer closed');
|
||||
}, true); // Hide terminal button for firmware upload
|
||||
}
|
||||
|
||||
async handleRefresh() {
|
||||
logger.debug('ClusterViewComponent: Refresh button clicked, performing full refresh...');
|
||||
|
||||
|
||||
@@ -91,7 +91,7 @@ class DrawerComponent {
|
||||
});
|
||||
}
|
||||
|
||||
openDrawer(title, contentCallback, errorCallback, onCloseCallback) {
|
||||
openDrawer(title, contentCallback, errorCallback, onCloseCallback, hideTerminalButton = false) {
|
||||
this.ensureDrawer();
|
||||
this.onCloseCallback = onCloseCallback;
|
||||
|
||||
@@ -101,6 +101,12 @@ class DrawerComponent {
|
||||
titleEl.textContent = title;
|
||||
}
|
||||
|
||||
// Show/hide terminal button based on parameter
|
||||
const terminalBtn = this.detailsDrawer.querySelector('.drawer-terminal-btn');
|
||||
if (terminalBtn) {
|
||||
terminalBtn.style.display = hideTerminalButton ? 'none' : 'block';
|
||||
}
|
||||
|
||||
// Clear previous component if any
|
||||
if (this.activeDrawerComponent && typeof this.activeDrawerComponent.unmount === 'function') {
|
||||
try {
|
||||
|
||||
539
public/scripts/components/FirmwareUploadComponent.js
Normal file
539
public/scripts/components/FirmwareUploadComponent.js
Normal file
@@ -0,0 +1,539 @@
|
||||
// Reusable Firmware Upload Component
|
||||
class FirmwareUploadComponent extends Component {
|
||||
constructor(container, viewModel, eventBus) {
|
||||
super(container, viewModel, eventBus);
|
||||
|
||||
logger.debug('FirmwareUploadComponent: Constructor called');
|
||||
logger.debug('FirmwareUploadComponent: Container:', container);
|
||||
logger.debug('FirmwareUploadComponent: Container ID:', container?.id);
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Setup firmware file input
|
||||
const firmwareFile = this.findElement('#firmware-file');
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
||||
setupViewModelListeners() {
|
||||
this.subscribeToProperty('selectedFile', () => {
|
||||
this.updateFileInfo();
|
||||
this.updateDeployButton();
|
||||
});
|
||||
this.subscribeToProperty('isUploading', this.updateUploadState.bind(this));
|
||||
this.subscribeToProperty('uploadProgress', this.updateUploadProgress.bind(this));
|
||||
this.subscribeToProperty('uploadResults', this.updateUploadResults.bind(this));
|
||||
}
|
||||
|
||||
mount() {
|
||||
super.mount();
|
||||
|
||||
logger.debug('FirmwareUploadComponent: Mounting...');
|
||||
|
||||
// Initialize UI state
|
||||
this.updateFileInfo();
|
||||
this.updateDeployButton();
|
||||
|
||||
logger.debug('FirmwareUploadComponent: Mounted successfully');
|
||||
}
|
||||
|
||||
render() {
|
||||
// Initial render is handled by the HTML template
|
||||
this.updateDeployButton();
|
||||
}
|
||||
|
||||
handleFileSelect(event) {
|
||||
const file = event.target.files[0];
|
||||
this.viewModel.setSelectedFile(file);
|
||||
}
|
||||
|
||||
async handleDeploy() {
|
||||
const file = this.viewModel.get('selectedFile');
|
||||
const targetNodes = this.viewModel.get('targetNodes');
|
||||
|
||||
if (!file) {
|
||||
alert('Please select a firmware file first.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!targetNodes || targetNodes.length === 0) {
|
||||
alert('No target nodes available for firmware update.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.viewModel.startUpload();
|
||||
|
||||
// Show progress overlay to block UI interactions
|
||||
this.showProgressOverlay();
|
||||
|
||||
const confirmed = confirm(`Upload firmware to ${targetNodes.length} node(s)?\n\nTarget nodes:\n${targetNodes.map(n => `• ${n.hostname || n.ip} (${n.ip})`).join('\n')}\n\nThis will update the firmware on all selected nodes.`);
|
||||
if (!confirmed) {
|
||||
this.viewModel.completeUpload();
|
||||
this.hideProgressOverlay();
|
||||
return;
|
||||
}
|
||||
|
||||
// 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();
|
||||
|
||||
} catch (error) {
|
||||
logger.error('Firmware deployment failed:', error);
|
||||
alert(`Deployment failed: ${error.message}`);
|
||||
} finally {
|
||||
this.viewModel.completeUpload();
|
||||
this.hideProgressOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
async performBatchUpload(file, nodes) {
|
||||
const results = [];
|
||||
const totalNodes = nodes.length;
|
||||
let successfulUploads = 0;
|
||||
|
||||
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
|
||||
const result = await this.performSingleUpload(file, nodeIp);
|
||||
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 = {
|
||||
nodeIp: nodeIp,
|
||||
hostname: node.hostname || nodeIp,
|
||||
success: false,
|
||||
error: error.message,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
results.push(errorResult);
|
||||
|
||||
// Update progress
|
||||
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);
|
||||
|
||||
return {
|
||||
nodeIp: nodeIp,
|
||||
hostname: nodeIp,
|
||||
success: true,
|
||||
result: result,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
throw new Error(`Upload to ${nodeIp} failed: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
showUploadProgress(file, nodes) {
|
||||
// Update the target nodes section header to show upload progress
|
||||
const targetNodesSection = this.findElement('.target-nodes-section');
|
||||
if (targetNodesSection) {
|
||||
const h3 = targetNodesSection.querySelector('h3');
|
||||
if (h3) {
|
||||
h3.innerHTML = `
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px; vertical-align: -2px;">
|
||||
<path d="M12 16V4"/>
|
||||
<path d="M8 8l4-4 4 4"/>
|
||||
<path d="M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2"/>
|
||||
</svg>
|
||||
Firmware Upload Progress (${nodes.length} nodes)
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Add progress info to the firmware-progress-container
|
||||
const container = this.findElement('#firmware-progress-container');
|
||||
if (container) {
|
||||
const progressHTML = `
|
||||
<div class="upload-progress-info">
|
||||
<div class="overall-progress">
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" id="overall-progress-bar" style="width: 0%; background-color: #fbbf24;"></div>
|
||||
</div>
|
||||
<span class="progress-text">0/${nodes.length} Successful (0%)</span>
|
||||
</div>
|
||||
<div class="progress-summary" id="progress-summary">
|
||||
<span>Status: Preparing upload...</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
container.innerHTML = progressHTML;
|
||||
}
|
||||
|
||||
// Update existing target nodes to show upload status
|
||||
this.updateTargetNodesForUpload(nodes);
|
||||
}
|
||||
|
||||
updateTargetNodesForUpload(nodes) {
|
||||
const targetNodesList = this.findElement('.target-nodes-list');
|
||||
if (!targetNodesList) return;
|
||||
|
||||
// Update each target node item to show upload status
|
||||
targetNodesList.innerHTML = nodes.map(node => `
|
||||
<div class="target-node-item" data-node-ip="${node.ip}">
|
||||
<div class="node-info">
|
||||
<span class="node-name">${node.hostname || node.ip}</span>
|
||||
<span class="node-ip">${node.ip}</span>
|
||||
</div>
|
||||
<div class="node-status">
|
||||
<span class="status-indicator pending">Pending...</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
updateNodeProgress(current, total, nodeIp, status) {
|
||||
const targetNodeItem = this.findElement(`[data-node-ip="${nodeIp}"]`);
|
||||
if (targetNodeItem) {
|
||||
const statusElement = targetNodeItem.querySelector('.status-indicator');
|
||||
|
||||
if (statusElement) {
|
||||
statusElement.textContent = status;
|
||||
|
||||
// Update status-specific styling
|
||||
statusElement.className = 'status-indicator';
|
||||
if (status === 'Completed') {
|
||||
statusElement.classList.add('success');
|
||||
} else if (status === 'Failed') {
|
||||
statusElement.classList.add('error');
|
||||
} else if (status === 'Uploading...') {
|
||||
statusElement.classList.add('uploading');
|
||||
} else if (status === 'Pending...') {
|
||||
statusElement.classList.add('pending');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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';
|
||||
} else if (successPercentage > 50) {
|
||||
progressBar.style.backgroundColor = '#60a5fa';
|
||||
} 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>';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
displayUploadResults(results) {
|
||||
const progressHeader = this.findElement('.progress-header h3');
|
||||
const progressSummary = this.findElement('#progress-summary');
|
||||
|
||||
if (progressHeader && progressSummary) {
|
||||
const successCount = results.filter(r => r.success).length;
|
||||
const totalCount = results.length;
|
||||
const successRate = Math.round((successCount / totalCount) * 100);
|
||||
|
||||
if (totalCount === 1) {
|
||||
// Single node upload
|
||||
if (successCount === 1) {
|
||||
progressHeader.textContent = `Firmware Upload Complete`;
|
||||
progressSummary.innerHTML = `<span>${window.icon('success', { width: 14, height: 14 })} Upload to ${results[0].hostname || results[0].nodeIp} completed successfully at ${new Date().toLocaleTimeString()}</span>`;
|
||||
} else {
|
||||
progressHeader.textContent = `Firmware Upload Failed`;
|
||||
progressSummary.innerHTML = `<span>${window.icon('error', { width: 14, height: 14 })} Upload to ${results[0].hostname || results[0].nodeIp} failed at ${new Date().toLocaleTimeString()}</span>`;
|
||||
}
|
||||
} else if (successCount === totalCount) {
|
||||
// Multi-node upload - all successful
|
||||
progressHeader.textContent = `Firmware Upload Complete (${successCount}/${totalCount} Successful)`;
|
||||
progressSummary.innerHTML = `<span>${window.icon('success', { width: 14, height: 14 })} All uploads completed successfully at ${new Date().toLocaleTimeString()}</span>`;
|
||||
} else {
|
||||
// Multi-node upload - some failed
|
||||
progressHeader.textContent = `Firmware Upload Results (${successCount}/${totalCount} Successful)`;
|
||||
progressSummary.innerHTML = `<span>${window.icon('warning', { width: 14, height: 14 })} Upload completed with ${totalCount - successCount} failure(s) at ${new Date().toLocaleTimeString()}</span>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateFileInfo() {
|
||||
const file = this.viewModel.get('selectedFile');
|
||||
const fileInfo = this.findElement('#file-info');
|
||||
|
||||
if (file) {
|
||||
fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)}KB)`;
|
||||
fileInfo.classList.add('has-file');
|
||||
} else {
|
||||
fileInfo.textContent = 'No file selected';
|
||||
fileInfo.classList.remove('has-file');
|
||||
}
|
||||
|
||||
this.updateDeployButton();
|
||||
}
|
||||
|
||||
updateDeployButton() {
|
||||
const deployBtn = this.findElement('#deploy-btn');
|
||||
if (deployBtn) {
|
||||
const file = this.viewModel.get('selectedFile');
|
||||
const targetNodes = this.viewModel.get('targetNodes');
|
||||
const isUploading = this.viewModel.get('isUploading');
|
||||
|
||||
deployBtn.disabled = !file || !targetNodes || targetNodes.length === 0 || isUploading;
|
||||
}
|
||||
}
|
||||
|
||||
updateUploadState() {
|
||||
const isUploading = this.viewModel.get('isUploading');
|
||||
const deployBtn = this.findElement('#deploy-btn');
|
||||
|
||||
if (deployBtn) {
|
||||
deployBtn.disabled = isUploading;
|
||||
if (isUploading) {
|
||||
deployBtn.classList.add('loading');
|
||||
// Update button text while keeping the SVG icon
|
||||
const iconSvg = deployBtn.querySelector('svg');
|
||||
deployBtn.innerHTML = '';
|
||||
if (iconSvg) {
|
||||
deployBtn.appendChild(iconSvg);
|
||||
}
|
||||
deployBtn.appendChild(document.createTextNode(' Deploying...'));
|
||||
} else {
|
||||
deployBtn.classList.remove('loading');
|
||||
// Restore original button content with SVG icon
|
||||
deployBtn.innerHTML = `
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="margin-right:6px; vertical-align: -2px;">
|
||||
<path d="M12 16V4"/>
|
||||
<path d="M8 8l4-4 4 4"/>
|
||||
<path d="M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2"/>
|
||||
</svg>
|
||||
Deploy
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
this.updateDeployButton();
|
||||
}
|
||||
|
||||
updateUploadProgress() {
|
||||
// This will be implemented when we add upload progress tracking
|
||||
}
|
||||
|
||||
updateUploadResults() {
|
||||
// This will be implemented when we add upload results display
|
||||
}
|
||||
|
||||
showProgressOverlay() {
|
||||
// Create overlay element that only covers the left side (main content area)
|
||||
const overlay = document.createElement('div');
|
||||
overlay.id = 'firmware-upload-overlay';
|
||||
overlay.className = 'firmware-upload-overlay';
|
||||
overlay.innerHTML = `
|
||||
<div class="overlay-content">
|
||||
<div class="overlay-spinner">
|
||||
<svg class="spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20z"/>
|
||||
<path d="M12 2a10 10 0 0 1 10 10"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="overlay-text">Firmware upload in progress...</div>
|
||||
<div class="overlay-subtext">Check the drawer for detailed progress</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add to body
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
// Check if drawer is open and adjust overlay accordingly
|
||||
const drawer = document.querySelector('.details-drawer');
|
||||
if (drawer && drawer.classList.contains('open')) {
|
||||
overlay.classList.add('drawer-open');
|
||||
}
|
||||
|
||||
// Block ESC key during upload
|
||||
this.blockEscapeKey();
|
||||
|
||||
// Block drawer close button during upload
|
||||
this.blockDrawerCloseButton();
|
||||
|
||||
// Block choose file button during upload
|
||||
this.blockChooseFileButton();
|
||||
|
||||
|
||||
// Store reference for cleanup
|
||||
this.progressOverlay = overlay;
|
||||
}
|
||||
|
||||
blockDrawerCloseButton() {
|
||||
// Find the drawer close button
|
||||
const closeButton = document.querySelector('.drawer-close');
|
||||
if (closeButton) {
|
||||
// Store original state
|
||||
this.originalCloseButtonDisabled = closeButton.disabled;
|
||||
this.originalCloseButtonStyle = closeButton.style.cssText;
|
||||
|
||||
// Disable the close button
|
||||
closeButton.disabled = true;
|
||||
closeButton.style.opacity = '0.5';
|
||||
closeButton.style.cursor = 'not-allowed';
|
||||
closeButton.style.pointerEvents = 'none';
|
||||
|
||||
// Add visual indicator that it's disabled
|
||||
closeButton.title = 'Cannot close during firmware upload';
|
||||
}
|
||||
}
|
||||
|
||||
unblockDrawerCloseButton() {
|
||||
// Restore the drawer close button
|
||||
const closeButton = document.querySelector('.drawer-close');
|
||||
if (closeButton) {
|
||||
// Restore original state
|
||||
closeButton.disabled = this.originalCloseButtonDisabled || false;
|
||||
closeButton.style.cssText = this.originalCloseButtonStyle || '';
|
||||
closeButton.title = 'Close';
|
||||
}
|
||||
}
|
||||
|
||||
blockChooseFileButton() {
|
||||
// Find the choose file button
|
||||
const chooseFileButton = document.querySelector('.upload-btn-compact');
|
||||
if (chooseFileButton) {
|
||||
// Store original state
|
||||
this.originalChooseFileButtonDisabled = chooseFileButton.disabled;
|
||||
this.originalChooseFileButtonStyle = chooseFileButton.style.cssText;
|
||||
|
||||
// Disable the choose file button
|
||||
chooseFileButton.disabled = true;
|
||||
chooseFileButton.style.opacity = '0.5';
|
||||
chooseFileButton.style.cursor = 'not-allowed';
|
||||
chooseFileButton.style.pointerEvents = 'none';
|
||||
|
||||
// Add visual indicator that it's disabled
|
||||
chooseFileButton.title = 'Cannot change file during upload';
|
||||
}
|
||||
}
|
||||
|
||||
unblockChooseFileButton() {
|
||||
// Restore the choose file button
|
||||
const chooseFileButton = document.querySelector('.upload-btn-compact');
|
||||
if (chooseFileButton) {
|
||||
// Restore original state
|
||||
chooseFileButton.disabled = this.originalChooseFileButtonDisabled || false;
|
||||
chooseFileButton.style.cssText = this.originalChooseFileButtonStyle || '';
|
||||
chooseFileButton.title = 'Choose File';
|
||||
}
|
||||
}
|
||||
|
||||
hideTargetNodesSection() {
|
||||
// Find the target nodes section
|
||||
const targetNodesSection = document.querySelector('.target-nodes-section');
|
||||
if (targetNodesSection) {
|
||||
// Store original state
|
||||
this.originalTargetNodesSectionDisplay = targetNodesSection.style.display;
|
||||
|
||||
// Hide the target nodes section
|
||||
targetNodesSection.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
showTargetNodesSection() {
|
||||
// Restore the target nodes section
|
||||
const targetNodesSection = document.querySelector('.target-nodes-section');
|
||||
if (targetNodesSection) {
|
||||
// Restore original state
|
||||
targetNodesSection.style.display = this.originalTargetNodesSectionDisplay || '';
|
||||
}
|
||||
}
|
||||
|
||||
blockEscapeKey() {
|
||||
// Create a keydown event listener that prevents ESC from closing the drawer
|
||||
this.escapeKeyHandler = (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.stopImmediatePropagation();
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// Add the event listener with capture=true to intercept before drawer's handler
|
||||
document.addEventListener('keydown', this.escapeKeyHandler, true);
|
||||
}
|
||||
|
||||
unblockEscapeKey() {
|
||||
// Remove the ESC key blocker
|
||||
if (this.escapeKeyHandler) {
|
||||
document.removeEventListener('keydown', this.escapeKeyHandler, true);
|
||||
this.escapeKeyHandler = null;
|
||||
}
|
||||
}
|
||||
|
||||
hideProgressOverlay() {
|
||||
if (this.progressOverlay) {
|
||||
this.progressOverlay.remove();
|
||||
this.progressOverlay = null;
|
||||
}
|
||||
|
||||
// Unblock ESC key
|
||||
this.unblockEscapeKey();
|
||||
|
||||
// Unblock drawer close button
|
||||
this.unblockDrawerCloseButton();
|
||||
|
||||
// Unblock choose file button
|
||||
this.unblockChooseFileButton();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
window.FirmwareUploadComponent = FirmwareUploadComponent;
|
||||
Reference in New Issue
Block a user