openstatus.dev
Openstatus
www.openstatus.dev
fix: overflow issue
+55
-53
+55
-53
apps/web/src/app/_components/event-table.tsx
+55
-53
apps/web/src/app/_components/event-table.tsx
···
30
30
const [open, toggle] = React.useReducer((state) => !state, false);
31
31
return (
32
32
<div className="relative overflow-hidden max-h-56">
33
-
<Table>
34
-
<TableCaption>A list of the latest pings.</TableCaption>
35
-
<TableHeader>
36
-
<TableRow>
37
-
<TableHead>Time</TableHead>
38
-
<TableHead>Status</TableHead>
39
-
<TableHead>Latency</TableHead>
40
-
<TableHead className="text-right">URL</TableHead>
41
-
</TableRow>
42
-
</TableHeader>
43
-
<TableBody>
44
-
{events.map((event) => {
45
-
const isOk = event.statusCode === 200;
46
-
const url = new URL(event.url);
47
-
return (
48
-
<TableRow key={event.timestamp}>
49
-
<TableCell className="font-medium">
50
-
{formatDistance(new Date(event.timestamp), new Date(), {
51
-
addSuffix: true,
52
-
includeSeconds: true,
53
-
})}
54
-
</TableCell>
55
-
<TableCell>
56
-
<Badge
57
-
variant="outline"
58
-
className={cn(
59
-
"text-xs py-0.5 px-2",
60
-
isOk
61
-
? "border-green-100 bg-green-50"
62
-
: "border-red-100 bg-red-50"
63
-
)}
64
-
>
65
-
{event.statusCode}
66
-
<div
33
+
<div className="relative overflow-y-scroll max-h-56">
34
+
<Table>
35
+
<TableCaption>
36
+
A list of the latest {events.length} pings.
37
+
</TableCaption>
38
+
<TableHeader>
39
+
<TableRow className="sticky top-0">
40
+
<TableHead>Time</TableHead>
41
+
<TableHead>Status</TableHead>
42
+
<TableHead>Latency</TableHead>
43
+
<TableHead className="text-right">URL</TableHead>
44
+
</TableRow>
45
+
</TableHeader>
46
+
<TableBody>
47
+
{events.map((event) => {
48
+
const isOk = event.statusCode === 200;
49
+
const url = new URL(event.url);
50
+
return (
51
+
<TableRow key={event.timestamp}>
52
+
<TableCell className="font-medium">
53
+
{formatDistance(new Date(event.timestamp), new Date(), {
54
+
addSuffix: true,
55
+
includeSeconds: true,
56
+
})}
57
+
</TableCell>
58
+
<TableCell>
59
+
<Badge
60
+
variant="outline"
67
61
className={cn(
68
-
"rounded-full bg-foreground h-1.5 w-1.5 ml-1",
69
-
isOk ? "bg-green-500" : "bg-red-500"
62
+
"text-xs py-0.5 px-2",
63
+
isOk
64
+
? "border-green-100 bg-green-50"
65
+
: "border-red-100 bg-red-50"
70
66
)}
71
-
/>
72
-
</Badge>
73
-
</TableCell>
74
-
<TableCell className="text-muted-foreground">
75
-
{event.latency}
76
-
</TableCell>
77
-
<TableCell className="text-right font-light truncate">
78
-
{url.pathname}
79
-
</TableCell>
80
-
</TableRow>
81
-
);
82
-
})}
83
-
</TableBody>
84
-
</Table>
67
+
>
68
+
{event.statusCode}
69
+
<div
70
+
className={cn(
71
+
"rounded-full bg-foreground h-1.5 w-1.5 ml-1",
72
+
isOk ? "bg-green-500" : "bg-red-500"
73
+
)}
74
+
/>
75
+
</Badge>
76
+
</TableCell>
77
+
<TableCell className="text-muted-foreground">
78
+
{event.latency}
79
+
</TableCell>
80
+
<TableCell className="text-right font-light truncate">
81
+
{url.pathname}
82
+
</TableCell>
83
+
</TableRow>
84
+
);
85
+
})}
86
+
</TableBody>
87
+
</Table>
88
+
</div>
85
89
{!open && (
86
90
<div className="absolute inset-0 flex items-end justify-center bg-gradient bg-gradient-to-b from-transparent from-20% to-background">
87
-
{/* TODO: enable button */}
88
91
<Button
89
92
onClick={toggle}
90
93
variant="outline"
91
94
size="sm"
92
95
className="rounded-full backdrop-blur-sm"
93
-
// disabled
94
96
>
95
-
{`A total of ${events.length} events.`}
97
+
A total of {events.length} events.
96
98
</Button>
97
99
</div>
98
100
)}