refactor: extract monitor form into shared partial for create and edit
This commit is contained in:
@@ -120,90 +120,7 @@
|
||||
<!-- 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-5">
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-400 mb-1.5">Name</label>
|
||||
<input id="edit-name" type="text" value="<%= m.name %>"
|
||||
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">
|
||||
<% ['GET','POST','PUT','PATCH','DELETE','HEAD','OPTIONS'].forEach(function(method) { %>
|
||||
<option <%= (m.method || 'GET') === method ? 'selected' : '' %>><%= method %></option>
|
||||
<% }) %>
|
||||
</select>
|
||||
<input id="edit-url" type="url" value="<%= m.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>
|
||||
<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">
|
||||
<% if (m.request_headers && typeof m.request_headers === 'object') {
|
||||
Object.entries(m.request_headers).forEach(function([k, v]) { %>
|
||||
<div class="header-row flex gap-2">
|
||||
<input type="text" value="<%= k %>" 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="<%= v %>" 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>
|
||||
</div>
|
||||
<% }) } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="edit-body-section" class="<%= ['GET','HEAD','OPTIONS'].includes(m.method || 'GET') ? '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"><%= m.request_body || '' %></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">
|
||||
<% [['1','1 second'],['2','2 seconds'],['5','5 seconds'],['10','10 seconds'],['20','20 seconds'],['30','30 seconds'],['60','1 minute'],['300','5 minutes'],['600','10 minutes'],['1800','30 minutes'],['3600','1 hour']].forEach(function([val, label]) { %>
|
||||
<option value="<%= val %>" <%= String(m.interval_s) === val ? 'selected' : '' %>><%= label %></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">
|
||||
<% [['5000','5 seconds'],['10000','10 seconds'],['30000','30 seconds'],['60000','60 seconds']].forEach(function([val, label]) { %>
|
||||
<option value="<%= val %>" <%= String(m.timeout_ms || 30000) === val ? 'selected' : '' %>><%= label %></option>
|
||||
<% }) %>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-400 mb-1.5">Regions <span class="text-gray-600">(leave all unselected to use all regions)</span></label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<% [['eu-central','🇩🇪 EU Central'],['us-east','🇺🇸 US East'],['us-west','🇺🇸 US West'],['ap-southeast','🇸🇬 AP Southeast']].forEach(function([val, label]) { %>
|
||||
<label class="flex items-center gap-2 bg-gray-800 border border-gray-700 hover:border-gray-500 rounded-lg px-3 py-2 cursor-pointer transition-colors">
|
||||
<input type="checkbox" value="<%= val %>" class="edit-region-check accent-blue-500" <%= (m.regions && m.regions.includes(val)) ? 'checked' : '' %>> <span class="text-sm text-gray-300"><%- label %></span>
|
||||
</label>
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<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 < 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>
|
||||
<%~ include('./partials/monitor-form', { _form: { monitor: m, isEdit: true, prefix: 'edit-', bg: 'bg-gray-800', border: 'border-gray-700' } }) %>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -211,36 +128,9 @@
|
||||
<script>
|
||||
|
||||
const monitorId = '<%= m.id %>';
|
||||
let editQuery = <%~ JSON.stringify(m.query || null) %>;
|
||||
|
||||
const editQb = new QueryBuilder(document.getElementById('edit-query-builder'), (q) => {
|
||||
editQuery = q;
|
||||
});
|
||||
editQb.setQuery(editQuery);
|
||||
|
||||
// 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);
|
||||
}
|
||||
const _prefix = 'edit-';
|
||||
const _initialQuery = <%~ JSON.stringify(m.query || null) %>;
|
||||
<%~ include('./partials/monitor-form-js') %>
|
||||
|
||||
// Toggle button
|
||||
document.getElementById('toggle-btn').onclick = async () => {
|
||||
@@ -261,26 +151,7 @@
|
||||
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(),
|
||||
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;
|
||||
body.regions = [...document.querySelectorAll('.edit-region-check:checked')].map(el => el.value);
|
||||
const body = collectFormData(_prefix);
|
||||
await api(`/monitors/${monitorId}`, { method: 'PATCH', body });
|
||||
location.reload();
|
||||
} catch (err) {
|
||||
|
||||
Reference in New Issue
Block a user