🔥 Improve rum page (#843)

* 🚧 wip rum

* 🚧 wip rum

* 🚧 wip rum

* 🚧 wip rum

* 🔥 rum

apps/ingest-worker/src/index.ts

···
   const data = z.array(schemaV1).parse(JSON.parse(rawText));
   const userAgent = c.req.header("user-agent") || "";
 
+  const timestamp = Date.now();
   const country = c.req.header("cf-ipcountry") || "";
   const city = c.req.raw.cf?.city || "";
   const region_code = c.req.raw.cf?.regionCode || "";
···
     const device = getDevice(d.screen, os);
     return tbIngestWebVitals.parse({
       ...d,
+      timestamp,
       device,
       ...d.data,
       browser,

apps/ingest-worker/src/utils.ts

···
       return "laptop";
     }
     return "desktop";
-  } else if (MOBILE_OS.includes(os)) {
+  }
+  if (MOBILE_OS.includes(os)) {
     if (os === "Amazon OS" || +width > MOBILE_SCREEN_WIDTH) {
       return "tablet";
     }
···
 
   if (+width >= DESKTOP_SCREEN_WIDTH) {
     return "desktop";
-  } else if (+width >= LAPTOP_SCREEN_WIDTH) {
+  }
+  if (+width >= LAPTOP_SCREEN_WIDTH) {
     return "laptop";
-  } else if (+width >= MOBILE_SCREEN_WIDTH) {
+  }
+  if (+width >= MOBILE_SCREEN_WIDTH) {
     return "tablet";
-  } else {
-    return "mobile";
   }
+  return "mobile";
 }

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/_components/data-table-wrapper.tsx

···
+import { columns } from "@/components/data-table/rum/columns";
+import { DataTable } from "@/components/data-table/rum/data-table";
+import type { responseRumPageQuery } from "@openstatus/tinybird/src/validation";
+import type { z } from "zod";
+
+export const DataTableWrapper = ({
+  data,
+}: {
+  data: z.infer<typeof responseRumPageQuery>[];
+}) => {
+  return <DataTable columns={columns} data={data} />;
+};

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/_components/request-button/action.ts

···
+"use server";
+
+import { auth } from "@/lib/auth";
+import { analytics, trackAnalytics } from "@openstatus/analytics";
+import { Redis } from "@upstash/redis";
+const redis = Redis.fromEnv();
+
+export const RequestAccessToRum = async () => {
+  const session = await auth();
+  if (!session?.user) return;
+
+  await redis.sadd("rum_access_requested", session.user.email);
+  await analytics.identify(session.user.id, { email: session.user.email });
+  await trackAnalytics({
+    event: "User RUM Beta Requested",
+    email: session.user.email || "",
+  });
+};

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/_components/request-button/request-button.tsx

···
+"use client";
+import { auth } from "@/lib/auth";
+import { Button } from "@openstatus/ui";
+import { Redis } from "@upstash/redis";
+import { useState } from "react";
+import { RequestAccessToRum } from "./action";
+
+export const RequestButton = async ({
+  hasRequestAccess,
+}: {
+  hasRequestAccess: number;
+}) => {
+  const [accessRequested, setAccessRequested] = useState(hasRequestAccess);
+  if (accessRequested) {
+    return (
+      <Button>
+        <span>Access requested</span>
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      onClick={async () => {
+        // const session = await auth();
+        // if (!session?.user) return;
+        await RequestAccessToRum();
+        setAccessRequested(1);
+      }}
+    >
+      Request access
+    </Button>
+  );
+};

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/_components/route-table.tsx

···
 import {
   Table,
+  TableBody,
   TableCaption,
+  TableCell,
   TableHead,
   TableHeader,
   TableRow,
 } from "@openstatus/ui";
 
 import { api } from "@/trpc/server";
+import { timeFormater } from "./util";
+import { DataTableWrapper } from "./data-table-wrapper";
 
-const RouteTable = async () => {
-  const data = await api.rumRouter.GetAggregatedPerPage.query();
+const RouteTable = async ({ dsn }: { dsn: string }) => {
+  const data = await api.tinybird.rumMetricsForApplicationPerPage.query({
+    dsn: dsn,
+  });
   if (!data) {
     return null;
   }
+  console.log(data.length);
   return (
     <div className="">
-      <h2 className="font-semibold text-lg">Page Performance</h2>
-      <div className="">
-        <Table>
-          <TableCaption>An overview of your page performance.</TableCaption>
-          <TableHeader>
-            <TableRow className="sticky top-0">
-              <TableHead className="w-4 max-w-6">Page</TableHead>
-              <TableHead>Total Events</TableHead>
-              <TableHead>CLS</TableHead>
-              <TableHead>FCP</TableHead>
-              <TableHead>INP</TableHead>
-              <TableHead>LCP</TableHead>
-              <TableHead>TTFB</TableHead>
-            </TableRow>
-          </TableHeader>
-        </Table>
-      </div>
+      <DataTableWrapper data={data} />
     </div>
   );
 };

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/_components/rum-metric-card.tsx

···
 
 import { api } from "@/trpc/server";
 import { CategoryBar } from "./category-bar";
+import { date } from "zod";
+import { latencyFormatter } from "@/components/ping-response-analysis/utils";
 
 function prepareWebVitalValues(values: WebVitalsValues) {
   return values.map((value) => ({
···
   }));
 }
 
-export const RUMMetricCard = async ({ event }: { event: WebVitalEvents }) => {
-  const data = await api.rumRouter.GetEventMetricsForWorkspace.query({ event });
+const RUMCard = async ({
+  event,
+  value,
+}: {
+  event: WebVitalEvents;
+  value: number;
+}) => {
   const eventConfig = webVitalsConfig[event];
   return (
     <Card>
-      {/* <p className="text-muted-foreground text-sm">
+      <p className="text-muted-foreground text-sm">
         {eventConfig.label} ({event})
       </p>
       <p className="font-semibold text-3xl text-foreground">
-        {data?.median.toFixed(2) || 0}
+        {event !== "CLS" ? value.toFixed(0) : value.toFixed(2) || 0}
       </p>
       <CategoryBar
         values={prepareWebVitalValues(eventConfig.values)}
-        marker={data?.median || 0}
-      /> */}
+        marker={value || 0}
+      />
     </Card>
   );
 };
+
+export const RUMMetricCards = async ({ dsn }: { dsn: string }) => {
+  const data = await api.tinybird.totalRumMetricsForApplication.query({
+    dsn: dsn,
+  });
+  return (
+    <div className="grid grid-cols-1 gap-2 lg:grid-cols-4 md:grid-cols-2">
+      <RUMCard event="CLS" value={data?.cls || 0} />
+      <RUMCard event="FCP" value={data?.fcp || 0} />
+      <RUMCard event="LCP" value={data?.lcp || 0} />
+      <RUMCard event="TTFB" value={data?.ttfb || 0} />
+    </div>
+  );
+};

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/_components/util.ts

···
+export const timeFormater = (time: number) => {
+  if (time < 1000) {
+    return `${new Intl.NumberFormat("us").format(time).toString()}ms`;
+  }
+  return `${new Intl.NumberFormat("us").format(time / 1000).toString()}s`;
+};

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/page.tsx

···
 import { EmptyState } from "@/components/dashboard/empty-state";
 import { api } from "@/trpc/server";
 import { RouteTable } from "./_components/route-table";
-import { RUMMetricCard } from "./_components/rum-metric-card";
+import { RUMMetricCards } from "./_components/rum-metric-card";
+import { Redis } from "@upstash/redis";
+import { auth } from "@/lib/auth";
+import { RequestButton } from "./_components/request-button/request-button";
 
 export const dynamic = "force-dynamic";
 
+const redis = Redis.fromEnv();
+
 export default async function RUMPage() {
-  const workspace = await api.workspace.getWorkspace.query();
-  if (!workspace) {
-    return notFound();
-  }
+  const applications = await api.workspace.getApplicationWorkspaces.query();
 
-  if (workspace.dsn === null) {
+  const session = await auth();
+  if (!session?.user) return null;
+
+  const accessRequested = await redis.sismember(
+    "rum_access_requested",
+    session.user.email
+  );
+
+  if (applications.length === 0) {
     return (
       <EmptyState
         icon="ratio"
         title="Real User Monitoring"
         description="The feature is currently in beta and will be released soon."
-        action={
-          <Button asChild>
-            <Link
-              href="mailto:[e-mail]?subject=Real User Monitoring beta tester"
-              target="_blank"
-            >
-              Contact Us
-            </Link>
-          </Button>
-        }
+        action={<RequestButton hasRequestAccess={accessRequested} />}
       />
     );
   }
-
+  //  ATM We can only have access to one application
   return (
     <>
-      <div className="grid grid-cols-1 gap-2 lg:grid-cols-5 md:grid-cols-2">
-        {webVitalEvents
+      <RUMMetricCards dsn={applications[0].dsn || ""} />
+      {/* {webVitalEvents
           //  Remove FID from the list of events because it's deprecated by google
           .filter((v) => v !== "FID")
           .map((event) => (
             <RUMMetricCard key={event} event={event} />
-          ))}
-      </div>
+          ))} */}
       <div>
-        <RouteTable />
+        <RouteTable dsn={applications[0].dsn || ""} />
       </div>
     </>
   );

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

···
+"use client";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import Link from "next/link";
+
+import type { responseRumPageQuery } from "@openstatus/tinybird/src/validation";
+import type { z } from "zod";
+
+export const columns: ColumnDef<z.infer<typeof responseRumPageQuery>>[] = [
+  {
+    accessorKey: "path",
+    header: "Page",
+    cell: ({ row }) => {
+      return (
+        <Link
+          href={"./status-reports/overview"}
+          className="w-8 max-w-8 hover:underline"
+        >
+          <span className="truncate">{row.getValue("path")}</span>
+        </Link>
+      );
+    },
+  },
+  {
+    accessorKey: "totalSession",
+    header: "Total Session",
+    cell: ({ row }) => {
+      return <>{row.original.totalSession}</>;
+    },
+  },
+  {
+    accessorKey: "cls",
+    header: "CLS",
+    cell: ({ row }) => {
+      return <code>{row.original.cls.toFixed(2)}</code>;
+    },
+  },
+  {
+    accessorKey: "fcp",
+    header: "FCP",
+    cell: ({ row }) => {
+      return <code>{row.original.fcp.toFixed(0)}</code>;
+    },
+  },
+  {
+    accessorKey: "lcp",
+    header: "LCP",
+    cell: ({ row }) => {
+      return <code>{row.original.lcp.toFixed(0)}</code>;
+    },
+  },
+  {
+    accessorKey: "ttfb",
+    header: "TTFB",
+    cell: ({ row }) => {
+      return <code>{row.original.ttfb.toFixed(0)}</code>;
+    },
+  },
+  //   {
+  //     accessorKey: "updatedAt",
+  //     header: "Last Updated",
+  //     cell: ({ row }) => {
+  //       return <span>{formatDate(row.getValue("updatedAt"))}</span>;
+  //     },
+  //   },
+];

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

···
+"use client";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import * as React from "react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@openstatus/ui";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader className="bg-muted/50">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="hover:bg-transparent">
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package.json

···
     "turbo": "1.13.3",
     "typescript": "5.4.5"
   },
-  "packageManager": "pnpm@9.1.2",
+  "packageManager": "pnpm@9.1.3",
   "name": "openstatus",
   "workspaces": [
     "apps/*",

packages/analytics/src/type.ts

···
     }
   | { event: "User Upgraded"; email: string }
   | { event: "User Signed In" }
-  | { event: "User Vercel Beta" }
+  | { event: "User RUM Beta Requested"; email: string }
   | { event: "Notification Created"; provider: string }
   | { event: "Subscribe to Status Page"; slug: string }
   | { event: "Invitation Created"; emailTo: string; workspaceId: number };

packages/api/src/router/tinybird/index.ts

···
         url: z.string().url().optional(),
         region: z.enum(flyRegions).optional(),
         cronTimestamp: z.number().int().optional(),
-      }),
+      })
     )
     .query(async (opts) => {
       return await tb.endpointResponseDetails("7d")(opts.input);
+    }),
+
+  totalRumMetricsForApplication: protectedProcedure
+    .input(z.object({ dsn: z.string() }))
+    .query(async (opts) => {
+      return await tb.applicationRUMMetrics()(opts.input);
+    }),
+  rumMetricsForApplicationPerPage: protectedProcedure
+    .input(z.object({ dsn: z.string() }))
+    .query(async (opts) => {
+      return await tb.applicationRUMMetricsPerPage()(opts.input);
     }),
 });

packages/api/src/router/workspace.ts

···
 
 import { and, eq, sql } from "@openstatus/db";
 import {
+  application,
   monitor,
   notification,
   page,
+  selectApplicationSchema,
   selectWorkspaceSchema,
   user,
   usersToWorkspaces,
···
     return selectWorkspaceSchema.parse(result);
   }),
 
+  getApplicationWorkspaces: protectedProcedure.query(async (opts) => {
+    const result = await opts.ctx.db.query.application.findMany({
+      where: eq(application.workspaceId, opts.ctx.workspace.id),
+    });
+
+    return selectApplicationSchema.array().parse(result);
+  }),
+
   getUserWorkspaces: protectedProcedure.query(async (opts) => {
     const result = await opts.ctx.db.query.usersToWorkspaces.findMany({
       where: eq(usersToWorkspaces.userId, opts.ctx.user.id),
···
         await opts.ctx.db.query.usersToWorkspaces.findFirst({
           where: and(
             eq(usersToWorkspaces.userId, opts.ctx.user.id),
-            eq(usersToWorkspaces.workspaceId, opts.ctx.workspace.id),
+            eq(usersToWorkspaces.workspaceId, opts.ctx.workspace.id)
           ),
         });
 
···
         .where(
           and(
             eq(usersToWorkspaces.userId, opts.input.id),
-            eq(usersToWorkspaces.workspaceId, opts.ctx.workspace.id),
-          ),
+            eq(usersToWorkspaces.workspaceId, opts.ctx.workspace.id)
+          )
         )
         .run();
     }),
···
         await opts.ctx.db.query.usersToWorkspaces.findFirst({
           where: and(
             eq(usersToWorkspaces.userId, opts.ctx.user.id),
-            eq(usersToWorkspaces.workspaceId, opts.ctx.workspace.id),
+            eq(usersToWorkspaces.workspaceId, opts.ctx.workspace.id)
           ),
         });
 

packages/db/.env.example

···
 DATABASE_URL=file:./../../openstatus-dev.db
 DATABASE_AUTH_TOKEN=any-token
-
-CLICKHOUSE_URL=http://localhost:8123
-CLICKHOUSE_USERNAME=default
-CLICKHOUSE_PASSWORD=

packages/db/src/schema/applications/index.ts

···
 export * from "./application";
+export * from "./validation";

packages/db/src/schema/applications/validation.ts

···
+import { createSelectSchema } from "drizzle-zod";
+import { application } from "./application";
+
+export const selectApplicationSchema = createSelectSchema(application);

packages/tinybird/src/os-client.ts

···
 import { flyRegions } from "@openstatus/utils";
 
 import type { tbIngestWebVitalsArray } from "./validation";
-import { tbIngestWebVitals } from "./validation";
+import { responseRumPageQuery, tbIngestWebVitals } from "./validation";
 
 const isProd = process.env.NODE_ENV === "production";
 
···
       opts?: {
         cache?: RequestCache | undefined;
         revalidate: number | undefined;
-      }, // RETHINK: not the best way to handle it
+      } // RETHINK: not the best way to handle it
     ) => {
       try {
         const res = await this.tb.buildPipe({
···
 
   endpointStatusPeriod(
     period: "7d" | "45d",
-    timezone: "UTC" = "UTC", // "EST" | "PST" | "CET"
+    timezone: "UTC" = "UTC" // "EST" | "PST" | "CET"
   ) {
     const parameters = z.object({ monitorId: z.string() });
 
···
       opts?: {
         cache?: RequestCache | undefined;
         revalidate: number | undefined;
-      }, // RETHINK: not the best way to handle it
+      } // RETHINK: not the best way to handle it
     ) => {
       try {
         const res = await this.tb.buildPipe({
···
       datasource: "web_vitals__v0",
       event: tbIngestWebVitals,
     })(data);
+  }
+
+  applicationRUMMetrics() {
+    const parameters = z.object({ dsn: z.string() });
+
+    return async (props: z.infer<typeof parameters>) => {
+      try {
+        const res = await this.tb.buildPipe({
+          pipe: "rum_total_query",
+          parameters,
+          data: z.object({
+            cls: z.number(),
+            fcp: z.number(),
+            fid: z.number(),
+            lcp: z.number(),
+            ttfb: z.number(),
+          }),
+          opts: {
+            next: {
+              revalidate: MIN_CACHE,
+            },
+          },
+        })(props);
+        return res.data[0];
+      } catch (e) {
+        console.error(e);
+      }
+    };
+  }
+  applicationRUMMetricsPerPage() {
+    const parameters = z.object({ dsn: z.string() });
+
+    return async (props: z.infer<typeof parameters>) => {
+      try {
+        const res = await this.tb.buildPipe({
+          pipe: "rum_page_query",
+          parameters,
+          data: responseRumPageQuery,
+          opts: {
+            next: {
+              revalidate: MIN_CACHE,
+            },
+          },
+        })(props);
+        return res.data;
+      } catch (e) {
+        console.error(e);
+      }
+    };
   }
 }
 

packages/tinybird/src/validation.ts

···
   region_code: z.string().default(""),
   timezone: z.string().default(""),
   os: z.string(),
+  timestamp: z.number().int(),
+});
+
+export const responseRumPageQuery = z.object({
+  href: z.string().url(),
+  path: z.string(),
+  totalSession: z.number(),
+  cls: z.number(),
+  fcp: z.number(),
+  fid: z.number(),
+  lcp: z.number(),
+  ttfb: z.number(),
 });
 
 export const tbIngestWebVitalsArray = z.array(tbIngestWebVitals);