Merge pull request #3335 from bluewave-labs/feat/globalping-map

feat: globalping map

client/package.json

@@ -25,6 +25,7 @@
 		"@mui/x-charts": "7.29.1",
 		"@mui/x-date-pickers": "7.29.4",
 		"@reduxjs/toolkit": "2.7.0",
+		"@types/maplibre-gl": "^1.13.2",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
 		"flag-icons": "7.3.2",
@@ -33,6 +34,7 @@
 		"i18next": "25.4.2",
 		"joi": "17.13.3",
 		"lucide-react": "^0.562.0",
+		"maplibre-gl": "^5.19.0",
 		"mui-color-input": "^7.0.0",
 		"pretty-bytes": "^7.1.0",
 		"pretty-ms": "^9.3.0",
@@ -41,6 +43,7 @@
 		"react-hook-form": "^7.63.0",
 		"react-i18next": "^15.4.0",
 		"react-icons": "5.5.0",
+		"react-map-gl": "^8.1.0",
 		"react-redux": "9.2.0",
 		"react-router": "^6.23.0",
 		"react-router-dom": "^6.23.1",

client/src/Components/monitors/GeoChecksMap.tsx

@@ -0,0 +1,188 @@
+import { useRef, useEffect, useState } from "react";
+import { Box, Typography, Stack, useTheme, GlobalStyles } from "@mui/material";
+import Map, { Marker, Popup } from "react-map-gl/maplibre";
+import type { MapRef } from "react-map-gl/maplibre";
+import type { FlatGeoCheck } from "@/Types/GeoCheck";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+interface GeoChecksMapProps {
+	geoChecks: FlatGeoCheck[];
+}
+
+export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
+	const mapRef = useRef<MapRef>(null);
+	const [selectedCheck, setSelectedCheck] = useState<FlatGeoCheck | null>(null);
+	const theme = useTheme();
+	const isDarkMode = theme.palette.mode === "dark";
+
+	const mapPopupStyles = (
+		<GlobalStyles
+			styles={{
+				".maplibregl-popup-content": {
+					background: "transparent !important",
+					padding: "0 !important",
+					boxShadow: "none !important",
+				},
+				".maplibregl-popup-tip": {
+					display: "none !important",
+				},
+			}}
+		/>
+	);
+
+	useEffect(() => {
+		if (geoChecks.length === 0 || !mapRef.current) return;
+
+		const bounds = geoChecks.reduce(
+			(acc, check) => {
+				return {
+					minLng: Math.min(acc.minLng, check.location.longitude),
+					maxLng: Math.max(acc.maxLng, check.location.longitude),
+					minLat: Math.min(acc.minLat, check.location.latitude),
+					maxLat: Math.max(acc.maxLat, check.location.latitude),
+				};
+			},
+			{
+				minLng: Infinity,
+				maxLng: -Infinity,
+				minLat: Infinity,
+				maxLat: -Infinity,
+			}
+		);
+
+		if (bounds.minLng !== Infinity) {
+			mapRef.current.fitBounds(
+				[
+					[bounds.minLng, bounds.minLat],
+					[bounds.maxLng, bounds.maxLat],
+				],
+				{ padding: 50, duration: 1000 }
+			);
+		}
+	}, [geoChecks]);
+
+	const getMarkerColor = (status: boolean): string => {
+		return status ? theme.palette.success.main : theme.palette.error.main;
+	};
+
+	const formatResponseTime = (timing: number): string => {
+		return `${timing.toFixed(0)}ms`;
+	};
+
+	return (
+		<>
+			{mapPopupStyles}
+			<Box
+				height={500}
+				width={"100%"}
+				borderRadius={theme.shape.borderRadius}
+				overflow={"hidden"}
+			>
+				<Map
+					ref={mapRef}
+					initialViewState={{
+						longitude: 0,
+						latitude: 20,
+						zoom: 1.5,
+					}}
+					style={{ height: "100%", width: "100%" }}
+					mapStyle={
+						isDarkMode
+							? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+							: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+					}
+				>
+					{geoChecks.map((check, index) => (
+						<Marker
+							key={`${check.id}-${index}`}
+							longitude={check.location.longitude}
+							latitude={check.location.latitude}
+							anchor="bottom"
+							onClick={(e: any) => {
+								e.originalEvent.stopPropagation();
+								setSelectedCheck(check);
+							}}
+						>
+							<div
+								style={{
+									width: "10px",
+									height: "10px",
+									borderRadius: "50%",
+									backgroundColor: getMarkerColor(check.status),
+									boxShadow: "0 2px 4px rgba(0,0,0,0.3)",
+									cursor: "pointer",
+								}}
+							/>
+						</Marker>
+					))}
+
+					{selectedCheck && (
+						<Popup
+							longitude={selectedCheck.location.longitude}
+							latitude={selectedCheck.location.latitude}
+							anchor="top"
+							onClose={() => setSelectedCheck(null)}
+							closeOnClick={false}
+						>
+							<Box
+								sx={{
+									minWidth: 200,
+									p: theme.spacing(4),
+									bgcolor: theme.palette.background.paper,
+									borderWidth: 1,
+									borderStyle: "solid",
+									borderColor: theme.palette.divider,
+									borderRadius: 1,
+								}}
+							>
+								<Typography
+									variant="subtitle1"
+									fontWeight="bold"
+									gutterBottom
+								>
+									{selectedCheck.location.city}, {selectedCheck.location.country}
+								</Typography>
+								<Stack spacing={0.5}>
+									<Typography variant="body2">
+										<Typography
+											component="span"
+											fontWeight="medium"
+										>
+											Status:
+										</Typography>{" "}
+										{selectedCheck.status ? "Up" : "Down"}
+									</Typography>
+									<Typography variant="body2">
+										<Typography
+											component="span"
+											fontWeight="medium"
+										>
+											Status Code:
+										</Typography>{" "}
+										{selectedCheck.statusCode}
+									</Typography>
+									<Typography variant="body2">
+										<Typography
+											component="span"
+											fontWeight="medium"
+										>
+											Response Time:
+										</Typography>{" "}
+										{formatResponseTime(selectedCheck.timings.total)}
+									</Typography>
+									<Typography
+										variant="caption"
+										color="text.secondary"
+										sx={{ mt: 0.5 }}
+									>
+										{new Date(selectedCheck.createdAt).toLocaleString()}
+									</Typography>
+								</Stack>
+							</Box>
+						</Popup>
+					)}
+				</Map>
+			</Box>
+		</>
+	);
+};

client/src/Components/monitors/index.tsx

@@ -2,6 +2,7 @@ export * from "./ControlsFilter";
 export * from "./MonitorStatBoxes";
 export * from "./HeaderMonitorControls";
 export * from "./HeaderGeoTabs";
+export * from "./GeoChecksMap";
 export * from "./charts/HistogramStatus";
 export * from "./charts/RadialAvgResponse";
 export * from "./charts/HistogramDetails";

client/src/Pages/Uptime/Details/index.tsx

@@ -7,6 +7,7 @@ import {
 	HistogramDetails,
 	HeaderMonitorControls,
 	HeaderGeoTabs,
+	GeoChecksMap,
 } from "@/Components/monitors";
 import { TrendingUp, AlertTriangle } from "lucide-react";
 import { ChecksTable } from "@/Pages/Uptime/Details/Components/ChecksTable";
@@ -247,6 +248,7 @@ const UptimeDetailsPage = () => {
 						rowsPerPage={geoRowsPerPage}
 						setRowsPerPage={setGeoRowsPerPage}
 					/>
+					<GeoChecksMap geoChecks={geoChecksForTable} />
 				</>
 			)}
 		</BasePage>

client/src/Types/env.d.ts

@@ -17,3 +17,8 @@ declare module "*.svg?react" {
 	>;
 	export default ReactComponent;
 }
+
+declare module "*.css" {
+	const content: string;
+	export default content;
+}