45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { useState } from "react";
|
|
import type { SystemHealthStatus } from "../../../../types/types";
|
|
import StatusIndicators from "../../../../ui/StatusIndicators";
|
|
import { capitalize } from "../../../../utils/utils";
|
|
import SystemHealthModal from "../systemHealth/systemHealthModal/SystemHealthModal";
|
|
|
|
type StatusGridItemProps = {
|
|
title: string;
|
|
statusCategory: SystemHealthStatus[];
|
|
};
|
|
|
|
const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const isAllGood =
|
|
statusCategory && statusCategory.length > 0 && statusCategory.every((status) => status.tags.includes("RUNNING"));
|
|
|
|
const handleClick = () => {
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241] hover:cursor-pointer"
|
|
onClick={() => setIsOpen(true)}
|
|
>
|
|
<h3 className="text-lg flex flex-row items-center">
|
|
{isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
|
|
{capitalize(title)}
|
|
</h3>
|
|
<p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
|
|
</div>
|
|
<SystemHealthModal
|
|
isSystemHealthModalOpen={isOpen}
|
|
handleClose={handleClick}
|
|
statusCategory={statusCategory}
|
|
title={title}
|
|
isAllGood={isAllGood}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default StatusGridItem;
|