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

Merge pull request #1834 from bluewave-labs/feat/responsive-status

Browse Source 
feat: status page update
This commit is contained in:
Alexander Holliday
2025-02-26 15:54:20 -08:00
committed by GitHub
parent ee2a1729d0 34bb86d166
commit 1cadb2c45f
2 changed files with 60 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx
View File

@@ -18,7 +18,7 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
};
return (
<ColContainer>
<ColContainer sx={{ height: "100%" }}>
<Stack
direction="row"
gap={theme.spacing(4)}
@@ -33,55 +33,62 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
{connectionStatus === "up" ? "Connected" : "No connection"}
</Typography>
</Stack>
<table>
<thead>
<tr>
<th style={{ textAlign: "left" }}>
<Typography>COUNTRY</Typography>
</th>
<th style={{ textAlign: "left" }}>
<Typography>CITY</Typography>
</th>
<th style={{ textAlign: "right" }}>
<Typography>RESPONSE</Typography>
</th>
<th style={{ textAlign: "right" }}>
<Typography>{isSmallScreen ? "UPT" : "UPT BURNED"}</Typography>
</th>
</tr>
</thead>
<tbody>
{data.map((dataPoint) => {
const countryCode = dataPoint?.countryCode?.toLowerCase() ?? null;
const flag = countryCode ? `fi fi-${countryCode}` : null;
const city = dataPoint?.city !== "" ? dataPoint?.city : "Unknown";
return (
<tr key={Math.random()}>
<td style={{ padding: theme.spacing(4) }}>
<Typography>
{flag ? <span className={flag} /> : null}{" "}
{countryCode?.toUpperCase() ?? "N/A"}
</Typography>
</td>
<td>
<Typography>{city}</Typography>
</td>
<td style={{ textAlign: "right" }}>
<Typography>{Math.floor(dataPoint.responseTime)} ms</Typography>
</td>
<td style={{ textAlign: "right" }}>
<Typography color={theme.palette.warning.main}>
+
{isSmallScreen
? safelyParseFloat(dataPoint.uptBurnt).toFixed(4)
: dataPoint.uptBurnt}
</Typography>
</td>
</tr>
);
})}
</tbody>
</table>
<div
style={{
overflowX: "auto",
maxWidth: "100%",
// Optional: add a max height if you want vertical scrolling too
// maxHeight: '400px',
// overflowY: 'auto'
}}
>
<table style={{ width: "100%" }}>
<thead>
<tr>
<th style={{ textAlign: "left", paddingLeft: theme.spacing(4) }}>
<Typography>COUNTRY</Typography>
</th>
<th style={{ textAlign: "left", paddingLeft: theme.spacing(4) }}>
<Typography>CITY</Typography>
</th>
<th style={{ textAlign: "right", paddingLeft: theme.spacing(4) }}>
<Typography>RESPONSE</Typography>
</th>
<th style={{ textAlign: "right", paddingLeft: theme.spacing(4) }}>
<Typography sx={{ whiteSpace: "nowrap" }}>{"UPT BURNED"}</Typography>
</th>
</tr>
</thead>
<tbody>
{data.map((dataPoint) => {
const countryCode = dataPoint?.countryCode?.toLowerCase() ?? null;
const flag = countryCode ? `fi fi-${countryCode}` : null;
const city = dataPoint?.city !== "" ? dataPoint?.city : "Unknown";
return (
<tr key={Math.random()}>
<td style={{ paddingLeft: theme.spacing(4) }}>
<Typography>
{flag ? <span className={flag} /> : null}{" "}
{countryCode?.toUpperCase() ?? "N/A"}
</Typography>
</td>
<td style={{ paddingLeft: theme.spacing(4) }}>
<Typography>{city}</Typography>
</td>
<td style={{ textAlign: "right", paddingLeft: theme.spacing(4) }}>
<Typography>{Math.floor(dataPoint.responseTime)} ms</Typography>
</td>
<td style={{ textAlign: "right", paddingLeft: theme.spacing(4) }}>
<Typography color={theme.palette.warning.main}>
+{dataPoint.uptBurnt}
</Typography>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</ColContainer>
);
};

6
src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx
View File

@@ -94,9 +94,9 @@ const ControlsHeader = ({
alignItems="flex-end"
>
<Stack
direction={{ s: "column", md: "row" }}
direction="row"
gap={theme.spacing(8)}
alignItems={{ s: "flex-start", md: "flex-end" }}
alignItems="flex-end"
>
<Image
shouldRender={statusPage?.logo?.data ? true : false}
@@ -105,7 +105,7 @@ const ControlsHeader = ({
maxHeight={"50px"}
base64={statusPage?.logo?.data}
/>
<Typography variant="h2">{statusPage?.companyName}</Typography>
<Typography variant="h1">{statusPage?.companyName}</Typography>
</Stack>
<Controls
isDeleting={isDeleting}