Merge pull request #6 from Rocketseat/webhooklogsui

chore: split webhook logs vertically due to lack of space
Rocketseat · Mar 14, 2024 · d585a97 · d585a97
2 parents 572ad47 + 09225a6
commit d585a97
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 20 deletions.
diff --git a/apps/web/src/app/(app)/settings/developers/logs/[logId]/page.tsx b/apps/web/src/app/(app)/settings/developers/logs/[logId]/page.tsx
@@ -85,7 +85,7 @@ export default async function WebhookLogsDetails({
   const nextRetryDateFormatted = `(Next retry in ${formattedNextRetryDate.trim()})`
 
   return (
-    <div className="space-y-4 p-6">
+    <div className="space-y-4 py-6">
       <div className="flex items-center gap-2">
         <span className="truncate whitespace-nowrap text-xl font-bold tracking-tight">
           {webhookLog.httpMethod} {new URL(webhookLog.url).pathname}

diff --git a/apps/web/src/app/(app)/settings/developers/logs/layout.tsx b/apps/web/src/app/(app)/settings/developers/logs/layout.tsx
@@ -31,12 +31,12 @@ export default async function WebhookLogsLayout({
         <h2 className="text-2xl font-bold tracking-tight">Webhook logs</h2>
       </div>
       <WebhookLogsFilters />
-      <div className="grid grid-cols-[minmax(0,_1fr)_1px_minmax(0,_1fr)] border-t">
+      <div className="grid grid-rows-[35vh_1fr] border-t">
         <Suspense fallback={<WebhookLogsListLoading />}>
           <WebhookLogsList />
         </Suspense>
-        <Separator orientation="vertical" className="h-full" />
-        <div className="min-h-[400px]">{children}</div>
+        <Separator orientation="horizontal" />
+        <div>{children}</div>
       </div>
     </div>
   )

diff --git a/apps/web/src/app/(app)/settings/developers/logs/webhook-logs-list.tsx b/apps/web/src/app/(app)/settings/developers/logs/webhook-logs-list.tsx
@@ -8,15 +8,15 @@ export async function WebhookLogsList() {
   const { companyWebhookLogs } = await serverClient.getCompanyWebhookLogs()
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col overflow-auto">
       {companyWebhookLogs.map((webhookLog) => {
         const webhookUrl = new URL(webhookLog.url)
 
         return (
           <NavLink
             href={`/settings/developers/logs/${webhookLog.id}`}
             key={webhookLog.id}
-            className="flex items-center gap-4 border-b border-l-4 border-l-zinc-100 px-4 py-2.5 hover:bg-accent/50 data-[current=true]:border-l-teal-400 data-[current=true]:bg-accent dark:border-l-zinc-900 dark:data-[current=true]:border-l-teal-400"
+            className="flex items-center gap-3 border-b border-l-4 border-l-zinc-100 px-4 py-2.5 hover:bg-accent/50 data-[current=true]:border-l-teal-400 data-[current=true]:bg-accent dark:border-l-zinc-900 dark:data-[current=true]:border-l-teal-400"
           >
             {webhookLog.status === 'SUCCESS' && (
               <span className="size-2 shrink-0 rounded-full bg-teal-400" />
@@ -30,29 +30,24 @@ export async function WebhookLogsList() {
               <span className="size-2 shrink-0 rounded-full bg-amber-400" />
             )}
 
-            <Badge
-              variant="secondary"
-              className="w-12 justify-center border border-zinc-400 tabular-nums dark:border-zinc-700"
-            >
+            <span className="w-10 text-center text-xs font-medium tabular-nums">
               {webhookLog.httpCode ?? '-'}
-            </Badge>
-            <Badge
-              variant="secondary"
-              className="justify-center border border-zinc-400 tabular-nums dark:border-zinc-700"
-            >
-              {(webhookLog.trigger as string) ?? '-'}
-            </Badge>
+            </span>
 
-            <div className="flex items-baseline gap-2">
+            <div className="flex flex-1 items-baseline gap-2">
               <span className="font-mono text-sm font-semibold">
                 {webhookLog.httpMethod}
               </span>
               <span className="text-xs text-muted-foreground">
                 {webhookUrl.hostname.concat(webhookUrl.pathname)}
               </span>
             </div>
-            <time className="ml-auto whitespace-nowrap text-sm text-muted-foreground">
-              {dayjs(webhookLog.createdAt).fromNow()}
+
+            <Badge variant="outline">
+              {(webhookLog.trigger as string) ?? '-'}
+            </Badge>
+            <time className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
+              {dayjs(webhookLog.createdAt).fromNow(true)}
             </time>
           </NavLink>
         )