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

feat: firmware upload on the cluster view

Browse Source
This commit is contained in:
0x1d
2025-10-16 21:26:16 +02:00
parent f3a61131db
commit 478d23b805
8 changed files with 1446 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
public/scripts/components/ClusterViewComponent.js
View File

@@ -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...');