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

feat: nice task info

Browse Source
This commit is contained in:
0x1d
2025-08-30 20:47:55 +02:00
parent c05a2b6c30
commit 583a72f3f6
2 changed files with 236 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
public/components.js
View File

@@ -1056,8 +1056,27 @@ class NodeDetailsComponent extends Component {
if (tasks && tasks.length > 0) {
const summaryHTML = summary ? `
<div class="tasks-summary">
<span>Total: ${summary.totalTasks ?? tasks.length}</span>
<span style="margin-left: 0.75rem;">Active: ${summary.activeTasks ?? tasks.filter(t => t.running).length}</span>
<div class="tasks-summary-left">
<div class="summary-icon">📋</div>
<div>
<div class="summary-title">Tasks Overview</div>
<div class="summary-subtitle">System task management and monitoring</div>
</div>
</div>
<div class="tasks-summary-right">
<div class="summary-stat total">
<div class="summary-stat-value">${summary.totalTasks ?? tasks.length}</div>
<div class="summary-stat-label">Total</div>
</div>
<div class="summary-stat active">
<div class="summary-stat-value">${summary.activeTasks ?? tasks.filter(t => t.running).length}</div>
<div class="summary-stat-label">Active</div>
</div>
<div class="summary-stat stopped">
<div class="summary-stat-value">${(summary.totalTasks ?? tasks.length) - (summary.activeTasks ?? tasks.filter(t => t.running).length)}</div>
<div class="summary-stat-label">Stopped</div>
</div>
</div>
</div>
` : '';
const tasksHTML = tasks.map(task => `
@@ -1083,6 +1102,29 @@ class NodeDetailsComponent extends Component {
const total = summary?.totalTasks ?? 0;
const active = summary?.activeTasks ?? 0;
return `
<div class="tasks-summary">
<div class="tasks-summary-left">
<div class="summary-icon">📋</div>
<div>
<div class="summary-title">Tasks Overview</div>
<div class="summary-subtitle">${total > 0 ? `Total tasks: ${total}, active: ${active}` : 'This node has no running tasks'}</div>
</div>
</div>
<div class="tasks-summary-right">
<div class="summary-stat total">
<div class="summary-stat-value">${total}</div>
<div class="summary-stat-label">Total</div>
</div>
<div class="summary-stat active">
<div class="summary-stat-value">${active}</div>
<div class="summary-stat-label">Active</div>
</div>
<div class="summary-stat stopped">
<div class="summary-stat-value">${total - active}</div>
<div class="summary-stat-label">Stopped</div>
</div>
</div>
</div>
<div class="no-tasks">
<div>📋 No active tasks found</div>
<div style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.7;">