feat(admin): show API request log storage stats

apps/web/src/app/admin/api-request-log/page.tsx

@@ -13,6 +13,8 @@ import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Download } from 'lucide-react';
 
+const BYTES_PER_MEGABYTE = 1024 * 1024;
+
 export default function ApiRequestLogPage() {
   const [userId, setUserId] = useState('');
   const [startDate, setStartDate] = useState('');
@@ -22,7 +24,7 @@ export default function ApiRequestLogPage() {
   const [errorsOnly, setErrorsOnly] = useState(false);
 
   const trpc = useTRPC();
-  const oldestEntryQuery = useQuery(trpc.admin.apiRequestLog.getOldestEntry.queryOptions());
+  const summaryQuery = useQuery(trpc.admin.apiRequestLog.getSummary.queryOptions());
 
   function handleDownload() {
     const params = new URLSearchParams();
@@ -54,15 +56,22 @@ export default function ApiRequestLogPage() {
       breadcrumbs={<BreadcrumbItem className="hidden md:block">API Request Log</BreadcrumbItem>}
     >
       <div className="w-full max-w-xl space-y-4">
-        {oldestEntryQuery.data && (
-          <p className="text-muted-foreground text-sm">
-            Oldest entry is{' '}
-            <span title={new Date(oldestEntryQuery.data.created_at).toLocaleString()}>
-              {formatDistanceToNow(new Date(oldestEntryQuery.data.created_at), {
-                addSuffix: true,
-              })}
-            </span>
-            .
+        {summaryQuery.data && (
+          <p className="text-muted-foreground text-sm tabular-nums">
+            {summaryQuery.data.recordCount.toLocaleString()}{' '}
+            {summaryQuery.data.recordCount === 1 ? 'record' : 'records'} ·{' '}
+            {(summaryQuery.data.sizeBytes / BYTES_PER_MEGABYTE).toFixed(1)} MB
+            {summaryQuery.data.oldestCreatedAt && (
+              <>
+                {' '}
+                · oldest entry{' '}
+                <span title={new Date(summaryQuery.data.oldestCreatedAt).toLocaleString()}>
+                  {formatDistanceToNow(new Date(summaryQuery.data.oldestCreatedAt), {
+                    addSuffix: true,
+                  })}
+                </span>
+              </>
+            )}
           </p>
         )}
         <Card>

apps/web/src/routers/admin-router.ts

@@ -80,7 +80,21 @@ import { adminUserDeletionQueueRouter } from '@/routers/admin/user-deletion-queu
 import { workerInstanceId } from '@/lib/kiloclaw/instance-registry';
 import { clearTrialInactivityStopAfterStart } from '@/lib/kiloclaw/instance-lifecycle';
 import * as z from 'zod';
-import { eq, and, ne, or, ilike, like, desc, asc, sql, isNull, inArray } from 'drizzle-orm';
+import {
+  eq,
+  and,
+  ne,
+  or,
+  ilike,
+  like,
+  desc,
+  asc,
+  sql,
+  isNull,
+  inArray,
+  count,
+  min,
+} from 'drizzle-orm';
 import type { InferColumnsDataTypes } from 'drizzle-orm';
 import { findUsersByIds, findUserById } from '@/lib/user';
 import { blockUser } from '@/lib/user/block';
@@ -2118,13 +2132,18 @@ export const adminRouter = createTRPCRouter({
   }),
 
   apiRequestLog: createTRPCRouter({
-    getOldestEntry: adminProcedure.query(async () => {
-      const [oldest] = await db
-        .select({ created_at: api_request_log.created_at })
-        .from(api_request_log)
-        .orderBy(asc(api_request_log.created_at))
-        .limit(1);
-      return oldest ? { created_at: oldest.created_at } : null;
+    getSummary: adminProcedure.query(async () => {
+      const [summary] = await db
+        .select({
+          recordCount: count(),
+          sizeBytes: sql<number>`pg_total_relation_size('api_request_log'::regclass)`.mapWith(
+            Number
+          ),
+          oldestCreatedAt: min(api_request_log.created_at),
+        })
+        .from(api_request_log);
+
+      return summary;
     }),
   }),