From 0f88a9b7c8fd3a1d66bf5fdf8bb1a7f4d83c501b Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:10:18 +0100
Subject: [PATCH] fix: tcp test button (#1078)

* fix: tcp

* fix: ts error
---
 .../src/app/api/checker/test/tcp/schema.ts    |  2 ++
 apps/web/src/app/play/checker/api/mock.ts     | 35 +++++++++++++++++++
 .../web/src/components/forms/monitor/form.tsx |  4 ---
 .../forms/monitor/request-test-button.tsx     | 24 +++++++------
 .../ping-response-analysis/region-info.tsx    | 25 ++++++++-----
 .../ping-response-analysis/utils.ts           |  2 ++
 6 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/apps/web/src/app/api/checker/test/tcp/schema.ts b/apps/web/src/app/api/checker/test/tcp/schema.ts
index f1b52fdf..382fbb69 100644
--- a/apps/web/src/app/api/checker/test/tcp/schema.ts
+++ b/apps/web/src/app/api/checker/test/tcp/schema.ts
@@ -12,6 +12,7 @@ export const tcpPayload = z.object({
 });
 
 export const TCPResponse = z.object({
+  type: z.literal("tcp").default("tcp"),
   requestId: z.number().optional(),
   workspaceId: z.number().optional(),
   monitorId: z.number().optional(),
@@ -22,6 +23,7 @@ export const TCPResponse = z.object({
   }),
   error: z.string().optional(),
   region: monitorFlyRegionSchema,
+  latency: z.number().optional(),
 });
 
 export type tcpPayload = z.infer<typeof tcpPayload>;
diff --git a/apps/web/src/app/play/checker/api/mock.ts b/apps/web/src/app/play/checker/api/mock.ts
index 990d87d5..f009f1a9 100644
--- a/apps/web/src/app/play/checker/api/mock.ts
+++ b/apps/web/src/app/play/checker/api/mock.ts
@@ -20,6 +20,7 @@ export const data = {
   method: "GET",
   checks: [
     {
+      type: "http",
       status: 200,
       latency: 889,
       headers: {
@@ -55,6 +56,7 @@ export const data = {
       region: "ams",
     },
     {
+      type: "http",
       status: 200,
       latency: 1602,
       headers: {
@@ -91,6 +93,7 @@ export const data = {
       region: "arn",
     },
     {
+      type: "http",
       status: 200,
       latency: 823,
       headers: {
@@ -127,6 +130,7 @@ export const data = {
       region: "atl",
     },
     {
+      type: "http",
       status: 200,
       latency: 1198,
       headers: {
@@ -163,6 +167,7 @@ export const data = {
       region: "bog",
     },
     {
+      type: "http",
       status: 200,
       latency: 1423,
       headers: {
@@ -199,6 +204,7 @@ export const data = {
       region: "bom",
     },
     {
+      type: "http",
       status: 200,
       latency: 1134,
       headers: {
@@ -235,6 +241,7 @@ export const data = {
       region: "bos",
     },
     {
+      type: "http",
       status: 200,
       latency: 812,
       headers: {
@@ -271,6 +278,7 @@ export const data = {
       region: "cdg",
     },
     {
+      type: "http",
       status: 200,
       latency: 1081,
       headers: {
@@ -307,6 +315,7 @@ export const data = {
       region: "den",
     },
     {
+      type: "http",
       status: 200,
       latency: 1329,
       headers: {
@@ -343,6 +352,7 @@ export const data = {
       region: "dfw",
     },
     {
+      type: "http",
       status: 200,
       latency: 380,
       headers: {
@@ -379,6 +389,7 @@ export const data = {
       region: "ewr",
     },
     {
+      type: "http",
       status: 200,
       latency: 802,
       headers: {
@@ -415,6 +426,7 @@ export const data = {
       region: "eze",
     },
     {
+      type: "http",
       status: 200,
       latency: 615,
       headers: {
@@ -450,6 +462,7 @@ export const data = {
       region: "fra",
     },
     {
+      type: "http",
       status: 200,
       latency: 1481,
       headers: {
@@ -486,6 +499,7 @@ export const data = {
       region: "gdl",
     },
     {
+      type: "http",
       status: 200,
       latency: 768,
       headers: {
@@ -522,6 +536,7 @@ export const data = {
       region: "gig",
     },
     {
+      type: "http",
       status: 200,
       latency: 662,
       headers: {
@@ -558,6 +573,7 @@ export const data = {
       region: "gru",
     },
     {
+      type: "http",
       status: 200,
       latency: 1543,
       headers: {
@@ -594,6 +610,7 @@ export const data = {
       region: "hkg",
     },
     {
+      type: "http",
       status: 200,
       latency: 369,
       headers: {
@@ -630,6 +647,7 @@ export const data = {
       region: "iad",
     },
     {
+      type: "http",
       status: 200,
       latency: 1264,
       headers: {
@@ -666,6 +684,7 @@ export const data = {
       region: "jnb",
     },
     {
+      type: "http",
       status: 200,
       latency: 642,
       headers: {
@@ -702,6 +721,7 @@ export const data = {
       region: "lax",
     },
     {
+      type: "http",
       status: 200,
       latency: 627,
       headers: {
@@ -738,6 +758,7 @@ export const data = {
       region: "lhr",
     },
     {
+      type: "http",
       status: 200,
       latency: 951,
       headers: {
@@ -774,6 +795,7 @@ export const data = {
       region: "mad",
     },
     {
+      type: "http",
       status: 200,
       latency: 808,
       headers: {
@@ -810,6 +832,7 @@ export const data = {
       region: "mia",
     },
     {
+      type: "http",
       status: 200,
       latency: 1301,
       headers: {
@@ -846,6 +869,7 @@ export const data = {
       region: "nrt",
     },
     {
+      type: "http",
       status: 200,
       latency: 1079,
       headers: {
@@ -882,6 +906,7 @@ export const data = {
       region: "ord",
     },
     {
+      type: "http",
       status: 200,
       latency: 1349,
       headers: {
@@ -917,6 +942,7 @@ export const data = {
       region: "otp",
     },
     {
+      type: "http",
       status: 200,
       latency: 970,
       headers: {
@@ -953,6 +979,7 @@ export const data = {
       region: "phx",
     },
     {
+      type: "http",
       status: 200,
       latency: 1539,
       headers: {
@@ -989,6 +1016,7 @@ export const data = {
       region: "qro",
     },
     {
+      type: "http",
       status: 200,
       latency: 1347,
       headers: {
@@ -1025,6 +1053,7 @@ export const data = {
       region: "scl",
     },
     {
+      type: "http",
       status: 200,
       latency: 400,
       headers: {
@@ -1061,6 +1090,7 @@ export const data = {
       region: "sjc",
     },
     {
+      type: "http",
       status: 200,
       latency: 883,
       headers: {
@@ -1097,6 +1127,7 @@ export const data = {
       region: "sea",
     },
     {
+      type: "http",
       status: 200,
       latency: 825,
       headers: {
@@ -1133,6 +1164,7 @@ export const data = {
       region: "sin",
     },
     {
+      type: "http",
       status: 200,
       latency: 526,
       headers: {
@@ -1169,6 +1201,7 @@ export const data = {
       region: "syd",
     },
     {
+      type: "http",
       status: 200,
       latency: 869,
       headers: {
@@ -1204,6 +1237,7 @@ export const data = {
       region: "waw",
     },
     {
+      type: "http",
       status: 200,
       latency: 1133,
       headers: {
@@ -1240,6 +1274,7 @@ export const data = {
       region: "yul",
     },
     {
+      type: "http",
       status: 200,
       latency: 447,
       headers: {
diff --git a/apps/web/src/components/forms/monitor/form.tsx b/apps/web/src/components/forms/monitor/form.tsx
index 58a670e6..4c212344 100644
--- a/apps/web/src/components/forms/monitor/form.tsx
+++ b/apps/web/src/components/forms/monitor/form.tsx
@@ -184,10 +184,6 @@ export function MonitorForm({
         jobType,
       } = form.getValues();
 
-      // FIXME: add support for TCP
-      // if (jobType !== "http")
-      //   return { error: "Only HTTP tests are supported. Coming soon..." };
-
       if (
         body &&
         body !== "" &&
diff --git a/apps/web/src/components/forms/monitor/request-test-button.tsx b/apps/web/src/components/forms/monitor/request-test-button.tsx
index 7de47a88..b53841e0 100644
--- a/apps/web/src/components/forms/monitor/request-test-button.tsx
+++ b/apps/web/src/components/forms/monitor/request-test-button.tsx
@@ -138,17 +138,19 @@ export function RequestTestButton({ form, pingEndpoint, limits }: Props) {
         {check ? (
           <div className="grid gap-8">
             <RegionInfo check={check.data} error={check.error} />
-            <ResponseDetailTabs
-              timing={check.data.timing}
-              headers={check.data.headers}
-              status={check.data.status}
-              assertions={deserialize(
-                JSON.stringify([
-                  ...(statusAssertions || []),
-                  ...(headerAssertions || []),
-                ]),
-              )}
-            />
+            {check.data.type === "http" ? (
+              <ResponseDetailTabs
+                timing={check.data.timing}
+                headers={check.data.headers}
+                status={check.data.status}
+                assertions={deserialize(
+                  JSON.stringify([
+                    ...(statusAssertions || []),
+                    ...(headerAssertions || []),
+                  ]),
+                )}
+              />
+            ) : null}
           </div>
         ) : null}
       </DialogContent>
diff --git a/apps/web/src/components/ping-response-analysis/region-info.tsx b/apps/web/src/components/ping-response-analysis/region-info.tsx
index 474dc606..c4c7c342 100644
--- a/apps/web/src/components/ping-response-analysis/region-info.tsx
+++ b/apps/web/src/components/ping-response-analysis/region-info.tsx
@@ -1,12 +1,17 @@
 import { StatusCodeBadge } from "@/components/monitor/status-code-badge";
+import type { Region } from "@openstatus/db/src/schema/constants";
 import { latencyFormatter, regionFormatter, timestampFormatter } from "./utils";
-import type { RegionChecker } from "./utils";
 
 export function RegionInfo({
   check,
   error,
 }: {
-  check: Pick<RegionChecker, "region" | "timestamp" | "latency" | "status">;
+  check: {
+    region: Region;
+    timestamp: number;
+    latency: number;
+    status?: number;
+  };
   error?: string;
 }) {
   return (
@@ -31,12 +36,16 @@ export function RegionInfo({
           <code>{latencyFormatter(check.latency)}</code>
         </p>
       </div>
-      <div className="col-span-2">
-        <p className="text-muted-foreground">Status:</p>
-      </div>
-      <div className="col-span-3 sm:col-span-6">
-        <StatusCodeBadge statusCode={check.status} />
-      </div>
+      {check.status ? (
+        <>
+          <div className="col-span-2">
+            <p className="text-muted-foreground">Status:</p>
+          </div>
+          <div className="col-span-3 sm:col-span-6">
+            <StatusCodeBadge statusCode={check.status} />
+          </div>
+        </>
+      ) : null}
       {error ? (
         <>
           <div className="col-span-2">
diff --git a/apps/web/src/components/ping-response-analysis/utils.ts b/apps/web/src/components/ping-response-analysis/utils.ts
index afa20dbb..0c7216ec 100644
--- a/apps/web/src/components/ping-response-analysis/utils.ts
+++ b/apps/web/src/components/ping-response-analysis/utils.ts
@@ -100,6 +100,7 @@ export const timingSchema = z.object({
 });
 
 export const checkerSchema = z.object({
+  type: z.literal("http").default("http"),
   status: z.number(),
   latency: z.number(),
   headers: z.record(z.string()),
@@ -121,6 +122,7 @@ export const regionCheckerSchema = checkerSchema.extend({
 
 export type Timing = z.infer<typeof timingSchema>;
 export type Checker = z.infer<typeof checkerSchema>;
+// FIXME: does not include TCP!
 export type RegionChecker = z.infer<typeof regionCheckerSchema>;
 export type Method = "GET" | "POST" | "PUT" | "DELETE" | "HEAD";
 export type CachedRegionChecker = z.infer<typeof cachedCheckerSchema>;
-- 
2.51.2