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

Compare commits

base: iot:b8939e877a546c56dd93b3b49764fce437fc4afd
Branches Tags
iot:main
...
compare: iot:21f102980576762f79886b8e8e96efe8ffdf0f25
Branches Tags
iot:main

1 Commits
b8939e877a ... 21f1029805

Author SHA1 Message Date
0x1d
21f1029805 feat: harmonize add-label 2025-10-23 20:24:00 +02:00
3 changed files with 44 additions and 134 deletions
Expand all files Collapse all files

2
public/scripts/components/FirmwareFormComponent.js
View File

@@ -150,7 +150,7 @@ class FirmwareFormComponent extends Component {
<div class="labels-section"> <div class="labels-section">
<div class="add-label-controls"> <div class="add-label-controls">
<input type="text" id="label-key" placeholder="Key" class="label-key-input"> <input type="text" id="label-key" placeholder="Key" class="label-key-input">
<span class="label-separator">:</span> <span class="label-separator">=</span>
<input type="text" id="label-value" placeholder="Value" class="label-value-input"> <input type="text" id="label-value" placeholder="Value" class="label-value-input">
<button type="button" id="add-label-btn" class="add-label-btn"> <button type="button" id="add-label-btn" class="add-label-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">

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

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

96
public/styles/main.css
View File

@@ -6805,7 +6805,13 @@ html {
margin: 0; margin: 0;
} }
/* Node labels section - add-label-controls positioned at top */
.labels-section .add-label-controls {
margin-bottom: 1rem;
}
.labels-list { .labels-list {
display: block;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@@ -6886,88 +6892,8 @@ html {
stroke-width: 2; stroke-width: 2;
} }
.add-label-section { /* Old add-label-section and add-label-form styles removed - now using add-label-controls */
margin-bottom: 1.5rem; /* Node labels use the same compact add-label-controls as firmware form */
}
.add-label-form {
display: flex;
align-items: end;
gap: 0.5rem;
padding: 0.75rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 8px;
}
.add-label-form .form-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1;
min-width: 120px;
}
.add-label-form .form-group label {
font-size: 0.85rem;
font-weight: 500;
color: var(--text-secondary);
}
.add-label-form .form-group input {
background: var(--bg-secondary);
border: 1px solid var(--border-secondary);
border-radius: 6px;
padding: 0.5rem 0.75rem;
color: var(--text-primary);
font-size: 0.9rem;
transition: all 0.2s ease;
}
.add-label-form .form-group input:focus {
outline: none;
border-color: #60a5fa;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}
.add-label-form .form-group input::placeholder {
color: var(--text-tertiary);
}
.add-label-form .add-label-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-secondary);
color: var(--text-secondary);
border-radius: 8px;
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.2s ease;
height: fit-content;
margin-bottom: 1rem;
}
.add-label-form .add-label-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
color: var(--text-primary);
}
.add-label-form .add-label-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.add-label-form .add-label-btn svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2;
}
/* Add label button and save labels button inherit from base button styles */ /* Add label button and save labels button inherit from base button styles */
.add-label-btn { .add-label-btn {
@@ -7040,13 +6966,13 @@ html {
/* Responsive adjustments for labels editor */ /* Responsive adjustments for labels editor */
@media (max-width: 768px) { @media (max-width: 768px) {
.add-label-form { .add-label-controls {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
} }
.form-group { .add-label-controls .label-separator {
min-width: unset; display: none;
} }
.labels-actions { .labels-actions {