diff --git a/client/src/Components/design-elements/Icon.tsx b/client/src/Components/design-elements/Icon.tsx
index 22f939750..95e68826b 100644
--- a/client/src/Components/design-elements/Icon.tsx
+++ b/client/src/Components/design-elements/Icon.tsx
@@ -5,13 +5,15 @@ interface IconProps {
size?: number;
strokeWidth?: number;
stroke?: string;
+ color?: string;
}
-const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5 }: IconProps) => {
+const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5, color }: IconProps) => {
return (
);
};
diff --git a/client/src/Pages/StatusPage/Status/index.tsx b/client/src/Pages/StatusPage/Status/index.tsx
index 66fcece97..87a2de7a1 100644
--- a/client/src/Pages/StatusPage/Status/index.tsx
+++ b/client/src/Pages/StatusPage/Status/index.tsx
@@ -172,6 +172,7 @@ const StatusPageView = () => {
range={range}
onRangeChange={onRangeChange}
bucketTimezone={data.bucketTimezone ?? "Etc/UTC"}
+ checkTTLDays={data.checkTTLDays}
/>
);
diff --git a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx
index daca33d00..cf08ca62f 100644
--- a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx
+++ b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx
@@ -1,7 +1,8 @@
-import { useMemo, useState } from "react";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
-import { useTranslation } from "react-i18next";
+import Typography from "@mui/material/Typography";
+import { TriangleAlert } from "lucide-react";
+
import type { SxProps, Theme } from "@mui/material/styles";
import type { Monitor } from "@/Types/Monitor";
import type { StatusPage, StatusPageRange } from "@/Types/StatusPage";
@@ -24,7 +25,6 @@ import {
resolveOverallStatus,
statusBadgeKey,
} from "@/Pages/StatusPage/Status/themes/shared/overallStatus";
-import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
import { formatPercentage } from "@/Utils/FormatUtils";
import {
checksToCells,
@@ -32,6 +32,13 @@ import {
type BarKind,
type HeatCellKind,
} from "@/Pages/StatusPage/Status/themes/shared/ChartCells";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { Icon } from "@/Components/design-elements";
+
+import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material";
type StatusPageMonitor = Monitor;
@@ -89,6 +96,7 @@ interface Props {
range: StatusPageRange;
onRangeChange: (range: StatusPageRange) => void;
bucketTimezone: string;
+ checkTTLDays?: number;
}
export const BaseStatusPage = ({
@@ -98,7 +106,9 @@ export const BaseStatusPage = ({
range,
onRangeChange,
bucketTimezone,
+ checkTTLDays,
}: Props) => {
+ const theme = useTheme();
const { t } = useTranslation();
const { tokens, mode } = useStatusPageTheme();
const styles = useMemo(
@@ -189,6 +199,25 @@ export const BaseStatusPage = ({
))}
+ {range !== "latest" &&
+ checkTTLDays &&
+ STATUS_PAGE_RANGE_DAYS[range] > checkTTLDays && (
+
+
+
+ {t("pages.statusPages.rangeExceedsRetention", { days: checkTTLDays })}
+
+
+ )}
)}
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
index 669e1b479..fe8f0319e 100644
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@@ -1443,6 +1443,7 @@
"statusPages": {
"deleteSuccess": "Status page deleted successfully",
"rangeSelectorAria": "History range",
+ "rangeExceedsRetention": "Check history retention is set to {{days}} days. Increase retention for more data.",
"range": {
"latest": "Latest",
"30d": "30 days",
@@ -1471,6 +1472,7 @@
"max": "max {{value}}",
"downTooltip": "Down",
"heatmapAria": "Response time heatmap",
+ "dayAria": "{{date}}, {{uptime}} uptime",
"dayUptime": "Uptime: {{uptime}} ({{upChecks}}/{{totalChecks}} checks)",
"dayAvgResponse": "Avg response: {{value}}"
},