ico/pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: custom method, headers, body, timeout on monitors

Browse Source
This commit is contained in:
M1
2026-03-16 15:30:35 +04:00
parent d98aa5e46f
commit 3368dbdd7f
6 changed files with 173 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/views/new.ejs
+88 -15
View File
@@ -16,22 +16,62 @@
<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 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>
<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 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="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 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>
@@ -53,6 +93,27 @@
if (!requireAuth()) throw 'auth';
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;
});
@@ -66,11 +127,23 @@
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(),
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 });