130 lines
4.9 KiB
HTML
130 lines
4.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Services - A/D Infrastructure Control{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h1>Services <i class="bi bi-arrow-clockwise refresh-btn" id="refreshServices"></i></h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Path</th>
|
|
<th>Status</th>
|
|
<th>Last Updated</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="servicesTable">
|
|
<tr>
|
|
<td colspan="5" class="text-center">Loading...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logs Modal -->
|
|
<div class="modal fade" id="logsModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Service Logs</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<pre id="logsContent"
|
|
style="max-height: 500px; overflow-y: auto; background: #f8f9fa; padding: 15px;"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
function loadServices() {
|
|
$.get('/api/services', function (data) {
|
|
if (data && data.length > 0) {
|
|
let html = '';
|
|
data.forEach(service => {
|
|
let statusBadge = service.status === 'running'
|
|
? '<span class="badge bg-success">Running</span>'
|
|
: '<span class="badge bg-secondary">Stopped</span>';
|
|
|
|
html += `
|
|
<tr>
|
|
<td><strong>${service.name}</strong></td>
|
|
<td><code>${service.path}</code></td>
|
|
<td>${statusBadge}</td>
|
|
<td>${new Date(service.last_updated).toLocaleString()}</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<button class="btn btn-success" onclick="serviceAction(${service.id}, 'start')">
|
|
<i class="bi bi-play-fill"></i>
|
|
</button>
|
|
<button class="btn btn-warning" onclick="serviceAction(${service.id}, 'restart')">
|
|
<i class="bi bi-arrow-clockwise"></i>
|
|
</button>
|
|
<button class="btn btn-danger" onclick="serviceAction(${service.id}, 'stop')">
|
|
<i class="bi bi-stop-fill"></i>
|
|
</button>
|
|
<button class="btn btn-info" onclick="viewLogs(${service.id})">
|
|
<i class="bi bi-file-text"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
$('#servicesTable').html(html);
|
|
} else {
|
|
$('#servicesTable').html('<tr><td colspan="5" class="text-center text-muted">No services registered</td></tr>');
|
|
}
|
|
});
|
|
}
|
|
|
|
function serviceAction(serviceId, action) {
|
|
if (!confirm(`Are you sure you want to ${action} this service?`)) return;
|
|
|
|
$.ajax({
|
|
url: `/api/services/${serviceId}/action`,
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({ action: action }),
|
|
success: function (data) {
|
|
alert(`Service ${action} successful!`);
|
|
loadServices();
|
|
},
|
|
error: function (xhr) {
|
|
alert(`Failed to ${action} service: ${xhr.responseJSON?.detail || 'Unknown error'}`);
|
|
}
|
|
});
|
|
}
|
|
|
|
function viewLogs(serviceId) {
|
|
$.get(`/api/services/${serviceId}/logs?lines=200`, function (data) {
|
|
$('#logsContent').text(data.logs || 'No logs available');
|
|
new bootstrap.Modal(document.getElementById('logsModal')).show();
|
|
});
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
loadServices();
|
|
$('#refreshServices').click(loadServices);
|
|
setInterval(loadServices, 15000); // Auto-refresh every 15 seconds
|
|
});
|
|
</script>
|
|
{% endblock %} |