Merge branch 'develop' into feat/fe/statuspage-3

Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx

@@ -17,9 +17,11 @@ import "./index.css";
 
 const CustomToolTip = ({ active, payload, label }) => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
-
 	const theme = useTheme();
 	if (active && payload && payload.length) {
+		const responseTime = payload[0]?.payload?.originalAvgResponseTime
+			? payload[0]?.payload?.originalAvgResponseTime
+			: (payload[0]?.payload?.avgResponseTime ?? 0);
 		return (
 			<Box
 				className="area-tooltip"
@@ -69,7 +71,7 @@ const CustomToolTip = ({ active, payload, label }) => {
 							Response Time
 						</Typography>{" "}
 						<Typography component="span">
-							{payload[0].payload.originalResponseTime}
+							{Math.floor(responseTime)}
 							<Typography
 								component="span"
 								sx={{ opacity: 0.8 }}
@@ -87,11 +89,24 @@ const CustomToolTip = ({ active, payload, label }) => {
 	return null;
 };
 
+CustomToolTip.propTypes = {
+	active: PropTypes.bool,
+	payload: PropTypes.arrayOf(
+		PropTypes.shape({
+			value: PropTypes.number,
+			payload: PropTypes.shape({
+				_id: PropTypes.string,
+				avgResponseTime: PropTypes.number,
+				originalAvgResponseTime: PropTypes.number,
+			}),
+		})
+	),
+	label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
 const CustomTick = ({ x, y, payload, index }) => {
 	const theme = useTheme();
 
 	const uiTimezone = useSelector((state) => state.ui.timezone);
-
 	// Render nothing for the first tick
 	if (index === 0) return null;
 	return (
@@ -168,7 +183,7 @@ const MonitorDetailsAreaChart = ({ checks }) => {
 				</defs>
 				<XAxis
 					stroke={theme.palette.border.dark}
-					dataKey="createdAt"
+					dataKey="_id"
 					tick={<CustomTick />}
 					minTickGap={0}
 					axisLine={false}
@@ -183,7 +198,7 @@ const MonitorDetailsAreaChart = ({ checks }) => {
 				/>
 				<Area
 					type="monotone"
-					dataKey="responseTime"
+					dataKey="avgResponseTime"
 					stroke={theme.palette.primary.main}
 					fill="url(#colorUv)"
 					strokeWidth={isHovered ? 2.5 : 1.5}
@@ -198,15 +213,4 @@ MonitorDetailsAreaChart.propTypes = {
 	checks: PropTypes.array,
 };
 
-CustomToolTip.propTypes = {
-	active: PropTypes.bool,
-	payload: PropTypes.arrayOf(
-		PropTypes.shape({
-			payload: PropTypes.shape({
-				originalResponseTime: PropTypes.number.isRequired,
-			}).isRequired,
-		})
-	),
-	label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
 export default MonitorDetailsAreaChart;

Client/src/Components/Charts/Utils/chartUtils.jsx

@@ -17,7 +17,6 @@ import { Box, Stack, Typography } from "@mui/material";
  */
 export const TzTick = ({ x, y, payload, index }) => {
 	const theme = useTheme();
-
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 	return (
 		<Text
@@ -163,7 +162,7 @@ export const InfrastructureTooltip = ({
 						>
 							{yIdx >= 0
 								? `${yLabel} ${getFormattedPercentage(payload[0].payload[hardwareType][yIdx][metric])}`
-								: `${yLabel} ${getFormattedPercentage(payload[0].payload[hardwareType][metric])}`}
+								: `${yLabel} ${getFormattedPercentage(payload[0].payload[yKey])}`}
 						</Typography>
 					</Stack>
 				</Box>

Client/src/Components/Sidebar/index.jsx

@@ -574,9 +574,12 @@ function Sidebar() {
 										ml: "auto",
 										mr: "-8px",
 										"&:focus": { outline: "none" },
+										alignSelf: "center",
+										padding: '10px',
+
 										"& svg": {
-											width: "20px",
-											height: "20px",
+											width: "22px",
+											height: "22px",
 										},
 										"& svg path": {
 											stroke: theme.palette.other.icon,

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

@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
-import { Stack, Box, Typography } from "@mui/material";
+import { Button, ButtonGroup, Stack, Box, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import CustomGauge from "../../../Components/Charts/CustomGauge";
 import AreaChart from "../../../Components/Charts/AreaChart";
@@ -185,9 +185,11 @@ GaugeBox.propTypes = {
 	value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 	heading: PropTypes.string.isRequired,
 	metricOne: PropTypes.string.isRequired,
-	valueOne: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+	valueOne: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element])
+		.isRequired,
 	metricTwo: PropTypes.string.isRequired,
-	valueTwo: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+	valueTwo: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element])
+		.isRequired,
 };
 
 /**
@@ -204,7 +206,7 @@ const InfrastructureDetails = () => {
 	];
 	const [monitor, setMonitor] = useState(null);
 	const { authToken } = useSelector((state) => state.auth);
-	const [dateRange, setDateRange] = useState("all");
+	const [dateRange, setDateRange] = useState("day");
 	const { statusColor, statusStyles, determineState } = useUtils();
 	// These calculations are needed because ResponsiveContainer
 	// doesn't take padding of parent/siblings into account
@@ -217,8 +219,9 @@ const InfrastructureDetails = () => {
 		(chartContainerHeight - totalChartContainerPadding - totalTypographyPadding) * 0.95;
 	// end height calculations
 
-	const buildStatBoxes = (checks, uptime) => {
-		let latestCheck = checks[0] ?? null;
+	const buildStatBoxes = (stats, uptime) => {
+		if (Object.keys(stats).length === 0) return [];
+		let latestCheck = stats?.aggregateData?.latestCheck ?? null;
 		if (latestCheck === null) return [];
 
 		// Extract values from latest check
@@ -311,8 +314,10 @@ const InfrastructureDetails = () => {
 		];
 	};
 
-	const buildGaugeBoxConfigs = (checks) => {
-		let latestCheck = checks[0] ?? null;
+	const buildGaugeBoxConfigs = (stats) => {
+		if (Object.keys(stats).length === 0) return [];
+
+		let latestCheck = stats?.aggregateData?.latestCheck ?? null;
 		if (latestCheck === null) return [];
 
 		// Extract values from latest check
@@ -359,27 +364,27 @@ const InfrastructureDetails = () => {
 		if (checks === null) return { temps: [], tempKeys: [] };
 
 		for (const check of checks) {
-			if (check?.cpu?.temperature?.length > numCores) {
-				numCores = check.cpu.temperature.length;
+			if (check?.avgTemperature?.length > numCores) {
+				numCores = check.avgTemperature.length;
 				break;
 			}
 		}
 		const temps = checks.map((check) => {
 			// If there's no data, set the temperature to 0
 			if (
-				check?.cpu?.temperature?.length === 0 ||
-				check?.cpu?.temperature === undefined ||
-				check?.cpu?.temperature === null
+				check?.avgTemperature?.length === 0 ||
+				check?.avgTemperature === undefined ||
+				check?.avgTemperature === null
 			) {
-				check.cpu.temperature = Array(numCores).fill(0);
+				check.avgTemperature = Array(numCores).fill(0);
 			}
-			const res = check?.cpu?.temperature?.reduce(
+			const res = check?.avgTemperature?.reduce(
 				(acc, cur, idx) => {
 					acc[`core${idx + 1}`] = cur;
 					return acc;
 				},
 				{
-					createdAt: check.createdAt,
+					_id: check._id,
 				}
 			);
 			return res;
@@ -389,7 +394,7 @@ const InfrastructureDetails = () => {
 		}
 
 		return {
-			tempKeys: Object.keys(temps[0] || {}).filter((key) => key !== "createdAt"),
+			tempKeys: Object.keys(temps[0] || {}).filter((key) => key !== "_id"),
 			temps,
 		};
 	};
@@ -397,13 +402,12 @@ const InfrastructureDetails = () => {
 	const buildAreaChartConfigs = (checks) => {
 		let latestCheck = checks[0] ?? null;
 		if (latestCheck === null) return [];
-		const reversedChecks = checks.toReversed();
-		const tempData = buildTemps(reversedChecks);
+		const { temps, tempKeys } = buildTemps(checks);
 		return [
 			{
 				type: "memory",
-				data: reversedChecks,
-				dataKeys: ["memory.usage_percent"],
+				data: checks,
+				dataKeys: ["avgMemoryUsage"],
 				heading: "Memory usage",
 				strokeColor: theme.palette.primary.main,
 				gradientStartColor: theme.palette.primary.main,
@@ -414,15 +418,15 @@ const InfrastructureDetails = () => {
 				toolTip: (
 					<InfrastructureTooltip
 						dotColor={theme.palette.primary.main}
-						yKey={"memory.usage_percent"}
+						yKey={"avgMemoryUsage"}
 						yLabel={"Memory usage"}
 					/>
 				),
 			},
 			{
 				type: "cpu",
-				data: reversedChecks,
-				dataKeys: ["cpu.usage_percent"],
+				data: checks,
+				dataKeys: ["avgCpuUsage"],
 				heading: "CPU usage",
 				strokeColor: theme.palette.success.main,
 				gradientStartColor: theme.palette.success.main,
@@ -433,15 +437,15 @@ const InfrastructureDetails = () => {
 				toolTip: (
 					<InfrastructureTooltip
 						dotColor={theme.palette.success.main}
-						yKey={"cpu.usage_percent"}
+						yKey={"avgCpuUsage"}
 						yLabel={"CPU usage"}
 					/>
 				),
 			},
 			{
 				type: "temperature",
-				data: tempData.temps,
-				dataKeys: tempData.tempKeys,
+				data: temps,
+				dataKeys: tempKeys,
 				strokeColor: theme.palette.error.main,
 				gradientStartColor: theme.palette.error.main,
 				heading: "CPU Temperature",
@@ -450,24 +454,22 @@ const InfrastructureDetails = () => {
 				yDomain: [
 					0,
 					Math.max(
-						Math.max(
-							...tempData.temps.flatMap((t) => tempData.tempKeys.map((k) => t[k]))
-						) * 1.1,
+						Math.max(...temps.flatMap((t) => tempKeys.map((k) => t[k]))) * 1.1,
 						200
 					),
 				],
 				toolTip: (
 					<TemperatureTooltip
-						keys={tempData.tempKeys}
+						keys={tempKeys}
 						dotColor={theme.palette.error.main}
 					/>
 				),
 			},
-			...(latestCheck?.disk?.map((disk, idx) => ({
+			...(latestCheck?.disks?.map((disk, idx) => ({
 				type: "disk",
-				data: reversedChecks,
+				data: checks,
 				diskIndex: idx,
-				dataKeys: [`disk[${idx}].usage_percent`],
+				dataKeys: [`disks[${idx}].usagePercent`],
 				heading: `Disk${idx} usage`,
 				strokeColor: theme.palette.warning.main,
 				gradientStartColor: theme.palette.warning.main,
@@ -478,7 +480,7 @@ const InfrastructureDetails = () => {
 				toolTip: (
 					<InfrastructureTooltip
 						dotColor={theme.palette.warning.main}
-						yKey={`disk.usage_percent`}
+						yKey={`disks.usagePercent`}
 						yLabel={"Disc usage"}
 						yIdx={idx}
 					/>
@@ -491,15 +493,12 @@ const InfrastructureDetails = () => {
 	useEffect(() => {
 		const fetchData = async () => {
 			try {
-				const response = await networkService.getStatsByMonitorId({
+				const response = await networkService.getHardwareDetailsByMonitorId({
 					authToken: authToken,
 					monitorId: monitorId,
-					sortOrder: null,
-					limit: null,
 					dateRange: dateRange,
-					numToDisplay: 50,
-					normalize: false,
 				});
+				response.data.data;
 				setMonitor(response.data.data);
 			} catch (error) {
 				navigate("/not-found", { replace: true });
@@ -510,16 +509,17 @@ const InfrastructureDetails = () => {
 	}, [authToken, monitorId, dateRange, navigate]);
 
 	const statBoxConfigs = buildStatBoxes(
-		monitor?.checks ?? [],
+		monitor?.stats ?? {},
 		monitor?.uptimePercentage ?? "Unknown"
 	);
-	const gaugeBoxConfigs = buildGaugeBoxConfigs(monitor?.checks ?? []);
-	const areaChartConfigs = buildAreaChartConfigs(monitor?.checks ?? []);
-
+	const gaugeBoxConfigs = buildGaugeBoxConfigs(monitor?.stats ?? {});
+	const areaChartConfigs = buildAreaChartConfigs(monitor?.stats?.checks ?? []);
+	const lastChecked =
+		Date.now() - new Date(monitor?.stats?.aggregateData?.latestCheck?.createdAt);
 	return (
 		<Box>
 			<Breadcrumbs list={navList} />
-			{monitor?.checks?.length > 0 ? (
+			{monitor?.stats.checks?.length > 0 ? (
 				<Stack
 					direction="column"
 					gap={theme.spacing(10)}
@@ -545,10 +545,11 @@ const InfrastructureDetails = () => {
 							Checking every {formatDurationRounded(monitor?.interval)}
 						</Typography>
 						<Typography alignSelf="end">
-							Last checked {formatDurationSplit(monitor?.lastChecked).time}{" "}
-							{formatDurationSplit(monitor?.lastChecked).format} ago
+							Last checked {formatDurationSplit(lastChecked).time}{" "}
+							{formatDurationSplit(lastChecked).format} ago
 						</Typography>
 					</Stack>
+
 					<Stack
 						direction="row"
 						flexWrap="wrap"
@@ -561,21 +562,64 @@ const InfrastructureDetails = () => {
 							/>
 						))}
 					</Stack>
+
 					<Stack
 						direction="row"
 						gap={theme.spacing(8)}
 					>
-						{gaugeBoxConfigs.map((config) => (
-							<GaugeBox
-								key={`${config.type}-${config.diskIndex ?? ""}`}
-								value={config.value}
-								heading={config.heading}
-								metricOne={config.metricOne}
-								valueOne={config.valueOne}
-								metricTwo={config.metricTwo}
-								valueTwo={config.valueTwo}
-							/>
-						))}
+						{gaugeBoxConfigs.map((config) => {
+							return (
+								<GaugeBox
+									key={`${config.type}-${config.diskIndex ?? ""}`}
+									value={config.value}
+									heading={config.heading}
+									metricOne={config.metricOne}
+									valueOne={config.valueOne}
+									metricTwo={config.metricTwo}
+									valueTwo={config.valueTwo}
+								/>
+							);
+						})}
+					</Stack>
+					<Stack
+						direction="row"
+						justifyContent="space-between"
+						alignItems="flex-end"
+						gap={theme.spacing(8)}
+						mb={theme.spacing(8)}
+					>
+						<Typography variant="body2">
+							Showing statistics for past{" "}
+							{dateRange === "day"
+								? "24 hours"
+								: dateRange === "week"
+									? "7 days"
+									: "30 days"}
+							.
+						</Typography>
+						<ButtonGroup sx={{ height: 32 }}>
+							<Button
+								variant="group"
+								filled={(dateRange === "day").toString()}
+								onClick={() => setDateRange("day")}
+							>
+								Day
+							</Button>
+							<Button
+								variant="group"
+								filled={(dateRange === "week").toString()}
+								onClick={() => setDateRange("week")}
+							>
+								Week
+							</Button>
+							<Button
+								variant="group"
+								filled={(dateRange === "month").toString()}
+								onClick={() => setDateRange("month")}
+							>
+								Month
+							</Button>
+						</ButtonGroup>
 					</Stack>
 					<Stack
 						direction={"row"}
@@ -602,7 +646,7 @@ const InfrastructureDetails = () => {
 										height={areaChartHeight}
 										data={config.data}
 										dataKeys={config.dataKeys}
-										xKey="createdAt"
+										xKey="_id"
 										yDomain={config.yDomain}
 										customTooltip={config.toolTip}
 										xTick={config.xTick}

Client/src/Pages/Uptime/Details/Charts/CustomLabels.jsx

@@ -0,0 +1,42 @@
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { formatDateWithTz } from "../../../../Utils/timeUtils";
+
+const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type }) => {
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	const dateFormat = type === "day" ? "MMM D, h:mm A" : "MMM D";
+
+	return (
+		<>
+			<text
+				x={x}
+				y={height}
+				dy={-3}
+				textAnchor="start"
+				fontSize={11}
+			>
+				{formatDateWithTz(firstDataPoint._id, dateFormat, uiTimezone)}
+			</text>
+			<text
+				x={width}
+				y={height}
+				dy={-3}
+				textAnchor="end"
+				fontSize={11}
+			>
+				{formatDateWithTz(lastDataPoint._id, dateFormat, uiTimezone)}
+			</text>
+		</>
+	);
+};
+
+CustomLabels.propTypes = {
+	x: PropTypes.number.isRequired,
+	width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+	height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+	firstDataPoint: PropTypes.object.isRequired,
+	lastDataPoint: PropTypes.object.isRequired,
+	type: PropTypes.string.isRequired,
+};
+
+export default CustomLabels;

Client/src/Pages/Uptime/Details/Charts/DownBarChart.jsx

@@ -0,0 +1,89 @@
+import { memo, useState } from "react";
+import { useTheme } from "@mui/material";
+import { ResponsiveContainer, BarChart, XAxis, Bar, Cell } from "recharts";
+import PropTypes from "prop-types";
+import CustomLabels from "./CustomLabels";
+
+const DownBarChart = memo(({ stats, type, onBarHover }) => {
+	const theme = useTheme();
+
+	const [chartHovered, setChartHovered] = useState(false);
+	const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
+
+	return (
+		<ResponsiveContainer
+			width="100%"
+			minWidth={250}
+			height={155}
+		>
+			<BarChart
+				width="100%"
+				height="100%"
+				data={stats.downChecks}
+				onMouseEnter={() => {
+					setChartHovered(true);
+					onBarHover({ time: null, totalChecks: 0 });
+				}}
+				onMouseLeave={() => {
+					setChartHovered(false);
+					setHoveredBarIndex(null);
+					onBarHover(null);
+				}}
+			>
+				<XAxis
+					stroke={theme.palette.border.dark}
+					height={15}
+					tick={false}
+					label={
+						<CustomLabels
+							x={0}
+							y={0}
+							width="100%"
+							height="100%"
+							firstDataPoint={stats.downChecks?.[0] ?? {}}
+							lastDataPoint={stats.downChecks?.[stats.downChecks.length - 1] ?? {}}
+							type={type}
+						/>
+					}
+				/>
+				<Bar
+					dataKey="avgResponseTime"
+					maxBarSize={7}
+					background={{ fill: "transparent" }}
+				>
+					{stats.downChecks.map((entry, index) => (
+						<Cell
+							key={`cell-${entry.time}`}
+							fill={
+								hoveredBarIndex === index
+									? theme.palette.error.main
+									: chartHovered
+										? theme.palette.error.light
+										: theme.palette.error.main
+							}
+							onMouseEnter={() => {
+								setHoveredBarIndex(index);
+								onBarHover(entry);
+							}}
+							onMouseLeave={() => {
+								setHoveredBarIndex(null);
+								onBarHover({ time: null, totalChecks: 0 });
+							}}
+						/>
+					))}
+				</Bar>
+			</BarChart>
+		</ResponsiveContainer>
+	);
+});
+
+DownBarChart.displayName = "DownBarChart";
+DownBarChart.propTypes = {
+	stats: PropTypes.shape({
+		downChecks: PropTypes.arrayOf(PropTypes.object),
+		downChecksAggregate: PropTypes.object,
+	}),
+	type: PropTypes.string,
+	onBarHover: PropTypes.func,
+};
+export default DownBarChart;

Client/src/Pages/Uptime/Details/Charts/ResponseGaugeChart.jsx

@@ -0,0 +1,117 @@
+import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
+import { ResponsiveContainer, RadialBarChart, RadialBar, Cell } from "recharts";
+
+const ResponseGaugeChart = ({ avgResponseTime }) => {
+	const theme = useTheme();
+
+	let max = 1000; // max ms
+
+	const data = [
+		{ response: max, fill: "transparent", background: false },
+		{ response: avgResponseTime, background: true },
+	];
+	let responseTime = Math.floor(avgResponseTime);
+	let responseProps =
+		responseTime <= 200
+			? {
+					category: "Excellent",
+					main: theme.palette.success.main,
+					bg: theme.palette.success.contrastText,
+				}
+			: responseTime <= 500
+				? {
+						category: "Fair",
+						main: theme.palette.success.main,
+						bg: theme.palette.success.contrastText,
+					}
+				: responseTime <= 600
+					? {
+							category: "Acceptable",
+							main: theme.palette.warning.main,
+							bg: theme.palette.warning.dark,
+						}
+					: {
+							category: "Poor",
+							main: theme.palette.error.main,
+							bg: theme.palette.error.light,
+						};
+
+	return (
+		<ResponsiveContainer
+			width="100%"
+			minWidth={210}
+			height={155}
+		>
+			<RadialBarChart
+				width="100%"
+				height="100%"
+				cy="89%"
+				data={data}
+				startAngle={180}
+				endAngle={0}
+				innerRadius={100}
+				outerRadius={150}
+			>
+				<text
+					x={0}
+					y="100%"
+					dx="5%"
+					dy={-2}
+					textAnchor="start"
+					fontSize={11}
+				>
+					low
+				</text>
+				<text
+					x="100%"
+					y="100%"
+					dx="-3%"
+					dy={-2}
+					textAnchor="end"
+					fontSize={11}
+				>
+					high
+				</text>
+				<text
+					x="50%"
+					y="45%"
+					textAnchor="middle"
+					dominantBaseline="middle"
+					fontSize={18}
+					fontWeight={400}
+				>
+					{responseProps.category}
+				</text>
+				<text
+					x="50%"
+					y="55%"
+					textAnchor="middle"
+					dominantBaseline="hanging"
+					fontSize={25}
+				>
+					<tspan fontWeight={600}>{responseTime}</tspan> <tspan opacity={0.8}>ms</tspan>
+				</text>
+				<RadialBar
+					background={{ fill: responseProps.bg }}
+					clockWise
+					dataKey="response"
+					stroke="none"
+				>
+					<Cell
+						fill="transparent"
+						background={false}
+						barSize={0}
+					/>
+					<Cell fill={responseProps.main} />
+				</RadialBar>
+			</RadialBarChart>
+		</ResponsiveContainer>
+	);
+};
+
+ResponseGaugeChart.propTypes = {
+	avgResponseTime: PropTypes.number.isRequired,
+};
+
+export default ResponseGaugeChart;

Client/src/Pages/Uptime/Details/Charts/UpBarChart.jsx

@@ -0,0 +1,100 @@
+import { memo, useState } from "react";
+import { useTheme } from "@mui/material";
+import { ResponsiveContainer, BarChart, XAxis, Bar, Cell } from "recharts";
+import PropTypes from "prop-types";
+import CustomLabels from "./CustomLabels";
+
+const UpBarChart = memo(({ stats, type, onBarHover }) => {
+	const theme = useTheme();
+	const [chartHovered, setChartHovered] = useState(false);
+	const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
+
+	const getColorRange = (responseTime) => {
+		return responseTime < 200
+			? { main: theme.palette.success.main, light: theme.palette.success.light }
+			: responseTime < 300
+				? { main: theme.palette.warning.main, light: theme.palette.warning.light }
+				: { main: theme.palette.error.main, light: theme.palette.error.light };
+	};
+
+	return (
+		<ResponsiveContainer
+			width="100%"
+			minWidth={210}
+			height={155}
+		>
+			<BarChart
+				width="100%"
+				height="100%"
+				data={stats.upChecks}
+				onMouseEnter={() => {
+					setChartHovered(true);
+					onBarHover({ time: null, totalChecks: 0, avgResponseTime: 0 });
+				}}
+				onMouseLeave={() => {
+					setChartHovered(false);
+					setHoveredBarIndex(null);
+					onBarHover(null);
+				}}
+			>
+				<XAxis
+					stroke={theme.palette.border.dark}
+					height={15}
+					tick={false}
+					label={
+						<CustomLabels
+							x={0}
+							y={0}
+							width="100%"
+							height="100%"
+							firstDataPoint={stats.upChecks[0]}
+							lastDataPoint={stats.upChecks[stats.upChecks.length - 1]}
+							type={type}
+						/>
+					}
+				/>
+				<Bar
+					dataKey="avgResponseTime"
+					maxBarSize={7}
+					background={{ fill: "transparent" }}
+				>
+					{stats.upChecks.map((entry, index) => {
+						let { main, light } = getColorRange(entry.avgResponseTime);
+						return (
+							<Cell
+								key={`cell-${entry.time}`}
+								fill={hoveredBarIndex === index ? main : chartHovered ? light : main}
+								onMouseEnter={() => {
+									setHoveredBarIndex(index);
+									onBarHover(entry);
+								}}
+								onMouseLeave={() => {
+									setHoveredBarIndex(null);
+									onBarHover({
+										time: null,
+										totalChecks: 0,
+										groupUptimePercentage: 0,
+									});
+								}}
+							/>
+						);
+					})}
+				</Bar>
+			</BarChart>
+		</ResponsiveContainer>
+	);
+});
+
+// Add display name for the component
+UpBarChart.displayName = "UpBarChart";
+
+// Validate props using PropTypes
+UpBarChart.propTypes = {
+	stats: PropTypes.shape({
+		upChecks: PropTypes.array,
+		upChecksAggregate: PropTypes.object,
+	}),
+	type: PropTypes.string,
+	onBarHover: PropTypes.func,
+};
+export default UpBarChart;

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

@@ -1,346 +0,0 @@
-import { useTheme } from "@emotion/react";
-import PropTypes from "prop-types";
-import {
-	BarChart,
-	Bar,
-	XAxis,
-	ResponsiveContainer,
-	Cell,
-	RadialBarChart,
-	RadialBar,
-} from "recharts";
-import { memo, useMemo, useState } from "react";
-import { useSelector } from "react-redux";
-import { formatDateWithTz } from "../../../../Utils/timeUtils";
-
-const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type }) => {
-	const uiTimezone = useSelector((state) => state.ui.timezone);
-	const dateFormat = type === "day" ? "MMM D, h:mm A" : "MMM D";
-
-	return (
-		<>
-			<text
-				x={x}
-				y={height}
-				dy={-3}
-				textAnchor="start"
-				fontSize={11}
-			>
-				{formatDateWithTz(new Date(firstDataPoint.time), dateFormat, uiTimezone)}
-			</text>
-			<text
-				x={width}
-				y={height}
-				dy={-3}
-				textAnchor="end"
-				fontSize={11}
-			>
-				{formatDateWithTz(new Date(lastDataPoint.time), dateFormat, uiTimezone)}
-			</text>
-		</>
-	);
-};
-
-CustomLabels.propTypes = {
-	x: PropTypes.number.isRequired,
-	width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	firstDataPoint: PropTypes.object.isRequired,
-	lastDataPoint: PropTypes.object.isRequired,
-	type: PropTypes.string.isRequired,
-};
-
-const UpBarChart = memo(({ data, type, onBarHover }) => {
-	const theme = useTheme();
-
-	const [chartHovered, setChartHovered] = useState(false);
-	const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
-
-	const getColorRange = (uptime) => {
-		return uptime > 80
-			? { main: theme.palette.success.main, light: theme.palette.success.light }
-			: uptime > 50
-				? { main: theme.palette.warning.main, light: theme.palette.warning.light }
-				: { main: theme.palette.error.contrastText, light: theme.palette.error.light };
-	};
-
-	// TODO - REMOVE THIS LATER
-	const reversedData = useMemo(() => [...data].reverse(), [data]);
-
-	return (
-		<ResponsiveContainer
-			width="100%"
-			minWidth={210}
-			height={155}
-		>
-			<BarChart
-				width="100%"
-				height="100%"
-				data={reversedData}
-				onMouseEnter={() => {
-					setChartHovered(true);
-					onBarHover({ time: null, totalChecks: 0, uptimePercentage: 0 });
-				}}
-				onMouseLeave={() => {
-					setChartHovered(false);
-					setHoveredBarIndex(null);
-					onBarHover(null);
-				}}
-			>
-				<XAxis
-					stroke={theme.palette.border.dark}
-					height={15}
-					tick={false}
-					label={
-						<CustomLabels
-							x={0}
-							y={0}
-							width="100%"
-							height="100%"
-							firstDataPoint={reversedData[0]}
-							lastDataPoint={reversedData[reversedData.length - 1]}
-							type={type}
-						/>
-					}
-				/>
-				<Bar
-					dataKey="totalChecks"
-					maxBarSize={7}
-					background={{ fill: "transparent" }}
-				>
-					{reversedData.map((entry, index) => {
-						let { main, light } = getColorRange(entry.uptimePercentage);
-						return (
-							<Cell
-								key={`cell-${entry.time}`}
-								fill={hoveredBarIndex === index ? main : chartHovered ? light : main}
-								onMouseEnter={() => {
-									setHoveredBarIndex(index);
-									onBarHover(entry);
-								}}
-								onMouseLeave={() => {
-									setHoveredBarIndex(null);
-									onBarHover({
-										time: null,
-										totalChecks: 0,
-										uptimePercentage: 0,
-									});
-								}}
-							/>
-						);
-					})}
-				</Bar>
-			</BarChart>
-		</ResponsiveContainer>
-	);
-});
-
-// Add display name for the component
-UpBarChart.displayName = "UpBarChart";
-
-// Validate props using PropTypes
-UpBarChart.propTypes = {
-	data: PropTypes.arrayOf(PropTypes.object),
-	type: PropTypes.string,
-	onBarHover: PropTypes.func,
-};
-export { UpBarChart };
-
-const DownBarChart = memo(({ data, type, onBarHover }) => {
-	const theme = useTheme();
-
-	const [chartHovered, setChartHovered] = useState(false);
-	const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
-
-	// TODO - REMOVE THIS LATER
-	const reversedData = useMemo(() => [...data].reverse(), [data]);
-
-	return (
-		<ResponsiveContainer
-			width="100%"
-			minWidth={250}
-			height={155}
-		>
-			<BarChart
-				width="100%"
-				height="100%"
-				data={reversedData}
-				onMouseEnter={() => {
-					setChartHovered(true);
-					onBarHover({ time: null, totalIncidents: 0 });
-				}}
-				onMouseLeave={() => {
-					setChartHovered(false);
-					setHoveredBarIndex(null);
-					onBarHover(null);
-				}}
-			>
-				<XAxis
-					stroke={theme.palette.border.dark}
-					height={15}
-					tick={false}
-					label={
-						<CustomLabels
-							x={0}
-							y={0}
-							width="100%"
-							height="100%"
-							firstDataPoint={reversedData[0]}
-							lastDataPoint={reversedData[reversedData.length - 1]}
-							type={type}
-						/>
-					}
-				/>
-				<Bar
-					dataKey="totalIncidents"
-					maxBarSize={7}
-					background={{ fill: "transparent" }}
-				>
-					{reversedData.map((entry, index) => (
-						<Cell
-							key={`cell-${entry.time}`}
-							fill={
-								hoveredBarIndex === index
-									? theme.palette.error.contrastText
-									: chartHovered
-										? theme.palette.error.light
-										: theme.palette.error.contrastText
-							}
-							onMouseEnter={() => {
-								setHoveredBarIndex(index);
-								onBarHover(entry);
-							}}
-							onMouseLeave={() => {
-								setHoveredBarIndex(null);
-								onBarHover({ time: null, totalIncidents: 0 });
-							}}
-						/>
-					))}
-				</Bar>
-			</BarChart>
-		</ResponsiveContainer>
-	);
-});
-
-DownBarChart.displayName = "DownBarChart";
-DownBarChart.propTypes = {
-	data: PropTypes.arrayOf(PropTypes.object),
-	type: PropTypes.string,
-	onBarHover: PropTypes.func,
-};
-export { DownBarChart };
-
-const ResponseGaugeChart = ({ data }) => {
-	const theme = useTheme();
-
-	let max = 1000; // max ms
-
-	const memoizedData = useMemo(
-		() => [{ response: max, fill: "transparent", background: false }, ...data],
-		[data[0].response]
-	);
-
-	let responseTime = Math.floor(memoizedData[1].response);
-	let responseProps =
-		responseTime <= 200
-			? {
-					category: "Excellent",
-					main: theme.palette.success.main,
-					bg: theme.palette.success.contrastText,
-				}
-			: responseTime <= 500
-				? {
-						category: "Fair",
-						main: theme.palette.success.main,
-						bg: theme.palette.success.contrastText,
-					}
-				: responseTime <= 600
-					? {
-							category: "Acceptable",
-							main: theme.palette.warning.main,
-							bg: theme.palette.warning.dark,
-						}
-					: {
-							category: "Poor",
-							main: theme.palette.error.light,
-							bg: theme.palette.error.dark,
-						};
-
-	return (
-		<ResponsiveContainer
-			width="100%"
-			minWidth={210}
-			height={155}
-		>
-			<RadialBarChart
-				width="100%"
-				height="100%"
-				cy="89%"
-				data={memoizedData}
-				startAngle={180}
-				endAngle={0}
-				innerRadius={100}
-				outerRadius={150}
-			>
-				<text
-					x={0}
-					y="100%"
-					dx="5%"
-					dy={-2}
-					textAnchor="start"
-					fontSize={11}
-				>
-					low
-				</text>
-				<text
-					x="100%"
-					y="100%"
-					dx="-3%"
-					dy={-2}
-					textAnchor="end"
-					fontSize={11}
-				>
-					high
-				</text>
-				<text
-					x="50%"
-					y="45%"
-					textAnchor="middle"
-					dominantBaseline="middle"
-					fontSize={18}
-					fontWeight={400}
-				>
-					{responseProps.category}
-				</text>
-				<text
-					x="50%"
-					y="55%"
-					textAnchor="middle"
-					dominantBaseline="hanging"
-					fontSize={25}
-				>
-					<tspan fontWeight={600}>{responseTime}</tspan> <tspan opacity={0.8}>ms</tspan>
-				</text>
-				<RadialBar
-					background={{ fill: responseProps.bg }}
-					clockWise
-					dataKey="response"
-					stroke="none"
-				>
-					<Cell
-						fill="transparent"
-						background={false}
-						barSize={0}
-					/>
-					<Cell fill={responseProps.main} />
-				</RadialBar>
-			</RadialBarChart>
-		</ResponsiveContainer>
-	);
-};
-
-ResponseGaugeChart.propTypes = {
-	data: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
-export { ResponseGaugeChart };

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

@@ -5,7 +5,6 @@ import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import { networkService } from "../../../main";
 import { logger } from "../../../Utils/Logger";
-import { formatDurationRounded, formatDurationSplit } from "../../../Utils/timeUtils";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
@@ -18,14 +17,16 @@ import PaginationTable from "./PaginationTable";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import { ChartBox } from "./styled";
-import { DownBarChart, ResponseGaugeChart, UpBarChart } from "./Charts";
 import SkeletonLayout from "./skeleton";
 import "./index.css";
 import useUtils from "../utils";
-import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { formatDateWithTz, formatDurationSplit } from "../../../Utils/timeUtils";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import IconBox from "../../../Components/IconBox";
 import StatBox from "../../../Components/StatBox";
+import UpBarChart from "./Charts/UpBarChart";
+import DownBarChart from "./Charts/DownBarChart";
+import ResponseGaugeChart from "./Charts/ResponseGaugeChart";
 /**
  * Details page component displaying monitor details and related information.
  * @component
@@ -47,16 +48,12 @@ const DetailsPage = () => {
 
 	const fetchMonitor = useCallback(async () => {
 		try {
-			const res = await networkService.getStatsByMonitorId({
+			const res = await networkService.getUptimeDetailsById({
 				authToken: authToken,
 				monitorId: monitorId,
-				sortOrder: null,
-				limit: null,
 				dateRange: dateRange,
-				numToDisplay: 50,
 				normalize: true,
 			});
-			console.log(res?.data?.data);
 			setMonitor(res?.data?.data ?? {});
 		} catch (error) {
 			logger.error(error);
@@ -185,7 +182,7 @@ const DetailsPage = () => {
 											},
 										}}
 									>
-										Checking every {formatDurationRounded(monitor?.interval)}.
+										{/* Checking every {formatDurationRounded(monitor?.interval)}. */}
 									</Typography>
 								</Stack>
 							</Box>
@@ -224,17 +221,17 @@ const DetailsPage = () => {
 							<StatBox
 								sx={statusStyles[determineState(monitor)]}
 								heading={"active for"}
-								subHeading={splitDuration(monitor?.uptimeDuration)}
+								subHeading={splitDuration(monitor?.stats?.timeSinceLastFalseCheck)}
 							/>
 							<StatBox
 								heading="last check"
-								subHeading={splitDuration(monitor?.lastChecked)}
+								subHeading={splitDuration(monitor?.stats?.timeSinceLastCheck)}
 							/>
 							<StatBox
 								heading="last response time"
 								subHeading={
 									<>
-										{monitor?.latestResponseTime}
+										{monitor?.stats?.latestResponseTime}
 										<Typography component="span">{"ms"}</Typography>
 									</>
 								}
@@ -311,7 +308,7 @@ const DetailsPage = () => {
 											<Typography component="span">
 												{hoveredUptimeData !== null
 													? hoveredUptimeData.totalChecks
-													: monitor?.periodTotalChecks}
+													: (monitor.stats?.upChecksAggregate?.totalChecks ?? 0)}
 											</Typography>
 											{hoveredUptimeData !== null && hoveredUptimeData.time !== null && (
 												<Typography
@@ -322,7 +319,7 @@ const DetailsPage = () => {
 													color={theme.palette.text.tertiary}
 												>
 													{formatDateWithTz(
-														hoveredUptimeData.time,
+														hoveredUptimeData._id,
 														dateFormat,
 														uiTimezone
 													)}
@@ -330,17 +327,27 @@ const DetailsPage = () => {
 											)}
 										</Box>
 										<Box>
-											<Typography>Uptime Percentage</Typography>
+											<Typography>
+												{hoveredUptimeData !== null
+													? "Avg Response Time"
+													: "Uptime Percentage"}
+											</Typography>
 											<Typography component="span">
 												{hoveredUptimeData !== null
-													? Math.floor(hoveredUptimeData.uptimePercentage * 10) / 10
-													: Math.floor(monitor?.periodUptime * 10) / 10}
-												<Typography component="span">%</Typography>
+													? Math.floor(hoveredUptimeData?.avgResponseTime ?? 0)
+													: Math.floor(
+															((monitor?.stats?.upChecksAggregate?.totalChecks ?? 0) /
+																(monitor?.stats?.totalChecks ?? 1)) *
+																100
+														)}
+												<Typography component="span">
+													{hoveredUptimeData !== null ? " ms" : " %"}
+												</Typography>
 											</Typography>
 										</Box>
 									</Stack>
 									<UpBarChart
-										data={monitor?.aggregateData}
+										stats={monitor?.stats}
 										type={dateRange}
 										onBarHover={setHoveredUptimeData}
 									/>
@@ -356,8 +363,8 @@ const DetailsPage = () => {
 										<Typography>Total Incidents</Typography>
 										<Typography component="span">
 											{hoveredIncidentsData !== null
-												? hoveredIncidentsData.totalIncidents
-												: monitor?.periodIncidents}
+												? hoveredIncidentsData.totalChecks
+												: (monitor.stats?.downChecksAggregate?.totalChecks ?? 0)}
 										</Typography>
 										{hoveredIncidentsData !== null &&
 											hoveredIncidentsData.time !== null && (
@@ -369,7 +376,7 @@ const DetailsPage = () => {
 													color={theme.palette.text.tertiary}
 												>
 													{formatDateWithTz(
-														hoveredIncidentsData.time,
+														hoveredIncidentsData._id,
 														dateFormat,
 														uiTimezone
 													)}
@@ -377,7 +384,7 @@ const DetailsPage = () => {
 											)}
 									</Box>
 									<DownBarChart
-										data={monitor?.aggregateData}
+										stats={monitor?.stats}
 										type={dateRange}
 										onBarHover={setHoveredIncidentsData}
 									/>
@@ -390,7 +397,7 @@ const DetailsPage = () => {
 										<Typography component="h2">Average Response Time</Typography>
 									</Stack>
 									<ResponseGaugeChart
-										data={[{ response: monitor?.periodAvgResponseTime }]}
+										avgResponseTime={monitor?.stats?.groupAggregate?.avgResponseTime ?? 0}
 									/>
 								</ChartBox>
 								<ChartBox sx={{ padding: 0 }}>
@@ -403,7 +410,7 @@ const DetailsPage = () => {
 										</IconBox>
 										<Typography component="h2">Response Times</Typography>
 									</Stack>
-									<MonitorDetailsAreaChart checks={[...monitor.checks].reverse()} />
+									<MonitorDetailsAreaChart checks={monitor?.stats?.groupChecks ?? []} />
 								</ChartBox>
 								<ChartBox
 									gap={theme.spacing(8)}

Client/src/Utils/NetworkService.js

@@ -242,6 +242,34 @@ class NetworkService {
 		);
 	}
 
+	async getHardwareDetailsByMonitorId(config) {
+		const params = new URLSearchParams();
+		if (config.dateRange) params.append("dateRange", config.dateRange);
+
+		return this.axiosInstance.get(
+			`/monitors/hardware/details/${config.monitorId}?${params.toString()}`,
+			{
+				headers: {
+					Authorization: `Bearer ${config.authToken}`,
+				},
+			}
+		);
+	}
+	async getUptimeDetailsById(config) {
+		const params = new URLSearchParams();
+		if (config.dateRange) params.append("dateRange", config.dateRange);
+		if (config.normalize) params.append("normalize", config.normalize);
+
+		return this.axiosInstance.get(
+			`/monitors/uptime/details/${config.monitorId}?${params.toString()}`,
+			{
+				headers: {
+					Authorization: `Bearer ${config.authToken}`,
+				},
+			}
+		);
+	}
+
 	/**
 	 * ************************************
 	 * Updates a single monitor

Client/src/Utils/timeUtils.js

@@ -1,8 +1,11 @@
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+
 dayjs.extend(utc);
 dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
 
 export const MS_PER_SECOND = 1000;
 export const MS_PER_MINUTE = 60 * MS_PER_SECOND;
@@ -90,6 +93,6 @@ export const formatDate = (date, customOptions) => {
 };
 
 export const formatDateWithTz = (timestamp, format, timezone) => {
-	const formattedDate = dayjs(timestamp, timezone).tz(timezone).format(format);
+	const formattedDate = dayjs(timestamp).tz(timezone).format(format);
 	return formattedDate;
 };