271 lines
11 KiB
HTML
271 lines
11 KiB
HTML
{{define "content"}}
|
|
{{$d := .Data.D}}
|
|
|
|
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
|
|
<div>
|
|
<h1 class="page-title">Dashboard</h1>
|
|
<p class="text-body-secondary mb-0">
|
|
{{$d.Hostname}} · up {{$d.UptimeText}} · VibeDNS {{.Version}}
|
|
</p>
|
|
</div>
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<a href="/tools" class="btn btn-outline-secondary btn-sm">
|
|
<i class="bi bi-search me-1"></i>Test a lookup
|
|
</a>
|
|
<a href="/querylog" class="btn btn-outline-secondary btn-sm">
|
|
<i class="bi bi-journal-text me-1"></i>Query log
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{/* Service status strip */}}
|
|
<div class="card mb-4">
|
|
<div class="card-body py-3">
|
|
<div class="row g-3 align-items-center">
|
|
<div class="col-12 col-md-4 d-flex align-items-center gap-2">
|
|
<span class="status-dot {{if $d.DNSRunning}}status-up{{else}}status-down{{end}}"></span>
|
|
<div>
|
|
<div class="fw-semibold">{{if $d.DNSRunning}}DNS listeners running{{else}}DNS listeners down{{end}}</div>
|
|
<div class="small text-body-secondary mono">
|
|
UDP {{.Data.UDPAddr}} · TCP {{.Data.TCPAddr}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 d-flex align-items-center gap-2">
|
|
<span class="status-dot {{if $d.RecursionEnabled}}status-up{{else}}status-down{{end}}"></span>
|
|
<div>
|
|
<div class="fw-semibold">Recursion {{if $d.RecursionEnabled}}on{{else}}off{{end}}</div>
|
|
<div class="small text-body-secondary">
|
|
{{len $d.Upstreams}} upstream{{if ne (len $d.Upstreams) 1}}s{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 d-flex align-items-center gap-2">
|
|
<span class="status-dot {{if $d.CacheEnabled}}status-up{{else}}status-down{{end}}"></span>
|
|
<div>
|
|
<div class="fw-semibold">Cache {{if $d.CacheEnabled}}on{{else}}off{{end}}</div>
|
|
<div class="small text-body-secondary">{{num $d.CacheEntries}} entries</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-2 text-md-end">
|
|
<div class="small text-body-secondary">Queries per second</div>
|
|
<div class="fs-5 fw-semibold">{{printf "%.1f" $d.QueriesPerSec}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{/* Headline counters */}}
|
|
<div class="row g-3 mb-4">
|
|
{{template "stat" dict "Label" "Total queries" "Value" (num $d.TotalQueries) "Icon" "bi-arrow-left-right"
|
|
"Sub" (printf "%s avg response" (ms $d.AvgQueryMS))}}
|
|
{{template "stat" dict "Label" "Blocked" "Value" (num $d.Blocked) "Icon" "bi-shield-slash" "Tone" "danger"
|
|
"Sub" (printf "%s of all queries" (pct $d.BlockRate))}}
|
|
{{template "stat" dict "Label" "Cache hit rate" "Value" (pct $d.CacheHitRate) "Icon" "bi-lightning-charge" "Tone" "success"
|
|
"Sub" (printf "%s hits · %s misses" (num $d.CacheHits) (num $d.CacheMisses))}}
|
|
{{template "stat" dict "Label" "Authoritative" "Value" (num $d.Authoritative) "Icon" "bi-diagram-3" "Tone" "primary"
|
|
"Sub" (printf "%s zones · %s records" (num $d.Zones) (num $d.Records))}}
|
|
{{template "stat" dict "Label" "Recursive" "Value" (num $d.Recursive) "Icon" "bi-globe2"
|
|
"Sub" (printf "%s upstream latency" (ms $d.AvgResolverMS))}}
|
|
{{template "stat" dict "Label" "Cache entries" "Value" (num $d.CacheEntries) "Icon" "bi-database"
|
|
"Sub" (bytes $d.CacheBytes)}}
|
|
{{template "stat" dict "Label" "Blacklist domains" "Value" (num $d.BlacklistDomains) "Icon" "bi-list-ul"
|
|
"Sub" (printf "across %s blacklists" (num $d.Blacklists))}}
|
|
{{template "stat" dict "Label" "Refused" "Value" (num $d.Refused) "Icon" "bi-hand-index" "Tone" "warning"
|
|
"Sub" (printf "%s rate limited · %s errors" (num $d.RateLimited) (num $d.Errors))}}
|
|
</div>
|
|
|
|
{{/* Activity + type breakdown */}}
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-12 col-xl-8">
|
|
<div class="card h-100">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span>Query activity — last 24 hours</span>
|
|
{{if not $d.QueryLogEnabled}}
|
|
<span class="badge text-bg-secondary">query logging off</span>
|
|
{{end}}
|
|
</div>
|
|
<div class="card-body">
|
|
{{if and $d.QueryLogEnabled $d.Activity}}
|
|
<div class="chart-wrap"><canvas id="activityChart" aria-label="Query activity chart" role="img"></canvas></div>
|
|
{{else}}
|
|
{{template "empty" dict "Icon" "bi-graph-up" "Title" "No activity to chart yet"
|
|
"Message" "Query logging must be enabled for the activity chart. Once queries arrive they appear here."}}
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-xl-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">Queries by type</div>
|
|
<div class="card-body">
|
|
{{if $d.QueriesByType}}
|
|
<div class="chart-wrap-sm"><canvas id="typeChart" aria-label="Queries by record type" role="img"></canvas></div>
|
|
{{else}}
|
|
{{template "empty" dict "Icon" "bi-pie-chart" "Title" "No queries yet"
|
|
"Message" "Point a client at this server and the breakdown appears here."}}
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{/* Top lists */}}
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-12 col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">Top queried domains</div>
|
|
{{if $d.TopDomains}}
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-compact table-hover">
|
|
<tbody>
|
|
{{range $d.TopDomains}}
|
|
<tr>
|
|
<td class="mono truncate-cell" title="{{.Name}}">{{trimDot .Name}}</td>
|
|
<td class="text-end fw-semibold">{{num .Count}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{else}}
|
|
<div class="card-body">
|
|
{{template "empty" dict "Icon" "bi-bar-chart" "Title" "Nothing yet" "Message" "Queries from the last 24 hours appear here."}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">Top blocked domains</div>
|
|
{{if $d.TopBlocked}}
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-compact table-hover">
|
|
<tbody>
|
|
{{range $d.TopBlocked}}
|
|
<tr>
|
|
<td class="mono truncate-cell" title="{{.Name}}">{{trimDot .Name}}</td>
|
|
<td class="text-end fw-semibold text-danger">{{num .Count}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{else}}
|
|
<div class="card-body">
|
|
{{template "empty" dict "Icon" "bi-shield-check" "Title" "Nothing blocked"
|
|
"Message" "Assign a blacklist to a client network to start filtering."}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">Top clients</div>
|
|
{{if $d.TopClients}}
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-compact table-hover">
|
|
<tbody>
|
|
{{range $d.TopClients}}
|
|
<tr>
|
|
<td>
|
|
<div class="mono">{{.Name}}</div>
|
|
{{if .Extra}}<div class="small text-body-secondary">{{.Extra}}</div>{{end}}
|
|
</td>
|
|
<td class="text-end fw-semibold align-middle">{{num .Count}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{else}}
|
|
<div class="card-body">
|
|
{{template "empty" dict "Icon" "bi-people" "Title" "No clients yet" "Message" "Clients that query this server appear here."}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{/* Upstreams and recent activity */}}
|
|
<div class="row g-3">
|
|
<div class="col-12 col-xl-5">
|
|
<div class="card h-100">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span>Upstream resolvers</span>
|
|
<a href="/settings/resolver" class="btn btn-sm btn-outline-secondary">Configure</a>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-compact">
|
|
<thead>
|
|
<tr><th>Server</th><th>Status</th><th class="text-end">Latency</th><th class="text-end">Queries</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range $d.Upstreams}}
|
|
<tr>
|
|
<td class="mono">{{.Address}}</td>
|
|
<td>
|
|
{{if .Healthy}}<span class="badge text-bg-success">healthy</span>
|
|
{{else}}<span class="badge text-bg-danger" title="{{.LastError}}">resting</span>{{end}}
|
|
</td>
|
|
<td class="text-end">{{ms .LatencyMS}}</td>
|
|
<td class="text-end">{{num .Queries}}</td>
|
|
</tr>
|
|
{{else}}
|
|
<tr><td colspan="4" class="text-center text-body-secondary py-3">No upstream resolvers configured.</td></tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-xl-7">
|
|
<div class="card h-100">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span>Recent DNS activity</span>
|
|
<a href="/querylog" class="btn btn-sm btn-outline-secondary">View all</a>
|
|
</div>
|
|
{{if $d.Recent}}
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-compact table-hover">
|
|
<thead>
|
|
<tr><th>Time</th><th>Client</th><th>Query</th><th>Type</th><th>Result</th><th>Source</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range $d.Recent}}
|
|
<tr>
|
|
<td class="text-body-secondary small text-nowrap">{{timeOnly .Timestamp}}</td>
|
|
<td class="mono small">{{.ClientIP}}</td>
|
|
<td class="mono truncate-cell" title="{{.QName}}">{{trimDot .QName}}</td>
|
|
<td><span class="type-chip {{typeBadge .QType}}">{{.QType}}</span></td>
|
|
<td><span class="badge {{rcodeBadge .Rcode}}">{{.Rcode}}</span></td>
|
|
<td><span class="badge {{sourceBadge .Source}}">{{.Source}}</span></td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{else}}
|
|
<div class="card-body">
|
|
{{template "empty" dict "Icon" "bi-clock-history" "Title" "No recent activity"
|
|
"Message" "Recent queries appear here once query logging is enabled and clients start resolving."}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{/* Chart data travels in data- attributes rather than an inline script, so the
|
|
page needs no CSP exception. app.js reads and parses it. */}}
|
|
<div id="chartData" hidden
|
|
data-activity="{{json $d.Activity}}"
|
|
data-types="{{json $d.QueriesByType}}"></div>
|
|
{{end}}
|
|
|
|
{{define "scripts"}}
|
|
<script src="/static/js/chart.umd.js"></script>
|
|
{{end}}
|