112 lines
3.7 KiB
HTML
112 lines
3.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Dashboard - Status Monitor{% endblock %}
|
|
|
|
{% block content %}
|
|
<h2>Services</h2>
|
|
|
|
<form id="add-service-form" class="add-form">
|
|
<input type="text" name="name" placeholder="Service name" required>
|
|
<input type="text" name="target" placeholder="URL or host:port" required>
|
|
<select name="protocol">
|
|
<option value="https">HTTPS</option>
|
|
<option value="http">HTTP</option>
|
|
<option value="tcp">TCP</option>
|
|
</select>
|
|
<input type="number" name="interval_seconds" value="60" min="10" max="3600" title="Check interval (seconds)">
|
|
<button type="submit">Add Service</button>
|
|
</form>
|
|
<script>
|
|
document.getElementById('add-service-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const payload = {
|
|
name: form.name.value.trim(),
|
|
target: form.target.value.trim(),
|
|
protocol: form.protocol.value,
|
|
interval_seconds: parseInt(form.interval_seconds.value, 10) || 60
|
|
};
|
|
const res = await fetch('{{ url_for("api_add_service") }}', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
if (res.ok) {
|
|
window.location.reload();
|
|
} else {
|
|
const err = await res.json().catch(() => ({}));
|
|
alert(err.error || 'Failed to add service');
|
|
}
|
|
});
|
|
document.addEventListener('click', async (e) => {
|
|
const btn = e.target.closest('.btn-delete');
|
|
if (!btn) return;
|
|
e.preventDefault();
|
|
if (!confirm('Delete "' + btn.dataset.name + '"?')) return;
|
|
const res = await fetch('/api/services/' + btn.dataset.id, { method: 'DELETE' });
|
|
if (res.ok) window.location.reload();
|
|
else alert('Failed to delete');
|
|
});
|
|
</script>
|
|
|
|
<table class="services-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Target</th>
|
|
<th>Protocol</th>
|
|
<th>Status</th>
|
|
<th>Uptime</th>
|
|
<th>Last Check</th>
|
|
<th>Response</th>
|
|
<th>Report</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for s in services %}
|
|
<tr>
|
|
<td>{{ s.name }}</td>
|
|
<td><code>{{ s.target }}</code></td>
|
|
<td>{{ s.protocol | upper }}</td>
|
|
<td>
|
|
{% if s.last_success is none %}
|
|
<span class="badge badge-pending">Pending</span>
|
|
{% elif s.last_success %}
|
|
<span class="badge badge-up">Up</span>
|
|
{% else %}
|
|
<span class="badge badge-down">Down</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if s.uptime_pct is not none %}
|
|
<a href="{{ url_for('report', service_id=s.id) }}">{{ s.uptime_pct }}%</a>
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ s.last_check[:19] if s.last_check else '-' }}</td>
|
|
<td>
|
|
{% if s.last_response_ms is not none %}
|
|
{{ (s.last_response_ms | round(0) | int) }} ms
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<a href="{{ url_for('report', service_id=s.id) }}">Report</a>
|
|
<a href="{{ url_for('edit_service', service_id=s.id) }}" style="margin-left: 0.5rem;">Edit</a>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn-delete" data-id="{{ s.id }}" data-name="{{ s.name }}" title="Delete">Delete</button>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="9">No services yet. Add one above.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% endblock %}
|