feat: response details (header and timing phases) (#607)

* chore: update port numbers

* feat: add response details to data table

* Revert "chore: update port numbers"

This reverts commit 1d3c06b9f9e1a72ba3848a71f251cf50f8e977e3.

* chore: improve modal

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/response-details.tsx

···
+import type { ResponseDetailsParams } from "@openstatus/tinybird";
+
+import { RegionInfo } from "@/app/play/checker/[id]/_components/region-info";
+import { ResponseHeaderTable } from "@/app/play/checker/[id]/_components/response-header-table";
+import { ResponseTimingTable } from "@/app/play/checker/[id]/_components/response-timing-table";
+import { getResponseDetailsData } from "@/lib/tb";
+
+export async function ResponseDetails(props: ResponseDetailsParams) {
+  const details = await getResponseDetailsData(props);
+
+  if (!details || details?.length === 0) return null;
+
+  const response = details[0];
+
+  return (
+    <div className="grid gap-8">
+      <RegionInfo
+        check={{
+          latency: response.latency || 0,
+          region: response.region,
+          status: response.statusCode || 0,
+          time: response.cronTimestamp || 0,
+        }}
+      />
+      {response.timing ? (
+        <ResponseTimingTable timing={response.timing} hideInfo />
+      ) : null}
+      {response?.headers ? (
+        <ResponseHeaderTable headers={response.headers} />
+      ) : null}
+      {response.message ? (
+        <div>
+          <pre className="bg-muted rounded-md p-4 text-sm">
+            {response.message}
+          </pre>
+          <p className="text-muted-foreground mt-4 text-center text-sm">
+            Response Message
+          </p>
+        </div>
+      ) : null}
+    </div>
+  );
+}

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/@modal/(..)details/loading.tsx

···
+export default function Loading() {
+  return null;
+}

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/@modal/(..)details/modal.tsx

···
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@openstatus/ui";
+
+export function Modal({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      router.back();
+    }
+  };
+
+  return (
+    <Dialog open onOpenChange={handleOpenChange}>
+      {/* overflow-auto should happen inside content table */}
+      <DialogContent className="max-h-[80%] w-full overflow-auto sm:max-w-3xl sm:p-8">
+        <DialogHeader>
+          <DialogTitle>Details</DialogTitle>
+          <DialogDescription>
+            Response details of the request.
+          </DialogDescription>
+        </DialogHeader>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/@modal/(..)details/page.tsx

···
+import * as z from "zod";
+
+import { Separator } from "@openstatus/ui";
+import { flyRegions } from "@openstatus/utils";
+
+import { EmptyState } from "@/components/dashboard/empty-state";
+import { ResponseDetails } from "../../../_components/response-details";
+import { Modal } from "./modal";
+
+//
+
+/**
+ * allowed URL search params
+ */
+const searchParamsSchema = z.object({
+  monitorId: z.string(),
+  region: z.enum(flyRegions).optional(),
+  cronTimestamp: z.coerce.number(),
+});
+
+export default async function DetailsModal({
+  params,
+  searchParams,
+}: {
+  params: { id: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  const search = searchParamsSchema.safeParse(searchParams);
+
+  if (!search.success)
+    return (
+      <EmptyState
+        title="No log found"
+        description="Seems like we couldn't find what you are looking for."
+        icon="alert-triangle"
+      />
+    );
+
+  return (
+    <Modal>
+      <Separator className="my-4" />
+      <ResponseDetails {...search.data} />
+    </Modal>
+  );
+}

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/@modal/default.tsx

···
+export default function Default() {
+  return null;
+}

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/default.tsx

···
+export default function Default() {
+  return null;
+}

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/layout.tsx

···
+import * as React from "react";
+
+export default function DataTableLayout({
+  children,
+  modal,
+}: {
+  children: React.ReactNode;
+  modal: React.ReactNode;
+}) {
+  return (
+    <>
+      {children}
+      {modal}
+    </>
+  );
+}

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/details/page.tsx

···
+import Link from "next/link";
+import * as z from "zod";
+
+import { Button } from "@openstatus/ui";
+import { flyRegions } from "@openstatus/utils";
+
+import { EmptyState } from "@/components/dashboard/empty-state";
+import { ResponseDetails } from "../_components/response-details";
+
+//
+
+/**
+ * allowed URL search params
+ */
+const searchParamsSchema = z.object({
+  monitorId: z.string(),
+  region: z.enum(flyRegions).optional(),
+  cronTimestamp: z.coerce.number(),
+});
+
+export default async function Details({
+  params,
+  searchParams,
+}: {
+  params: { id: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  const search = searchParamsSchema.safeParse(searchParams);
+
+  if (!search.success)
+    return (
+      <EmptyState
+        title="No log found"
+        description="Seems like we couldn't find what you are looking for."
+        icon="alert-triangle"
+        action={
+          <Button asChild>
+            <Link href="./data">Response Logs</Link>
+          </Button>
+        }
+      />
+    );
+
+  return <ResponseDetails {...search.data} />;
+}

apps/web/src/app/monitor/[id]/page.tsx

···
 import * as z from "zod";
 
-import { availableRegions } from "@openstatus/utils";
+import { flyRegions } from "@openstatus/utils";
 
 import { columns } from "@/components/data-table/columns";
 import { DataTable } from "@/components/data-table/data-table";
···
  */
 const searchParamsSchema = z.object({
   statusCode: z.coerce.number().optional(),
-  region: z.enum(availableRegions).optional(),
+  region: z.enum(flyRegions).optional(),
   cronTimestamp: z.coerce.number().optional(),
   fromDate: z.coerce.number().optional(),
   toDate: z.coerce.number().optional(),

apps/web/src/app/play/@modal/(..)monitor/[id]/page.tsx

···
 import * as z from "zod";
 
-import { availableRegions } from "@openstatus/utils";
+import { flyRegions } from "@openstatus/utils";
 
 import { columns } from "@/components/data-table/columns";
 import { DataTable } from "@/components/data-table/data-table";
···
  */
 const searchParamsSchema = z.object({
   statusCode: z.coerce.number().optional(),
-  region: z.enum(availableRegions).optional(),
+  region: z.enum(flyRegions).optional(),
   cronTimestamp: z.coerce.number().optional(),
   fromDate: z.coerce.number().optional(),
   toDate: z.coerce.number().optional(),

apps/web/src/app/play/checker/[id]/_components/region-info.tsx

···
 import type { RegionChecker } from "../utils";
 import { StatusBadge } from "./status-badge";
 
-export function RegionInfo({ check }: { check: RegionChecker }) {
+export function RegionInfo({
+  check,
+}: {
+  check: Pick<RegionChecker, "region" | "time" | "latency" | "status">;
+}) {
   return (
-    <div className="grid grid-cols-4 gap-2 text-sm sm:grid-cols-6">
-      <div className="col-span-1">
+    <div className="grid grid-cols-5 gap-2 text-sm sm:grid-cols-9">
+      <div className="col-span-2">
         <p className="text-muted-foreground">Time:</p>
       </div>
-      <div className="col-span-3 sm:col-span-5">
+      <div className="col-span-3 sm:col-span-6">
         <p>{timestampFormatter(check.time)}</p>
       </div>
-      <div className="col-span-1">
+      <div className="col-span-2">
         <p className="text-muted-foreground">Region:</p>
       </div>
-      <div className="col-span-3 sm:col-span-5">
+      <div className="col-span-3 sm:col-span-6">
         <p>{regionFormatter(check.region)}</p>
       </div>
-      <div className="col-span-1">
+      <div className="col-span-2">
         <p className="text-muted-foreground">Latency:</p>
       </div>
-      <div className="col-span-3 sm:col-span-5">
+      <div className="col-span-3 sm:col-span-6">
         <p>
           <code>{latencyFormatter(check.latency)}</code>
         </p>
       </div>
-      <div className="col-span-1">
+      <div className="col-span-2">
         <p className="text-muted-foreground">Status:</p>
       </div>
-      <div className="col-span-3 sm:col-span-5">
+      <div className="col-span-3 sm:col-span-6">
         <StatusBadge statusCode={check.status} />
       </div>
     </div>

apps/web/src/app/play/checker/[id]/_components/response-timing-table.tsx

···
 import type { Timing } from "../utils";
 import { getTimingPhases, getTotalLatency } from "../utils";
 
-export function ResponseTimingTable({ timing }: { timing: Timing }) {
+export function ResponseTimingTable({
+  timing,
+  hideInfo = false,
+}: {
+  timing: Timing;
+  hideInfo?: boolean;
+}) {
   const total = getTotalLatency(timing);
   const timingPhases = getTimingPhases(timing);
   return (
···
               <TableCell>
                 <div className="flex w-[80px] items-center justify-between gap-2">
                   <p className="text-muted-foreground">{short}</p>
-                  <Popover>
-                    <PopoverTrigger className="text-muted-foreground hover:text-foreground data-[state=open]:text-foreground">
-                      <Info className="h-4 w-4" />
-                    </PopoverTrigger>
-                    <PopoverContent>
-                      <p className="font-medium">{long}</p>
-                      <p className="text-muted-foreground text-sm">
-                        {description}
-                      </p>
-                    </PopoverContent>
-                  </Popover>
+                  {!hideInfo ? (
+                    <Popover>
+                      <PopoverTrigger className="text-muted-foreground hover:text-foreground data-[state=open]:text-foreground">
+                        <Info className="h-4 w-4" />
+                      </PopoverTrigger>
+                      <PopoverContent>
+                        <p className="font-medium">{long}</p>
+                        <p className="text-muted-foreground text-sm">
+                          {description}
+                        </p>
+                      </PopoverContent>
+                    </Popover>
+                  ) : null}
                 </div>
               </TableCell>
               <TableCell>

apps/web/src/components/dashboard/empty-state.tsx

···
   icon: ValidIcon;
   title: string;
   description: string;
-  action: React.ReactNode;
+  action?: React.ReactNode;
 }
 
 export function EmptyState({ icon, title, description, action }: Props) {
···
           <p className="text-foreground text-base">{title}</p>
           <p className="text-muted-foreground text-center">{description}</p>
         </div>
-        <div>{action}</div>
+        {action ? <div>{action}</div> : null}
       </div>
     </div>
   );

apps/web/src/components/data-table/columns.tsx

···
 import { regionsDict } from "@openstatus/utils";
 
 import { DataTableColumnHeader } from "./data-table-column-header";
+import { DataTableRowActions } from "./data-table-row-action";
 import { DataTableStatusBadge } from "./data-table-status-badge";
 
 export const columns: ColumnDef<Ping>[] = [
···
     },
     filterFn: (row, id, value) => {
       return value.includes(row.getValue(id));
+    },
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => {
+      return (
+        <div className="text-right">
+          <DataTableRowActions row={row} />
+        </div>
+      );
     },
   },
 ];

apps/web/src/components/data-table/data-table-row-action.tsx

···
 "use client";
 
+import Link from "next/link";
 import type { Row } from "@tanstack/react-table";
 import { MoreHorizontal } from "lucide-react";
-import * as z from "zod";
 
 import { tbBuildResponseList } from "@openstatus/tinybird";
 import {
   Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuTrigger,
 } from "@openstatus/ui";
 
-// REMINDER: needed because `ResponseList` returns metadata as string, not as Record
-const schema = tbBuildResponseList.extend({
-  metadata: z.record(z.string(), z.unknown()).nullable(),
-});
-
 interface DataTableRowActionsProps<TData> {
   row: Row<TData>;
 }
···
 export function DataTableRowActions<TData>({
   row,
 }: DataTableRowActionsProps<TData>) {
-  const ping = schema.parse(row.original);
+  const ping = tbBuildResponseList.parse(row.original);
   return (
-    <Dialog>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            className="data-[state=open]:bg-accent h-8 w-8 p-0"
-          >
-            <span className="sr-only">Open menu</span>
-            <MoreHorizontal className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuLabel>Actions</DropdownMenuLabel>
-          <DialogTrigger asChild>
-            <DropdownMenuItem>View Metadata</DropdownMenuItem>
-          </DialogTrigger>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Metadata</DialogTitle>
-          <DialogDescription>
-            Additional informations to your Response like...
-          </DialogDescription>
-        </DialogHeader>
-        <div className="border-border rounded-lg border border-dashed p-4">
-          {!Boolean(Object.keys(ping.metadata || {}).length) ? (
-            <ul className="grid gap-1">
-              {Object.keys(ping.metadata || {}).map((key) => {
-                return (
-                  <li key={key} className="text-sm">
-                    <p>
-                      <code>
-                        {`"${key}"`}: {`${ping.metadata?.[key] || null}`}
-                      </code>
-                    </p>
-                  </li>
-                );
-              })}
-            </ul>
-          ) : (
-            <p className="text-sm">No data collected</p>
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className="data-[state=open]:bg-accent h-8 w-8 p-0"
+        >
+          <span className="sr-only">Open menu</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <Link
+          href={`./details?monitorId=${ping.monitorId}&cronTimestamp=${ping.cronTimestamp}&region=${ping.region}`}
+        >
+          <DropdownMenuItem>Details</DropdownMenuItem>
+        </Link>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }

apps/web/src/components/play/card.tsx

···
+import Link from "next/link";
+import type { LucideIcon } from "lucide-react";
+
+import { Button } from "@openstatus/ui";
+
+import { Shell } from "@/components/dashboard/shell";
+import { cn } from "@/lib/utils";
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  href: string;
+  title: string;
+  description: string;
+  icon?: LucideIcon;
+  variant?: "default" | "primary";
+}
+
+// TODO: unify the cards of playground, oss-friends and external monitors
+
+function Card({
+  title,
+  description,
+  href,
+  variant = "default",
+  icon,
+  className,
+  ...props
+}: CardProps) {
+  const buttonVariant = variant === "default" ? "outline" : "default";
+  const shellClassName =
+    variant === "default" ? "" : "bg-accent text-accent-foreground";
+
+  const isExternal = href.startsWith("http");
+  const externalProps = isExternal
+    ? { target: "_blank", rel: "noreferrer" }
+    : {};
+
+  return (
+    <Shell
+      className={cn(
+        "group flex flex-col gap-3 hover:shadow",
+        shellClassName,
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex-1 space-y-2">
+        <h2 className={cn("font-cal text-xl")}>{title}</h2>
+        <p className="text-muted-foreground">{description}</p>
+      </div>
+      <div className="flex items-center justify-between">
+        <Button variant={buttonVariant} className="rounded-full" asChild>
+          <Link href={href} {...externalProps}>
+            Learn more
+          </Link>
+        </Button>
+        <div className="border-border bg-background rounded-full border p-2 transition-transform duration-200 group-hover:-rotate-12">
+          {icon ? icon({ className: "text-muted-foreground h-5 w-5" }) : null}
+        </div>
+      </div>
+    </Shell>
+  );
+}

apps/web/src/lib/tb.ts

···
 import type {
   HomeStatsParams,
   MonitorListParams,
+  ResponseDetailsParams,
   ResponseGraphParams,
   ResponseListParams,
 } from "@openstatus/tinybird";
···
   getHomeMonitorList,
   getHomeStats,
   getMonitorList,
+  getResponseDetails,
   getResponseGraph,
   getResponseList,
   Tinybird,
···
 export async function getResponseListData(props: Partial<ResponseListParams>) {
   try {
     const res = await getResponseList(tb)(props);
+    return res.data;
+  } catch (e) {
+    console.error(e);
+  }
+  return;
+}
+
+export async function getResponseDetailsData(
+  props: Partial<ResponseDetailsParams>,
+) {
+  try {
+    const res = await getResponseDetails(tb)(props);
     return res.data;
   } catch (e) {
     console.error(e);

packages/tinybird/pipes/home_stats.pipe

···
 
     %
     SELECT COUNT(*) as count
-    FROM ping_response__v5
+    FROM ping_response__v7
     {% if defined(period) %}
      {% if String(period) == "1h" %}
        WHERE cronTimestamp > toUnixTimestamp(now() - INTERVAL 1 HOUR) * 1000

packages/tinybird/pipes/response_details.pipe

···
+VERSION 0
+
+NODE response_graph_0
+SQL >
+
+    %
+    SELECT *
+    FROM ping_response__v7
+    WHERE
+        monitorId = {{ String(monitorId, '1') }}
+        AND cronTimestamp = {{ Int64(cronTimestamp, 1706467215188) }}
+        AND region = {{ String(region, 'ams') }}
+
+

packages/tinybird/pipes/response_graph.pipe

···
         round(quantile(0.9)(latency)) as p90Latency,
         round(quantile(0.95)(latency)) as p95Latency,
         round(quantile(0.99)(latency)) as p99Latency
-    FROM materialized_view_ping_response_3d
+    FROM ping_response__v7
     WHERE
         monitorId = {{ String(monitorId, '1') }}
         {% if defined(fromDate) %} AND timestamp >= {{ Int64(fromDate) }} {% end %}

packages/tinybird/pipes/response_list.pipe

···
 
     %
     SELECT latency, monitorId, region, statusCode, timestamp, url, workspaceId, cronTimestamp, message
-    FROM ping_response__v5
+    FROM ping_response__v7
     WHERE monitorId = {{ String(monitorId, 'openstatusPing') }}
     {% if defined(region) %}
     AND region = {{ String(region) }}

packages/tinybird/pipes/status_timezone.pipe

···
         toStartOfDay(with_timezone) as start_of_day,
         statusCode,
         latency
-    FROM ping_response__v5
+    FROM ping_response__v7
     WHERE monitorId = {{ String(monitorId, '1') }}
         -- by default, we only query the last 45 days
         AND cronTimestamp >= toUnixTimestamp64Milli(

packages/tinybird/src/client.ts

···
   tbBuildHomeStats,
   tbBuildMonitorList,
   tbBuildPublicStatus,
+  tbBuildResponseDetails,
   tbBuildResponseGraph,
   tbBuildResponseList,
   tbIngestPingResponse,
   tbParameterHomeStats,
   tbParameterMonitorList,
   tbParameterPublicStatus,
+  tbParameterResponseDetails,
   tbParameterResponseGraph,
   tbParameterResponseList,
 } from "./validation";
···
     opts: {
       // cache: "default",
       revalidate: 600, // 10 min cache
+    },
+  });
+}
+
+export function getResponseDetails(tb: Tinybird) {
+  return tb.buildPipe({
+    pipe: "response_details__v0",
+    parameters: tbParameterResponseDetails,
+    data: tbBuildResponseDetails,
+    opts: {
+      cache: "force-cache",
     },
   });
 }

packages/tinybird/src/validation.ts

···
 import * as z from "zod";
 
-import { availableRegions } from "@openstatus/utils";
+import { flyRegions } from "@openstatus/utils";
 
 /**
  * Values for the datasource ping_response
···
   latency: z.number().int(), // in ms
   cronTimestamp: z.number().int().nullable().default(Date.now()),
   url: z.string().url(),
-  region: z.enum(availableRegions),
+  region: z.enum(flyRegions),
   message: z.string().nullable().optional(),
 });
 
···
   fromDate: z.number().int().default(0), // always start from a date
   toDate: z.number().int().optional(),
   limit: z.number().int().optional().default(7500), // one day has 2448 pings (17 (regions) * 6 (per hour) * 24) * 3 days for historical data
-  region: z.enum(availableRegions).optional(),
+  region: z.enum(flyRegions).optional(),
   cronTimestamp: z.number().int().optional(),
 });
 
 /**
+ * Params for pipe response_details
+ */
+export const tbParameterResponseDetails = tbParameterResponseList.pick({
+  monitorId: true,
+  cronTimestamp: true,
+  region: true,
+});
+
+export const responseHeadersSchema = z.record(z.string(), z.string());
+export const responseTimingSchema = z.object({
+  dnsStart: z.number(),
+  dnsDone: z.number(),
+  connectStart: z.number(),
+  connectDone: z.number(),
+  tlsHandshakeStart: z.number(),
+  tlsHandshakeDone: z.number(),
+  firstByteStart: z.number(),
+  firstByteDone: z.number(),
+  transferStart: z.number(),
+  transferDone: z.number(),
+});
+
+/**
+ * Values from the pipe response_details
+ */
+export const tbBuildResponseDetails = tbBuildResponseList.extend({
+  message: z.string().nullable().optional(),
+  headers: z
+    .string()
+    .nullable()
+    .optional()
+    .transform((val) => {
+      if (!val) return null;
+      const value = responseHeadersSchema.safeParse(JSON.parse(val));
+      if (value.success) return value.data;
+      return null;
+    }),
+  timing: z
+    .string()
+    .nullable()
+    .optional()
+    .transform((val) => {
+      if (!val) return null;
+      const value = responseTimingSchema.safeParse(JSON.parse(val));
+      if (value.success) return value.data;
+      return null;
+    }),
+});
+
+/**
  * Values from pipe response_graph
  */
 export const tbBuildResponseGraph = z.object({
-  region: z.enum(availableRegions),
+  region: z.enum(flyRegions),
   timestamp: z.number().int(),
   avgLatency: z.number().int(),
   p75Latency: z.number().int(),
···
 });
 
 export type Ping = z.infer<typeof tbBuildResponseList>;
-export type Region = (typeof availableRegions)[number]; // TODO: rename type AvailabeRegion
+export type Region = (typeof flyRegions)[number]; // TODO: rename type AvailabeRegion
 export type Monitor = z.infer<typeof tbBuildMonitorList>;
 export type HomeStats = z.infer<typeof tbBuildHomeStats>;
 export type ResponseGraph = z.infer<typeof tbBuildResponseGraph>; // TODO: rename to ResponseQuantileChart
···
 export type ResponseGraphParams = z.infer<typeof tbParameterResponseGraph>;
 export type MonitorListParams = z.infer<typeof tbParameterMonitorList>;
 export type HomeStatsParams = z.infer<typeof tbParameterHomeStats>;
+export type ResponseDetails = z.infer<typeof tbBuildResponseDetails>;
+export type ResponseDetailsParams = z.infer<typeof tbParameterResponseDetails>;