init

web/templates/services.html

@@ -0,0 +1,130 @@
+{% 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 %}