Add prometheus console
This commit is contained in:
pinpox
222
clanServices/monitoring/prometheus-consoles/index.html
Normal file
222
clanServices/monitoring/prometheus-consoles/index.html
Normal file
@@ -0,0 +1,222 @@
|
||||
<!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>System Overview</h1>
|
||||
|
||||
|
||||
<h2>Instance Status</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" }}
|
||||
<tr>
|
||||
<td>{{ .Labels.instance }}</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 - (avg by(host) (rate(cpu_seconds_total{mode=\"idle\",host=\"%s\"}[5m])) * 100)" .Labels.instance) }}
|
||||
{{ 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_bytes{host=\"%s\"} / mem_total_bytes{host=\"%s\"})) * 100" .Labels.instance .Labels.instance) }}
|
||||
{{ 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_bytes{host=\"%s\",path=\"/\"} / disk_total_bytes{host=\"%s\",path=\"/\"})) * 100" .Labels.instance .Labels.instance) }}
|
||||
{{ 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 - (avg by(host) (rate(cpu_seconds_total{mode=\"idle\"}[5m])) * 100))" }}
|
||||
<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_bytes / mem_total_bytes)) * 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>Alert</th>
|
||||
<th>Host</th>
|
||||
<th>Severity</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range . }}
|
||||
<tr>
|
||||
<td>{{ .Labels.alertname }}</td>
|
||||
<td>{{ or .Labels.host .Labels.instance }}</td>
|
||||
<td>{{ .Labels.severity }}</td>
|
||||
<td>{{ .Value }}</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
{{ else }}
|
||||
<div class="alert-success">No active alerts</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
80
clanServices/monitoring/prometheus-consoles/style.css
Normal file
80
clanServices/monitoring/prometheus-consoles/style.css
Normal file
@@ -0,0 +1,80 @@
|
||||
: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);
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
{
|
||||
config,
|
||||
lib,
|
||||
# pkgs,
|
||||
pkgs,
|
||||
...
|
||||
}:
|
||||
{
|
||||
@@ -33,8 +33,12 @@
|
||||
# "https://prometheus.${config.clan.core.settings.tld}";
|
||||
webExternalUrl = settings.webExternalUrl;
|
||||
|
||||
extraFlags = [ "--storage.tsdb.retention.time=30d" ];
|
||||
|
||||
# Configure console templates and libraries paths
|
||||
extraFlags = [
|
||||
"--storage.tsdb.retention.time=30d"
|
||||
"--web.console.templates=${./prometheus-consoles}"
|
||||
"--web.console.libraries=${./prometheus-consoles}"
|
||||
];
|
||||
scrapeConfigs = [
|
||||
{
|
||||
job_name = "telegraf";
|
||||
|
||||
@@ -21,7 +21,12 @@
|
||||
agent.interval = "60s";
|
||||
inputs = {
|
||||
|
||||
# More input plugins available at:
|
||||
# https://github.com/influxdata/telegraf/tree/master/plugins/inputs
|
||||
diskio = { };
|
||||
disk = { };
|
||||
cpu = { };
|
||||
processes = { };
|
||||
kernel_vmstat = { };
|
||||
system = { };
|
||||
mem = { };
|
||||
|
||||
Reference in New Issue
Block a user