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,40 +280,6 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</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>
|
||||||
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user