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

Merge pull request 'feature/ui-harmonization' (#23) from feature/ui-harmonization into main

Browse Source 
Reviewed-on: #23
This commit is contained in:
master
2025-10-23 20:25:22 +02:00
parent 4fa8d96656 21f1029805
commit ce836e7636
7 changed files with 493 additions and 901 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.js
View File

@@ -19,12 +19,7 @@ const PORT = process.env.PORT || 3000;
// Serve static files from public directory
app.use(express.static(path.join(__dirname, 'public')));
// Serve the main HTML page
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
// Health check endpoint
// Health check endpoint (before catch-all route)
app.get('/health', (req, res) => {
res.json({
status: 'healthy',
@@ -34,6 +29,13 @@ app.get('/health', (req, res) => {
});
});
// SPA catch-all route - serves index.html for all routes
// This allows client-side routing to work properly
// Using regex pattern for Express 5 compatibility
app.get(/^\/(?!health$).*/, (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
// Start the server
app.listen(PORT, '0.0.0.0', () => {
console.log(`SPORE UI Frontend Server is running on http://0.0.0.0:${PORT}`);

16
public/index.html
View File

@@ -18,7 +18,7 @@
</svg>
</button>
<div class="nav-left">
<button class="nav-tab active" data-view="cluster">
<a href="/cluster" class="nav-tab active" data-view="cluster">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px;">
<circle cx="12" cy="12" r="9"/>
<circle cx="8" cy="10" r="1.5"/>
@@ -27,8 +27,8 @@
<path d="M9 11l3 3M9 11l6-3"/>
</svg>
Cluster
</button>
<button class="nav-tab" data-view="topology">
</a>
<a href="/topology" class="nav-tab" data-view="topology">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px;">
<circle cx="12" cy="4" r="1.6"/>
<circle cx="19" cy="9" r="1.6"/>
@@ -38,20 +38,20 @@
<path d="M12 4L16 18M16 18L5 9M5 9L19 9M19 9L8 18M8 18L12 4"/>
</svg>
Topology
</button>
<button class="nav-tab" data-view="monitoring">
</a>
<a href="/monitoring" class="nav-tab" data-view="monitoring">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px;">
<path d="M3 12h3l2 7 4-14 3 10 2-6h4"/>
</svg>
Monitoring
</button>
<button class="nav-tab" data-view="firmware">
</a>
<a href="/firmware" class="nav-tab" data-view="firmware">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px;">
<path d="M4 7l8-4 8 4v10l-8 4-8-4z"/>
<path d="M12 8v8"/>
</svg>
Firmware
</button>
</a>
</div>
<div class="nav-right">
<div class="theme-switcher">

13
public/scripts/components/FirmwareComponent.js
View File

@@ -154,8 +154,10 @@ class FirmwareComponent extends Component {
`;
return;
}
const firmwareHTML = filteredGroups.map(group => this.renderFirmwareGroup(group)).join('');
// Auto-expand groups when search is active to show results
const autoExpand = searchQuery.trim().length > 0;
const firmwareHTML = filteredGroups.map(group => this.renderFirmwareGroup(group, autoExpand)).join('');
container.innerHTML = `
<div class="firmware-groups">
@@ -167,11 +169,14 @@ class FirmwareComponent extends Component {
this.setupFirmwareItemListeners();
}
renderFirmwareGroup(group) {
renderFirmwareGroup(group, autoExpand = false) {
const versionsHTML = group.firmware.map(firmware => this.renderFirmwareVersion(firmware)).join('');
// Add 'expanded' class if autoExpand is true (e.g., when search results are shown)
const expandedClass = autoExpand ? 'expanded' : '';
return `
<div class="firmware-group">
<div class="firmware-group ${expandedClass}">
<div class="firmware-group-header">
<div class="firmware-group-header-content">
<h3 class="firmware-group-name">${this.escapeHtml(group.name)}</h3>

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

@@ -83,13 +83,15 @@ class FirmwareFormComponent extends Component {
const labels = this.firmwareData?.labels || {};
const labelsHTML = Object.entries(labels).map(([key, value]) =>
`<div class="label-item">
<span class="label-key">${this.escapeHtml(key)}</span>
<span class="label-value">${this.escapeHtml(value)}</span>
`<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 type="button" class="remove-label-btn" data-label-key="${this.escapeHtml(key)}" title="Remove label">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
<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>`
@@ -148,7 +150,7 @@ class FirmwareFormComponent extends Component {
<div class="labels-section">
<div class="add-label-controls">
<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">
<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">
@@ -202,7 +204,7 @@ class FirmwareFormComponent extends Component {
}
// Check if key already exists
const existingLabel = labelsContainer.querySelector(`[data-label-key="${this.escapeHtml(key)}"]`);
const existingLabel = labelsContainer.querySelector(`[data-key="${this.escapeHtml(key)}"]`);
if (existingLabel) {
this.showError('A label with this key already exists');
return;
@@ -210,13 +212,15 @@ class FirmwareFormComponent extends Component {
// Add the label
const labelHTML = `
<div class="label-item">
<span class="label-key">${this.escapeHtml(key)}</span>
<span class="label-value">${this.escapeHtml(value)}</span>
<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 type="button" class="remove-label-btn" data-label-key="${this.escapeHtml(key)}" title="Remove label">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
<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>

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>

54
public/scripts/framework.js
View File

@@ -647,7 +647,7 @@ class App {
}
// Navigate to a route
navigateTo(routeName) {
navigateTo(routeName, updateUrl = true) {
// Check cooldown period
const now = Date.now();
if (now - this.lastNavigationTime < this.navigationCooldown) {
@@ -670,10 +670,45 @@ class App {
return;
}
// Update URL if requested
if (updateUrl) {
this.updateURL(routeName);
}
this.lastNavigationTime = now;
this.performNavigation(routeName);
}
// Update browser URL
updateURL(routeName) {
const url = `/${routeName}`;
if (window.location.pathname !== url) {
window.history.pushState({ route: routeName }, '', url);
logger.debug(`App: Updated URL to ${url}`);
}
}
// Get route from current URL
getRouteFromURL() {
const path = window.location.pathname;
// Remove leading slash and use as route name
const routeName = path.substring(1) || 'cluster'; // default to cluster
return routeName;
}
// Handle browser back/forward
handlePopState(event) {
if (event.state && event.state.route) {
logger.debug(`App: Handling popstate for route '${event.state.route}'`);
this.navigateTo(event.state.route, false); // Don't update URL again
} else {
// Fallback: parse URL
const routeName = this.getRouteFromURL();
logger.debug(`App: Handling popstate, navigating to '${routeName}'`);
this.navigateTo(routeName, false);
}
}
// Perform the actual navigation
async performNavigation(routeName) {
this.navigationInProgress = true;
@@ -848,12 +883,27 @@ class App {
// Setup navigation
setupNavigation() {
// Intercept navigation link clicks
document.querySelectorAll((window.CONSTANTS && window.CONSTANTS.SELECTORS.NAV_TAB) || '.nav-tab').forEach(tab => {
tab.addEventListener('click', () => {
tab.addEventListener('click', (e) => {
e.preventDefault(); // Prevent default link behavior
const routeName = tab.dataset.view;
this.navigateTo(routeName);
});
});
// Handle browser back/forward buttons
window.addEventListener('popstate', (e) => this.handlePopState(e));
// Navigate to route based on current URL on initial load
const initialRoute = this.getRouteFromURL();
logger.debug(`App: Initial route from URL: '${initialRoute}'`);
// Set initial history state
window.history.replaceState({ route: initialRoute }, '', `/${initialRoute}`);
// Navigate to initial route
this.navigateTo(initialRoute, false); // Don't update URL since we just set it
}
// Clean up cached components (call when app is shutting down)

1185
public/styles/main.css
View File

File diff suppressed because it is too large Load Diff