openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import {
4 DataTableSheet,
5 DataTableSheetContent,
6 DataTableSheetHeader,
7 DataTableSheetTitle,
8} from "@/components/data-table/data-table-sheet";
9import type { RouterOutputs } from "@openstatus/api";
10import { DataTableBasics } from "./data-table-basics";
11
12type TestTCP = RouterOutputs["checker"]["testTcp"];
13type TestHTTP = RouterOutputs["checker"]["testHttp"];
14type TestDNS = RouterOutputs["checker"]["testDns"];
15type Monitor = NonNullable<RouterOutputs["monitor"]["get"]>;
16
17export function DataTableSheetTest({
18 data,
19 monitor,
20 onClose,
21}: {
22 data: TestTCP | TestHTTP | TestDNS | null;
23 monitor: Monitor;
24 onClose: () => void;
25}) {
26 if (!data) return null;
27
28 const _data = mapping(data, monitor);
29
30 if (!_data) return null;
31
32 return (
33 <DataTableSheet defaultOpen>
34 {/* NOTE: we are using onCloseAutoFocus to reset with a delay to avoid abrupt closing of the sheet */}
35 <DataTableSheetContent className="sm:max-w-lg" onCloseAutoFocus={onClose}>
36 <DataTableSheetHeader className="px-2">
37 <DataTableSheetTitle>Test Result</DataTableSheetTitle>
38 </DataTableSheetHeader>
39 <DataTableBasics data={_data} />
40 </DataTableSheetContent>
41 </DataTableSheet>
42 );
43}
44
45function mapping(data: TestTCP | TestHTTP | TestDNS, monitor: Monitor) {
46 switch (data.type) {
47 case "http":
48 return {
49 id: null,
50 trigger: null,
51 timestamp: data.timestamp,
52 cronTimestamp: data.timestamp,
53 type: data.type,
54 requestStatus: "success",
55 statusCode: data.status,
56 headers: data.headers,
57 region: data.region,
58 latency: data.latency,
59 timing: {
60 dns: data.timing.dnsDone - data.timing.dnsStart,
61 connect: data.timing.connectDone - data.timing.connectStart,
62 tls: data.timing.tlsHandshakeDone - data.timing.tlsHandshakeStart,
63 ttfb: data.timing.firstByteDone - data.timing.firstByteStart,
64 transfer: data.timing.transferDone - data.timing.transferStart,
65 },
66 url: monitor.url,
67 workspaceId: String(monitor.workspaceId),
68 error: false,
69 monitorId: String(monitor.id),
70 assertions: monitor.assertions ?? null,
71 message: null,
72 body: data.body ?? null,
73 } as const;
74 case "tcp":
75 return {
76 id: null,
77 trigger: null,
78 timestamp: data.timestamp,
79 cronTimestamp: data.timestamp,
80 region: data.region,
81 type: data.type,
82 requestStatus: "success",
83 error: false,
84 latency: data.latency ?? 0,
85 uri: monitor.url,
86 monitorId: String(monitor.id),
87 errorMessage: null,
88 assertions: null,
89 } as const;
90 // FIXM: add DNS props
91 case "dns":
92 return {
93 id: null,
94 trigger: null,
95 timestamp: data.timestamp,
96 cronTimestamp: data.timestamp,
97 region: data.region,
98 type: data.type,
99 requestStatus: "success",
100 monitorId: String(monitor.id),
101 error: false,
102 uri: monitor.url,
103 latency: data.latency ?? 0,
104 records: data.records,
105 errorMessage: null,
106 assertions: null,
107 } as const;
108 default:
109 return null;
110 }
111}