refactor: extract monitor form into shared partial for create and edit
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
let _currentQuery = _initialQuery;
|
||||
|
||||
// Query builder
|
||||
const _qb = new QueryBuilder(document.getElementById(_prefix + 'query-builder'), (q) => {
|
||||
_currentQuery = q;
|
||||
});
|
||||
if (_initialQuery) _qb.setQuery(_initialQuery);
|
||||
|
||||
// Method/body visibility
|
||||
const _methodSel = document.getElementById(_prefix + 'method');
|
||||
const _bodySection = document.getElementById(_prefix + 'body-section');
|
||||
_methodSel.addEventListener('change', () => {
|
||||
_bodySection.classList.toggle('hidden', ['GET','HEAD','OPTIONS'].includes(_methodSel.value));
|
||||
});
|
||||
|
||||
// Dynamic headers
|
||||
document.querySelector('.' + (_prefix || '') + 'add-header').addEventListener('click', () => {
|
||||
const container = document.getElementById(_prefix + 'headers-list');
|
||||
const row = document.createElement('div');
|
||||
row.className = 'header-row flex gap-2';
|
||||
const bg = container.closest('form').querySelector('input')?.className.match(/bg-gray-\d+/)?.[0] || 'bg-gray-900';
|
||||
const border = container.closest('form').querySelector('input')?.className.match(/border-gray-\d+/)?.[0] || 'border-gray-800';
|
||||
row.innerHTML = `
|
||||
<input type="text" placeholder="Header name" class="hk flex-1 ${bg} border ${border} 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} border ${border} 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);
|
||||
});
|
||||
|
||||
// Collect form data into API body
|
||||
function collectFormData(prefix) {
|
||||
const headers = {};
|
||||
document.querySelectorAll('#' + prefix + '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(prefix + 'name').value.trim(),
|
||||
url: document.getElementById(prefix + 'url').value.trim(),
|
||||
method: document.getElementById(prefix + 'method').value,
|
||||
interval_s: Number(document.getElementById(prefix + 'interval').value),
|
||||
timeout_ms: Number(document.getElementById(prefix + 'timeout').value),
|
||||
};
|
||||
if (Object.keys(headers).length) body.request_headers = headers;
|
||||
else body.request_headers = null;
|
||||
const rb = document.getElementById(prefix + 'request-body').value.trim();
|
||||
body.request_body = rb || null;
|
||||
body.regions = [...document.querySelectorAll('.' + prefix + 'region-check:checked')].map(el => el.value);
|
||||
if (_currentQuery) body.query = _currentQuery;
|
||||
return body;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
<%
|
||||
const monitor = it._form?.monitor || {};
|
||||
const isEdit = !!it._form?.isEdit;
|
||||
const prefix = it._form?.prefix || '';
|
||||
const bg = it._form?.bg || 'bg-gray-900';
|
||||
const border = it._form?.border || 'border-gray-800';
|
||||
const btnText = isEdit ? 'Save Changes' : 'Create Monitor';
|
||||
const formId = prefix + 'form';
|
||||
const methods = ['GET','POST','PUT','PATCH','DELETE','HEAD','OPTIONS'];
|
||||
const intervals = [['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']];
|
||||
const timeouts = [['5000','5 seconds'],['10000','10 seconds'],['30000','30 seconds'],['60000','60 seconds']];
|
||||
const regions = [['eu-central','🇩🇪 EU Central'],['us-east','🇺🇸 US East'],['us-west','🇺🇸 US West'],['ap-southeast','🇸🇬 AP Southeast']];
|
||||
const curMethod = monitor.method || 'GET';
|
||||
const bodyHidden = ['GET','HEAD','OPTIONS'].includes(curMethod);
|
||||
%>
|
||||
|
||||
<form id="<%= formId %>" class="space-y-<%= isEdit ? '5' : '6' %>">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-400 mb-1.5">Name</label>
|
||||
<input id="<%= prefix %>name" type="text" required value="<%= monitor.name || '' %>" placeholder="Production API"
|
||||
class="w-full <%= bg %> border <%= border %> 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="<%= prefix %>method"
|
||||
class="<%= bg %> border <%= border %> rounded-lg px-3 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500 font-mono text-sm">
|
||||
<% methods.forEach(function(method) { %>
|
||||
<option <%= curMethod === method ? 'selected' : '' %>><%= method %></option>
|
||||
<% }) %>
|
||||
</select>
|
||||
<input id="<%= prefix %>url" type="url" required value="<%= monitor.url || '' %>" placeholder="https://api.example.com/health"
|
||||
class="flex-1 <%= bg %> border <%= border %> 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" class="<%= prefix %>add-header text-xs text-blue-400 hover:text-blue-300 transition-colors">+ Add header</button>
|
||||
</div>
|
||||
<div id="<%= prefix %>headers-list" class="space-y-2">
|
||||
<% if (monitor.request_headers && typeof monitor.request_headers === 'object') {
|
||||
Object.entries(monitor.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 %> border <%= border %> 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 %> border <%= border %> 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>
|
||||
|
||||
<!-- Request Body -->
|
||||
<div id="<%= prefix %>body-section" class="<%= bodyHidden ? 'hidden' : '' %>">
|
||||
<label class="block text-sm text-gray-400 mb-1.5">Request Body <span class="text-gray-600">(optional)</span></label>
|
||||
<textarea id="<%= prefix %>request-body" rows="4" placeholder='{"key": "value"}'
|
||||
class="w-full <%= bg %> border <%= border %> 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"><%= monitor.request_body || '' %></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm text-gray-400 mb-1.5"><%= isEdit ? 'Interval' : 'Ping Interval' %></label>
|
||||
<select id="<%= prefix %>interval"
|
||||
class="w-full <%= bg %> border <%= border %> rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
|
||||
<% intervals.forEach(function([val, label]) { %>
|
||||
<option value="<%= val %>" <%= String(monitor.interval_s || '60') === 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="<%= prefix %>timeout"
|
||||
class="w-full <%= bg %> border <%= border %> rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
|
||||
<% timeouts.forEach(function([val, label]) { %>
|
||||
<option value="<%= val %>" <%= String(monitor.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">
|
||||
<% regions.forEach(function([val, label]) { %>
|
||||
<label class="flex items-center gap-2 <%= bg %> border <%= border %> hover:border-gray-600 rounded-lg px-3 py-2 cursor-pointer transition-colors">
|
||||
<input type="checkbox" value="<%= val %>" class="<%= prefix %>region-check accent-blue-500" <%= (monitor.regions && monitor.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"><%= isEdit ? 'Conditions' : 'Query Conditions' %> <span class="text-gray-600">(optional)</span></label>
|
||||
<p class="text-xs text-gray-600 mb-3">Define <% if (isEdit) { %>up/down conditions<% } else { %>when this monitor should be considered "up"<% } %>. Defaults to status < 400.</p>
|
||||
<div id="<%= prefix %>query-builder"></div>
|
||||
</div>
|
||||
|
||||
<div id="<%= prefix %>error" class="text-red-400 text-sm hidden"></div>
|
||||
|
||||
<button type="submit" id="<%= prefix %>submit-btn"
|
||||
class="<%= isEdit ? '' : 'w-full ' %>bg-blue-600 hover:bg-blue-500 text-white<%= isEdit ? ' text-sm' : '' %> font-medium px-6 py-<%= isEdit ? '2.5' : '3' %> rounded-lg transition-colors">
|
||||
<%= btnText %>
|
||||
</button>
|
||||
</form>
|
||||
Reference in New Issue
Block a user