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

feat: optimize topology member overlay

Browse Source
This commit is contained in:
0x1d
2025-08-30 21:28:36 +02:00
parent bebf979860
commit 91ff24c162
2 changed files with 101 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
public/components.js
View File

@@ -3061,8 +3061,23 @@ class MemberCardOverlayComponent extends Component {
return `
<div class="member-overlay-content">
<div class="member-overlay-header">
<div class="member-overlay-title">
<h3>Member Details</h3>
<div class="member-info">
<div class="member-row-1">
<div class="status-hostname-group">
<div class="member-status ${statusClass}">
${statusIcon}
</div>
<div class="member-hostname">${member.hostname || 'Unknown Device'}</div>
</div>
<div class="member-ip">${member.ip || 'No IP'}</div>
<div class="member-latency">
<span class="latency-label">Latency:</span>
<span class="latency-value">${member.latency ? member.latency + 'ms' : 'N/A'}</span>
</div>
</div>
<div class="member-labels" style="display: none;">
<!-- Labels will be populated dynamically from node status API -->
</div>
</div>
<button class="member-overlay-close" aria-label="Close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -3073,26 +3088,6 @@ class MemberCardOverlayComponent extends Component {
<div class="member-overlay-body">
<div class="member-card expanded" data-member-ip="${member.ip}">
<div class="member-header">
<div class="member-info">
<div class="member-row-1">
<div class="status-hostname-group">
<div class="member-status ${statusClass}">
${statusIcon}
</div>
<div class="member-hostname">${member.hostname || 'Unknown Device'}</div>
</div>
<div class="member-ip">${member.ip || 'No IP'}</div>
<div class="member-latency">
<span class="latency-label">Latency:</span>
<span class="latency-value">${member.latency ? member.latency + 'ms' : 'N/A'}</span>
</div>
</div>
<div class="member-labels" style="display: none;">
<!-- Labels will be populated dynamically from node status API -->
</div>
</div>
</div>
<div class="member-details">
<div class="loading-details">Loading detailed information...</div>
</div>
@@ -3136,29 +3131,14 @@ class MemberCardOverlayComponent extends Component {
// Update the labels in the member header with the actual node status data
const nodeStatus = nodeDetailsVM.get('nodeStatus');
if (nodeStatus && nodeStatus.labels) {
const labelsContainer = card.querySelector('.member-labels');
// Find the labels container in the header
const labelsContainer = document.querySelector('.member-overlay-header .member-labels');
if (labelsContainer) {
// Update existing labels container and show it
labelsContainer.innerHTML = Object.entries(nodeStatus.labels)
.map(([key, value]) => `<span class="label-chip">${key}: ${value}</span>`)
.join('');
labelsContainer.style.display = 'block';
} else {
// Create new labels container if it doesn't exist
const memberInfo = card.querySelector('.member-info');
if (memberInfo) {
const labelsDiv = document.createElement('div');
labelsDiv.className = 'member-labels';
labelsDiv.innerHTML = Object.entries(nodeStatus.labels)
.map(([key, value]) => `<span class="label-chip">${key}: ${value}</span>`)
.join('');
// Insert after latency
const latencyDiv = memberInfo.querySelector('.member-latency');
if (latencyDiv) {
latencyDiv.parentNode.insertBefore(labelsDiv, latencyDiv.nextSibling);
}
}
}
}