31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
import { useInfoSocket } from "../../../app/context/WebSocketContext";
|
|
import Card from "../../../ui/Card";
|
|
import CardHeader from "../../../ui/CardHeader";
|
|
import StatusItemCPU from "./StatusItems/StatusItemCPU";
|
|
import StatusItemLocal from "./StatusItems/StatusItemLocal";
|
|
import StatusItemThreads from "./StatusItems/StatusItemThreads";
|
|
import StatusItemUTC from "./StatusItems/StatusItemUTC";
|
|
|
|
const SystemStatusCard = () => {
|
|
const { data: stats } = useInfoSocket();
|
|
|
|
return (
|
|
<Card className="p-4">
|
|
<CardHeader title="System Status" />
|
|
{stats ? (
|
|
<div className="grid grid-cols-2 grid-rows-2 gap-4 col-span-2">
|
|
<StatusItemUTC statusInfoItem={stats["system-clock-utc"]} description={"UTC Time"} />
|
|
<StatusItemLocal statusInfoItem={stats["system-clock-local"]} description={"Local Time"} />
|
|
<StatusItemCPU statusInfoItem={stats["memory-cpu-status"]} description={"CPU"} />
|
|
<StatusItemThreads statusInfoItem={stats["thread-count"]} description={"Threads"} />
|
|
</div>
|
|
) : (
|
|
<span className="text-slate-500">Loading system status…</span>
|
|
)}
|
|
<div className="text-sm flex gap-4"></div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default SystemStatusCard;
|