Merge branch 'develop' of github.com:bluewave-labs/bluewave-uptime into develop

package-lock.json

@@ -12,9 +12,9 @@
 				"@emotion/styled": "^11.13.0",
 				"@fontsource/roboto": "^5.0.13",
 				"@hello-pangea/dnd": "^18.0.0",
-				"@mui/icons-material": "6.4.6",
-				"@mui/lab": "6.0.0-beta.29",
-				"@mui/material": "6.4.6",
+				"@mui/icons-material": "6.4.7",
+				"@mui/lab": "6.0.0-beta.30",
+				"@mui/material": "6.4.7",
 				"@mui/x-charts": "^7.5.1",
 				"@mui/x-data-grid": "7.27.2",
 				"@mui/x-date-pickers": "7.27.1",
@@ -3516,9 +3516,9 @@
 			}
 		},
 		"node_modules/@mui/core-downloads-tracker": {
-			"version": "6.4.6",
-			"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.6.tgz",
-			"integrity": "sha512-rho5Q4IscbrVmK9rCrLTJmjLjfH6m/NcqKr/mchvck0EIXlyYUB9+Z0oVmkt/+Mben43LMRYBH8q/Uzxj/c4Vw==",
+			"version": "6.4.7",
+			"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.7.tgz",
+			"integrity": "sha512-XjJrKFNt9zAKvcnoIIBquXyFyhfrHYuttqMsoDS7lM7VwufYG4fAPw4kINjBFg++fqXM2BNAuWR9J7XVIuKIKg==",
 			"license": "MIT",
 			"funding": {
 				"type": "opencollective",
@@ -3526,9 +3526,9 @@
 			}
 		},
 		"node_modules/@mui/icons-material": {
-			"version": "6.4.6",
-			"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.4.6.tgz",
-			"integrity": "sha512-rGJBvIQQbQAlyKYljHQ8wAQS/K2/uYwvemcpygnAmCizmCI4zSF9HQPuiG8Ql4YLZ6V/uKjA3WHIYmF/8sV+pQ==",
+			"version": "6.4.7",
+			"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.4.7.tgz",
+			"integrity": "sha512-Rk8cs9ufQoLBw582Rdqq7fnSXXZTqhYRbpe1Y5SAz9lJKZP3CIdrj0PfG8HJLGw1hrsHFN/rkkm70IDzhJsG1g==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.26.0"
@@ -3541,7 +3541,7 @@
 				"url": "https://opencollective.com/mui-org"
 			},
 			"peerDependencies": {
-				"@mui/material": "^6.4.6",
+				"@mui/material": "^6.4.7",
 				"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
 				"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
 			},
@@ -3552,14 +3552,14 @@
 			}
 		},
 		"node_modules/@mui/lab": {
-			"version": "6.0.0-beta.29",
-			"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-6.0.0-beta.29.tgz",
-			"integrity": "sha512-C5nTm9xfzVi4Zz4DLrZq1Kn+cQ2fGZmSJxyoUbOu+jDPlLZrUpSsgxEkkbjJB5dasiv6fgGKhO3EaKKyfobLAQ==",
+			"version": "6.0.0-beta.30",
+			"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-6.0.0-beta.30.tgz",
+			"integrity": "sha512-ayDYkzTlkm5cnDGa10bvuFygX+2b9Hm1T4QZYMqV8+nSx3frKE0TLAbE7/qQ4vInOO5E4aOkHVBwZjyO+UbMTA==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.26.0",
 				"@mui/base": "5.0.0-beta.69",
-				"@mui/system": "^6.4.6",
+				"@mui/system": "^6.4.7",
 				"@mui/types": "^7.2.21",
 				"@mui/utils": "^6.4.6",
 				"clsx": "^2.1.1",
@@ -3575,8 +3575,8 @@
 			"peerDependencies": {
 				"@emotion/react": "^11.5.0",
 				"@emotion/styled": "^11.3.0",
-				"@mui/material": "^6.4.6",
-				"@mui/material-pigment-css": "^6.4.6",
+				"@mui/material": "^6.4.7",
+				"@mui/material-pigment-css": "^6.4.7",
 				"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
 				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
 				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3597,14 +3597,14 @@
 			}
 		},
 		"node_modules/@mui/material": {
-			"version": "6.4.6",
-			"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.6.tgz",
-			"integrity": "sha512-6UyAju+DBOdMogfYmLiT3Nu7RgliorimNBny1pN/acOjc+THNFVE7hlxLyn3RDONoZJNDi/8vO4AQQr6dLAXqA==",
+			"version": "6.4.7",
+			"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.7.tgz",
+			"integrity": "sha512-K65StXUeGAtFJ4ikvHKtmDCO5Ab7g0FZUu2J5VpoKD+O6Y3CjLYzRi+TMlI3kaL4CL158+FccMoOd/eaddmeRQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.26.0",
-				"@mui/core-downloads-tracker": "^6.4.6",
-				"@mui/system": "^6.4.6",
+				"@mui/core-downloads-tracker": "^6.4.7",
+				"@mui/system": "^6.4.7",
 				"@mui/types": "^7.2.21",
 				"@mui/utils": "^6.4.6",
 				"@popperjs/core": "^2.11.8",
@@ -3625,7 +3625,7 @@
 			"peerDependencies": {
 				"@emotion/react": "^11.5.0",
 				"@emotion/styled": "^11.3.0",
-				"@mui/material-pigment-css": "^6.4.6",
+				"@mui/material-pigment-css": "^6.4.7",
 				"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
 				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
 				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3713,9 +3713,9 @@
 			}
 		},
 		"node_modules/@mui/system": {
-			"version": "6.4.6",
-			"resolved": "https://registry.npmjs.org/@mui/system/-/system-6.4.6.tgz",
-			"integrity": "sha512-FQjWwPec7pMTtB/jw5f9eyLynKFZ6/Ej9vhm5kGdtmts1z5b7Vyn3Rz6kasfYm1j2TfrfGnSXRvvtwVWxjpz6g==",
+			"version": "6.4.7",
+			"resolved": "https://registry.npmjs.org/@mui/system/-/system-6.4.7.tgz",
+			"integrity": "sha512-7wwc4++Ak6tGIooEVA9AY7FhH2p9fvBMORT4vNLMAysH3Yus/9B9RYMbrn3ANgsOyvT3Z7nE+SP8/+3FimQmcg==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.26.0",

package.json

@@ -18,9 +18,9 @@
 		"@mui/x-charts": "^7.5.1",
 		"@mui/x-data-grid": "7.27.2",
 		"@mui/x-date-pickers": "7.27.1",
-		"@mui/icons-material": "6.4.6",
-		"@mui/lab": "6.0.0-beta.29",
-		"@mui/material": "6.4.6",
+		"@mui/icons-material": "6.4.7",
+		"@mui/lab": "6.0.0-beta.30",
+		"@mui/material": "6.4.7",
 		"@reduxjs/toolkit": "2.6.0",
 		"@solana/wallet-adapter-base": "0.9.23",
 		"@solana/wallet-adapter-material-ui": "0.16.34",

src/Components/Charts/Utils/chartUtilFunctions.js

@@ -13,6 +13,7 @@ export const tooltipDateFormatLookup = (dateRange) => {
 
 export const tickDateFormatLookup = (dateRange) => {
 	const tickFormatLookup = {
+		recent: "h:mm A",
 		day: "h:mm A",
 		week: "MM/D, h:mm A",
 		month: "ddd. M/D",

src/Components/MonitorTimeFrameHeader/index.jsx

@@ -20,6 +20,13 @@ const MonitorTimeFrameHeader = ({
 	if (hasDateRange) {
 		timeFramePicker = (
 			<ButtonGroup sx={{ height: 32 }}>
+				<Button
+					variant="group"
+					filled={(dateRange === "recent").toString()}
+					onClick={() => setDateRange("recent")}
+				>
+					Recent
+				</Button>
 				<Button
 					variant="group"
 					filled={(dateRange === "day").toString()}
@@ -55,7 +62,14 @@ const MonitorTimeFrameHeader = ({
 		>
 			<Typography variant="body2">
 				Showing statistics for past{" "}
-				{dateRange === "day" ? "24 hours" : dateRange === "week" ? "7 days" : "30 days"}.
+				{dateRange === "recent"
+					? "2 hours"
+					: dateRange === "day"
+						? "24 hours"
+						: dateRange === "week"
+							? "7 days"
+							: "30 days"}
+				.
 			</Typography>
 			{timeFramePicker}
 		</Stack>

src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx

@@ -5,16 +5,14 @@ import "flag-icons/css/flag-icons.min.css";
 import { ColContainer } from "../../../../../Components/StandardContainer";
 
 // Utils
-import { useMediaQuery } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import { safelyParseFloat } from "../../../../../Utils/utils";
 const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
 	const theme = useTheme();
-	const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
 
 	const statusColor = {
 		up: theme.palette.success.main,
 		down: theme.palette.error.main,
+		undefined: theme.palette.warning.main,
 	};
 
 	return (
@@ -30,7 +28,7 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
 					mb={theme.spacing(8)}
 					sx={{ alignSelf: "center" }}
 				>
-					{connectionStatus === "up" ? "Connected" : "No connection"}
+					{connectionStatus === "up" ? "Connected" : "Connecting..."}
 				</Typography>
 			</Stack>
 			<div

src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx

@@ -33,11 +33,12 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange })
 				if (typeof responseData === "undefined") {
 					throw new Error("No data");
 				}
-
+				setConnectionStatus("up");
 				setLastUpdateTrigger(Date.now());
 				setMonitor(responseData);
 			} catch (error) {
 				setNetworkError(true);
+				setConnectionStatus("down");
 				createToast({
 					body: error.message,
 				});

src/Pages/DistributedUptime/Details/index.jsx

@@ -26,7 +26,7 @@ import { useNavigate } from "react-router-dom";
 const DistributedUptimeDetails = () => {
 	const { monitorId } = useParams();
 	// Local State
-	const [dateRange, setDateRange] = useState("day");
+	const [dateRange, setDateRange] = useState("recent");
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 
 	// Utils

src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -18,7 +18,6 @@ import InfoBox from "../../../Components/InfoBox";
 import StatusHeader from "../../DistributedUptime/Details/Components/StatusHeader";
 import MonitorsList from "./Components/MonitorsList";
 import { RowContainer } from "../../../Components/StandardContainer";
-import ThemeSwitch from "../../../Components/ThemeSwitch";
 
 //Utils
 import { useTheme } from "@mui/material/styles";
@@ -50,7 +49,7 @@ const DistributedUptimeStatus = () => {
 	const originalModeRef = useRef(null);
 
 	// Local State
-	const [dateRange, setDateRange] = useState("day");
+	const [dateRange, setDateRange] = useState("recent");
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	const [timeFrame, setTimeFrame] = useState(30);
 	// Utils

src/Pages/Incidents/Components/IncidentTable/index.jsx

@@ -27,8 +27,11 @@ const IncidentTable = ({
 	//Local state
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(10);
+	const selectedMonitorDetails = monitors?.[selectedMonitor];
+	const selectedMonitorType = selectedMonitorDetails?.type;
 	const { isLoading, networkError, checks, checksCount } = useChecksFetch({
 		selectedMonitor,
+		selectedMonitorType,
 		filter,
 		dateRange,
 		page,

src/Pages/Incidents/Hooks/useChecksFetch.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { networkService } from "../../../main";
 import { createToast } from "../../../Utils/toastUtils";
 import { useSelector } from "react-redux";
-const useChecksFetch = ({ selectedMonitor, filter, dateRange, page, rowsPerPage }) => {
+const useChecksFetch = ({ selectedMonitor, selectedMonitorType, filter, dateRange, page, rowsPerPage }) => {
 	//Redux
 	const { user } = useSelector((state) => state.auth);
 
@@ -33,6 +33,7 @@ const useChecksFetch = ({ selectedMonitor, filter, dateRange, page, rowsPerPage
 					res = await networkService.getChecksByMonitor({
 						status: false,
 						monitorId: selectedMonitor,
+						type: selectedMonitorType,
 						sortOrder: "desc",
 						limit: null,
 						dateRange,
@@ -51,7 +52,7 @@ const useChecksFetch = ({ selectedMonitor, filter, dateRange, page, rowsPerPage
 			}
 		};
 		fetchChecks();
-	}, [user, dateRange, page, rowsPerPage, filter, selectedMonitor]);
+	}, [user, dateRange, page, rowsPerPage, filter, selectedMonitor, selectedMonitorType]);
 	return { isLoading, networkError, checks, checksCount };
 };
 

src/Pages/Incidents/Hooks/useMonitorsFetch.jsx

@@ -25,9 +25,13 @@ const useMonitorsFetch = ({ teamId }) => {
 					field: null,
 					order: null,
 				});
-				if (res?.data?.data?.monitors?.length > 0) {
-					const monitorLookup = res.data.data.monitors.reduce((acc, monitor) => {
-						acc[monitor._id] = monitor;
+				if (res?.data?.data?.filteredMonitors?.length > 0) {
+					const monitorLookup = res.data.data.filteredMonitors.reduce((acc, monitor) => {
+						acc[monitor._id] = {
+							_id: monitor._id,
+							name: monitor.name,
+							type: monitor.type
+						};
 						return acc;
 					}, {});
 					setMonitors(monitorLookup);

src/Pages/Infrastructure/Details/Hooks/useHardwareMonitorsFetch.jsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
 import { networkService } from "../../../../main";
 
 const useHardwareMonitorsFetch = ({ monitorId, dateRange }) => {

src/Pages/Infrastructure/Details/index.jsx

@@ -24,11 +24,10 @@ const InfrastructureDetails = () => {
 	// Redux state
 
 	// Local state
-	const [dateRange, setDateRange] = useState("day");
+	const [dateRange, setDateRange] = useState("recent");
 
 	// Utils
 	const theme = useTheme();
-	const isAdmin = useIsAdmin();
 	const { monitorId } = useParams();
 
 	const { isLoading, networkError, monitor } = useHardwareMonitorsFetch({

src/Pages/Uptime/Details/index.jsx

@@ -34,14 +34,15 @@ const UptimeDetails = () => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 
 	// Local state
-	const [dateRange, setDateRange] = useState("day");
+	const [dateRange, setDateRange] = useState("recent");
 	const [hoveredUptimeData, setHoveredUptimeData] = useState(null);
 	const [hoveredIncidentsData, setHoveredIncidentsData] = useState(null);
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(5);
 
 	// Utils
-	const dateFormat = dateRange === "day" ? "MMM D, h A" : "MMM D";
+	const dateFormat =
+		dateRange === "day" || dateRange === "recent" ? "MMM D, h A" : "MMM D";
 	const { monitorId } = useParams();
 	const theme = useTheme();
 	const isAdmin = useIsAdmin();

src/Utils/NetworkService.js

@@ -567,6 +567,7 @@ class NetworkService {
 
 	async getChecksByMonitor(config) {
 		const params = new URLSearchParams();
+		if (config.type) params.append("type", config.type);
 		if (config.sortOrder) params.append("sortOrder", config.sortOrder);
 		if (config.limit) params.append("limit", config.limit);
 		if (config.dateRange) params.append("dateRange", config.dateRange);