Implement webhook inspector
This commit is contained in:
@@ -0,0 +1,190 @@
|
||||
<div wire:poll.15s class="space-y-6">
|
||||
<div class="flex flex-col justify-between gap-6 lg:flex-row lg:items-end">
|
||||
<div class="min-w-0">
|
||||
<div class="flex flex-wrap items-center gap-3 text-sm text-slate-400">
|
||||
<a href="{{ $endpoint->is_public ? route('home') : route('dashboard') }}" class="transition hover:text-cyan-300">{{ $endpoint->is_public ? 'Home' : 'Dashboard' }}</a>
|
||||
<span class="text-slate-700">/</span>
|
||||
<span class="text-slate-500">Inspector</span>
|
||||
<span class="rounded-full border px-2.5 py-1 text-xs {{ $endpoint->is_public ? 'border-amber-300/25 bg-amber-300/10 text-amber-200' : 'border-cyan-300/25 bg-cyan-300/10 text-cyan-200' }}">{{ $endpoint->is_public ? 'Temporary' : 'Private' }}</span>
|
||||
</div>
|
||||
<h1 class="mt-3 truncate text-3xl font-semibold tracking-tight text-white">{{ $endpoint->name ?: 'Webhook endpoint' }}</h1>
|
||||
<p class="mt-2 font-mono text-xs text-slate-500">{{ $endpoint->id }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
@if ($endpoint->is_public)
|
||||
<form action="{{ route('inspect.destroy', ['token' => $endpoint->token]) }}" method="POST">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="rounded-xl border border-rose-300/20 px-4 py-2.5 text-sm font-medium text-rose-300 transition hover:bg-rose-400/10" onclick="return confirm('Delete this endpoint and all captured requests?')">Delete URL</button>
|
||||
</form>
|
||||
@else
|
||||
<button type="button" wire:click="deleteEndpoint" wire:confirm="Delete this endpoint and all captured requests?" class="rounded-xl border border-rose-300/20 px-4 py-2.5 text-sm font-medium text-rose-300 transition hover:bg-rose-400/10">Delete URL</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 xl:grid-cols-[1fr_20rem]">
|
||||
<section class="min-w-0 rounded-2xl border border-white/10 bg-white/[0.04] p-5 sm:p-6">
|
||||
<div class="flex flex-col justify-between gap-4 border-b border-white/10 pb-5 sm:flex-row sm:items-center">
|
||||
<div>
|
||||
<h2 class="font-medium text-white">Incoming requests</h2>
|
||||
<p class="mt-1 text-sm text-slate-500">New requests are stored immediately and appear here live.</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 sm:flex-row">
|
||||
<label class="sr-only" for="request-search">Search requests</label>
|
||||
<input id="request-search" type="search" wire:model.live.debounce.350ms="search" placeholder="Search URI, IP, agent" class="rounded-lg border border-white/10 bg-slate-950/70 px-3 py-2 text-sm text-white outline-none placeholder:text-slate-600 focus:border-cyan-300/60">
|
||||
<label class="sr-only" for="method-filter">Filter method</label>
|
||||
<select id="method-filter" wire:model.live="methodFilter" class="rounded-lg border border-white/10 bg-slate-950/70 px-3 py-2 text-sm text-white outline-none focus:border-cyan-300/60">
|
||||
@foreach (['ALL', 'GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'] as $method)
|
||||
<option value="{{ $method }}">{{ $method === 'ALL' ? 'All methods' : $method }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($webhookRequests->isEmpty())
|
||||
<div class="py-16 text-center">
|
||||
<p class="font-mono text-sm text-slate-500">waiting for request...</p>
|
||||
<p class="mt-2 text-sm text-slate-600">Send a request to the webhook URL below to see it here.</p>
|
||||
</div>
|
||||
@else
|
||||
<div class="mt-5 overflow-x-auto">
|
||||
<table class="w-full min-w-[38rem] text-left text-sm">
|
||||
<thead class="text-xs uppercase tracking-wider text-slate-600">
|
||||
<tr>
|
||||
<th class="pb-3 pr-4 font-medium">Method</th>
|
||||
<th class="pb-3 pr-4 font-medium">URI</th>
|
||||
<th class="pb-3 pr-4 font-medium">Type</th>
|
||||
<th class="pb-3 pr-4 font-medium">Size</th>
|
||||
<th class="pb-3 text-right font-medium">Received</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
@foreach ($webhookRequests as $webhookRequest)
|
||||
<tr wire:key="request-{{ $webhookRequest->id }}" class="group cursor-pointer transition hover:bg-white/[0.03]" wire:click="selectRequest('{{ $webhookRequest->id }}')">
|
||||
<td class="py-4 pr-4 align-top"><span class="rounded-md bg-cyan-300/10 px-2 py-1 font-mono text-xs font-medium text-cyan-200">{{ $webhookRequest->method }}</span></td>
|
||||
<td class="max-w-[24rem] truncate py-4 pr-4 font-mono text-xs text-slate-300">{{ $webhookRequest->request_uri }}</td>
|
||||
<td class="py-4 pr-4 text-xs text-slate-500">{{ $webhookRequest->content_type ?: '—' }}</td>
|
||||
<td class="py-4 pr-4 font-mono text-xs text-slate-500">{{ $webhookRequest->body_size }} B</td>
|
||||
<td class="py-4 text-right text-xs text-slate-500">{{ $webhookRequest->received_at?->diffForHumans() }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-5">{{ $webhookRequests->links() }}</div>
|
||||
@endif
|
||||
</section>
|
||||
|
||||
<aside class="space-y-4">
|
||||
<section class="rounded-2xl border border-white/10 bg-white/[0.04] p-5">
|
||||
<h2 class="font-medium text-white">Send requests here</h2>
|
||||
<p class="mt-1 text-sm text-slate-500">Any HTTP method is accepted.</p>
|
||||
<div class="mt-4 space-y-3">
|
||||
<div>
|
||||
<div class="mb-1 text-[11px] uppercase tracking-wider text-slate-600">Webhook URL</div>
|
||||
<code class="block break-all rounded-lg bg-slate-950/80 p-3 text-xs leading-5 text-cyan-200">{{ $endpoint->webhookUrl() }}</code>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-1 text-[11px] uppercase tracking-wider text-slate-600">Example</div>
|
||||
<code class="block break-all rounded-lg bg-slate-950/80 p-3 text-xs leading-5 text-slate-400">curl -X POST -d '{"event":"test"}' {{ $endpoint->webhookUrl() }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@if (! $endpoint->is_public)
|
||||
<section class="rounded-2xl border border-white/10 bg-white/[0.04] p-5">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h2 class="font-medium text-white">Response</h2>
|
||||
<p class="mt-1 text-sm text-slate-500">Configure what the sender receives.</p>
|
||||
</div>
|
||||
@if ($responseSaved)
|
||||
<span class="text-xs text-emerald-300">Saved</span>
|
||||
@endif
|
||||
</div>
|
||||
<form wire:submit="saveResponse" class="mt-5 space-y-4">
|
||||
<div>
|
||||
<label for="response-status" class="text-xs font-medium uppercase tracking-wider text-slate-500">Status</label>
|
||||
<input id="response-status" type="number" wire:model="responseStatus" min="100" max="599" class="mt-2 w-full rounded-lg border border-white/10 bg-slate-950/70 px-3 py-2 text-sm text-white outline-none focus:border-cyan-300/60">
|
||||
@error('responseStatus') <p class="mt-1 text-xs text-rose-300">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="response-headers" class="text-xs font-medium uppercase tracking-wider text-slate-500">Headers (JSON)</label>
|
||||
<textarea id="response-headers" wire:model="responseHeadersJson" rows="4" spellcheck="false" class="mt-2 w-full rounded-lg border border-white/10 bg-slate-950/70 px-3 py-2 font-mono text-xs text-white outline-none focus:border-cyan-300/60">{{ $responseHeadersJson }}</textarea>
|
||||
@error('responseHeadersJson') <p class="mt-1 text-xs text-rose-300">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="response-body" class="text-xs font-medium uppercase tracking-wider text-slate-500">Body</label>
|
||||
<textarea id="response-body" wire:model="responseBody" rows="5" spellcheck="false" class="mt-2 w-full rounded-lg border border-white/10 bg-slate-950/70 px-3 py-2 font-mono text-xs text-white outline-none focus:border-cyan-300/60">{{ $responseBody }}</textarea>
|
||||
@error('responseBody') <p class="mt-1 text-xs text-rose-300">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<button type="submit" class="w-full rounded-lg bg-white px-3 py-2.5 text-sm font-semibold text-slate-950 transition hover:bg-cyan-50">Save response</button>
|
||||
</form>
|
||||
</section>
|
||||
@else
|
||||
<section class="rounded-2xl border border-amber-300/15 bg-amber-300/[0.05] p-5 text-sm leading-6 text-amber-100/80">
|
||||
This temporary endpoint expires after {{ $endpoint->expires_at?->diffForHumans(null, true) }}. The default response is <code class="font-mono text-amber-200">200 {}</code>.
|
||||
</section>
|
||||
@endif
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@if ($selectedRequest)
|
||||
<section class="rounded-2xl border border-white/10 bg-white/[0.04] p-5 sm:p-6">
|
||||
<div class="flex flex-col justify-between gap-4 border-b border-white/10 pb-5 sm:flex-row sm:items-start">
|
||||
<div>
|
||||
<div class="flex items-center gap-3"><span class="rounded-md bg-cyan-300/10 px-2 py-1 font-mono text-xs font-medium text-cyan-200">{{ $selectedRequest->method }}</span><span class="font-mono text-xs text-slate-500">{{ $selectedRequest->id }}</span></div>
|
||||
<h2 class="mt-3 break-all font-mono text-sm text-white">{{ $selectedRequest->request_uri }}</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button type="button" wire:click="deleteRequest('{{ $selectedRequest->id }}')" wire:confirm="Delete this request?" class="text-sm text-rose-300 transition hover:text-rose-200">Delete request</button>
|
||||
<button type="button" wire:click="clearSelectedRequest" class="rounded-lg border border-white/10 px-3 py-2 text-sm text-slate-300 transition hover:border-white/25 hover:text-white">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid gap-6 lg:grid-cols-2">
|
||||
<div>
|
||||
<h3 class="text-xs font-medium uppercase tracking-wider text-slate-500">Request metadata</h3>
|
||||
<dl class="mt-3 divide-y divide-white/5 rounded-xl border border-white/10 bg-slate-950/40 px-4 text-sm">
|
||||
<div class="flex justify-between gap-4 py-3"><dt class="text-slate-500">Received</dt><dd class="text-right text-slate-200">{{ $selectedRequest->received_at?->format('Y-m-d H:i:s T') }}</dd></div>
|
||||
<div class="flex justify-between gap-4 py-3"><dt class="text-slate-500">Content-Type</dt><dd class="max-w-[65%] break-all text-right font-mono text-xs text-slate-200">{{ $selectedRequest->content_type ?: '—' }}</dd></div>
|
||||
<div class="flex justify-between gap-4 py-3"><dt class="text-slate-500">Size</dt><dd class="text-right text-slate-200">{{ $selectedRequest->body_size }} bytes</dd></div>
|
||||
<div class="flex justify-between gap-4 py-3"><dt class="text-slate-500">IP address</dt><dd class="text-right font-mono text-xs text-slate-200">{{ $selectedRequest->ip_address ?: '—' }}</dd></div>
|
||||
<div class="flex justify-between gap-4 py-3"><dt class="text-slate-500">User-Agent</dt><dd class="max-w-[65%] break-all text-right text-xs text-slate-200">{{ $selectedRequest->user_agent ?: '—' }}</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xs font-medium uppercase tracking-wider text-slate-500">Query parameters</h3>
|
||||
<pre class="mt-3 max-h-48 overflow-auto rounded-xl border border-white/10 bg-slate-950/70 p-4 font-mono text-xs leading-6 text-slate-300">{{ json_encode($selectedRequest->query_parameters ?? [], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid gap-6 lg:grid-cols-2">
|
||||
<div>
|
||||
<h3 class="text-xs font-medium uppercase tracking-wider text-slate-500">Headers</h3>
|
||||
<div class="mt-3 max-h-72 overflow-auto rounded-xl border border-white/10 bg-slate-950/70 p-4 font-mono text-xs leading-6">
|
||||
@forelse ($selectedRequest->headers ?? [] as $name => $values)
|
||||
<div class="flex gap-3"><span class="shrink-0 text-cyan-300">{{ $name }}:</span><span class="break-all text-slate-300">{{ implode(', ', (array) $values) }}</span></div>
|
||||
@empty
|
||||
<span class="text-slate-600">No headers captured.</span>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xs font-medium uppercase tracking-wider text-slate-500">Body</h3>
|
||||
<pre class="mt-3 max-h-72 overflow-auto rounded-xl border border-white/10 bg-slate-950/70 p-4 font-mono text-xs leading-6 text-emerald-200">{{ $selectedRequest->body ?? '' }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($selectedRequest->json_payload !== null)
|
||||
<div class="mt-6">
|
||||
<h3 class="text-xs font-medium uppercase tracking-wider text-slate-500">Parsed JSON</h3>
|
||||
<pre class="mt-3 max-h-72 overflow-auto rounded-xl border border-white/10 bg-slate-950/70 p-4 font-mono text-xs leading-6 text-emerald-200">{{ json_encode($selectedRequest->json_payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
|
||||
</div>
|
||||
@endif
|
||||
</section>
|
||||
@endif
|
||||
</div>
|
||||
Reference in New Issue
Block a user