49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import type { SystemHealthStatus } from "../../../types/types";
|
|
import Badge from "../../../ui/Badge";
|
|
|
|
type SystemHealthProps = {
|
|
startTime: string;
|
|
uptime: string;
|
|
statuses: SystemHealthStatus[];
|
|
isLoading: boolean;
|
|
isError: boolean;
|
|
dateUpdatedAt?: number;
|
|
};
|
|
|
|
const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpdatedAt }: SystemHealthProps) => {
|
|
const updatedDate = dateUpdatedAt ? new Date(dateUpdatedAt).toLocaleString() : null;
|
|
|
|
// console.log(statuses);
|
|
|
|
if (isError) {
|
|
return <span className="text-red-500">Error loading system health.</span>;
|
|
}
|
|
if (isLoading) {
|
|
return <span className="text-slate-500">Loading system health…</span>;
|
|
}
|
|
return (
|
|
<div className="h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
|
|
<div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
|
|
<div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
|
|
<h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
|
|
</div>
|
|
<div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
|
|
<h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
|
|
</div>
|
|
</div>
|
|
<div className="h-50 overflow-auto">
|
|
{statuses?.map((status: SystemHealthStatus) => (
|
|
<div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between" key={status.id}>
|
|
<span>{status.id}</span> <Badge text={status.tags[0]} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="border-t border-gray-500">
|
|
<small className="italic text-gray-400">{`Last refeshed ${updatedDate}`}</small>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SystemHealth;
|