Fix: HTTPS monitors show HTTP on the table

Client/src/Components/CircularCount/index.jsx

@@ -0,0 +1,29 @@
+import { Box } from "@mui/material";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+const CircularCount = ({ count }) => {
+	const theme = useTheme();
+	return (
+		<Box
+			component="span"
+			color={theme.palette.tertiary.contrastText}
+			border={2}
+			borderColor={theme.palette.accent.main}
+			backgroundColor={theme.palette.tertiary.main}
+			sx={{
+				padding: ".25em .75em",
+				borderRadius: "50%",
+				fontSize: "12px",
+				fontWeight: 500,
+			}}
+		>
+			{count}
+		</Box>
+	);
+};
+
+CircularCount.propTypes = {
+	count: PropTypes.number,
+};
+
+export default CircularCount;

Client/src/Components/StatBox/index.jsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
-import useUtils from "../../Pages/Uptime/utils";
+import useUtils from "../../Pages/Uptime/Home/Hooks/useUtils";
 
 /**
  * StatBox Component

Client/src/Pages/Infrastructure/Details/index.jsx

@@ -8,7 +8,7 @@ import AreaChart from "../../../Components/Charts/AreaChart";
 import { useSelector } from "react-redux";
 import { networkService } from "../../../main";
 import PulseDot from "../../../Components/Animated/PulseDot";
-import useUtils from "../../Uptime/utils";
+import useUtils from "../../Uptime/Home/Hooks/useUtils";
 import { useNavigate } from "react-router-dom";
 import Empty from "./empty";
 import { logger } from "../../../Utils/Logger";

Client/src/Pages/Infrastructure/index.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { /* useDispatch, */ useSelector } from "react-redux";
 import { useTheme } from "@emotion/react";
-import useUtils from "../Uptime/utils.jsx";
+import useUtils from "../Uptime/Home/Hooks/useUtils.jsx";
 import { jwtDecode } from "jwt-decode";
 import SkeletonLayout from "./skeleton";
 import Fallback from "../../Components/Fallback";
@@ -17,7 +17,7 @@ import Pagination from "../../Components/Table/TablePagination/index.jsx";
 // import { getInfrastructureMonitorsByTeamId } from "../../Features/InfrastructureMonitors/infrastructureMonitorsSlice";
 import { networkService } from "../../Utils/NetworkService.js";
 import CustomGauge from "../../Components/Charts/CustomGauge/index.jsx";
-import Host from "../Uptime/Home/host.jsx";
+import Host from "../Uptime/Home/Components/Host";
 import { useIsAdmin } from "../../Hooks/useIsAdmin.js";
 import { InfrastructureMenu } from "./components/Menu";
 

Client/src/Pages/PageSpeed/Configure/index.jsx

@@ -23,7 +23,7 @@ import PulseDot from "../../../Components/Animated/PulseDot";
 import LoadingButton from "@mui/lab/LoadingButton";
 import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
 import SkeletonLayout from "./skeleton";
-import useUtils from "../../Uptime/utils";
+import useUtils from "../../Uptime/Home/Hooks/useUtils";
 import "./index.css";
 import Dialog from "../../../Components/Dialog";
 

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -19,7 +19,7 @@ import PulseDot from "../../../Components/Animated/PulseDot";
 import PagespeedDetailsAreaChart from "./Charts/AreaChart";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import PieChart from "./Charts/PieChart";
-import useUtils from "../../Uptime/utils";
+import useUtils from "../../Uptime/Home/Hooks/useUtils";
 import "./index.css";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import StatBox from "../../../Components/StatBox";

Client/src/Pages/PageSpeed/card.jsx

@@ -7,7 +7,7 @@ import { useTheme } from "@emotion/react";
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip } from "recharts";
 import { useSelector } from "react-redux";
 import { formatDateWithTz, formatDurationSplit } from "../../Utils/timeUtils";
-import useUtils from "../Uptime/utils";
+import useUtils from "../Uptime/Home/Hooks/useUtils";
 import { useState } from "react";
 import IconBox from "../../Components/IconBox";
 /**

Client/src/Pages/Uptime/Details/index.jsx

@@ -19,7 +19,7 @@ import PulseDot from "../../../Components/Animated/PulseDot";
 import { ChartBox } from "./styled";
 import SkeletonLayout from "./skeleton";
 import "./index.css";
-import useUtils from "../utils";
+import useUtils from "../Home/Hooks/useUtils";
 import { formatDateWithTz, formatDurationSplit } from "../../../Utils/timeUtils";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import IconBox from "../../../Components/IconBox";

Client/src/Pages/Uptime/Home/actionsMenu.jsx → Client/src/Pages/Uptime/Home/Components/ActionsMenu/index.jsx

@@ -2,16 +2,16 @@ import { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
-import { createToast } from "../../../Utils/toastUtils";
-import { logger } from "../../../Utils/Logger";
+import { createToast } from "../../../../../Utils/toastUtils";
+import { logger } from "../../../../../Utils/Logger";
 import { IconButton, Menu, MenuItem } from "@mui/material";
 import {
 	deleteUptimeMonitor,
 	pauseUptimeMonitor,
-} from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import Settings from "../../../assets/icons/settings-bold.svg?react";
+} from "../../../../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import Settings from "../../../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
-import Dialog from "../../../Components/Dialog";
+import Dialog from "../../../../../Components/Dialog";
 
 const ActionsMenu = ({
 	monitor,

Client/src/Pages/Uptime/Home/host.jsx → Client/src/Pages/Uptime/Home/Components/Host/index.jsx

@@ -1,5 +1,6 @@
-import { Box, Typography } from "@mui/material";
+import { Stack, Box, Typography } from "@mui/material";
 import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
 /**
  * Host component.
  * This subcomponent receives a params object and displays the host details.
@@ -13,44 +14,43 @@ import PropTypes from "prop-types";
  * @returns {React.ElementType} Returns a div element with the host details.
  */
 const Host = ({ url, title, percentageColor, percentage }) => {
-	const noTitle = title === undefined || title === url;
+	const theme = useTheme();
+	console.log(url, title);
 	return (
-		<Box className="host">
-			<Box
-				display="inline-block"
+		<Stack>
+			<Stack
+				direction="row"
 				position="relative"
-				sx={{
-					fontWeight: 500,
-					"&:before": {
-						position: "absolute",
-						content: `""`,
-						width: "4px",
-						height: "4px",
-						borderRadius: "50%",
-						backgroundColor: "gray",
-						opacity: 0.8,
-						right: "-10px",
-						top: "42%",
-					},
-				}}
+				alignItems="center"
+				gap={theme.spacing(4)}
 			>
 				{title}
-			</Box>
-			{percentageColor && percentage && (
-				<Typography
-					component="span"
-					sx={{
-						color: percentageColor,
-						fontWeight: 500,
-						/* TODO point font weight to theme */
-						ml: "15px",
-					}}
-				>
-					{percentage}%
-				</Typography>
-			)}
-			{!noTitle && <Box sx={{ opacity: 0.6 }}>{url}</Box>}
-		</Box>
+				{percentageColor && percentage && (
+					<>
+						<span
+							style={{
+								content: '""',
+								width: "4px",
+								height: "4px",
+								borderRadius: "50%",
+								backgroundColor: "gray",
+								opacity: 0.8,
+							}}
+						/>
+						<Typography
+							component="span"
+							sx={{
+								color: percentageColor,
+								fontWeight: 500,
+							}}
+						>
+							{percentage}%
+						</Typography>
+					</>
+				)}
+			</Stack>
+			<span style={{ opacity: 0.6 }}>{url}</span>
+		</Stack>
 	);
 };
 

Client/src/Pages/Uptime/Home/Components/LoadingSpinner/index.jsx

@@ -0,0 +1,46 @@
+import { CircularProgress, Box } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+const LoadingSpinner = ({ shouldRender }) => {
+	const theme = useTheme();
+	if (shouldRender === false) {
+		return;
+	}
+
+	return (
+		<>
+			<Box
+				width="100%"
+				height="100%"
+				position="absolute"
+				sx={{
+					backgroundColor: theme.palette.primary.main,
+					opacity: 0.8,
+					zIndex: 100,
+				}}
+			/>
+			<Box
+				height="100%"
+				position="absolute"
+				top="50%"
+				left="50%"
+				sx={{
+					transform: "translateX(-50%)",
+					zIndex: 101,
+				}}
+			>
+				<CircularProgress
+					sx={{
+						color: theme.palette.accent.main,
+					}}
+				/>
+			</Box>
+		</>
+	);
+};
+
+LoadingSpinner.propTypes = {
+	shouldRender: PropTypes.bool,
+};
+
+export default LoadingSpinner;

Client/src/Pages/Uptime/Home/Components/SearchComponent/index.jsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import Search from "../../../../../Components/Inputs/Search";
+import { Box } from "@mui/material";
+import useDebounce from "../../Hooks/useDebounce";
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+
+const SearchComponent = ({ monitors, onSearchChange, setIsSearching }) => {
+	const [localSearch, setLocalSearch] = useState("");
+	const debouncedSearch = useDebounce(localSearch, 500);
+	useEffect(() => {
+		onSearchChange(debouncedSearch);
+		setIsSearching(false);
+	}, [debouncedSearch, onSearchChange, setIsSearching]);
+
+	const handleSearch = (value) => {
+		setLocalSearch(value);
+		setIsSearching(true);
+	};
+
+	return (
+		<Box
+			width="25%"
+			minWidth={150}
+			ml="auto"
+		>
+			<Search
+				options={monitors}
+				filteredBy="name"
+				inputValue={localSearch}
+				handleInputChange={handleSearch}
+			/>
+		</Box>
+	);
+};
+
+SearchComponent.propTypes = {
+	monitors: PropTypes.array,
+	onSearchChange: PropTypes.func,
+	setIsSearching: PropTypes.func,
+};
+
+export default SearchComponent;

Client/src/Pages/Uptime/Home/Components/StatusBoxes/index.jsx

@@ -0,0 +1,36 @@
+import PropTypes from "prop-types";
+import { Stack } from "@mui/material";
+import StatusBox from "./statusBox";
+import { useTheme } from "@emotion/react";
+import SkeletonLayout from "./skeleton";
+
+const StatusBoxes = ({ shouldRender, monitorsSummary }) => {
+	const theme = useTheme();
+	if (!shouldRender) return <SkeletonLayout shouldRender={shouldRender} />;
+	return (
+		<Stack
+			gap={theme.spacing(8)}
+			direction="row"
+			justifyContent="space-between"
+		>
+			<StatusBox
+				title="up"
+				value={monitorsSummary?.upMonitors ?? 0}
+			/>
+			<StatusBox
+				title="down"
+				value={monitorsSummary?.downMonitors ?? 0}
+			/>
+			<StatusBox
+				title="paused"
+				value={monitorsSummary?.pausedMonitors ?? 0}
+			/>
+		</Stack>
+	);
+};
+
+StatusBoxes.propTypes = {
+	monitorsSummary: PropTypes.object.isRequired,
+};
+
+export default StatusBoxes;

Client/src/Pages/Uptime/Home/Components/StatusBoxes/skeleton.jsx

@@ -0,0 +1,31 @@
+import { Skeleton, Stack } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+const SkeletonLayout = () => {
+	const theme = useTheme();
+	return (
+		<Stack
+			gap={theme.spacing(12)}
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Skeleton
+				variant="rounded"
+				width="100%"
+				height={100}
+			/>
+			<Skeleton
+				variant="rounded"
+				width="100%"
+				height={100}
+			/>
+			<Skeleton
+				variant="rounded"
+				width="100%"
+				height={100}
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;