openstatus.dev
Openstatus
www.openstatus.dev
fix: status code null data table (#486)
* fix: status code null data table
* fix: type error
authored by
Maximilian Kaske
and committed by
GitHub
432f4867
74a3f818
+40
-19
+29
-2
apps/web/src/components/data-table/columns.tsx
+29
-2
apps/web/src/components/data-table/columns.tsx
···
2
2
3
3
import type { ColumnDef } from "@tanstack/react-table";
4
4
import { format } from "date-fns";
5
+
import * as z from "zod";
5
6
6
7
import type { Ping } from "@openstatus/tinybird";
8
+
import {
9
+
Tooltip,
10
+
TooltipContent,
11
+
TooltipProvider,
12
+
TooltipTrigger,
13
+
} from "@openstatus/ui";
7
14
import { regionsDict } from "@openstatus/utils";
8
15
9
16
import { DataTableColumnHeader } from "./data-table-column-header";
···
29
36
<DataTableColumnHeader column={column} title="Status" />
30
37
),
31
38
cell: ({ row }) => {
32
-
const statusCode = String(row.getValue("statusCode"));
33
-
return <DataTableStatusBadge {...{ statusCode }} />;
39
+
const unsafe_StatusCode = row.getValue("statusCode");
40
+
const statusCode = z.number().nullable().parse(unsafe_StatusCode);
41
+
const message = row.original.message;
42
+
43
+
if (statusCode !== null) {
44
+
return <DataTableStatusBadge {...{ statusCode }} />;
45
+
}
46
+
47
+
return (
48
+
<TooltipProvider>
49
+
<Tooltip>
50
+
<TooltipTrigger>
51
+
<DataTableStatusBadge {...{ statusCode }} />
52
+
</TooltipTrigger>
53
+
<TooltipContent>
54
+
<p className="text-muted-foreground max-w-xs sm:max-w-sm">
55
+
{message}
56
+
</p>
57
+
</TooltipContent>
58
+
</Tooltip>
59
+
</TooltipProvider>
60
+
);
34
61
},
35
62
filterFn: (row, id, value) => {
36
63
// get the first digit of the status code
+3
-2
apps/web/src/components/data-table/data-table-status-badge.tsx
+3
-2
apps/web/src/components/data-table/data-table-status-badge.tsx
···
1
+
import type { Ping } from "@openstatus/tinybird";
1
2
import { Badge } from "@openstatus/ui";
2
3
3
4
import { cn } from "@/lib/utils";
···
5
6
export function DataTableStatusBadge({
6
7
statusCode,
7
8
}: {
8
-
statusCode: string | number;
9
+
statusCode: Ping["statusCode"];
9
10
}) {
10
11
const isOk = String(statusCode).startsWith("2");
11
12
return (
···
16
17
isOk ? "border-green-100 bg-green-50" : "border-red-100 bg-red-50",
17
18
)}
18
19
>
19
-
{statusCode}
20
+
{statusCode || "Error"}
20
21
<div
21
22
className={cn(
22
23
"bg-foreground ml-1 h-1.5 w-1.5 rounded-full",
+7
-14
apps/web/src/components/data-table/monitor/columns.tsx
+7
-14
apps/web/src/components/data-table/monitor/columns.tsx
···
70
70
header: "Last Status",
71
71
cell: ({ row }) => {
72
72
const lastStatusCode = row.getValue("lastStatusCode");
73
-
const statusCode = z
74
-
.string()
75
-
.or(z.number())
76
-
.optional()
77
-
.parse(lastStatusCode);
78
-
return (
79
-
<>
80
-
{statusCode ? (
81
-
<DataTableStatusBadge {...{ statusCode }} />
82
-
) : (
83
-
<span className="text-muted-foreground">Missing</span>
84
-
)}
85
-
</>
86
-
);
73
+
const statusCode = z.number().nullable().optional().parse(lastStatusCode);
74
+
75
+
if (statusCode === undefined) {
76
+
return <span className="text-muted-foreground">Missing</span>;
77
+
}
78
+
79
+
return <DataTableStatusBadge {...{ statusCode }} />;
87
80
},
88
81
},
89
82
{
+1
-1
packages/tinybird/pipes/response_list.pipe
+1
-1
packages/tinybird/pipes/response_list.pipe
···
4
4
SQL >
5
5
6
6
%
7
-
SELECT latency, monitorId, region, statusCode, timestamp, url, workspaceId, cronTimestamp
7
+
SELECT latency, monitorId, region, statusCode, timestamp, url, workspaceId, cronTimestamp, message
8
8
FROM ping_response__v5
9
9
WHERE monitorId = {{ String(monitorId, 'openstatusPing') }}
10
10
{% if defined(region) %}