diff --git a/client/src/Components/common/charts/HeatmapResponseTimeTooltip.tsx b/client/src/Components/common/charts/HeatmapResponseTimeTooltip.tsx index 8bc651c8c..38ad25b9f 100644 --- a/client/src/Components/common/charts/HeatmapResponseTimeTooltip.tsx +++ b/client/src/Components/common/charts/HeatmapResponseTimeTooltip.tsx @@ -7,6 +7,7 @@ import { useTheme } from "@mui/material/styles"; import { useSelector } from "react-redux"; import type { RootState } from "@/Types/state"; import { useTranslation } from "react-i18next"; +import prettyMilliseconds from "pretty-ms"; type HeatmapCheck = | CheckSnapshot @@ -58,7 +59,9 @@ export const HeatmapResponseTimeTooltip = ({ {t("common.labels.responseTime")}:{" "} - {check?.originalResponseTime?.toFixed() ?? "N/A"} ms + {check?.responseTime + ? prettyMilliseconds(check.responseTime, { compact: true }) + : "N/A"} Status:{" "} diff --git a/client/src/Components/common/charts/HistogramResponseTime.tsx b/client/src/Components/common/charts/HistogramResponseTime.tsx index d9485318a..eca798011 100644 --- a/client/src/Components/common/charts/HistogramResponseTime.tsx +++ b/client/src/Components/common/charts/HistogramResponseTime.tsx @@ -8,6 +8,7 @@ import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip"; import { useMemo } from "react"; import { useTranslation } from "react-i18next"; import { MAX_RECENT_CHECKS } from "@/Types/Monitor"; +import { computeBarHeights } from "@/Utils/DataUtils"; interface HistogramResponseTimeProps { checks: CheckSnapshot[]; @@ -29,12 +30,12 @@ const calculateResponseTimeStats = (checks: CheckSnapshot[]): ResponseTimeStats return { max: "-", avg: "-" }; } - const validChecks = checks.filter((check) => check.originalResponseTime != null); + const validChecks = checks.filter((check) => check.responseTime != null); if (validChecks.length === 0) { return { max: "-", avg: "-" }; } - const responseTimes = validChecks.map((check) => check.originalResponseTime); + const responseTimes = validChecks.map((check) => check.responseTime); const max = Math.round(Math.max(...responseTimes)); const avg = Math.round( responseTimes.reduce((sum, time) => sum + time, 0) / responseTimes.length @@ -54,7 +55,7 @@ export const HistogramResponseTime = ({ const { t } = useTranslation(); const stats = useMemo(() => calculateResponseTimeStats(checks), [checks]); - + const barHeights = useMemo(() => computeBarHeights(checks), [checks]); if (!Array.isArray(checks) || checks.length === 0) return null; const data = @@ -111,7 +112,7 @@ export const HistogramResponseTime = ({ > {data.map((check, index) => { const isPlaceholder = (check as any).status === "placeholder"; - const heightPct = `${Math.max(0, Math.min(100, (check as any).responseTime ?? 0))}%`; + const heightPct = `${barHeights[index] ?? 0}%`; const barColor = check.status === true ? theme.palette.success.light diff --git a/client/src/Pages/Settings/DummyChart.tsx b/client/src/Pages/Settings/DummyChart.tsx index 47b3e45ea..78a05ed5f 100644 --- a/client/src/Pages/Settings/DummyChart.tsx +++ b/client/src/Pages/Settings/DummyChart.tsx @@ -13,13 +13,12 @@ const generateDummyChecks = (): CheckSnapshot[] => { const checks: CheckSnapshot[] = []; for (let i = 0; i < MAX_RECENT_CHECKS; i++) { const isUp = Math.random() > 0.1; - const responseTime = Math.floor(Math.random() * 80) + 20; + const responseTime = Math.floor(Math.random() * 800) + 20; checks.push({ id: `dummy-${i}`, status: isUp, statusCode: isUp ? 200 : 500, responseTime: responseTime, - originalResponseTime: responseTime, message: "", createdAt: new Date(Date.now() - i * 60000).toISOString(), }); diff --git a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx index 1dfc0bd1b..96beeb173 100644 --- a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx +++ b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx @@ -29,7 +29,7 @@ import { import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider"; import { formatPercentage } from "@/Utils/FormatUtils"; -type StatusPageMonitor = Monitor & { checks?: Monitor["recentChecks"] }; +type StatusPageMonitor = Monitor; export interface BaseStyles { page: SxProps; diff --git a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx b/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx index fe56155c3..2a7d92b1e 100644 --- a/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx +++ b/client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx @@ -8,6 +8,7 @@ import type { CheckSnapshot } from "@/Types/Check"; import { formatDateWithTz } from "@/Utils/TimeUtils"; import { MAX_RECENT_CHECKS } from "@/Types/Monitor"; import { useStatusPageTheme } from "../StatusPageThemeProvider"; +import prettyMilliseconds from "pretty-ms"; const CELLS = MAX_RECENT_CHECKS; @@ -60,7 +61,7 @@ export const ThemedHeatmap = ({ checks, containerSx, cellSx }: Props) => { fontWeight={600} > {check.status - ? `${check.responseTime} ms` + ? `${prettyMilliseconds(check.responseTime, { compact: true })}` : t("pages.statusPages.monitorsList.chart.downTooltip")} { + const { padded, heights, avg, peak } = useMemo(() => { const source = checks.slice(-CELLS); const out: (CheckSnapshot | null)[] = [ ...source, ...Array.from({ length: Math.max(0, CELLS - source.length) }, () => null), ]; + const heights = computeBarHeights(source); const valid = out.filter((c): c is CheckSnapshot => c !== null && c.responseTime > 0); const maxRt = valid.length ? Math.max(...valid.map((c) => c.responseTime)) : 1; const avgRt = valid.length ? Math.round(valid.reduce((s, c) => s + c.responseTime, 0) / valid.length) : 0; - return { padded: out, max: maxRt, avg: avgRt, peak: valid.length ? maxRt : 0 }; + return { padded: out, heights, avg: avgRt, peak: maxRt }; }, [checks]); return ( @@ -61,10 +64,7 @@ export const ThemedHistogram = ({ /> ); } - const height = Math.max( - MIN_HEIGHT_PCT, - Math.round((check.responseTime / max) * 100) - ); + const height = heights[i] ?? MIN_HEIGHT_PCT; const tooltipContent = ( {check.status - ? `${check.responseTime} ms` + ? `${prettyMilliseconds(check.responseTime, { compact: true })}` : t("pages.statusPages.monitorsList.chart.downTooltip")} export const ThemedInfrastructure = ({ monitor, sxApi }: Props) => { const { t } = useTranslation(); - const latest = monitor.recentChecks?.[0] ?? monitor.checks?.[0]; + const latest = monitor.recentChecks?.[0]; const renderEmpty = () => ( {t("pages.statusPages.monitorsList.noData")} diff --git a/client/src/Types/Check.ts b/client/src/Types/Check.ts index cfd072944..c930eacad 100644 --- a/client/src/Types/Check.ts +++ b/client/src/Types/Check.ts @@ -250,14 +250,7 @@ export interface ChecksSummary { downChecks: number; } -export type CheckSnapshot = Omit & { - originalResponseTime: number; -}; - +export type CheckSnapshot = Omit; export interface HasResponseTime { responseTime: number; } - -export type NormalizedCheck = T & { - originalResponseTime: number; -}; diff --git a/client/src/Utils/DataUtils.ts b/client/src/Utils/DataUtils.ts index 40bbd1b8b..28fdfb7b5 100644 --- a/client/src/Utils/DataUtils.ts +++ b/client/src/Utils/DataUtils.ts @@ -1,47 +1,3 @@ -const MIN_OUT = 10; -const MAX_OUT = 100; - -export const normalizeResponseTimes = ( - checks: T[], - key: K -): (T & { normalResponseTime: number })[] => { - if (!Array.isArray(checks) || checks.length === 0) - return checks as (T & { - normalResponseTime: number; - })[]; - - if (checks.length === 1) { - return [ - { - ...checks[0], - normalResponseTime: 50, - }, - ]; - } - - const getVal = (check: T): number => { - const v = check[key] as unknown; - return typeof v === "number" && Number.isFinite(v) ? v : 0; - }; - - const { min, max } = checks.reduce( - (acc, check) => { - const v = getVal(check); - if (v > acc.max) acc.max = v; - if (v < acc.min) acc.min = v; - return acc; - }, - { max: -Infinity, min: Infinity } - ); - - const range = max - min || 1; - - return checks.map((check) => ({ - ...check, - normalResponseTime: MIN_OUT + ((getVal(check) - min) * (MAX_OUT - MIN_OUT)) / range, - })); -}; - // Interpolate color between three theme colors over 0-100 range. // 0-50 => start (success.light), 50-75 => mid (warning.light), 75-100 => end (error.light) export const getResponseColor = ( @@ -129,3 +85,32 @@ export const getResponseColor = ( } return normalizeToHex(safe.end); }; + +const MIN_HEIGHT_PCT = 8; +const CAP_PERCENTILE = 95; + +const percentile = (sortedValues: number[], p: number): number => { + const index = (p / 100) * (sortedValues.length - 1); + const lower = Math.floor(index); + const upper = lower + 1; + const weight = index % 1; + if (upper >= sortedValues.length) return sortedValues[lower]; + return sortedValues[lower] * (1 - weight) + sortedValues[upper] * weight; +}; + +export const computeBarHeights = ( + checks: { responseTime?: number | null }[] +): number[] => { + const values = checks.map((check) => { + return typeof check.responseTime === "number" && Number.isFinite(check.responseTime) + ? Math.max(0, check.responseTime) + : 0; + }); + + const sorted = values.slice().sort((a, b) => a - b); + const cap = percentile(sorted, CAP_PERCENTILE); + if (cap <= 0) return values.map(() => MIN_HEIGHT_PCT); + return values.map((value) => { + return Math.max(MIN_HEIGHT_PCT, Math.min(100, (value / cap) * 100)); + }); +};