49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import type { SystemHealthStatus } from "../../../../types/types";
|
|
import Badge from "../../../../ui/Badge";
|
|
import ModalComponent from "../../../../ui/ModalComponent";
|
|
import StatusIndicators from "../../../../ui/StatusIndicators";
|
|
import { capitalize } from "../../../../utils/utils";
|
|
|
|
type SystemHealthModalProps = {
|
|
isSystemHealthModalOpen: boolean;
|
|
handleClose: () => void;
|
|
statusCategory: SystemHealthStatus[];
|
|
title: string;
|
|
isAllGood: boolean;
|
|
};
|
|
|
|
const SystemHealthModal = ({
|
|
isSystemHealthModalOpen,
|
|
handleClose,
|
|
statusCategory,
|
|
title,
|
|
isAllGood,
|
|
}: SystemHealthModalProps) => {
|
|
return (
|
|
<ModalComponent isModalOpen={isSystemHealthModalOpen} close={handleClose}>
|
|
<div>
|
|
<div className="border-b border-gray-500">
|
|
<h2 className="text-xl font-bold mb-4 flex flex-row items-center">
|
|
{isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
|
|
{capitalize(title)}
|
|
</h2>
|
|
<p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
|
|
</div>
|
|
|
|
<div>
|
|
{statusCategory?.map((status: SystemHealthStatus) => (
|
|
<div
|
|
className="border border-gray-700 p-4 rounded-md m-2 flex justify-between hover:bg-[#233241]"
|
|
key={status.id}
|
|
>
|
|
<span>{status.id}</span> <Badge text={status.tags[0]} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</ModalComponent>
|
|
);
|
|
};
|
|
|
|
export default SystemHealthModal;
|