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

feat: detail edit form matches new monitor form (method, headers, body, timeout)

This commit is contained in:
M1 2026-03-16 17:04:30 +04:00
parent ef2b2c043d
commit a681833d8d
1 changed files with 108 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
apps/web/src/views/detail.ejs
View File

@ -79,33 +79,71 @@
<!-- Edit form -->
<div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
<h3 class="text-sm text-gray-400 mb-4">Edit Monitor</h3>
<form id="edit-form" class="space-y-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label class="block text-xs text-gray-500 mb-1">Name</label>
<input id="edit-name" type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm">
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">URL</label>
<input id="edit-url" type="url" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm">
<form id="edit-form" class="space-y-5">
<div>
<label class="block text-sm text-gray-400 mb-1.5">Name</label>
<input id="edit-name" type="text"
class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100 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="edit-method"
class="bg-gray-800 border border-gray-700 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="edit-url" type="url"
class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
</div>
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">Interval</label>
<select id="edit-interval" class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm">
<option value="10">10s</option>
<option value="30">30s</option>
<option value="60">1m</option>
<option value="300">5m</option>
<option value="600">10m</option>
<option value="1800">30m</option>
<option value="3600">1h</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="edit-add-header" class="text-xs text-blue-400 hover:text-blue-300 transition-colors">+ Add header</button>
</div>
<div id="edit-headers-list" class="space-y-2"></div>
</div>
<div id="edit-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="edit-request-body" rows="4" placeholder='{"key": "value"}'
class="w-full bg-gray-800 border border-gray-700 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">Interval</label>
<select id="edit-interval" class="w-full bg-gray-800 border border-gray-700 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">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="edit-timeout" class="w-full bg-gray-800 border border-gray-700 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">30 seconds</option>
<option value="60000">60 seconds</option>
</select>
</div>
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">Query</label>
<label class="block text-sm text-gray-400 mb-1.5">Conditions <span class="text-gray-600">(optional)</span></label>
<p class="text-xs text-gray-600 mb-3">Define up/down conditions. Defaults to status &lt; 400.</p>
<div id="edit-query-builder"></div>
</div>
<div id="edit-error" class="text-red-400 text-sm hidden"></div>
<button type="submit" class="bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-6 py-2.5 rounded-lg transition-colors">Save Changes</button>
</form>
@ -123,6 +161,30 @@
editQuery = q;
});
// Method/body visibility
const editMethod = document.getElementById('edit-method');
const editBodySection = document.getElementById('edit-body-section');
function updateEditBodyVisibility() {
editBodySection.classList.toggle('hidden', ['GET','HEAD','OPTIONS'].includes(editMethod.value));
}
editMethod.addEventListener('change', updateEditBodyVisibility);
// Dynamic headers
document.getElementById('edit-add-header').addEventListener('click', () => {
addHeaderRow(document.getElementById('edit-headers-list'));
});
function addHeaderRow(container, key='', value='') {
const row = document.createElement('div');
row.className = 'header-row flex gap-2';
row.innerHTML = `
<input type="text" value="${escapeHtml(key)}" placeholder="Header name" class="hk flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
<input type="text" value="${escapeHtml(value)}" placeholder="Value" class="hv flex-1 bg-gray-800 border border-gray-700 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>
`;
container.appendChild(row);
}
async function load() {
try {
const data = await api(`/monitors/${monitorId}`);
@ -190,7 +252,18 @@
// Edit form
document.getElementById('edit-name').value = data.name;
document.getElementById('edit-url').value = data.url;
document.getElementById('edit-method').value = data.method || 'GET';
document.getElementById('edit-interval').value = String(data.interval_s);
document.getElementById('edit-timeout').value = String(data.timeout_ms || 30000);
document.getElementById('edit-request-body').value = data.request_body || '';
updateEditBodyVisibility();
const headersList = document.getElementById('edit-headers-list');
headersList.innerHTML = '';
if (data.request_headers && typeof data.request_headers === 'object') {
Object.entries(data.request_headers).forEach(([k, v]) => addHeaderRow(headersList, k, v));
}
editQuery = data.query;
editQb.setQuery(data.query);
} catch (e) {
@ -252,11 +325,24 @@
const errEl = document.getElementById('edit-error');
errEl.classList.add('hidden');
try {
const headers = {};
document.querySelectorAll('#edit-headers-list .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('edit-name').value.trim(),
url: document.getElementById('edit-url').value.trim(),
name: document.getElementById('edit-name').value.trim(),
url: document.getElementById('edit-url').value.trim(),
method: document.getElementById('edit-method').value,
interval_s: Number(document.getElementById('edit-interval').value),
timeout_ms: Number(document.getElementById('edit-timeout').value),
};
if (Object.keys(headers).length) body.request_headers = headers;
else body.request_headers = null;
const rb = document.getElementById('edit-request-body').value.trim();
body.request_body = rb || null;
if (editQuery) body.query = editQuery;
await api(`/monitors/${monitorId}`, { method: 'PATCH', body });
load();