65 lines
1.9 KiB
HTML
65 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Service Dashboard</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; margin: 20px; }
|
|
header { display: flex; align-items: center; gap: 12px; }
|
|
.status { padding: 6px 10px; border-radius: 6px; background: #f5f5f5; }
|
|
.ok { color: #0a7b22; }
|
|
.bad { color: #b00020; }
|
|
table { border-collapse: collapse; width: 100%; margin-top: 16px; }
|
|
th, td { border-bottom: 1px solid #ddd; padding: 8px; }
|
|
.controls { display: flex; gap: 8px; }
|
|
textarea { width: 100%; height: 200px; }
|
|
.row { display: flex; gap: 8px; margin-top: 16px; }
|
|
input[type=text] { flex: 1; padding: 8px; }
|
|
button { padding: 8px 12px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Service Dashboard</h1>
|
|
<button id="refresh">Refresh Status</button>
|
|
<label style="margin-left:16px; display:flex; align-items:center; gap:6px;">
|
|
<input type="checkbox" id="autoRefreshToggle" /> Auto-refresh
|
|
</label>
|
|
<select id="autoRefreshInterval" aria-label="Auto-refresh interval" style="margin-left:8px;">
|
|
<option value="5">5s</option>
|
|
<option value="10" selected>10s</option>
|
|
<option value="30">30s</option>
|
|
<option value="60">60s</option>
|
|
</select>
|
|
</header>
|
|
|
|
<section class="row">
|
|
<input id="serviceName" type="text" placeholder="e.g. my-app.service" />
|
|
<button id="addService">Add Service</button>
|
|
</section>
|
|
|
|
<section>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Service</th>
|
|
<th>Status</th>
|
|
<th>Ports</th>
|
|
<th>Details</th>
|
|
<th>Logs</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="servicesTable"></tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>Logs</h3>
|
|
<textarea id="logs" readonly></textarea>
|
|
</section>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|