diff --git a/src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx b/src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx new file mode 100644 index 000000000..00af46f6b --- /dev/null +++ b/src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx @@ -0,0 +1,48 @@ +// Components +import { Stack, Typography } from "@mui/material"; +import { ColContainer } from "../../../../../Components/StandardContainer"; +import SmartToyIcon from "@mui/icons-material/SmartToy"; +import Dot from "../../../../../Components/Dot"; +// Utils +import { useTheme } from "@emotion/react"; + +const MESSAGES = [ + "I've checked the network status, and we're seeing excellent performance across all regions.", + "The network is stable and functioning optimally. All connections are active and stable.", + "I've reviewed the network status, and everything looks great. No issues detected.", + "The network is up and running smoothly. All connections are active and stable.", + "I've checked the network status, and everything is looking good. No issues detected.", +]; + +const ChatBot = ({ sx }) => { + const theme = useTheme(); + return ( + + + + Status Bot + + + Now + + + {MESSAGES[Math.floor(Math.random() * MESSAGES.length)]} + + ); +}; + +export default ChatBot; diff --git a/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx b/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx index dc5604a47..9194eefe5 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 { ColContainer } from "../../../../../Components/StandardContainer"; const BASE_BOX_PADDING_VERTICAL = 16; const BASE_BOX_PADDING_HORIZONTAL = 8; @@ -14,21 +15,9 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => { }; return ( - + @@ -41,30 +30,53 @@ 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/DistributedUptime/Details/Components/DistributedUptimeMap/index.jsx b/src/Pages/DistributedUptime/Details/Components/DistributedUptimeMap/index.jsx index f4e6a2b19..7617666eb 100644 --- a/src/Pages/DistributedUptime/Details/Components/DistributedUptimeMap/index.jsx +++ b/src/Pages/DistributedUptime/Details/Components/DistributedUptimeMap/index.jsx @@ -28,12 +28,17 @@ const DistributedUptimeMap = ({ width = "100%", checks }) => { useEffect(() => { if (mapContainer.current && !map.current) { const initialStyle = buildStyle(initialTheme.current, initialMode.current); + map.current = new maplibregl.Map({ container: mapContainer.current, style: initialStyle, center: [0, 20], zoom: 0.8, attributionControl: false, + canvasContextAttributes: { + antialias: true, + preserveDrawingBuffer: true, + }, }); } map.current.on("load", () => { @@ -87,6 +92,10 @@ const DistributedUptimeMap = ({ width = "100%", checks }) => { ref={mapContainer} style={{ width: width, + borderRadius: theme.spacing(4), + borderColor: theme.palette.primary.lowContrast, + borderStyle: "solid", + borderWidth: 1, }} /> ); diff --git a/src/Pages/DistributedUptime/Details/Components/StatBoxes/index.jsx b/src/Pages/DistributedUptime/Details/Components/StatBoxes/index.jsx index a4fd3b03d..df0492bd2 100644 --- a/src/Pages/DistributedUptime/Details/Components/StatBoxes/index.jsx +++ b/src/Pages/DistributedUptime/Details/Components/StatBoxes/index.jsx @@ -1,6 +1,6 @@ // Components import { Stack } from "@mui/material"; -import StatBox from "../../../../../Components/StatBox"; +import InfoBox from "../../../../../Components/InfoBox"; import LastUpdate from "../LastUpdate"; import UptLogo from "../../../../../assets/icons/upt_logo.png"; @@ -14,17 +14,21 @@ const StatBoxes = ({ monitor, lastUpdateTrigger }) => { return ( - - - { /> } /> - { /> } /> - - ); }; diff --git a/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx b/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx new file mode 100644 index 000000000..5db44a559 --- /dev/null +++ b/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx @@ -0,0 +1,92 @@ +// Components +import { ColContainer } from "../../../../../Components/StandardContainer"; +import { Stack, Typography } from "@mui/material"; +import PulseDot from "../../../../../Components/Animated/PulseDot"; +import LastUpdate from "../LastUpdate"; +import ChatBot from "../Chatbot"; +import ShareComponent from "../../../../../Components/ShareComponent"; + +// Utils +import { useTheme } from "@emotion/react"; +import PropTypes from "prop-types"; + +const StatusHeader = ({ monitor, connectionStatus, elementToCapture }) => { + const theme = useTheme(); + const COLOR_MAP = { + up: theme.palette.successSecondary.main, + down: theme.palette.error.lowContrast, + }; + + const MSG_MAP = { + up: "All Systems Operational", + down: "Last Check Failed", + }; + + const PULSE_COLOR = { + up: theme.palette.success.main, + down: theme.palette.error.main, + }; + + let bgColor = COLOR_MAP[connectionStatus]; + + return ( + + + + + + + + {MSG_MAP[connectionStatus]} + + + Uptime: {(monitor.totalUptime * 100).toFixed(2)}% + + + + Last updated{" "} + + + + + + + + + ); +}; + +StatusHeader.propTypes = { + monitor: PropTypes.object, + connectionStatus: PropTypes.string, +}; + +export default StatusHeader;