Merge pull request #1879 from bluewave-labs/feat/recent-checks-query

feat: recent checks query

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/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();