TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- added status grid items

Browse Source 
- add react modal pkg
This commit is contained in:
Toba Ojo
2025-11-28 15:06:03 +00:00
parent 983f307c3f
commit 4e02bafa6a
8 changed files with 195 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -24,6 +24,7 @@
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-konva": "^19.2.0",
"react-modal": "^3.16.3",
"react-tabs": "^6.1.0",
"react-use-websocket": "3.0.0",
"sonner": "^2.0.7"
@@ -35,6 +36,7 @@
"@types/node": "^24.10.1",
"@types/react": "^19.2.5",
"@types/react-dom": "^19.2.3",
"@types/react-modal": "^3.16.3",
"@vitejs/plugin-react": "^5.1.1",
"autoprefixer": "^10.4.22",
"eslint": "^9.39.1",

33
src/features/dashboard/components/SystemHealth.tsx
View File

@@ -1,5 +1,5 @@
import type { SystemHealthStatus } from "../../../types/types";
import Badge from "../../../ui/Badge";
import StatusGridItem from "./statusGridItem/StatusGridItem";
type SystemHealthProps = {
startTime: string;
@@ -13,7 +13,28 @@ type SystemHealthProps = {
const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpdatedAt }: SystemHealthProps) => {
const updatedDate = dateUpdatedAt ? new Date(dateUpdatedAt).toLocaleString() : null;
// console.log(statuses);
const statusCategories = statuses?.reduce<Record<string, SystemHealthStatus[]>>(
(acc, cur) => {
if (cur?.groupID === "ChannelA") acc?.channelA?.push(cur);
if (cur?.groupID === "ChannelB") acc?.channelB?.push(cur);
if (cur?.groupID === "ChannelC") acc?.channelC?.push(cur);
if (cur?.groupID === "Default") acc?.default?.push(cur);
return acc;
},
{
channelA: [],
channelB: [],
channelC: [],
default: [],
},
);
const convertObjtoArray = (obj: Record<string, SystemHealthStatus[]>) => {
if (!obj) return;
const statusCategoryArray = Object.entries(obj);
return statusCategoryArray;
};
const statusCategoryArray = convertObjtoArray(statusCategories);
if (isError) {
return <span className="text-red-500">Error loading system health.</span>;
@@ -31,11 +52,9 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
<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 className="h-50 overflow-auto grid grid-cols-2 gap-4">
{statusCategoryArray?.map((status) => (
<StatusGridItem title={status[0]} statusCategory={status[1]} />
))}
</div>
<div className="border-t border-gray-500">

43
src/features/dashboard/components/statusGridItem/StatusGridItem.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { useState } from "react";
import type { SystemHealthStatus } from "../../../../types/types";
import StatusIndicators from "../../../../ui/StatusIndicators";
import { capitalize } from "../../../../utils/utils";
import SystemHealthModal from "../systemHealthModal/SystemHealthModal";
type StatusGridItemProps = {
title: string;
statusCategory: SystemHealthStatus[];
};
const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
const [isOpen, setIsOpen] = useState(false);
const isAllGood = 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 mr-4 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;

48
src/features/dashboard/components/systemHealthModal/SystemHealthModal.tsx Normal file
View File

@@ -0,0 +1,48 @@
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;

3
src/main.tsx
View File

@@ -4,9 +4,12 @@ import { RouterProvider, createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen"; // generated by plugin
import { AppProviders } from "./app/providers/AppProviders";
import "./index.css";
import Modal from "react-modal";
const router = createRouter({ routeTree });
Modal.setAppElement("#root");
declare module "@tanstack/react-router" {
interface Register {
router: typeof router;

8
src/types/types.ts
View File

@@ -20,6 +20,14 @@ export type Region = {
export type SystemHealthStatus = {
id: string;
tags: string[];
groupID: string;
};
export type StatusGroups = {
channelA: SystemHealthStatus[];
channelB: SystemHealthStatus[];
channelC: SystemHealthStatus[];
default: SystemHealthStatus[];
};
export type BearerTypeFields = {

22
src/ui/ModalComponent.tsx Normal file
View File

@@ -0,0 +1,22 @@
import Modal from "react-modal";
type ModalComponentProps = {
isModalOpen: boolean;
children: React.ReactNode;
close: () => void;
};
const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) => {
return (
<Modal
isOpen={isModalOpen}
onRequestClose={close}
className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600"
overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
>
{children}
</Modal>
);
};
export default ModalComponent;

45
yarn.lock
View File

@@ -1018,6 +1018,13 @@
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.2.3.tgz#c1e305d15a52a3e508d54dca770d202cb63abf2c"
integrity sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==
"@types/react-modal@^3.16.3":
version "3.16.3"
resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.16.3.tgz#250f32c07f1de28e2bcf9c3e84b56adaa6897013"
integrity sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==
dependencies:
"@types/react" "*"
"@types/react-reconciler@^0.28.9":
version "0.28.9"
resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.28.9.tgz#d24b4864c384e770c83275b3fe73fba00269c83b"
@@ -1028,6 +1035,13 @@
resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.32.3.tgz#eb4b346f367f29f07628032934d30a4f3f9eaba7"
integrity sha512-cMi5ZrLG7UtbL7LTK6hq9w/EZIRk4Mf1Z5qHoI+qBh7/WkYkFXQ7gOto2yfUvPzF5ERMAhaXS5eTQ2SAnHjLzA==
"@types/react@*":
version "19.2.7"
resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.7.tgz#84e62c0f23e8e4e5ac2cadcea1ffeacccae7f62f"
integrity sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==
dependencies:
csstype "^3.2.2"
"@types/react@^19.2.5":
version "19.2.6"
resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.6.tgz#d27db1ff45012d53980f5589fda925278e1249ca"
@@ -1540,6 +1554,11 @@ esutils@^2.0.2:
resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
exenv@^1.2.0:
version "1.2.2"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
version "3.1.3"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -1934,7 +1953,7 @@ lodash@^4.17.21:
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
loose-envify@^1.4.0:
loose-envify@^1.0.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -2104,7 +2123,7 @@ prettier@^3.5.0:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.6.2.tgz#ccda02a1003ebbb2bfda6f83a074978f608b9393"
integrity sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==
prop-types@^15.5.0:
prop-types@^15.5.0, prop-types@^15.7.2:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -2150,6 +2169,21 @@ react-konva@^19.2.0:
react-reconciler "0.33.0"
scheduler "0.27.0"
react-lifecycles-compat@^3.0.0:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-modal@^3.16.3:
version "3.16.3"
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.3.tgz#c412d41915782e3c261253435d01468e2439b11b"
integrity sha512-yCYRJB5YkeQDQlTt17WGAgFJ7jr2QYcWa1SHqZ3PluDmnKJ/7+tVU+E6uKyZ0nODaeEj+xCpK4LcSnKXLMC0Nw==
dependencies:
exenv "^1.2.0"
prop-types "^15.7.2"
react-lifecycles-compat "^3.0.0"
warning "^4.0.3"
react-reconciler@0.33.0:
version "0.33.0"
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.33.0.tgz#9dd20208d45baa5b0b4701781f858236657f15e1"
@@ -2446,6 +2480,13 @@ vite@^7.1.7, vite@^7.2.4:
optionalDependencies:
fsevents "~2.3.3"
warning@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
dependencies:
loose-envify "^1.0.0"
webpack-virtual-modules@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"