ipng/nginx-logtail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Execute PLAN_FRONTEND.md

Browse Source
This commit is contained in:
Pim van Pelt
2026-03-14 20:42:51 +01:00
parent b9ec67ec00
commit 4369e66dee
9 changed files with 1571 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
cmd/frontend/templates/base.html Normal file
View File

@@ -0,0 +1,43 @@
{{define "base"}}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>nginx-logtail</title>
{{- if gt .RefreshSecs 0}}
<meta http-equiv="refresh" content="{{.RefreshSecs}}">
{{- end}}
<style>
* { box-sizing: border-box; }
body { font-family: monospace; font-size: 14px; max-width: 1100px; margin: 2em auto; padding: 0 1.5em; color: #222; }
h1 { font-size: 1.1em; font-weight: bold; margin: 0 0 1em; letter-spacing: 0.05em; }
.tabs { display: flex; gap: 0.3em; margin-bottom: 0.7em; flex-wrap: wrap; }
.tabs a { text-decoration: none; padding: 0.2em 0.8em; border: 1px solid #aaa; color: #444; }
.tabs a:hover { background: #f0f0f0; }
.tabs a.active { background: #222; color: #fff; border-color: #222; }
.crumbs { margin-bottom: 0.8em; font-size: 0.9em; }
.crumbs .label { font-weight: bold; color: #666; margin-right: 0.3em; }
.crumbs span { display: inline-block; background: #eef; border: 1px solid #99b; padding: 0.1em 0.5em; margin-right: 0.3em; border-radius: 2px; }
.crumbs a { color: #c00; text-decoration: none; margin-left: 0.4em; font-weight: bold; }
.crumbs a:hover { color: #900; }
.sparkline { margin: 0.8em 0 1.2em; }
.sparkline small { color: #888; display: block; margin-bottom: 0.2em; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; border-bottom: 2px solid #222; padding: 0.3em 0.7em; font-size: 0.85em; color: #444; }
th.num { text-align: right; }
td { padding: 0.22em 0.7em; border-bottom: 1px solid #eee; vertical-align: middle; }
td.rank { color: #bbb; width: 3.5em; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.bar meter { width: 110px; height: 10px; vertical-align: middle; }
tr:hover td { background: #f7f7f7; }
a { color: #1a6aad; text-decoration: none; }
a:hover { text-decoration: underline; }
.error { color: #c00; border: 1px solid #fbb; background: #fff5f5; padding: 0.7em 1em; margin: 1em 0; border-radius: 3px; }
.nodata { color: #999; margin: 2em 0; font-style: italic; }
footer { margin-top: 2em; padding-top: 0.6em; border-top: 1px solid #e0e0e0; font-size: 0.8em; color: #999; }
</style>
</head>
<body>
{{template "content" .}}
</body>
</html>
{{end}}

70
cmd/frontend/templates/index.html Normal file
View File

@@ -0,0 +1,70 @@
{{define "content"}}
<h1>nginx-logtail</h1>
<div class="tabs">
{{- range .Windows}}
<a href="{{.URL}}"{{if .Active}} class="active"{{end}}>{{.Label}}</a>
{{- end}}
</div>
<div class="tabs">
{{- range .GroupBys}}
<a href="{{.URL}}"{{if .Active}} class="active"{{end}}>{{.Label}}</a>
{{- end}}
</div>
{{if .Breadcrumbs}}
<div class="crumbs">
<span class="label">Filters:</span>
{{- range .Breadcrumbs}}
<span>{{.Text}}<a href="{{.RemoveURL}}" title="remove filter">×</a></span>
{{- end}}
</div>
{{end}}
{{if .Error}}
<div class="error">{{.Error}}</div>
{{else}}
{{if .Sparkline}}
<div class="sparkline">
<small>{{.Params.WindowS}} trend · by {{.Params.GroupByS}}{{if .Source}} · source: {{.Source}}{{end}}</small>
{{.Sparkline}}
</div>
{{end}}
{{if .Entries}}
<table>
<thead>
<tr>
<th class="rank">#</th>
<th>LABEL</th>
<th class="num">COUNT</th>
<th class="num">%</th>
<th>BAR</th>
</tr>
</thead>
<tbody>
{{- range .Entries}}
<tr>
<td class="rank">{{.Rank}}</td>
<td><a href="{{.DrillURL}}">{{.Label}}</a></td>
<td class="num">{{fmtCount .Count}}</td>
<td class="num">{{printf "%.0f" .Pct}}%</td>
<td class="bar"><meter value="{{printf "%.0f" .Pct}}" max="100"></meter></td>
</tr>
{{- end}}
</tbody>
</table>
{{else}}
<p class="nodata">(no data yet — ring buffer may still be filling)</p>
{{end}}
{{end}}
<footer>
{{- if .Source}}source: {{.Source}} · {{end -}}
{{fmtCount .TotalCount}} requests · {{.Params.WindowS}} window · by {{.Params.GroupByS}}
{{- if gt .RefreshSecs 0}} · auto-refresh {{.RefreshSecs}}s{{end}}
</footer>
{{end}}