107 lines
4.2 KiB
HTML
107 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PingQL — New Monitor</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; background: #0a0a0a; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-[#0a0a0a] text-gray-100 min-h-screen">
|
|
<script src="/dashboard/app.js"></script>
|
|
<script src="/dashboard/query-builder.js"></script>
|
|
|
|
<!-- Nav -->
|
|
<nav class="border-b border-gray-800 px-6 py-4 flex items-center justify-between">
|
|
<a href="/dashboard/home" class="text-xl font-bold tracking-tight">Ping<span class="text-blue-400">QL</span></a>
|
|
<button onclick="logout()" class="text-gray-500 hover:text-gray-300 text-sm transition-colors">Logout</button>
|
|
</nav>
|
|
|
|
<main class="max-w-2xl mx-auto px-6 py-8">
|
|
<div class="mb-6">
|
|
<a href="/dashboard/home" class="text-sm text-gray-500 hover:text-gray-300 transition-colors">← Back to monitors</a>
|
|
<h2 class="text-lg font-semibold text-gray-200 mt-2">Create Monitor</h2>
|
|
</div>
|
|
|
|
<form id="create-form" class="space-y-6">
|
|
<div>
|
|
<label class="block text-sm text-gray-400 mb-1.5">Name</label>
|
|
<input id="name" type="text" required placeholder="Production API"
|
|
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 id="url" type="url" required placeholder="https://api.example.com/health"
|
|
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">Ping Interval</label>
|
|
<select id="interval"
|
|
class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
|
|
<option value="10">10 seconds</option>
|
|
<option value="30">30 seconds</option>
|
|
<option value="60" selected>1 minute</option>
|
|
<option value="300">5 minutes</option>
|
|
<option value="600">10 minutes</option>
|
|
<option value="1800">30 minutes</option>
|
|
<option value="3600">1 hour</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm text-gray-400 mb-1.5">Query Conditions <span class="text-gray-600">(optional)</span></label>
|
|
<p class="text-xs text-gray-600 mb-3">Define when this monitor should be considered "up". Defaults to status < 400.</p>
|
|
<div id="query-builder"></div>
|
|
</div>
|
|
|
|
<div id="form-error" class="text-red-400 text-sm hidden"></div>
|
|
|
|
<button type="submit" id="submit-btn"
|
|
class="w-full bg-blue-600 hover:bg-blue-500 text-white font-medium py-3 rounded-lg transition-colors">
|
|
Create Monitor
|
|
</button>
|
|
</form>
|
|
</main>
|
|
|
|
<script>
|
|
if (!requireAuth()) throw 'auth';
|
|
|
|
let currentQuery = null;
|
|
const qb = new QueryBuilder(document.getElementById('query-builder'), (q) => {
|
|
currentQuery = q;
|
|
});
|
|
|
|
document.getElementById('create-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('submit-btn');
|
|
const errEl = document.getElementById('form-error');
|
|
errEl.classList.add('hidden');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Creating...';
|
|
|
|
try {
|
|
const body = {
|
|
name: document.getElementById('name').value.trim(),
|
|
url: document.getElementById('url').value.trim(),
|
|
interval_s: Number(document.getElementById('interval').value),
|
|
};
|
|
if (currentQuery) body.query = currentQuery;
|
|
|
|
await api('/monitors/', { method: 'POST', body });
|
|
window.location.href = '/dashboard/home';
|
|
} catch (err) {
|
|
errEl.textContent = err.message;
|
|
errEl.classList.remove('hidden');
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = 'Create Monitor';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|