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/*
|
||||
dist/*
|
||||
node_modules/*
|
||||
|
|
|
|||
|
|
@ -65,78 +65,6 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
|
||||
return (
|
||||
<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 && (
|
||||
<>
|
||||
|
|
@ -352,40 +280,6 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
</DialogDescription>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<h2 className="text-sm text-neutral-500 pt-2 flex items-center gap-2">
|
||||
<Activity className="w-4 h-4" />
|
||||
Activity Log
|
||||
</h2>
|
||||
|
||||
<div className="bg-white border border-neutral-200 rounded-lg overflow-hidden">
|
||||
{activityLog.map((entry, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="px-4 py-3 border-b border-neutral-100 last:border-b-0"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="text-xs text-neutral-500 font-mono mt-0.5 w-16 flex-shrink-0">
|
||||
{entry.time}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`w-1.5 h-1.5 rounded-full ${
|
||||
entry.type === 'success'
|
||||
? 'bg-green-500'
|
||||
: entry.type === 'warning'
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-blue-500'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-sm text-neutral-900">{entry.event}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
|
@ -400,6 +294,114 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h2 className="text-sm text-neutral-500 pt-2 flex items-center gap-2">
|
||||
<Activity className="w-4 h-4" />
|
||||
Activity Log
|
||||
</h2>
|
||||
|
||||
<div className="bg-white border border-neutral-200 rounded-lg overflow-hidden">
|
||||
{activityLog.map((entry, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="px-4 py-3 border-b border-neutral-100 last:border-b-0"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="text-xs text-neutral-500 font-mono mt-0.5 w-16 flex-shrink-0">
|
||||
{entry.time}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`w-1.5 h-1.5 rounded-full ${
|
||||
entry.type === 'success'
|
||||
? 'bg-green-500'
|
||||
: entry.type === 'warning'
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-blue-500'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-sm text-neutral-900">{entry.event}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user