165 lines
7.5 KiB
Plaintext
165 lines
7.5 KiB
Plaintext
<%~ include('./partials/head', { title: 'New Monitor', scripts: ['/dashboard/query-builder.js'] }) %>
|
|
<%~ include('./partials/nav', { nav: 'monitors' }) %>
|
|
|
|
<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>
|
|
<div class="flex gap-2">
|
|
<select id="method"
|
|
class="bg-gray-900 border border-gray-800 rounded-lg px-3 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500 font-mono text-sm">
|
|
<option>GET</option>
|
|
<option>POST</option>
|
|
<option>PUT</option>
|
|
<option>PATCH</option>
|
|
<option>DELETE</option>
|
|
<option>HEAD</option>
|
|
<option>OPTIONS</option>
|
|
</select>
|
|
<input id="url" type="url" required placeholder="https://api.example.com/health"
|
|
class="flex-1 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>
|
|
|
|
<!-- Request Headers -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-1.5">
|
|
<label class="text-sm text-gray-400">Headers <span class="text-gray-600">(optional)</span></label>
|
|
<button type="button" id="add-header" class="text-xs text-blue-400 hover:text-blue-300 transition-colors">+ Add header</button>
|
|
</div>
|
|
<div id="headers-list" class="space-y-2"></div>
|
|
</div>
|
|
|
|
<!-- Request Body -->
|
|
<div id="body-section" class="hidden">
|
|
<label class="block text-sm text-gray-400 mb-1.5">Request Body <span class="text-gray-600">(optional)</span></label>
|
|
<textarea id="request-body" rows="4" placeholder='{"key": "value"}'
|
|
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 resize-y"></textarea>
|
|
</div>
|
|
|
|
<div class="flex gap-4">
|
|
<div class="flex-1">
|
|
<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="1">1 second</option>
|
|
<option value="2">2 seconds</option>
|
|
<option value="5">5 seconds</option>
|
|
<option value="10">10 seconds</option>
|
|
<option value="20">20 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 class="flex-1">
|
|
<label class="block text-sm text-gray-400 mb-1.5">Timeout</label>
|
|
<select id="timeout"
|
|
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="5000">5 seconds</option>
|
|
<option value="10000">10 seconds</option>
|
|
<option value="30000" selected>30 seconds</option>
|
|
<option value="60000">60 seconds</option>
|
|
</select>
|
|
</div>
|
|
</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>
|
|
|
|
let currentQuery = null;
|
|
// Show body section for non-GET methods
|
|
const methodSel = document.getElementById('method');
|
|
const bodySection = document.getElementById('body-section');
|
|
function updateBodyVisibility() {
|
|
const m = methodSel.value;
|
|
bodySection.classList.toggle('hidden', ['GET','HEAD','OPTIONS'].includes(m));
|
|
}
|
|
methodSel.addEventListener('change', updateBodyVisibility);
|
|
|
|
// Dynamic headers
|
|
document.getElementById('add-header').addEventListener('click', () => {
|
|
const row = document.createElement('div');
|
|
row.className = 'header-row flex gap-2';
|
|
row.innerHTML = `
|
|
<input type="text" placeholder="Header name" class="hk flex-1 bg-gray-900 border border-gray-800 rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
|
|
<input type="text" placeholder="Value" class="hv flex-1 bg-gray-900 border border-gray-800 rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
|
|
<button type="button" onclick="this.parentElement.remove()" class="px-2 text-gray-600 hover:text-red-400 transition-colors text-sm">✕</button>
|
|
`;
|
|
document.getElementById('headers-list').appendChild(row);
|
|
});
|
|
|
|
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 headers = {};
|
|
document.querySelectorAll('.header-row').forEach(row => {
|
|
const k = row.querySelector('.hk').value.trim();
|
|
const v = row.querySelector('.hv').value.trim();
|
|
if (k) headers[k] = v;
|
|
});
|
|
|
|
const body = {
|
|
name: document.getElementById('name').value.trim(),
|
|
url: document.getElementById('url').value.trim(),
|
|
method: document.getElementById('method').value,
|
|
interval_s: Number(document.getElementById('interval').value),
|
|
timeout_ms: Number(document.getElementById('timeout').value),
|
|
};
|
|
if (Object.keys(headers).length) body.request_headers = headers;
|
|
const rb = document.getElementById('request-body').value.trim();
|
|
if (rb) body.request_body = rb;
|
|
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>
|
|
|
|
<%~ include('./partials/foot') %>
|