115 lines
6.9 KiB
Plaintext
115 lines
6.9 KiB
Plaintext
<%
|
|
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 plan = it.plan || 'free';
|
|
const minInterval = { free: 30, pro: 2, lifetime: 2 }[plan] || 30;
|
|
const btnText = isEdit ? 'Save Changes' : 'Create Monitor';
|
|
const formId = prefix + 'form';
|
|
const methods = ['GET','POST','PUT','PATCH','DELETE','HEAD','OPTIONS'];
|
|
const allIntervals = [['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 intervals = allIntervals.filter(([val]) => Number(val) >= minInterval);
|
|
const timeouts = [['5000','5 seconds'],['10000','10 seconds'],['20000','20 seconds'],['30000','30 seconds'],['40000','40 seconds'],['50000','50 seconds'],['60000','60 seconds']];
|
|
const regions = [['eu-central','EU Central'],['us-west','US West']];
|
|
const curMethod = monitor.method || 'GET';
|
|
const bodyHidden = ['GET','HEAD','OPTIONS'].includes(curMethod);
|
|
%>
|
|
|
|
<form id="<%= formId %>" action="<%= isEdit ? '/dashboard/monitors/' + monitor.id + '/edit' : '/dashboard/monitors/new' %>" method="POST" class="space-y-<%= isEdit ? '5' : '6' %>">
|
|
<div>
|
|
<label class="block text-sm text-gray-400 mb-1.5">Name</label>
|
|
<input id="<%= prefix %>name" name="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" name="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" name="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" name="header_key" 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" name="header_value" 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" name="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" name="interval_s"
|
|
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 || '30') === 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" name="timeout_ms"
|
|
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 || '10000') === val ? 'selected' : '' %>><%= label %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<%
|
|
// Default to all regions if none selected
|
|
const selectedRegions = (monitor.regions && monitor.regions.length) ? monitor.regions : regions.map(r => r[0]);
|
|
%>
|
|
<div>
|
|
<label class="block text-sm text-gray-400 mb-1.5">Regions</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" name="regions" value="<%= val %>" class="<%= prefix %>region-check accent-blue-500" <%= selectedRegions.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>
|