222 lines
5.1 KiB
HTML
222 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Clan status</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
:root {
|
|
--dark: rgb(22, 35, 36);
|
|
--light: rgb(229, 231, 235);
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: var(--dark);
|
|
}
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
background: var(--light);
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
border-bottom: 2px solid var(--dark);
|
|
padding-bottom: 10px;
|
|
}
|
|
h2 {
|
|
color: #555;
|
|
margin-top: 30px;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
}
|
|
th {
|
|
background: var(--dark);
|
|
color: var(--light);
|
|
padding: 12px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
}
|
|
td {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
tr:hover {
|
|
background: var(--light);
|
|
}
|
|
.status-up {
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
}
|
|
.status-down {
|
|
color: #dc3545;
|
|
font-weight: bold;
|
|
}
|
|
.alert-success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
.card {
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
}
|
|
.metric-value {
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
color: var(--dark);
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Clan Status</h1>
|
|
|
|
|
|
<h2>Instances</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Host</th>
|
|
<th>Status</th>
|
|
<th>CPU Usage</th>
|
|
<th>Memory Usage</th>
|
|
<th>Disk Usage</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ range query "up" | sortByLabel "instance" }}
|
|
{{ $hostname := reReplaceAll "\\..*" "" .Labels.instance }}
|
|
<tr>
|
|
<td>{{ $hostname }}</td>
|
|
<td>
|
|
{{ if eq .Value 1.0 }}
|
|
<span class="status-up">UP</span>
|
|
{{ else }}
|
|
<span class="status-down">DOWN</span>
|
|
{{ end }}
|
|
</td>
|
|
<td>
|
|
{{ $cpuQuery := query (printf "100 - cpu_usage_idle{cpu=\"cpu-total\",host=\"%s\"}" $hostname) }}
|
|
{{ if $cpuQuery }}
|
|
{{ with $cpuQuery | first }}
|
|
<span class="metric-value">{{ . | value | printf "%.1f" }}%</span>
|
|
{{ end }}
|
|
{{ else }}
|
|
N/A
|
|
{{ end }}
|
|
</td>
|
|
<td>
|
|
{{ $memQuery := query (printf "(1 - (mem_available{host=\"%s\"} / mem_total{host=\"%s\"})) * 100" $hostname $hostname) }}
|
|
{{ if $memQuery }}
|
|
{{ with $memQuery | first }}
|
|
<span class="metric-value">{{ . | value | printf "%.1f" }}%</span>
|
|
{{ end }}
|
|
{{ else }}
|
|
N/A
|
|
{{ end }}
|
|
</td>
|
|
<td>
|
|
{{ $diskQuery := query (printf "(1 - (disk_free{host=\"%s\",path=\"/\"} / disk_total{host=\"%s\",path=\"/\"})) * 100" $hostname $hostname) }}
|
|
{{ if $diskQuery }}
|
|
{{ with $diskQuery | first }}
|
|
<span class="metric-value">{{ . | value | printf "%.1f" }}%</span>
|
|
{{ end }}
|
|
{{ else }}
|
|
N/A
|
|
{{ end }}
|
|
</td>
|
|
</tr>
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h2>Top 5 CPU Usage</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Host</th>
|
|
<th>CPU %</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ range query "topk(5, 100 - cpu_usage_idle{cpu=\"cpu-total\"})" }}
|
|
<tr>
|
|
<td>{{ .Labels.host }}</td>
|
|
<td><span class="metric-value">{{ .Value | printf "%.1f" }}%</span></td>
|
|
</tr>
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Top 5 Memory Usage</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Host</th>
|
|
<th>Memory %</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ range query "topk(5, (1 - (mem_available / mem_total)) * 100)" }}
|
|
<tr>
|
|
<td>{{ .Labels.host }}</td>
|
|
<td><span class="metric-value">{{ .Value | printf "%.1f" }}%</span></td>
|
|
</tr>
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Active Alerts</h2>
|
|
{{ with query "ALERTS{alertstate=\"firing\"}" }}
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Host</th>
|
|
<th>Alert</th>
|
|
<th>Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ range . }}
|
|
<tr>
|
|
<td>{{ or .Labels.host .Labels.instance }}</td>
|
|
<td>{{ .Labels.alertname }}</td>
|
|
<td>{{ .Value }}</td>
|
|
</tr>
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
{{ else }}
|
|
<div class="alert-success">No active alerts</div>
|
|
{{ end }}
|
|
</div>
|
|
</body>
|
|
</html>
|