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
··· 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
··· 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
··· 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
··· 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) %}