WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

fix: SDI crash, monitors polling, home RAM fields, editor IN DEV splash, timecode, create recorder API: screens-home.jsx

Browse source
This commit is contained in:
Zac Gaetano 2026-05-22 10:55:18 -04:00
parent 0342aa0a5a
commit 48ee66e744
1 changed files with 19 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
services/web-ui/public/screens-home.jsx
View file

@ -8,6 +8,8 @@ function Home({ navigate }) {
const failedJobs = JOBS.filter(j => j.status === 'failed').length;
const recentAssets = [...ASSETS].sort((a, b) => new Date(b.created_at) - new Date(a.created_at)).slice(0, 6);
const nodesOnline = NODES.filter(n => n.status === 'online' || n.online === true).length;
const spark = (n, base = 10) => Array.from({ length: 13 }, (_, i) => base + Math.round(Math.sin(i * 0.7 + n) * base * 0.3));
return (
@ -42,7 +44,7 @@ function Home({ navigate }) {
</div>
<div className="stat-card">
<div className="label"><Icon name="hdd" size={12} /> Cluster nodes</div>
<div className="value">{NODES.filter(n => n.online).length}<span style={{ color: 'var(--text-3)', fontWeight: 400, fontSize: 16 }}> / {NODES.length} online</span></div>
<div className="value">{nodesOnline}<span style={{ color: 'var(--text-3)', fontWeight: 400, fontSize: 16 }}> / {NODES.length} online</span></div>
<div className="delta">Last heartbeat &lt;30s</div>
<Sparkline data={spark(4, 4)} color="#F5A623" />
</div>
@ -101,15 +103,22 @@ function Home({ navigate }) {
<div className="panel" style={{ padding: 4 }}>
{NODES.length === 0
? <div style={{ padding: '16px 12px', color: 'var(--text-3)', fontSize: 12.5 }}>No nodes found.</div>
: NODES.slice(0, 4).map(n => (
<div key={n.id} style={{ padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid var(--border)' }}>
<StatusDot status={n.online ? 'online' : 'offline'} />
<span style={{ fontSize: 12.5, fontWeight: 500 }}>{n.hostname}</span>
<span style={{ flex: 1 }} />
{n.cpu_usage != null && <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>CPU {n.cpu_usage}%</span>}
{n.mem_used_mb != null && <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>{Math.round(n.mem_used_mb / 1024)}GB RAM</span>}
</div>
))}
: NODES.slice(0, 4).map(n => {
const nodeId = n.id || n.hostname || n.name || 'node';
const isOnline = n.status === 'online' || n.online === true;
const cpuPct = n.cpu_percent ?? n.cpu ?? n.cpu_usage ?? null;
const memRaw = n.memory_used_gb ?? n.mem ?? (n.mem_used_mb != null ? n.mem_used_mb / 1024 : null);
const memGb = memRaw != null ? Number(memRaw) : null;
return (
<div key={nodeId} style={{ padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid var(--border)' }}>
<StatusDot status={isOnline ? 'online' : 'offline'} />
<span style={{ fontSize: 12.5, fontWeight: 500 }}>{nodeId}</span>
<span style={{ flex: 1 }} />
{cpuPct != null && <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>CPU {Math.round(cpuPct)}%</span>}
{memGb != null && <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>{memGb < 1 ? Math.round(memGb * 1024) + 'MB' : memGb.toFixed(1) + 'GB'} RAM</span>}
</div>
);
})}
</div>
</div>
</div>