bucket date

client/src/Components/v2/monitors/MonitorStatBoxes.tsx

@@ -28,7 +28,7 @@ export const MonitorStatBoxes = ({
 	const timeSinceLastFailure =
 		timeOfLastFailure > 0
 			? Date.now() - timeOfLastFailure
-			: Date.now() - new Date(monitorStats?.createdAt);
+			: Date.now() - new Date(monitorStats?.createdAt || 0).getTime();
 
 	// Determine time since last check
 	const timeOfLastCheck = monitorStats?.lastCheckTimestamp || 0;

client/src/Components/v2/monitors/charts/HistogramDetails.tsx

@@ -131,7 +131,7 @@ export const HistogramDetails = ({
 					<XAxis
 						axisLine={false}
 						tickLine={false}
-						dataKey="_id"
+						dataKey="bucketDate"
 						tick={(props) => (
 							<XTick
 								{...props}

client/src/Components/v2/monitors/charts/HistogramStatus.tsx

@@ -31,7 +31,7 @@ const XLabel = ({ p1, p2, range }: XLabelProps) => {
 				fontSize={11}
 				fill={theme.palette.text.secondary}
 			>
-				{formatDateWithTz(p1._id, dateFormat, uiTimezone)}
+				{formatDateWithTz(p1.bucketDate, dateFormat, uiTimezone)}
 			</text>
 			<text
 				x="100%"
@@ -41,7 +41,7 @@ const XLabel = ({ p1, p2, range }: XLabelProps) => {
 				fontSize={11}
 				fill={theme.palette.text.secondary}
 			>
-				{formatDateWithTz(p2._id, dateFormat, uiTimezone)}
+				{formatDateWithTz(p2.bucketDate, dateFormat, uiTimezone)}
 			</text>
 		</>
 	);
@@ -78,8 +78,8 @@ export const HistogramStatus = ({
 		const titleText = t("common.charts.labels.averageResponseTime");
 		const fmt = range === "30d" ? "MMM D, YYYY" : "ddd, MMM D, YYYY, h:mm A";
 		let dateLabel = "";
-		if (d?._id) {
-			const base = new Date(d._id);
+		if (d?.bucketDate) {
+			const base = new Date(d.bucketDate);
 			const midBucket =
 				range === "30d" ? new Date(base.getTime() + 12 * 60 * 60 * 1000) : base;
 			dateLabel = formatDateWithTz(midBucket.toISOString(), fmt, uiTimezone);
@@ -151,11 +151,11 @@ export const HistogramStatus = ({
 							maxBarSize={7}
 							background={{ fill: "transparent" }}
 						>
-							{checks?.map((groupedCheck) => {
+							{checks?.map((groupedCheck, index) => {
 								const fillColor = getResponseTimeColor(groupedCheck.avgResponseTime);
 								return (
 									<Cell
-										key={groupedCheck._id}
+										key={groupedCheck.bucketDate || `check-${index}`}
 										fill={theme.palette[fillColor].main}
 									/>
 								);

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

@@ -53,7 +53,11 @@ const UptimeDetailsPage = () => {
 		isLoading: monitorIsLoading,
 		error: monitorError,
 		refetch: refetchMonitor,
-	} = useGet<MonitorDetailsResponse>(monitorDetailsUrl);
+	} = useGet<MonitorDetailsResponse>(
+		monitorDetailsUrl,
+		{},
+		{ refreshInterval: 10000, keepPreviousData: true }
+	);
 
 	const monitorData = monitorDetailsData?.monitorData;
 	const monitor = monitorData?.monitor;

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

@@ -88,7 +88,11 @@ const UptimeMonitorsPage = () => {
 		data: monitors,
 		isLoading: monitorsLoading,
 		error,
-	} = useGet<Monitor[]>("/monitors/team?type=http&type=ping&type=port&type=docker");
+	} = useGet<Monitor[]>(
+		"/monitors/team?type=http&type=ping&type=port&type=docker",
+		{},
+		{ keepPreviousData: true }
+	);
 
 	const {
 		data: monitorsWithChecksData,
@@ -98,7 +102,7 @@ const UptimeMonitorsPage = () => {
 	} = useGet<MonitorsWithChecksResponse>(
 		monitorsWithChecksUrl,
 		{},
-		{ refreshInterval: 5000 }
+		{ refreshInterval: 5000, keepPreviousData: true }
 	);
 
 	const { monitors: monitorsWithChecks, summary, count } = monitorsWithChecksData ?? {};

client/src/Types/Check.ts

@@ -128,7 +128,7 @@ export interface Check {
 }
 
 export interface GroupedCheck {
-	_id: string;
+	bucketDate: string;
 	avgResponseTime: number;
 	totalChecks: number;
 }

server/src/repositories/checks/MongoChecksRepistory.ts

@@ -483,6 +483,7 @@ class MongoChecksRepository implements IChecksRepository {
 							},
 						},
 						{ $sort: { _id: 1 } },
+						{ $project: { bucketDate: "$_id", avgResponseTime: 1, totalChecks: 1, _id: 0 } },
 					],
 					groupedUpChecks: [
 						{ $match: { status: true } },
@@ -496,6 +497,7 @@ class MongoChecksRepository implements IChecksRepository {
 							},
 						},
 						{ $sort: { _id: 1 } },
+						{ $project: { bucketDate: "$_id", avgResponseTime: 1, totalChecks: 1, _id: 0 } },
 					],
 					groupedDownChecks: [
 						{ $match: { status: false } },
@@ -509,6 +511,7 @@ class MongoChecksRepository implements IChecksRepository {
 							},
 						},
 						{ $sort: { _id: 1 } },
+						{ $project: { bucketDate: "$_id", avgResponseTime: 1, totalChecks: 1, _id: 0 } },
 					],
 				},
 			},

server/src/types/check.ts

@@ -157,7 +157,7 @@ export interface HardwareChecksResult {
 }
 
 export interface GroupedCheck {
-	_id: string;
+	bucketDate: string;
 	avgResponseTime: number;
 	totalChecks: number;
 }