diff --git a/src/Components/StatBox/index.jsx b/src/Components/StatBox/index.jsx index d571767fa..3c91e1aae 100644 --- a/src/Components/StatBox/index.jsx +++ b/src/Components/StatBox/index.jsx @@ -132,7 +132,7 @@ StatBox.propTypes = { gradient: PropTypes.bool, status: PropTypes.string, sx: PropTypes.object, - icon: PropTypes.node, + icon: PropTypes.elementType, img: PropTypes.node, alt: PropTypes.string, }; diff --git a/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx b/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx index dc5604a47..78740bd1d 100644 --- a/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx +++ b/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx @@ -1,7 +1,8 @@ -import { Stack, Typography, List, ListItem } from "@mui/material"; +import { Stack, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; import PulseDot from "../../../../../Components/Animated/PulseDot"; import "flag-icons/css/flag-icons.min.css"; +import { styled } from "@mui/material/styles"; const BASE_BOX_PADDING_VERTICAL = 16; const BASE_BOX_PADDING_HORIZONTAL = 8; @@ -23,12 +24,12 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => { backgroundColor: theme.palette.background.main, border: 1, borderStyle: "solid", + borderRadius: theme.spacing(4), borderColor: theme.palette.primary.lowContrast, }} > @@ -41,29 +42,52 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => { {connectionStatus === "up" ? "Connected" : "No connection"} - - {data.slice(Math.max(data.length - 5, 0)).map((dataPoint) => { - const countryCode = dataPoint?.countryCode?.toLowerCase() ?? null; - const flag = countryCode ? `fi fi-${countryCode}` : null; - return ( - - - - {flag && } - {dataPoint?.city || "Unknown"} - - {`Response time: ${Math.floor(dataPoint?.responseTime ?? 0)} ms`} - {`UPT burned: ${dataPoint.uptBurnt}`} - {`${dataPoint?.device?.manufacturer} ${dataPoint?.device?.model}`} - - - ); - })} - + + + + + + + + + + + {data.map((dataPoint) => { + const countryCode = dataPoint?.countryCode?.toLowerCase() ?? null; + const flag = countryCode ? `fi fi-${countryCode}` : null; + const city = dataPoint?.city !== "" ? dataPoint?.city : "Unknown"; + return ( + + + + + + + ); + })} + +
+ COUNTRY + + CITY + + RESPONSE + + UPT BURNED +
+ + {flag ? : null}{" "} + {countryCode?.toUpperCase() ?? "N/A"} + + + {city} + + {Math.floor(dataPoint.responseTime)} ms + + + +{dataPoint.uptBurnt} + +
); }; diff --git a/src/Pages/DistributedUptimeStatus/Status/index.jsx b/src/Pages/DistributedUptimeStatus/Status/index.jsx index b350792f7..22fa6364a 100644 --- a/src/Pages/DistributedUptimeStatus/Status/index.jsx +++ b/src/Pages/DistributedUptimeStatus/Status/index.jsx @@ -49,7 +49,6 @@ const DistributedUptimeStatus = () => { const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] = useSubscribeToDetails({ monitorId, dateRange, isPublic, isPublished }); - console.log(monitor); const [deleteStatusPage, isDeleting] = useStatusPageDelete(() => { navigate("/distributed-uptime"); }, url);