diff --git a/public/app.js b/public/app.js index 7fe5b8a..ad3e761 100644 --- a/public/app.js +++ b/public/app.js @@ -21,7 +21,8 @@ document.addEventListener('DOMContentLoaded', function() { // Extract node information for firmware view const nodes = members.map(member => ({ ip: member.ip, - hostname: member.hostname || member.ip + hostname: member.hostname || member.ip, + labels: member.labels || {} })); firmwareViewModel.updateAvailableNodes(nodes); console.log('App: Updated firmware view model with nodes:', nodes); @@ -67,6 +68,33 @@ document.addEventListener('DOMContentLoaded', function() { console.log('=== SPORE UI Application initialization completed ==='); }); +// Burger menu toggle for mobile +(function setupBurgerMenu(){ + document.addEventListener('DOMContentLoaded', function(){ + const nav = document.querySelector('.main-navigation'); + const burger = document.getElementById('burger-btn'); + const navLeft = nav ? nav.querySelector('.nav-left') : null; + if (!nav || !burger || !navLeft) return; + burger.addEventListener('click', function(e){ + e.preventDefault(); + nav.classList.toggle('mobile-open'); + }); + // Close menu when a nav tab is clicked + navLeft.addEventListener('click', function(e){ + const btn = e.target.closest('.nav-tab'); + if (btn && nav.classList.contains('mobile-open')) { + nav.classList.remove('mobile-open'); + } + }); + // Close menu on outside click + document.addEventListener('click', function(e){ + if (!nav.contains(e.target) && nav.classList.contains('mobile-open')) { + nav.classList.remove('mobile-open'); + } + }); + }); +})(); + // Set up periodic updates with state preservation function setupPeriodicUpdates() { // Auto-refresh cluster members every 30 seconds using smart update diff --git a/public/components.js b/public/components.js index 7f077dd..a3fa438 100644 --- a/public/components.js +++ b/public/components.js @@ -1274,6 +1274,25 @@ class FirmwareComponent extends Component { console.warn('FirmwareComponent: specificNodeSelect element not found during setupEventListeners'); } + // Setup label select change handler (single-select add-to-chips) + const labelSelect = this.findElement('#label-select'); + if (labelSelect) { + this._boundLabelSelectHandler = (e) => { + const value = e.target.value; + if (!value) return; + const current = this.viewModel.get('selectedLabels') || []; + if (!current.includes(value)) { + this.viewModel.setSelectedLabels([...current, value]); + } + // Reset select back to placeholder + e.target.value = ''; + this.renderSelectedLabelChips(); + this.updateAffectedNodesPreview(); + this.updateDeployButton(); + }; + this.addEventListener(labelSelect, 'change', this._boundLabelSelectHandler); + } + // Setup deploy button const deployBtn = this.findElement('#deploy-btn'); if (deployBtn) { @@ -1289,15 +1308,23 @@ class FirmwareComponent extends Component { this.subscribeToProperty('targetType', () => { this.updateTargetVisibility(); this.updateDeployButton(); + this.updateAffectedNodesPreview(); }); this.subscribeToProperty('specificNode', this.updateDeployButton.bind(this)); this.subscribeToProperty('availableNodes', () => { this.populateNodeSelect(); + this.populateLabelSelect(); this.updateDeployButton(); + this.updateAffectedNodesPreview(); }); this.subscribeToProperty('uploadProgress', this.updateUploadProgress.bind(this)); this.subscribeToProperty('uploadResults', this.updateUploadResults.bind(this)); this.subscribeToProperty('isUploading', this.updateUploadState.bind(this)); + this.subscribeToProperty('selectedLabels', () => { + this.populateLabelSelect(); + this.updateAffectedNodesPreview(); + this.updateDeployButton(); + }); } mount() { @@ -1314,6 +1341,15 @@ class FirmwareComponent extends Component { console.log('FirmwareComponent: Mount - dropdown innerHTML:', dropdown.innerHTML); } + // Initialize target visibility and label list on first mount + try { + this.updateTargetVisibility(); + this.populateLabelSelect(); + this.updateAffectedNodesPreview(); + } catch (e) { + console.warn('FirmwareComponent: Initialization after mount failed:', e); + } + console.log('FirmwareComponent: Mounted successfully'); } @@ -1365,8 +1401,10 @@ class FirmwareComponent extends Component { if (targetType === 'all') { await this.uploadToAllNodes(file); - } else { + } else if (targetType === 'specific') { await this.uploadToSpecificNode(file, specificNode); + } else if (targetType === 'labels') { + await this.uploadToLabelFilteredNodes(file); } // Reset interface after successful upload @@ -1451,6 +1489,31 @@ class FirmwareComponent extends Component { } } + async uploadToLabelFilteredNodes(file) { + try { + const nodes = this.viewModel.getAffectedNodesByLabels(); + if (!nodes || nodes.length === 0) { + alert('No nodes match the selected labels.'); + return; + } + const labels = this.viewModel.get('selectedLabels') || []; + const confirmed = confirm(`Upload firmware to ${nodes.length} node(s) matching labels (${labels.join(', ')})?`); + if (!confirmed) return; + + // Show upload progress area + this.showUploadProgress(file, nodes); + + // Start batch upload + const results = await this.performBatchUpload(file, nodes); + + // Display results + this.displayUploadResults(results); + } catch (error) { + console.error('Failed to upload firmware to label-filtered nodes:', error); + throw error; + } + } + async performBatchUpload(file, nodes) { const results = []; const totalNodes = nodes.length; @@ -1671,31 +1734,24 @@ class FirmwareComponent extends Component { updateTargetVisibility() { const targetType = this.viewModel.get('targetType'); const specificNodeSelect = this.findElement('#specific-node-select'); + const labelSelect = this.findElement('#label-select'); console.log('FirmwareComponent: updateTargetVisibility called with targetType:', targetType); if (targetType === 'specific') { - specificNodeSelect.style.visibility = 'visible'; - specificNodeSelect.style.opacity = '1'; - console.log('FirmwareComponent: Showing specific node select'); - - // Check if the dropdown exists and is ready - if (specificNodeSelect && specificNodeSelect.tagName === 'SELECT') { - console.log('FirmwareComponent: Dropdown is ready, populating immediately'); - this.populateNodeSelect(); - } else { - console.log('FirmwareComponent: Dropdown not ready, delaying population'); - // Small delay to ensure the dropdown is visible before populating - setTimeout(() => { - this.populateNodeSelect(); - }, 100); + if (specificNodeSelect) { specificNodeSelect.style.display = 'inline-block'; } + if (labelSelect) { labelSelect.style.display = 'none'; } + this.populateNodeSelect(); + } else if (targetType === 'labels') { + if (specificNodeSelect) { specificNodeSelect.style.display = 'none'; } + if (labelSelect) { + labelSelect.style.display = 'inline-block'; + this.populateLabelSelect(); } } else { - specificNodeSelect.style.visibility = 'hidden'; - specificNodeSelect.style.opacity = '0'; - console.log('FirmwareComponent: Hiding specific node select'); + if (specificNodeSelect) { specificNodeSelect.style.display = 'none'; } + if (labelSelect) { labelSelect.style.display = 'none'; } } - this.updateDeployButton(); } @@ -1795,6 +1851,75 @@ class FirmwareComponent extends Component { this.updateDeployButton(); } + + populateLabelSelect() { + const select = this.findElement('#label-select'); + if (!select) return; + const labels = this.viewModel.get('availableLabels') || []; + const selected = new Set(this.viewModel.get('selectedLabels') || []); + const options = [''] + .concat(labels.filter(l => !selected.has(l)).map(l => ``)); + select.innerHTML = options.join(''); + // Ensure change listener remains bound + if (this._boundLabelSelectHandler) { + select.removeEventListener('change', this._boundLabelSelectHandler); + select.addEventListener('change', this._boundLabelSelectHandler); + } + this.renderSelectedLabelChips(); + } + + renderSelectedLabelChips() { + const container = this.findElement('#selected-labels-container'); + if (!container) return; + const selected = this.viewModel.get('selectedLabels') || []; + if (selected.length === 0) { + container.innerHTML = ''; + return; + } + container.innerHTML = selected.map(l => ` + + ${l} + + + `).join(''); + Array.from(container.querySelectorAll('.chip-remove')).forEach(btn => { + this.addEventListener(btn, 'click', (e) => { + e.stopPropagation(); + const label = btn.getAttribute('data-label'); + const current = this.viewModel.get('selectedLabels') || []; + this.viewModel.setSelectedLabels(current.filter(x => x !== label)); + this.populateLabelSelect(); + this.updateAffectedNodesPreview(); + this.updateDeployButton(); + }); + }); + } + + updateAffectedNodesPreview() { + const container = this.findElement('#firmware-nodes-list'); + if (!container) return; + if (this.viewModel.get('targetType') !== 'labels') { + container.innerHTML = ''; + return; + } + const nodes = this.viewModel.getAffectedNodesByLabels(); + if (!nodes.length) { + container.innerHTML = `
No nodes match the selected labels
`; + return; + } + const html = ` +
+

🎯 Affected Nodes (${nodes.length})

+
+ ${nodes.map(n => ` +
+
${n.hostname || n.ip}${n.ip}
+
+ `).join('')} +
+
`; + container.innerHTML = html; + } } // Cluster View Component diff --git a/public/index.html b/public/index.html index 254f33b..999a15c 100644 --- a/public/index.html +++ b/public/index.html @@ -9,6 +9,11 @@
+
@@ -85,6 +90,15 @@ +
diff --git a/public/styles.css b/public/styles.css index a6925fd..7f809de 100644 --- a/public/styles.css +++ b/public/styles.css @@ -852,9 +852,9 @@ p { } .action-group:hover { - background: rgba(0, 0, 0, 0.25); - border-color: rgba(255, 255, 255, 0.15); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + background: rgba(0, 0, 0, 0.2); + border-color: rgba(255, 255, 255, 0.1); + box-shadow: none; } .action-group h3 { @@ -877,7 +877,7 @@ p { gap: 1rem; align-items: center; padding: 1rem; - background: rgba(0, 0, 0, 0.2); + background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; transition: all 0.2s ease; @@ -886,28 +886,18 @@ p { } .compact-upload-row::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.15); - border-radius: 12px; - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; + content: none; } .compact-upload-row:hover::before { - opacity: 1; + opacity: 0; } .compact-upload-row:hover { - background: rgba(0, 0, 0, 0.25); - border-color: rgba(255, 255, 255, 0.15); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); - transform: translateY(-2px); + background: transparent; + border-color: rgba(255, 255, 255, 0.1); + box-shadow: none; + transform: none; } .file-upload-area { @@ -995,6 +985,7 @@ p { gap: 0.75rem; justify-content: flex-start; align-items: center; + min-height: 36px; } .target-option { @@ -1010,10 +1001,10 @@ p { } .target-option:hover { - background: rgba(0, 0, 0, 0.25); + background: transparent; border-color: transparent; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); - transform: translateY(-1px); + box-shadow: none; + transform: none; } .target-option input[type="radio"] { @@ -1023,18 +1014,17 @@ p { .radio-custom { width: 14px; height: 14px; - border: 2px solid rgba(255, 255, 255, 0.1); + border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 50%; position: relative; - transition: all 0.2s ease; background: rgba(0, 0, 0, 0.2); } .target-option input[type="radio"]:checked + .radio-custom { border-color: #667eea; background: #667eea; - box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); - transform: scale(1.05); + box-shadow: none; + transform: none; } .target-option input[type="radio"]:checked + .radio-custom::after { @@ -1047,7 +1037,6 @@ p { height: 5px; background: white; border-radius: 50%; - animation: radioPop 0.2s ease-out; } @keyframes radioPop { @@ -1243,6 +1232,7 @@ p { gap: 0.75rem; flex-wrap: wrap; align-items: center; + min-height: 40px; } .target-option { @@ -1271,8 +1261,6 @@ p { min-width: auto; width: auto; padding: 0.4rem 0.6rem; - visibility: visible; - opacity: 1; font-size: 0.8rem; flex: 1; min-width: 120px; @@ -1741,10 +1729,9 @@ p { .specific-node-option .node-select { margin-left: 0.5rem; - visibility: hidden; - opacity: 0; - transition: opacity 0.2s ease; -} + display: none; +} + /* Capabilities Styles */ .capabilities-list { @@ -2107,4 +2094,213 @@ p { .cap-call-btn { padding: 0.35rem 0.75rem; } -} \ No newline at end of file +} + +.label-select { + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); + color: #ffffff; + padding: 0.3rem 2rem 0.3rem 0.5rem; + border-radius: 6px; + font-size: 0.8rem; + transition: all 0.2s ease; + cursor: pointer; + min-width: 160px; + font-weight: 500; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); + appearance: none; + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 0.5rem center; + background-size: 12px 12px; +} + +.label-select:hover { + background-color: rgba(0, 0, 0, 0.25); + border-color: rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + transform: translateY(-1px); +} + +.label-select:focus { + outline: none; + border-color: #667eea; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); + background-color: rgba(0, 0, 0, 0.3); +} + +.label-select option { + background: #1a202c; + color: #ffffff; +} + +.label-select option:hover { + background: #2d3748; +} + +.label-select option:checked { + background: #667eea; + color: #ffffff; + font-weight: 600; +} + +.label-select:invalid { + color: rgba(255, 255, 255, 0.8); +} + +.label-select:valid { + color: #ffffff; +} + +.selected-labels { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; + margin-left: 0.5rem; + max-width: 100%; +} + +.label-chip.removable { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding-right: 0.25rem; + background: rgba(139, 92, 246, 0.15); + border: 1px solid rgba(139, 92, 246, 0.35); +} + +.label-chip .chip-remove { + appearance: none; + background: transparent; + border: none; + color: rgba(255, 255, 255, 0.85); + cursor: pointer; + font-size: 0.85rem; + line-height: 1; + padding: 0 0.25rem; + border-radius: 9999px; + transition: background 0.15s ease, transform 0.15s ease; +} + +.label-chip .chip-remove:hover { + background: rgba(255, 255, 255, 0.12); + transform: scale(1.05); +} + +@media (max-width: 768px) { + .by-label-option { + display: inline-flex; + flex-direction: row; + align-items: center; + gap: 0.5rem; + width: 100%; + flex-wrap: wrap; + } + .by-label-option .target-label { + white-space: nowrap; + } + .by-label-option .label-select { + flex: 0 1 55%; + min-width: 120px; + max-width: 60%; + } + #selected-labels-container.selected-labels { + flex: 1 1 100%; + min-width: 0; + margin-left: 0; + } +} + +@media (max-width: 480px) { + .label-select { + padding: 0.3rem 1.5rem 0.3rem 0.5rem; + background-position: right 0.4rem center; + background-size: 10px 10px; + } +} + +.compact-upload-row, +.file-upload-area, +.file-input-wrapper { + max-width: 100%; +} + +.label-select { + max-width: 100%; +} + +/* Keep By Label on a single line for the label + select, but allow chips to wrap below */ +@media (max-width: 768px) { + .by-label-option { + display: inline-flex; + flex-direction: row; + align-items: center; + gap: 0.5rem; + width: 100%; + flex-wrap: wrap; + } + .by-label-option .target-label { + white-space: nowrap; + } + .by-label-option .label-select { + flex: 0 1 55%; + min-width: 120px; + max-width: 60%; + } + #selected-labels-container.selected-labels { + flex: 1 1 100%; + min-width: 0; + margin-left: 0; + } +} + +/* Burger menu */ +.burger-btn { + display: none; + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.15); + color: rgba(255, 255, 255, 0.9); + padding: 0.5rem; + border-radius: 10px; + cursor: pointer; + align-items: center; + justify-content: center; +} + +.burger-btn svg { + width: 18px; + height: 18px; + stroke: currentColor; + stroke-width: 2; +} + +@media (max-width: 768px) { + .main-navigation { + position: relative; + } + .burger-btn { + display: inline-flex; + margin-right: 0.5rem; + } + .nav-left { + display: none; + } + .main-navigation.mobile-open .nav-left { + display: flex; + flex-direction: column; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.6); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 12px; + padding: 0.5rem; + gap: 0.25rem; + z-index: 50; + } + .main-navigation.mobile-open .nav-left .nav-tab { + width: 100%; + text-align: left; + } +} \ No newline at end of file diff --git a/public/view-models.js b/public/view-models.js index 72716b7..c799617 100644 --- a/public/view-models.js +++ b/public/view-models.js @@ -315,7 +315,9 @@ class FirmwareViewModel extends ViewModel { availableNodes: [], uploadProgress: null, uploadResults: [], - isUploading: false + isUploading: false, + selectedLabels: [], + availableLabels: [] }); } @@ -327,6 +329,11 @@ class FirmwareViewModel extends ViewModel { // Set target type setTargetType(type) { this.set('targetType', type); + // Clear any previously selected labels when switching options + const currentLabels = this.get('selectedLabels') || []; + if (currentLabels.length > 0) { + this.set('selectedLabels', []); + } } // Set specific node @@ -337,6 +344,27 @@ class FirmwareViewModel extends ViewModel { // Update available nodes updateAvailableNodes(nodes) { this.set('availableNodes', nodes); + // Compute availableLabels as unique key=value pairs from nodes' labels + try { + const labelSet = new Set(); + (nodes || []).forEach(n => { + const labels = n && n.labels ? n.labels : {}; + Object.entries(labels).forEach(([k, v]) => { + labelSet.add(`${k}=${v}`); + }); + }); + const availableLabels = Array.from(labelSet).sort((a, b) => a.localeCompare(b)); + this.set('availableLabels', availableLabels); + // Prune selected labels that are no longer available + const selected = this.get('selectedLabels') || []; + const pruned = selected.filter(x => availableLabels.includes(x)); + if (pruned.length !== selected.length) { + this.set('selectedLabels', pruned); + } + } catch (_) { + this.set('availableLabels', []); + this.set('selectedLabels', []); + } } // Start upload @@ -379,6 +407,26 @@ class FirmwareViewModel extends ViewModel { this.set('isUploading', false); } + // Set selected labels + setSelectedLabels(labels) { + this.set('selectedLabels', Array.isArray(labels) ? labels : []); + } + + // Return nodes matching ALL selected label pairs + getAffectedNodesByLabels() { + const selected = this.get('selectedLabels') || []; + if (!selected.length) return []; + const selectedPairs = selected.map(s => { + const idx = String(s).indexOf('='); + return idx > -1 ? { key: s.slice(0, idx), value: s.slice(idx + 1) } : null; + }).filter(Boolean); + const nodes = this.get('availableNodes') || []; + return nodes.filter(n => { + const labels = n && n.labels ? n.labels : {}; + return selectedPairs.every(p => String(labels[p.key]) === String(p.value)); + }); + } + // Check if deploy button should be enabled isDeployEnabled() { const hasFile = this.get('selectedFile') !== null; @@ -390,6 +438,9 @@ class FirmwareViewModel extends ViewModel { isValidTarget = hasAvailableNodes; } else if (this.get('targetType') === 'specific') { isValidTarget = hasAvailableNodes && this.get('specificNode'); + } else if (this.get('targetType') === 'labels') { + const affected = this.getAffectedNodesByLabels(); + isValidTarget = hasAvailableNodes && (this.get('selectedLabels') || []).length > 0 && affected.length > 0; } return hasFile && isValidTarget && !this.get('isUploading');