feat: update StatusPage layout and functionality with enhanced system status display and activity log
This commit is contained in:
parent
2643178b61
commit
939565ce5a
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,2 +1,3 @@
|
||||||
?archives/*
|
?archives/*
|
||||||
|
dist/*
|
||||||
node_modules/*
|
node_modules/*
|
||||||
|
|
|
||||||
|
|
@ -65,78 +65,6 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4 space-y-4">
|
<div className="p-4 space-y-4">
|
||||||
<h2 className="text-sm text-neutral-500">System Status</h2>
|
|
||||||
|
|
||||||
<div className="bg-white border border-neutral-200 rounded-lg p-4">
|
|
||||||
{/* System Status Action Buttons at bottom */}
|
|
||||||
<div className="mb-4">
|
|
||||||
<div className="text-xs text-neutral-500 mb-1">Memory Utilization</div>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
{/* Heap Graph */}
|
|
||||||
<div>
|
|
||||||
<div className="flex justify-between text-xs mb-0.5">
|
|
||||||
<span>Heap</span>
|
|
||||||
<span>{memory.heap.free} KB free / {memory.heap.total} KB</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full h-3 bg-neutral-200 rounded overflow-hidden">
|
|
||||||
<div
|
|
||||||
className="h-3 bg-blue-500"
|
|
||||||
style={{ width: `${((memory.heap.total - memory.heap.free) / memory.heap.total) * 100}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* PSRAM Graph */}
|
|
||||||
<div>
|
|
||||||
<div className="flex justify-between text-xs mb-0.5">
|
|
||||||
<span>PSRAM</span>
|
|
||||||
<span>{memory.psram.free} KB free / {memory.psram.total} KB</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full h-3 bg-neutral-200 rounded overflow-hidden">
|
|
||||||
<div
|
|
||||||
className="h-3 bg-green-500"
|
|
||||||
style={{ width: `${((memory.psram.total - memory.psram.free) / memory.psram.total) * 100}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<div className="text-xs text-neutral-500">WiFi</div>
|
|
||||||
<div className="flex items-center gap-1 text-sm">
|
|
||||||
<Wifi className="w-3 h-3 text-green-600" />
|
|
||||||
<span>Connected</span>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-neutral-500 mt-1">IP Address</div>
|
|
||||||
<div className="text-sm text-neutral-700">192.168.1.100</div>
|
|
||||||
<div className="text-xs text-neutral-500 mt-1">MAC Address</div>
|
|
||||||
<div className="text-sm text-neutral-700">AA:BB:CC:DD:EE:FF</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-xs text-neutral-500">Uptime</div>
|
|
||||||
<div className="flex items-center gap-1 text-sm">
|
|
||||||
<Clock className="w-3 h-3" />
|
|
||||||
<span>3h 24m</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-2 mt-6">
|
|
||||||
<button
|
|
||||||
className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-base font-medium w-full"
|
|
||||||
onClick={() => { setShowResetModal('meatloaf'); setResetStatus('idle'); }}
|
|
||||||
>
|
|
||||||
<RefreshCw className="w-5 h-5" /> Reset Meatloaf
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-base font-medium w-full"
|
|
||||||
onClick={() => { setShowResetModal('host'); setResetStatus('idle'); }}
|
|
||||||
>
|
|
||||||
<RefreshCw className="w-5 h-5" /> Reset Host
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{activeDevice && (
|
{activeDevice && (
|
||||||
<>
|
<>
|
||||||
|
|
@ -352,6 +280,20 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!activeDevice && (
|
||||||
|
<div className="bg-white border border-neutral-200 rounded-lg p-8 text-center">
|
||||||
|
<div className="text-neutral-400 mb-2">
|
||||||
|
<HardDrive className="w-12 h-12 mx-auto" />
|
||||||
|
</div>
|
||||||
|
<div className="text-neutral-600">No active device</div>
|
||||||
|
<div className="text-sm text-neutral-500 mt-1">
|
||||||
|
Enable a device to see activity
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<h2 className="text-sm text-neutral-500 pt-2 flex items-center gap-2">
|
<h2 className="text-sm text-neutral-500 pt-2 flex items-center gap-2">
|
||||||
<Activity className="w-4 h-4" />
|
<Activity className="w-4 h-4" />
|
||||||
|
|
@ -386,20 +328,80 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!activeDevice && (
|
<h2 className="text-sm text-neutral-500">System Status</h2>
|
||||||
<div className="bg-white border border-neutral-200 rounded-lg p-8 text-center">
|
|
||||||
<div className="text-neutral-400 mb-2">
|
<div className="bg-white border border-neutral-200 rounded-lg p-4">
|
||||||
<HardDrive className="w-12 h-12 mx-auto" />
|
{/* System Status Action Buttons at bottom */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="text-xs text-neutral-500 mb-1">Memory Utilization</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{/* Heap Graph */}
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between text-xs mb-0.5">
|
||||||
|
<span>Heap</span>
|
||||||
|
<span>{memory.heap.free} KB free / {memory.heap.total} KB</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-neutral-600">No active device</div>
|
<div className="w-full h-3 bg-neutral-200 rounded overflow-hidden">
|
||||||
<div className="text-sm text-neutral-500 mt-1">
|
<div
|
||||||
Enable a device to see activity
|
className="h-3 bg-blue-500"
|
||||||
|
style={{ width: `${((memory.heap.total - memory.heap.free) / memory.heap.total) * 100}%` }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
{/* PSRAM Graph */}
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between text-xs mb-0.5">
|
||||||
|
<span>PSRAM</span>
|
||||||
|
<span>{memory.psram.free} KB free / {memory.psram.total} KB</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-3 bg-neutral-200 rounded overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-3 bg-green-500"
|
||||||
|
style={{ width: `${((memory.psram.total - memory.psram.free) / memory.psram.total) * 100}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<div className="text-xs text-neutral-500">WiFi</div>
|
||||||
|
<div className="flex items-center gap-1 text-sm">
|
||||||
|
<Wifi className="w-3 h-3 text-green-600" />
|
||||||
|
<span>Connected</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-neutral-500 mt-1">IP Address</div>
|
||||||
|
<div className="text-sm text-neutral-700">192.168.1.100</div>
|
||||||
|
<div className="text-xs text-neutral-500 mt-1">MAC Address</div>
|
||||||
|
<div className="text-sm text-neutral-700">AA:BB:CC:DD:EE:FF</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-xs text-neutral-500">Uptime</div>
|
||||||
|
<div className="flex items-center gap-1 text-sm">
|
||||||
|
<Clock className="w-3 h-3" />
|
||||||
|
<span>3h 24m</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2 mt-6">
|
||||||
|
<button
|
||||||
|
className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-base font-medium w-full"
|
||||||
|
onClick={() => { setShowResetModal('meatloaf'); setResetStatus('idle'); }}
|
||||||
|
>
|
||||||
|
<RefreshCw className="w-5 h-5" /> Reset Meatloaf
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-base font-medium w-full"
|
||||||
|
onClick={() => { setShowResetModal('host'); setResetStatus('idle'); }}
|
||||||
|
>
|
||||||
|
<RefreshCw className="w-5 h-5" /> Reset Host
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user