feat: New logs page

apps/billing/src/lib/db-marketing/schemas/searchQuery.ts

@@ -1,4 +1,4 @@
-import { relations, sql } from "drizzle-orm";
+import { relations } from "drizzle-orm";
 import {
   boolean,
   index,

apps/billing/src/lib/db-marketing/schemas/serper.ts

@@ -1,7 +1,4 @@
-import { db } from "@/lib/db-marketing/client";
-import type * as serper from "@/lib/serper";
 import { relations } from "drizzle-orm";
-import { eq } from "drizzle-orm";
 import { index, int, json, mysqlTable, text, timestamp, varchar } from "drizzle-orm/mysql-core";
 import { createSelectSchema } from "drizzle-zod";
 import type { z } from "zod";

apps/billing/src/lib/tinybird.ts

@@ -1,5 +1,4 @@
 import { Tinybird as Client } from "@chronark/zod-bird";
-import { newId } from "@unkey/id";
 import { z } from "zod";
 
 export class Tinybird {

apps/billing/src/trigger/downgrade-requests.ts

@@ -1,7 +1,5 @@
 import { connectDatabase, eq, schema } from "@/lib/db";
-import { env } from "@/lib/env";
-import { eventTrigger } from "@trigger.dev/sdk";
-import { logger, task } from "@trigger.dev/sdk/v3";
+import { task } from "@trigger.dev/sdk/v3";
 
 export const downgradeTask = task({
   id: "billing_downgrade",

apps/billing/src/trigger/invoicing.ts

@@ -2,7 +2,6 @@ import { logger, schedules } from "@trigger.dev/sdk/v3";
 
 import { connectDatabase } from "@/lib/db";
 
-import Stripe from "stripe";
 import { createInvoiceTask } from "./create-invoice";
 import { downgradeTask } from "./downgrade-requests";
 

apps/dashboard/app/(app)/@breadcrumb/authorization/permissions/[permissionId]/page.tsx

@@ -8,7 +8,6 @@ import {
 } from "@/components/ui/breadcrumb";
 
 import { BreadcrumbSkeleton } from "@/components/dashboard/breadcrumb-skeleton";
-import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { unstable_cache as cache } from "next/cache";
 import { Suspense } from "react";

apps/dashboard/app/(app)/@breadcrumb/authorization/roles/[roleId]/page.tsx

@@ -8,7 +8,6 @@ import {
 } from "@/components/ui/breadcrumb";
 
 import { BreadcrumbSkeleton } from "@/components/dashboard/breadcrumb-skeleton";
-import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { unstable_cache as cache } from "next/cache";
 import { Suspense } from "react";

apps/dashboard/app/(app)/@breadcrumb/authorization/roles/page.tsx

@@ -1,7 +1,6 @@
 import {
   Breadcrumb,
   BreadcrumbItem,
-  BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,

apps/dashboard/app/(app)/@breadcrumb/identities/page.tsx

@@ -1,11 +1,8 @@
-import { Badge } from "@/components/ui/badge";
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 
 export const dynamic = "force-dynamic";

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-ratelimit.tsx

@@ -25,7 +25,6 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
-import type { Key } from "@unkey/db";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";

apps/dashboard/app/(app)/apis/client.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
-import { PageHeader } from "@/components/dashboard/page-header";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";

apps/dashboard/app/(app)/authorization/layout.tsx

@@ -1,12 +1,8 @@
 import type * as React from "react";
 
-import { Banner } from "@/components/banner";
 import { Navbar } from "@/components/dashboard/navbar";
-import { PageHeader } from "@/components/dashboard/page-header";
-import { OptIn } from "@/components/opt-in";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 
 export const dynamic = "force-dynamic";

apps/dashboard/app/(app)/identities/layout.tsx

@@ -1,12 +1,8 @@
 import type * as React from "react";
 
-import { Banner } from "@/components/banner";
-import { Navbar } from "@/components/dashboard/navbar";
-import { PageHeader } from "@/components/dashboard/page-header";
 import { OptIn } from "@/components/opt-in";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 
 export const dynamic = "force-dynamic";

apps/dashboard/app/(app)/identities/page.tsx

@@ -1,18 +1,10 @@
 import { redirect } from "next/navigation";
 
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import { Loader2, Scan } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { unstable_cache as cache } from "next/cache";
 import { parseAsInteger, parseAsString } from "nuqs/server";
 import { Suspense } from "react";

apps/dashboard/app/(app)/layout.tsx

@@ -40,7 +40,7 @@ export default async function Layout({ children, breadcrumb }: LayoutProps) {
         />
 
         <div className="isolate bg-background lg:border-l border-t lg:rounded-tl-[0.625rem] border-border w-full overflow-x-auto flex flex-col items-center lg:mt-2">
-          <div className="w-full max-w-[1152px] p-4 lg:p-8">
+          <div className="w-full p-4 lg:p-8">
             {workspace.enabled ? (
               <>
                 {/* Hacky way to make the breadcrumbs line up with the Teamswitcher on the left, because that also has h12 */}

apps/dashboard/app/(app)/logs/components/chart.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { format } from "date-fns";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+export type Log = {
+  request_id: string;
+  time: number;
+  workspace_id: string;
+  host: string;
+  method: string;
+  path: string;
+  request_headers: string[];
+  request_body: string;
+  response_status: number;
+  response_headers: string[];
+  response_body: string;
+  error: string;
+  service_latency: number;
+};
+
+const chartConfig = {
+  success: {
+    label: "Success",
+    color: "hsl(var(--chart-3))",
+  },
+  warning: {
+    label: "Warning",
+    color: "hsl(var(--chart-4))",
+  },
+  error: {
+    label: "Error",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig;
+
+function aggregateData(data: Log[]) {
+  const aggregatedData: {
+    date: string;
+    success: number;
+    warning: number;
+    error: number;
+  }[] = [];
+  const intervalMs = 60 * 1000 * 10;
+
+  if (data.length === 0) {
+    return aggregatedData;
+  }
+
+  const startOfDay = new Date(data[0].time).setHours(0, 0, 0, 0);
+  const endOfDay = startOfDay + 24 * 60 * 60 * 1000;
+
+  for (
+    let timestamp = startOfDay;
+    timestamp < endOfDay;
+    timestamp += intervalMs
+  ) {
+    const filteredLogs = data.filter(
+      (d) => d.time >= timestamp && d.time < timestamp + intervalMs
+    );
+
+    const success = filteredLogs.filter(
+      (log) => log.response_status >= 200 && log.response_status < 300
+    ).length;
+    const warning = filteredLogs.filter(
+      (log) => log.response_status >= 400 && log.response_status < 500
+    ).length;
+    const error = filteredLogs.filter(
+      (log) => log.response_status >= 500
+    ).length;
+
+    aggregatedData.push({
+      date: format(timestamp, "yyyy-MM-dd'T'HH:mm:ss"),
+      success,
+      warning,
+      error,
+    });
+  }
+
+  return aggregatedData;
+}
+
+export function LogsChart({ logs }: { logs: Log[] }) {
+  const data = aggregateData(logs);
+
+  return (
+    <ChartContainer config={chartConfig} className="h-[125px] w-full">
+      <BarChart accessibilityLayer data={data}>
+        <XAxis
+          dataKey="date"
+          tickLine={false}
+          axisLine={false}
+          dx={-40}
+          tickFormatter={(value) => {
+            const date = new Date(value);
+            return date.toLocaleDateString("en-US", {
+              month: "short",
+              day: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit",
+              hour12: true,
+            });
+          }}
+        />
+        <CartesianGrid strokeDasharray="2" stroke="#DFE2E6" vertical={false} />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              className="w-[200px]"
+              nameKey="views"
+              labelFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  hour12: true,
+                });
+              }}
+            />
+          }
+        />
+        <Bar
+          dataKey="success"
+          stackId="a"
+          fill="var(--color-success)"
+          radius={3}
+        />
+        <Bar
+          dataKey="warning"
+          stackId="a"
+          fill="var(--color-warning)"
+          radius={3}
+        />
+        <Bar dataKey="error" stackId="a" fill="var(--color-error)" radius={3} />
+      </BarChart>
+    </ChartContainer>
+  );
+}