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

feat: harmonize add-label

Browse Source
This commit is contained in:
0x1d
2025-10-23 13:59:41 +02:00
parent ad268a7c13
commit 21f1029805
3 changed files with 44 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
public/scripts/components/NodeDetailsComponent.js
View File

@@ -709,62 +709,47 @@ class NodeDetailsComponent extends Component {
const labels = nodeStatus?.labels || {};
const labelsArray = Object.entries(labels);
const labelsHTML = labelsArray.map(([key, value]) => `
<div class="label-item" data-key="${this.escapeHtml(key)}">
<div class="label-content">
<span class="label-key">${this.escapeHtml(key)}</span>
<span class="label-separator">=</span>
<span class="label-value">${this.escapeHtml(value)}</span>
</div>
<button class="label-remove-btn" data-key="${this.escapeHtml(key)}" title="Remove label">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</div>
`).join('');
let html = `
<div class="labels-section">
<div class="labels-header">
<h3>Node Labels</h3>
<p class="labels-description">Manage custom labels for this node. Labels help organize and identify nodes in your cluster.</p>
</div>
<div class="labels-list">
`;
if (labelsArray.length === 0) {
html += `
<div class="no-labels">
<div>No labels configured</div>
<div style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.7;">Add labels to organize and identify this node</div>
</div>
`;
} else {
labelsArray.forEach(([key, value]) => {
html += `
<div class="label-item" data-key="${this.escapeHtml(key)}">
<div class="label-content">
<span class="label-key">${this.escapeHtml(key)}</span>
<span class="label-separator">=</span>
<span class="label-value">${this.escapeHtml(value)}</span>
</div>
<button class="label-remove-btn" data-key="${this.escapeHtml(key)}" title="Remove label">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</div>
`;
});
}
html += `
<div class="add-label-controls">
<input type="text" id="label-key" placeholder="Key" class="label-key-input" maxlength="50">
<span class="label-separator">=</span>
<input type="text" id="label-value" placeholder="Value" class="label-value-input" maxlength="100">
<button class="add-label-btn" type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
Add Label
</button>
</div>
<div class="add-label-section">
<div class="add-label-form">
<div class="form-group">
<label for="label-key">Key:</label>
<input type="text" id="label-key" placeholder="e.g., environment" maxlength="50">
<div class="labels-list">
${labelsArray.length === 0 ? `
<div class="no-labels">
<div>No labels configured</div>
<div style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.7;">Add labels to organize and identify this node</div>
</div>
<div class="form-group">
<label for="label-value">Value:</label>
<input type="text" id="label-value" placeholder="e.g., production" maxlength="100">
</div>
<button class="add-label-btn" type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<path d="M12 5v14M5 12h14"/>
</svg>
Add Label
</button>
</div>
` : labelsHTML}
</div>
<div class="labels-actions">
@@ -1004,7 +989,6 @@ class NodeDetailsComponent extends Component {
const summaryHTML = summary ? `
<div class="tasks-summary">
<div class="tasks-summary-left">
<div class="summary-icon">${window.icon('file', { width: 16, height: 16 })}</div>
<div>
<div class="summary-title">Tasks Overview</div>
<div class="summary-subtitle">System task management and monitoring</div>