defensive checks

client/src/components/design-elements/StatusLabel.tsx

@@ -1,8 +1,9 @@
 import Box from "@mui/material/Box";
 import { BaseBox } from "@/components/design-elements";
+import Typography from "@mui/material/Typography";
+
 import type { MonitorStatus } from "@/types/monitor";
 import type { SxProps } from "@mui/material/styles";
-
 import { getStatusPalette, getValuePalette } from "@/utils/MonitorUtils";
 import { useTheme } from "@mui/material/styles";
 
@@ -18,8 +19,6 @@ export const StatusLabel = ({
 }) => {
   const theme = useTheme();
   const palette = getStatusPalette(status);
-  const transformedText =
-    status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
 
   return (
     <BaseBox
@@ -37,8 +36,14 @@ export const StatusLabel = ({
         ...sx,
       }}
     >
-      <Box width={7} height={7} bgcolor={theme.palette[palette].light} borderRadius="50%" marginRight="5px" />
-      {transformedText}
+      <Box
+        width={7}
+        height={7}
+        bgcolor={theme.palette[palette].light}
+        borderRadius="50%"
+        marginRight="5px"
+      />
+      <Typography textTransform={"capitalize"}>{status}</Typography>
     </BaseBox>
   );
 };
@@ -70,7 +75,13 @@ export const ValueLabel = ({
             : "rgba(0, 0, 0, 0.08)",
       }}
     >
-      <Box width={7} height={7} bgcolor={theme.palette[palette].light} borderRadius="50%" marginRight="5px" />
+      <Box
+        width={7}
+        height={7}
+        bgcolor={theme.palette[palette].light}
+        borderRadius="50%"
+        marginRight="5px"
+      />
       {transformedText}
     </BaseBox>
   );

client/src/components/monitors/HistogramDockerPercentage.tsx

@@ -8,10 +8,14 @@ import {
   XAxis,
   YAxis,
   CartesianGrid,
+  Tooltip,
 } from "recharts";
 import { XTick } from "@/components/monitors/ChartResponseTime";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { BaseBox } from "@/components/design-elements";
+import { useAppSelector } from "@/hooks/AppHooks";
+import { formatDateWithTz, tooltipDateFormatLookup } from "@/utils/TimeUtils";
 
 export const HistogramDockerPercentage = ({
   data,
@@ -29,6 +33,21 @@ export const HistogramDockerPercentage = ({
   const theme = useTheme();
   const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
   const hasData = Array.isArray(data) && data.length > 0;
+  const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
+
+  const PercentTooltip = ({ active, payload, label }: any) => {
+    if (!active || !payload || !label) return null;
+    const fmt = tooltipDateFormatLookup(range);
+    const value = payload?.[0]?.payload?.[dataKey] ?? 0;
+    return (
+      <BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
+        <Typography>
+          {formatDateWithTz(String(label), fmt, uiTimezone)}
+        </Typography>
+        <Typography>{`${value}%`}</Typography>
+      </BaseBox>
+    );
+  };
 
   return (
     <BaseChart
@@ -78,6 +97,7 @@ export const HistogramDockerPercentage = ({
               tick={{ fontSize: isSmall ? 10 : 11 }}
               tickMargin={4}
             />
+            <Tooltip content={<PercentTooltip />} cursor={false} />
             <Area
               dataKey={dataKey}
               stroke={theme.palette.primary.main}

client/src/components/monitors/HistogramPageSpeed.tsx

@@ -45,7 +45,7 @@ export const HistogramPageSpeed = ({
   status: MonitorStatus;
 }) => {
   const theme = useTheme();
-  const scores = processData(checks);
+  const scores = processData(checks ?? []);
   const color = getStatusColor(status, theme);
   return (
     <Stack

client/src/components/status-pages/StatusPageRow.tsx

@@ -23,13 +23,16 @@ export const StatusPageRow = ({ monitor }: { monitor: IMonitor }) => {
         alignItems={"center"}
         justifyContent={"flex-end"}
       >
-        <StatusLabel status={monitor?.status} sx={{ py: 1 }} />
+        <StatusLabel
+          status={(monitor?.status as any) ?? "initializing"}
+          sx={{ py: 1 }}
+        />
       </Grid>
       <Grid size={12} marginTop={theme.spacing(2)}>
         {type === "heatmap" && (
           <HeatmapResponseTime
             gap={{ xs: theme.spacing(0.5), md: theme.spacing(2) }}
-            checks={monitor?.latestChecks}
+            checks={monitor?.latestChecks ?? []}
             availabilityCellSx={{
               borderRadius: {
                 xs: theme.spacing(0.5),
@@ -46,7 +49,7 @@ export const StatusPageRow = ({ monitor }: { monitor: IMonitor }) => {
         )}
         {type === "histogram" && (
           <HistogramResponseTime
-            checks={monitor?.latestChecks}
+            checks={monitor?.latestChecks ?? []}
             height={{ xs: 50, md: 100 }}
             gap={{ xs: 0.5, md: theme.spacing(4) }}
           />