79 lines
4.3 KiB
Plaintext
79 lines
4.3 KiB
Plaintext
<%~ include('./partials/head', { title: 'Notifications' }) %>
|
|
<%~ include('./partials/nav', { nav: 'notifications' }) %>
|
|
|
|
<main class="max-w-3xl mx-auto px-8 py-10 space-y-8">
|
|
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-xl font-semibold text-white">Notification channels</h1>
|
|
<a href="#new" class="btn-primary inline-flex items-center gap-2 px-4 py-2 text-sm">+ New channel</a>
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-500 leading-relaxed">
|
|
Channels are dispatched on status transitions (the "important" beats). Webhooks POST a JSON payload to your URL.
|
|
More providers (Discord, Slack, Email, Telegram) will land here as drop-ins.
|
|
</p>
|
|
|
|
<% if (!it.channels || it.channels.length === 0) { %>
|
|
<section class="card-static p-6 text-sm text-gray-500">
|
|
No channels yet. Create one below to start receiving alerts.
|
|
</section>
|
|
<% } else { %>
|
|
<% it.channels.forEach(function(c) { %>
|
|
<section class="card-static p-6">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<h2 class="text-sm font-semibold text-gray-200 truncate"><%= c.name %></h2>
|
|
<span class="text-xs px-2 py-0.5 rounded-full bg-gray-800/50 border border-border-subtle text-gray-400 font-mono"><%= c.kind %></span>
|
|
<% if (!c.enabled) { %>
|
|
<span class="text-xs px-2 py-0.5 rounded-full bg-yellow-900/20 border border-yellow-800/30 text-yellow-500">paused</span>
|
|
<% } %>
|
|
</div>
|
|
<% if (c.kind === 'webhook' && c.config && c.config.url) { %>
|
|
<code class="text-xs text-gray-500 font-mono break-all"><%= c.config.url %></code>
|
|
<% } %>
|
|
</div>
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
<form action="/dashboard/notifications/<%= c.id %>/test" method="POST" class="inline">
|
|
<button type="submit" class="px-3 py-1.5 rounded-lg border border-border-subtle text-gray-400 hover:text-gray-200 text-xs transition-colors">Test</button>
|
|
</form>
|
|
<form action="/dashboard/notifications/<%= c.id %>/delete" method="POST" class="inline" onsubmit="return confirm('Delete channel \'<%= c.name %>\'? Monitors using it will lose this notification target.')">
|
|
<button type="submit" class="px-3 py-1.5 rounded-lg border border-red-900/30 text-red-400 hover:bg-red-900/20 hover:border-red-800/40 text-xs transition-colors">Delete</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<% }) %>
|
|
<% } %>
|
|
|
|
<% if (it.testResult) { %>
|
|
<div class="text-sm <%= it.testResult.ok ? 'text-green-400' : 'text-red-400' %>">
|
|
<%= it.testResult.ok ? 'Test event sent successfully.' : ('Test failed: ' + it.testResult.error) %>
|
|
</div>
|
|
<% } %>
|
|
|
|
<section id="new" class="card-static p-6">
|
|
<h2 class="text-sm font-semibold text-gray-300 mb-4">New webhook channel</h2>
|
|
<form action="/dashboard/notifications/new" method="POST" class="space-y-4">
|
|
<input type="hidden" name="kind" value="webhook">
|
|
<div>
|
|
<label class="block text-sm text-gray-400 mb-1.5">Name</label>
|
|
<input name="name" type="text" required placeholder="On-call webhook"
|
|
class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm text-gray-400 mb-1.5">URL</label>
|
|
<input name="url" type="url" required placeholder="https://hooks.example.com/pingql"
|
|
class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 font-mono text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm text-gray-400 mb-1.5">HMAC secret <span class="text-gray-600">(optional)</span></label>
|
|
<input name="secret" type="text" placeholder="Used to sign payloads as X-PingQL-Signature"
|
|
class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 font-mono text-sm">
|
|
</div>
|
|
<button type="submit" class="btn-primary px-6 py-2.5 text-sm">Create channel</button>
|
|
</form>
|
|
</section>
|
|
|
|
</main>
|