From d47cc65fedc53234caaed8e2f50cabd4a0bbec64 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 30 Apr 2026 10:30:54 -0700 Subject: [PATCH] Increase max recent checks limit from 25 -> 50, extract constants --- .../common/charts/HeatmapResponseTime.tsx | 38 +++++++++---------- .../common/charts/HistogramResponseTime.tsx | 36 ++++++++++-------- client/src/Pages/Settings/DummyChart.tsx | 3 +- .../StatusPage/Status/themes/bold/styles.ts | 5 ++- .../Status/themes/editorial/styles.ts | 5 ++- .../StatusPage/Status/themes/modern/styles.ts | 5 ++- .../Status/themes/refined/styles.ts | 5 ++- .../Status/themes/shared/ThemedHeatmap.tsx | 3 +- .../Status/themes/shared/ThemedHistogram.tsx | 4 +- client/src/Types/Monitor.ts | 2 + .../service/infrastructure/statusService.ts | 3 +- server/src/types/monitor.ts | 1 + 12 files changed, 62 insertions(+), 48 deletions(-) diff --git a/client/src/Components/common/charts/HeatmapResponseTime.tsx b/client/src/Components/common/charts/HeatmapResponseTime.tsx index f2aed0b7a..9beb92f37 100644 --- a/client/src/Components/common/charts/HeatmapResponseTime.tsx +++ b/client/src/Components/common/charts/HeatmapResponseTime.tsx @@ -5,7 +5,7 @@ import { getResponseColor } from "@/Utils/DataUtils"; import { HeatmapResponseTimeTooltip } from "@/Components/common/charts/HeatmapResponseTimeTooltip"; import type { SxProps } from "@mui/material/styles"; import type { ResponsiveStyleValue } from "@mui/system"; - +import { MAX_RECENT_CHECKS } from "@/Types/Monitor"; interface PlaceholderCheck { status: "placeholder"; responseTime: 0; @@ -32,11 +32,11 @@ export const HeatmapResponseTime = ({ if (!checks || checks.length === 0) return null; - const latestChecks = checks.slice(-25); + const latestChecks = checks.slice(-MAX_RECENT_CHECKS); let data: Array; - if (latestChecks.length !== 25) { - const placeholders = Array(25 - latestChecks.length).fill({ + if (latestChecks.length !== MAX_RECENT_CHECKS) { + const placeholders = Array(MAX_RECENT_CHECKS - latestChecks.length).fill({ status: "placeholder" as const, }); data = [...latestChecks, ...placeholders]; @@ -44,13 +44,13 @@ export const HeatmapResponseTime = ({ data = latestChecks; } return ( - + @@ -82,50 +82,50 @@ export const HeatmapResponseTime = ({ check={check} > diff --git a/client/src/Components/common/charts/HistogramResponseTime.tsx b/client/src/Components/common/charts/HistogramResponseTime.tsx index 1ef400daf..ba2bc12ff 100644 --- a/client/src/Components/common/charts/HistogramResponseTime.tsx +++ b/client/src/Components/common/charts/HistogramResponseTime.tsx @@ -7,6 +7,7 @@ import type { CheckSnapshot } from "@/Types/Check"; import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip"; import { useMemo } from "react"; import { useTranslation } from "react-i18next"; +import { MAX_RECENT_CHECKS } from "@/Types/Monitor"; interface HistogramResponseTimeProps { checks: CheckSnapshot[]; @@ -57,8 +58,11 @@ export const HistogramResponseTime = ({ if (!Array.isArray(checks) || checks.length === 0) return null; const data = - checks.length !== 25 - ? [...checks, ...Array(25 - checks.length).fill({ status: "placeholder" })] + checks.length !== MAX_RECENT_CHECKS + ? [ + ...checks, + ...Array(MAX_RECENT_CHECKS - checks.length).fill({ status: "placeholder" }), + ] : checks; const chartHeight = typeof height === "number" ? `${height}px` : height; @@ -86,17 +90,17 @@ export const HistogramResponseTime = ({ {data.map((check, index) => { @@ -108,23 +112,23 @@ export const HistogramResponseTime = ({ : theme.palette.error.light; const bar = ( @@ -133,8 +137,8 @@ export const HistogramResponseTime = ({ return isPlaceholder ? ( {bar} diff --git a/client/src/Pages/Settings/DummyChart.tsx b/client/src/Pages/Settings/DummyChart.tsx index b354ee9bb..47b3e45ea 100644 --- a/client/src/Pages/Settings/DummyChart.tsx +++ b/client/src/Pages/Settings/DummyChart.tsx @@ -3,6 +3,7 @@ import Typography from "@mui/material/Typography"; import { useTheme } from "@mui/material/styles"; import { HeatmapResponseTime, HistogramResponseTime } from "@/Components/common"; import type { CheckSnapshot } from "@/Types/Check"; +import { MAX_RECENT_CHECKS } from "@/Types/Monitor"; interface DummyChartProps { chartType: string; @@ -10,7 +11,7 @@ interface DummyChartProps { const generateDummyChecks = (): CheckSnapshot[] => { const checks: CheckSnapshot[] = []; - for (let i = 0; i < 25; i++) { + for (let i = 0; i < MAX_RECENT_CHECKS; i++) { const isUp = Math.random() > 0.1; const responseTime = Math.floor(Math.random() * 80) + 20; checks.push({ diff --git a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts index ac2eac9c0..9153ab994 100644 --- a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts @@ -2,6 +2,7 @@ import type { SxProps, Theme } from "@mui/material/styles"; import type { StatusPageThemeTokens } from "../tokens"; import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus"; import { BOLD_SANS_STACK, MONO_STACK } from "../shared/fontStacks"; +import { MAX_RECENT_CHECKS } from "@/Types/Monitor"; export type BoldHeatCell = "fast" | "med" | "slow" | "down" | "empty"; export type BoldBarKind = "up" | "down" | "empty"; @@ -297,7 +298,7 @@ export const boldStyles = ( heatmap: { padding: "0 28px 22px", display: "grid", - gridTemplateColumns: "repeat(25, 1fr)", + gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, gap: "3px", height: 48, }, @@ -313,7 +314,7 @@ export const boldStyles = ( histogram: { padding: "0 28px", display: "grid", - gridTemplateColumns: "repeat(25, 1fr)", + gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, gap: "3px", alignItems: "flex-end", height: 48, diff --git a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts index bed3e72aa..9c7e1cee0 100644 --- a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts @@ -6,6 +6,7 @@ import { MONO_STACK, SERIF_STACK, } from "../shared/fontStacks"; +import { MAX_RECENT_CHECKS } from "@/Types/Monitor"; export type EditorialHeatCell = "fast" | "med" | "slow" | "down" | "empty"; export type EditorialBarKind = "up" | "down" | "empty"; @@ -245,7 +246,7 @@ export const editorialStyles = (tokens: StatusPageThemeTokens): EditorialStyles heatmap: { mt: "16px", display: "grid", - gridTemplateColumns: "repeat(25, 1fr)", + gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, gap: "2px", height: 40, }, @@ -257,7 +258,7 @@ export const editorialStyles = (tokens: StatusPageThemeTokens): EditorialStyles histogram: { mt: "16px", display: "grid", - gridTemplateColumns: "repeat(25, 1fr)", + gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, gap: "2px", alignItems: "flex-end", height: 40, diff --git a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts index ad7356451..1ee3af741 100644 --- a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts @@ -3,6 +3,7 @@ import { keyframes } from "@mui/system"; import type { StatusPageThemeTokens } from "../tokens"; import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus"; import { MONO_STACK, SANS_STACK } from "../shared/fontStacks"; +import { MAX_RECENT_CHECKS } from "@/Types/Monitor"; export type ModernHeatCell = "fast" | "med" | "slow" | "down" | "empty"; export type ModernBarKind = "up" | "down" | "empty"; @@ -320,7 +321,7 @@ export const modernStyles = ( heatmap: { padding: "0 24px 20px", display: "grid", - gridTemplateColumns: "repeat(25, 1fr)", + gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, gap: "3px", height: 46, }, @@ -335,7 +336,7 @@ export const modernStyles = ( histogram: { padding: "0 24px", display: "grid", - gridTemplateColumns: "repeat(25, 1fr)", + gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, gap: "3px", alignItems: "flex-end", height: 46, diff --git a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts index 52626b20c..dfcf95d93 100644 --- a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts @@ -6,6 +6,7 @@ import { MONO_STACK, SANS_STACK } from "../shared/fontStacks"; export type RefinedHeatCell = "fast" | "med" | "slow" | "down" | "empty"; export type RefinedBarKind = "up" | "down" | "empty"; export type RefinedGaugeFill = "ok" | "warm" | "hot"; +import { MAX_RECENT_CHECKS } from "@/Types/Monitor"; export interface RefinedStyles { page: SxProps; @@ -259,7 +260,7 @@ export const refinedStyles = (tokens: StatusPageThemeTokens): RefinedStyles => { heatmap: { padding: "0 20px 16px", display: "grid", - gridTemplateColumns: "repeat(25, 1fr)", + gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, gap: "3px", height: 42, }, @@ -274,7 +275,7 @@ export const refinedStyles = (tokens: StatusPageThemeTokens): RefinedStyles => { histogram: { padding: "0 20px", display: "grid", - gridTemplateColumns: "repeat(25, 1fr)", + gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, gap: "3px", alignItems: "flex-end", height: 42, diff --git a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx b/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx index 165722530..58ae86d44 100644 --- a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx +++ b/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx @@ -8,8 +8,9 @@ import { useSelector } from "react-redux"; import type { RootState } from "@/store"; import type { CheckSnapshot } from "@/Types/Check"; import { formatDateWithTz } from "@/Utils/TimeUtils"; +import { MAX_RECENT_CHECKS } from "@/Types/Monitor"; -const CELLS = 25; +const CELLS = MAX_RECENT_CHECKS; export type HeatCellKind = "fast" | "med" | "slow" | "down" | "empty"; diff --git a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx b/client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx index f91ad73e5..8408a22ef 100644 --- a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx +++ b/client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx @@ -9,8 +9,8 @@ import { useSelector } from "react-redux"; import type { RootState } from "@/store"; import type { CheckSnapshot } from "@/Types/Check"; import { formatDateWithTz } from "@/Utils/TimeUtils"; - -const CELLS = 25; +import { MAX_RECENT_CHECKS } from "@/Types/Monitor"; +const CELLS = MAX_RECENT_CHECKS; const MIN_HEIGHT_PCT = 6; export type BarKind = "up" | "down" | "empty"; diff --git a/client/src/Types/Monitor.ts b/client/src/Types/Monitor.ts index 053b517d1..3dced0a6c 100644 --- a/client/src/Types/Monitor.ts +++ b/client/src/Types/Monitor.ts @@ -3,6 +3,8 @@ import type { PageSpeedGroupedCheck } from "@/Types/Check"; import type { GeoContinent } from "@/Types/GeoCheck"; export type { GeoContinent } from "@/Types/GeoCheck"; +export const MAX_RECENT_CHECKS = 50; + export const MonitorTypes = [ "http", "ping", diff --git a/server/src/service/infrastructure/statusService.ts b/server/src/service/infrastructure/statusService.ts index e18fe4aea..617f15944 100755 --- a/server/src/service/infrastructure/statusService.ts +++ b/server/src/service/infrastructure/statusService.ts @@ -20,8 +20,9 @@ import { AppError } from "@/utils/AppError.js"; import { ILogger } from "@/utils/logger.js"; import { IBufferService } from "./bufferService.js"; import type { HardwareStatusMetrics } from "@/types/network.js"; +import { MAX_RECENT_CHECKS } from "@/types/index.js"; + const SERVICE_NAME = "StatusService"; -const MAX_RECENT_CHECKS = 25; const HARDWARE_ALERT_COUNTER_START = 5; const HARDWARE_METRIC_KEYS = ["cpu", "memory", "disk", "temp"] as const; type HardwareMetricKey = (typeof HARDWARE_METRIC_KEYS)[number]; diff --git a/server/src/types/monitor.ts b/server/src/types/monitor.ts index f29ce75d7..2c2f9c08f 100644 --- a/server/src/types/monitor.ts +++ b/server/src/types/monitor.ts @@ -14,6 +14,7 @@ export type MonitorStatus = (typeof MonitorStatuses)[number]; export const MonitorMatchMethods = ["equal", "include", "regex"] as const; export type MonitorMatchMethod = (typeof MonitorMatchMethods)[number] | ""; +export const MAX_RECENT_CHECKS = 50; export interface Monitor { id: string;