mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-02-05 00:28:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor out components

Browse Source
This commit is contained in:
Alex Holliday
2025-02-04 15:26:24 -08:00
parent e4de0874b1
commit befdf73706
4 changed files with 178 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
Client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx Normal file
View File

@@ -0,0 +1,73 @@
// Components
import { Box, Stack, Typography, Button } from "@mui/material";
import Image from "../../../../../Components/Image";
import SettingsIcon from "../../../../../assets/icons/settings-bold.svg?react";
//Utils
import { useTheme } from "@mui/material/styles";
import { useNavigate } from "react-router-dom";
const ControlsHeader = ({ statusPage, deleteStatusPage, isDeleting }) => {
const theme = useTheme();
const navigate = useNavigate();
return (
<Stack
alignSelf="flex-start"
direction="row"
width="100%"
gap={theme.spacing(2)}
justifyContent="space-between"
alignItems="flex-end"
>
<Stack
direction="row"
gap={theme.spacing(8)}
alignItems="flex-end"
>
<Image
shouldRender={statusPage?.logo?.data ? true : false}
alt={"Company logo"}
maxWidth={"100px"}
base64={statusPage?.logo?.data}
/>
<Typography variant="h2">{statusPage?.companyName}</Typography>
</Stack>
<Stack
direction="row"
gap={theme.spacing(2)}
>
<Box>
<Button
variant="contained"
color="error"
onClick={deleteStatusPage}
loading={isDeleting}
>
Delete
</Button>
</Box>
<Box>
<Button
variant="contained"
color="secondary"
onClick={() => navigate(`/status/create`)}
sx={{
px: theme.spacing(5),
"& svg": {
mr: theme.spacing(3),
"& path": {
stroke: theme.palette.secondary.contrastText,
},
},
}}
>
<SettingsIcon /> Configure
</Button>
</Box>
</Stack>
</Stack>
);
};
export default ControlsHeader;

58
Client/src/Pages/StatusPage/Status/Components/MonitorsList/index.jsx Normal file
View File

@@ -0,0 +1,58 @@
// Components
import { Stack, Box } from "@mui/material";
import Host from "../../../../Uptime/Monitors/Components/Host";
import StatusPageBarChart from "../../../../../Components/Charts/StatusPageBarChart";
import { StatusLabel } from "../../../../../Components/Label";
//Utils
import { useTheme } from "@mui/material/styles";
import useUtils from "../../../../Uptime/Monitors/Hooks/useUtils";
import PropTypes from "prop-types";
const MonitorsList = ({ monitors = [] }) => {
const theme = useTheme();
const { determineState } = useUtils();
return (
<>
{monitors?.map((monitor) => {
const status = determineState(monitor);
return (
<Stack
key={monitor._id}
width="100%"
gap={theme.spacing(2)}
>
<Host
key={monitor._id}
url={monitor.url}
title={monitor.title}
percentageColor={monitor.percentageColor}
percentage={monitor.percentage}
/>
<Stack
direction="row"
alignItems="center"
gap={theme.spacing(20)}
>
<Box flex={9}>
<StatusPageBarChart checks={monitor.checks.slice().reverse()} />
</Box>
<Box flex={1}>
<StatusLabel
status={status}
text={status}
customStyles={{ textTransform: "capitalize" }}
/>
</Box>
</Stack>
</Stack>
);
})}
</>
);
};
MonitorsList.propTypes = {
monitors: PropTypes.array.isRequired,
};
export default MonitorsList;

31
Client/src/Pages/StatusPage/Status/Components/StatusBar/index.jsx Normal file
View File

@@ -0,0 +1,31 @@
// Components
import { Stack, Typography } from "@mui/material";
// Utils
import { useTheme } from "@mui/material/styles";
import PropTypes from "prop-types";
const StatusBar = ({ status }) => {
const theme = useTheme();
return (
<Stack
direction="row"
alignItems="center"
justifyContent="center"
gap={theme.spacing(2)}
height={theme.spacing(30)}
width={"100%"}
backgroundColor={status?.color}
borderRadius={theme.spacing(2)}
>
{status?.icon}
{/* CAIO_REVIEW */}
<Typography variant="h2DarkBg">{status?.msg}</Typography>
</Stack>
);
};
export default StatusBar;
StatusBar.propTypes = {
status: PropTypes.object.isRequired,
};

127
Client/src/Pages/StatusPage/Status/index.jsx
View File

@@ -1,15 +1,12 @@
// Components
import { Typography, Stack, Box, Button } from "@mui/material";
import { Typography, Stack, Box } from "@mui/material";
import GenericFallback from "../../../Components/GenericFallback";
import Fallback from "../../../Components/Fallback";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import StatusPageBarChart from "../../../Components/Charts/StatusPageBarChart";
import Host from "../../Uptime/Monitors/Components/Host";
import { StatusLabel } from "../../../Components/Label";
import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
import Image from "../../../Components/Image";
import ControlsHeader from "./Components/ControlsHeader";
import SkeletonLayout from "./Components/Skeleton";
import StatusBar from "./Components/StatusBar";
import MonitorsList from "./Components/MonitorsList";
// Utils
import { useState, useEffect } from "react";
import { useStatusPageFetch } from "./Hooks/useStatusPageFetch";
@@ -75,7 +72,11 @@ const PublicStatus = () => {
if (monitors.every((monitor) => monitor.status === true)) {
monitorsStatus.msg = "All systems operational";
monitorsStatus.color = theme.palette.success.lowContrast;
monitorsStatus.icon = <CheckCircleIcon />;
monitorsStatus.icon = (
<CheckCircleIcon
sx={{ color: theme.palette.primary.contrastTextSecondaryDarkBg }}
/>
);
}
if (monitors.every((monitor) => monitor.status === false)) {
@@ -169,110 +170,14 @@ const PublicStatus = () => {
alignItems="center"
sx={sx}
>
<Stack
alignSelf="flex-start"
direction="row"
width="100%"
gap={theme.spacing(2)}
justifyContent="space-between"
alignItems="flex-end"
>
<Stack
direction="row"
gap={theme.spacing(8)}
alignItems="flex-end"
>
<Image
src={
statusPage?.logo?.data
? `data:image/png;base64,${statusPage?.logo?.data}`
: undefined
}
alt={"Company logo"}
maxWidth={"100px"}
/>
<Typography variant="h2">{statusPage?.companyName}</Typography>
</Stack>
<Stack
direction="row"
gap={theme.spacing(2)}
>
<Box>
<Button
variant="contained"
color="error"
onClick={deleteStatusPage}
loading={isDeleting}
>
Delete
</Button>
</Box>
<Box>
<Button
variant="contained"
color="secondary"
onClick={() => navigate(`/status/create`)}
sx={{
px: theme.spacing(5),
"& svg": {
mr: theme.spacing(3),
"& path": {
stroke: theme.palette.secondary.contrastText,
},
},
}}
>
<SettingsIcon /> Configure
</Button>
</Box>
</Stack>
</Stack>
<ControlsHeader
statusPage={statusPage}
deleteStatusPage={deleteStatusPage}
isDeleting={isDeleting}
/>
<Typography variant="h2">Service status</Typography>
<Stack
direction="row"
alignItems="center"
justifyContent="center"
gap={theme.spacing(2)}
height={theme.spacing(30)}
width={"100%"}
backgroundColor={status?.color}
borderRadius={theme.spacing(2)}
>
{status?.icon}
<Typography>{status?.msg}</Typography>
</Stack>
{monitors?.map((monitor) => {
const status = determineState(monitor);
return (
<Stack
key={monitor._id}
width="100%"
gap={theme.spacing(2)}
>
<Host
key={monitor._id}
url={monitor.url}
title={monitor.title}
percentageColor={monitor.percentageColor}
percentage={monitor.percentage}
/>
<Stack
direction="row"
alignItems="center"
gap={theme.spacing(20)}
>
<StatusPageBarChart checks={monitor.checks.slice().reverse()} />
<Box>
<StatusLabel
status={status}
text={status}
customStyles={{ textTransform: "capitalize" }}
/>
</Box>
</Stack>
</Stack>
);
})}
<StatusBar status={status} />
<MonitorsList monitors={monitors} />
{AdminLink}
</Stack>
);