chart

Author: ajhollid

client/src/components/checks/CardChecktDetails.tsx

@@ -0,0 +1,116 @@
+import Stack from "@mui/material/Stack";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { StatusLabel, ValueLabel } from "@/components/design-elements";
+import { BaseBox } from "@/components/design-elements";
+
+import { useAppSelector } from "@/hooks/AppHooks";
+import type { ICheck } from "@/types/check";
+import type { MonitorStatus } from "@/types/monitor";
+import { formatDateWithTz } from "@/utils/TimeUtils";
+
+type CheckDetailsCardProps = {
+  check: ICheck;
+};
+
+export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => {
+  const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
+  const phases = check?.timings?.phases;
+  const phaseKeys = [
+    "wait",
+    "dns",
+    "tcp",
+    "tls",
+    "request",
+    "firstByte",
+    "download",
+  ] as const;
+  const totalMs = phases
+    ? phaseKeys.reduce(
+        (sum, key) => sum + Math.max(0, Number((phases as any)[key] ?? 0)),
+        0
+      )
+    : Number(check.responseTime ?? 0);
+
+  return (
+    <BaseBox p={4} flex={1} height={"100%"}>
+      <Stack spacing={2} sx={{ width: "100%" }}>
+        <Typography>Check details</Typography>
+        <Typography variant="body2">
+          {`Total request time: ${check.timings.phases.total} ms`}
+        </Typography>
+
+        <Grid container spacing={2}>
+          <Grid size={6} sx={{ display: "flex", alignItems: "center" }}>
+            <Typography variant="body1" color="text.secondary">
+              Status
+            </Typography>
+          </Grid>
+
+          <Grid size={6} sx={{ display: "flex", alignItems: "center" }}>
+            <Box>
+              <StatusLabel status={check.status as MonitorStatus} />
+            </Box>
+          </Grid>
+
+          <Grid size={6} sx={{ display: "flex", alignItems: "center" }}>
+            <Typography variant="body1" color="text.secondary">
+              HTTP Code
+            </Typography>
+          </Grid>
+          <Grid size={6} sx={{ display: "flex", alignItems: "center" }}>
+            <Box>
+              <ValueLabel
+                value={
+                  check.httpStatusCode < 300
+                    ? "positive"
+                    : check.httpStatusCode < 400
+                      ? "neutral"
+                      : "negative"
+                }
+                text={String(check.httpStatusCode ?? "-")}
+              />
+            </Box>
+          </Grid>
+          <Grid size={6}>
+            <Typography variant="body1" color="text.secondary">
+              Type
+            </Typography>
+          </Grid>
+          <Grid size={6}>
+            <Typography variant="body2">
+              {check.metadata?.type || "-"}
+            </Typography>
+          </Grid>
+
+          <Grid size={6}>
+            <Typography variant="body2">{Math.round(totalMs)} ms</Typography>
+          </Grid>
+          <Grid size={6}>
+            <Typography variant="body1" color="text.secondary">
+              Checked At
+            </Typography>
+          </Grid>
+          <Grid size={6}>
+            <Typography variant="body2">
+              {formatDateWithTz(
+                check.createdAt,
+                "ddd, MMM D, YYYY, HH:mm A",
+                uiTimezone
+              )}
+            </Typography>
+          </Grid>
+          <Grid size={6}>
+            <Typography variant="body1" color="text.secondary">
+              Message
+            </Typography>
+          </Grid>
+          <Grid size={6}>
+            <Typography variant="body2">{check.message || "-"}</Typography>
+          </Grid>
+        </Grid>
+      </Stack>
+    </BaseBox>
+  );
+};

client/src/components/checks/ChartTiming.tsx

@@ -0,0 +1,88 @@
+import type { ICheck, CheckTimingPhases } from "@/types/check";
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { alpha, useTheme } from "@mui/material/styles";
+import { BaseBox } from "@/components/design-elements";
+
+type TimingsChartProps = { check: ICheck | null };
+
+export type TimingSegment = {
+  key: keyof CheckTimingPhases;
+  label: string;
+  value: number;
+  percent: number;
+};
+
+const PHASE_ORDER: (keyof CheckTimingPhases)[] = [
+  "wait",
+  "dns",
+  "tcp",
+  "tls",
+  "request",
+  "firstByte",
+  "download",
+];
+
+const buildTimingSegments = (phases?: CheckTimingPhases): TimingSegment[] => {
+  if (!phases) return [];
+  const raw = PHASE_ORDER.map((key) => ({
+    key,
+    value: Math.max(0, Number((phases as any)[key] ?? 0)),
+  }));
+  const total = raw.reduce((sum, p) => sum + p.value, 0);
+  if (total <= 0) {
+    return raw.map(({ key, value }) => ({
+      key,
+      label: key,
+      value,
+      percent: 0,
+    }));
+  }
+  return raw.map(({ key, value }) => ({
+    key,
+    label: key,
+    value,
+    percent: (value / total) * 100,
+  }));
+};
+
+export const TimingsChart = ({ check }: TimingsChartProps) => {
+  const segments = buildTimingSegments(check?.timings?.phases);
+  if (!segments.length) return null;
+  if (!check) return null;
+
+  const theme = useTheme();
+  const strokeColor = alpha(theme.palette.success.main, 0.8);
+
+  return (
+    <BaseBox p={4} flex={1} height={"100%"}>
+      <Stack spacing={2} sx={{ width: "100%", height: 260 }}>
+        <Typography>Request timings</Typography>
+        <Typography variant="body2">
+          {`Total request time: ${check.timings.phases.total} ms`}
+        </Typography>
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Pie
+              data={segments}
+              dataKey="value"
+              nameKey="label"
+              fill="transparent"
+              stroke={strokeColor}
+              strokeWidth={1}
+              label={({ name, value }: any) => `${name}: ${Math.round(Number(value) || 0)} ms`}
+            >
+              {segments.map((entry) => (
+                <Cell key={`cell-${entry.key}`} fill="transparent" />
+              ))}
+            </Pie>
+            <Tooltip
+              formatter={(value: any) => `${Math.round(value as number)} ms`}
+            />
+          </PieChart>
+        </ResponsiveContainer>
+      </Stack>
+    </BaseBox>
+  );
+};