Skip to content

Commit

Permalink
feat: new webhook logs listing
Browse files Browse the repository at this point in the history
  • Loading branch information
@diego3g
diego3g committed Mar 28, 2024
1 parent 242a0ba commit bc41fd6
Show file tree
Hide file tree
Showing 18 changed files with 2,037 additions and 1,407 deletions.
16 changes: 10 additions & 6 deletions apps/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@
"@nivo/auth": "workspace:*",
"@nivo/bunny": "workspace:*",
"@nivo/cloudflare": "workspace:*",
"@nivo/crypto": "workspace:*",
"@nivo/dayjs": "workspace:*",
"@nivo/drizzle": "workspace:*",
"@nivo/env": "workspace:*",
"@nivo/ffmpeg": "workspace:*",
"@nivo/openai": "workspace:*",
"@nivo/crypto": "workspace:*",
"@nivo/qstash": "workspace:*",
"@nivo/trpc": "workspace:*",
"@nivo/webhooks": "workspace:*",
Expand All @@ -45,10 +45,11 @@
"@radix-ui/react-toggle": "^1.0.3",
"@radix-ui/react-toggle-group": "^1.0.4",
"@radix-ui/react-tooltip": "1.0.6",
"@tanstack/react-query": "5.18.0",
"@trpc/client": "next",
"@trpc/react-query": "next",
"@trpc/server": "next",
"@tanstack/react-query": "5.28.8",
"@trpc/client": "11.0.0-next.324",
"@trpc/next": "11.0.0-next.324",
"@trpc/react-query": "11.0.0-next.324",
"@trpc/server": "11.0.0-next.324",
"ai": "2.1.17",
"apexcharts": "^3.45.2",
"axios": "1.4.0",
Expand All @@ -66,6 +67,7 @@
"node-webvtt": "1.9.4",
"react": "^18.2.0",
"react-apexcharts": "^1.4.1",
"react-day-picker": "8.10.0",
"react-dom": "^18.2.0",
"react-dropzone": "14.2.3",
"react-hook-form": "7.49.3",
Expand Down Expand Up @@ -94,7 +96,9 @@
},
"eslintConfig": {
"root": true,
"extends": ["@nivo/eslint-config/next"]
"extends": [
"@nivo/eslint-config/next"
]
},
"prettier": "@nivo/prettier"
}
1 change: 1 addition & 0 deletions apps/web/src/app/(app)/settings/aside-link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { NavLink } from '@/components/nav-link'
export function AsideLink(props: ComponentProps<typeof Link>) {
return (
<NavLink
shouldMatchExact
className="inline-flex h-9 items-center justify-start whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-[current=true]:bg-muted dark:hover:bg-accent dark:data-[current=true]:bg-accent"
{...props}
/>
Expand Down
69 changes: 0 additions & 69 deletions apps/web/src/app/(app)/settings/developers/logs/[logId]/loading.tsx
View file

This file was deleted.

249 changes: 128 additions & 121 deletions apps/web/src/app/(app)/settings/developers/logs/[logId]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { dayjs } from '@nivo/dayjs'
import { getHighlighter } from 'shiki'

import { InterceptedSheetContent } from '@/components/intercepted-sheet-content'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { Sheet, SheetHeader, SheetTitle } from '@/components/ui/sheet'
import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
import { serverClient } from '@/lib/trpc/server'

Expand Down Expand Up @@ -85,129 +87,134 @@ export default async function WebhookLogsDetails({
const nextRetryDateFormatted = `(Next retry in ${formattedNextRetryDate.trim()})`

return (
<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}
</span>
</div>
<div className="rounded-md border">
<Table>
<TableBody>
<TableRow>
<TableCell style={{ width: 140 }}>Execution ID</TableCell>
<TableCell className="text-xs text-muted-foreground">
{webhookLog.id}
</TableCell>
</TableRow>
<TableRow>
<TableCell>Status</TableCell>
<TableCell>
{webhookLog.status === 'SUCCESS' && (
<div className="flex items-center gap-2">
<span className="size-2 shrink-0 rounded-full bg-teal-400" />
<span className="font-semibold">Success</span>
</div>
)}

{webhookLog.status === 'ERROR' && (
<div className="flex items-center gap-2">
<span className="size-2 shrink-0 rounded-full bg-red-400" />
<span className="font-semibold">Error</span>
</div>
)}

{webhookLog.status === 'PENDING' && (
<div className="flex items-center gap-2">
<span className="size-2 shrink-0 rounded-full bg-amber-400" />
<span className="font-semibold">Pending</span>
</div>
)}
</TableCell>
</TableRow>
<TableRow>
<TableCell>Error reason</TableCell>
<TableCell>{webhookLog.errorReason || '-'}</TableCell>
</TableRow>
<TableRow>
<TableCell>Number of retries</TableCell>
<TableCell>
{webhookLog.status === 'ERROR'
? `${webhookLog.numberOfRetries} ${
isNextRetryDateInFuture ? nextRetryDateFormatted : ''
}`
: '-'}
</TableCell>
</TableRow>
<TableRow>
<TableCell>HTTP Status</TableCell>
<TableCell>
<Badge variant="secondary">{webhookLog.httpCode ?? '-'}</Badge>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Started at</TableCell>
<TableCell>
{dayjs(webhookLog.createdAt).format('MMMM D h:mm A')}
</TableCell>
</TableRow>
<TableRow>
<TableCell>Finished at</TableCell>
{webhookLog.finishedAt ? (
<Sheet defaultOpen>
<InterceptedSheetContent className="overflow-auto">
<SheetHeader>
<SheetTitle>
{webhookLog.httpMethod} {new URL(webhookLog.url).pathname}
</SheetTitle>
</SheetHeader>

<div className="space-y-4 py-4">
<Table>
<TableBody>
<TableRow>
<TableCell style={{ width: 140 }}>Execution ID</TableCell>
<TableCell className="text-xs text-muted-foreground">
{webhookLog.id}
</TableCell>
</TableRow>
<TableRow>
<TableCell>Status</TableCell>
<TableCell>
<div className="flex items-baseline gap-2">
{dayjs(webhookLog.finishedAt).format('MMMM D h:mm A')}
<span className="text-muted-foreground">/</span>
<span className="text-xs">
{dayjs(webhookLog.finishedAt).diff(
webhookLog.createdAt,
'seconds',
)}{' '}
second(s)
</span>
</div>
{webhookLog.status === 'SUCCESS' && (
<div className="flex items-center gap-2">
<span className="size-2 shrink-0 rounded-full bg-teal-400" />
<span className="font-semibold">Success</span>
</div>
)}

{webhookLog.status === 'ERROR' && (
<div className="flex items-center gap-2">
<span className="size-2 shrink-0 rounded-full bg-red-400" />
<span className="font-semibold">Error</span>
</div>
)}

{webhookLog.status === 'PENDING' && (
<div className="flex items-center gap-2">
<span className="size-2 shrink-0 rounded-full bg-amber-400" />
<span className="font-semibold">Pending</span>
</div>
)}
</TableCell>
) : (
<TableCell>-</TableCell>
)}
</TableRow>
</TableBody>
</Table>
</div>
<Separator />
{highlightedRequestHeaders && (
<div className="space-y-2">
<span className="text-sm font-semibold tracking-tight">
Request Headers
</span>
<div
className="max-h-72 overflow-y-scroll bg-muted p-6 text-sm"
dangerouslySetInnerHTML={{ __html: highlightedRequestHeaders }}
/>
</div>
)}
{highlightedRequestBody && (
<div className="space-y-2">
<span className="text-sm font-semibold tracking-tight">
Request Body
</span>
<div
className="max-h-72 overflow-y-scroll bg-muted p-6 text-sm"
dangerouslySetInnerHTML={{ __html: highlightedRequestBody }}
/>
</div>
)}
{highlightedResponseBody && (
<div className="space-y-2">
<span className="text-sm font-semibold tracking-tight">
Response Body
</span>
<div
className="max-h-72 overflow-y-scroll bg-muted p-6 text-sm"
dangerouslySetInnerHTML={{ __html: highlightedResponseBody }}
/>
</TableRow>
<TableRow>
<TableCell>Error reason</TableCell>
<TableCell>{webhookLog.errorReason || '-'}</TableCell>
</TableRow>
<TableRow>
<TableCell>Number of retries</TableCell>
<TableCell>
{webhookLog.status === 'ERROR'
? `${webhookLog.numberOfRetries} ${
isNextRetryDateInFuture ? nextRetryDateFormatted : ''
}`
: '-'}
</TableCell>
</TableRow>
<TableRow>
<TableCell>HTTP Status</TableCell>
<TableCell>
<Badge variant="secondary">
{webhookLog.httpCode ?? '-'}
</Badge>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Started at</TableCell>
<TableCell>
{dayjs(webhookLog.createdAt).format('MMMM D h:mm A')}
</TableCell>
</TableRow>
<TableRow>
<TableCell>Finished at</TableCell>
{webhookLog.finishedAt ? (
<TableCell>
<div className="flex items-baseline gap-2">
{dayjs(webhookLog.finishedAt).format('MMMM D h:mm A')}
<span className="text-muted-foreground">/</span>
<span className="text-xs">
{dayjs(webhookLog.finishedAt).diff(
webhookLog.createdAt,
'seconds',
)}{' '}
second(s)
</span>
</div>
</TableCell>
) : (
<TableCell>-</TableCell>
)}
</TableRow>
</TableBody>
</Table>
<Separator />
{highlightedRequestHeaders && (
<div className="space-y-2">
<span className="text-sm font-semibold tracking-tight">
Request Headers
</span>
<div
className="max-h-72 overflow-y-scroll bg-muted p-6 text-sm"
dangerouslySetInnerHTML={{ __html: highlightedRequestHeaders }}
/>
</div>
)}
{highlightedRequestBody && (
<div className="space-y-2">
<span className="text-sm font-semibold tracking-tight">
Request Body
</span>
<div
className="max-h-72 overflow-y-scroll bg-muted p-6 text-sm"
dangerouslySetInnerHTML={{ __html: highlightedRequestBody }}
/>
</div>
)}
{highlightedResponseBody && (
<div className="space-y-2">
<span className="text-sm font-semibold tracking-tight">
Response Body
</span>
<div
className="max-h-72 overflow-y-scroll bg-muted p-6 text-sm"
dangerouslySetInnerHTML={{ __html: highlightedResponseBody }}
/>
</div>
)}
</div>
)}
</div>
</InterceptedSheetContent>
</Sheet>
)
}
Loading

0 comments on commit bc41fd6

Please sign in to comment.