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,
|
config,
|
||||||
lib,
|
lib,
|
||||||
# pkgs,
|
pkgs,
|
||||||
...
|
...
|
||||||
}:
|
}:
|
||||||
{
|
{
|
||||||
@@ -33,8 +33,12 @@
|
|||||||
# "https://prometheus.${config.clan.core.settings.tld}";
|
# "https://prometheus.${config.clan.core.settings.tld}";
|
||||||
webExternalUrl = settings.webExternalUrl;
|
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 = [
|
scrapeConfigs = [
|
||||||
{
|
{
|
||||||
job_name = "telegraf";
|
job_name = "telegraf";
|
||||||
|
|||||||
@@ -21,7 +21,12 @@
|
|||||||
agent.interval = "60s";
|
agent.interval = "60s";
|
||||||
inputs = {
|
inputs = {
|
||||||
|
|
||||||
|
# More input plugins available at:
|
||||||
|
# https://github.com/influxdata/telegraf/tree/master/plugins/inputs
|
||||||
diskio = { };
|
diskio = { };
|
||||||
|
disk = { };
|
||||||
|
cpu = { };
|
||||||
|
processes = { };
|
||||||
kernel_vmstat = { };
|
kernel_vmstat = { };
|
||||||
system = { };
|
system = { };
|
||||||
mem = { };
|
mem = { };
|
||||||
|
|||||||
Reference in New Issue
Block a user