feat: add tunnel monitor web ui
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
231
web/pages/network.go
Normal file
231
web/pages/network.go
Normal file
@@ -0,0 +1,231 @@
|
||||
package pages
|
||||
|
||||
import (
|
||||
g "maragu.dev/gomponents"
|
||||
h "maragu.dev/gomponents/html"
|
||||
|
||||
_ "embed"
|
||||
)
|
||||
|
||||
//go:embed networkScript.js
|
||||
var alpineScript string
|
||||
|
||||
func NetworkPage() g.Node {
|
||||
return h.Doctype(
|
||||
h.HTML(
|
||||
h.Head(
|
||||
h.Script(g.Raw(alpineScript)),
|
||||
h.Script(g.Attr("src", "//cdn.tailwindcss.com")),
|
||||
h.Script(g.Attr("src", "//cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js")),
|
||||
),
|
||||
h.Body(
|
||||
h.Div(h.Class("bg-gray-900 text-gray-100"),
|
||||
networkMonitor(),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func networkMonitor() g.Node {
|
||||
return h.Div(
|
||||
g.Attr("x-data", "networkMonitor()"),
|
||||
h.Class("h-dvh flex flex-col"),
|
||||
|
||||
// Header
|
||||
h.Div(
|
||||
h.Class("bg-gray-800 border-b border-gray-700 px-4 py-2 flex items-center gap-4"),
|
||||
h.H1(h.Class("text-lg font-semibold"), g.Text("Network")),
|
||||
h.Button(
|
||||
g.Attr("@click", "clear()"),
|
||||
h.Class("px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm"),
|
||||
g.Text("Clear"),
|
||||
),
|
||||
h.Div(
|
||||
h.Class("ml-auto text-sm text-gray-400"),
|
||||
h.Span(g.Attr("x-text", "requests.length")),
|
||||
g.Text(" requests"),
|
||||
),
|
||||
),
|
||||
|
||||
// Table
|
||||
h.Div(
|
||||
h.Class("flex-1 overflow-auto"),
|
||||
h.Table(
|
||||
h.Class("w-full text-sm"),
|
||||
networkTableHeader(),
|
||||
networkTableBody(),
|
||||
),
|
||||
),
|
||||
|
||||
// Details Panel
|
||||
networkDetailsPanel(),
|
||||
)
|
||||
}
|
||||
|
||||
func networkTableHeader() g.Node {
|
||||
return h.THead(
|
||||
h.Class("bg-gray-800 sticky top-0 border-b border-gray-700"),
|
||||
h.Tr(
|
||||
h.Class("text-left"),
|
||||
h.Th(h.Class("px-4 py-2 font-medium"), g.Text("Name")),
|
||||
h.Th(h.Class("px-4 py-2 font-medium w-20"), g.Text("Method")),
|
||||
h.Th(h.Class("px-4 py-2 font-medium w-20"), g.Text("Status")),
|
||||
h.Th(h.Class("px-4 py-2 font-medium w-32"), g.Text("Type")),
|
||||
h.Th(h.Class("px-4 py-2 font-medium w-32"), g.Text("Time")),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func networkTableBody() g.Node {
|
||||
return h.TBody(
|
||||
h.Template(
|
||||
g.Attr("x-for", "req in requests"),
|
||||
g.Attr(":key", "req.ID"),
|
||||
h.Tr(
|
||||
g.Attr("@click", "selected = req"),
|
||||
g.Attr(":class", "selected?.ID === req.ID ? 'bg-blue-900' : 'hover:bg-gray-800'"),
|
||||
h.Class("border-b border-gray-800 cursor-pointer"),
|
||||
h.Td(
|
||||
h.Class("px-4 py-2 truncate max-w-md"),
|
||||
g.Attr("x-text", "req.URL?.Path || req.URL"),
|
||||
),
|
||||
h.Td(h.Class("px-4 py-2"), g.Attr("x-text", "req.Method")),
|
||||
h.Td(
|
||||
h.Class("px-4 py-2"),
|
||||
h.Span(
|
||||
g.Attr(":class", "statusColor(req.Status)"),
|
||||
g.Attr("x-text", "req.Status || '-'"),
|
||||
),
|
||||
),
|
||||
h.Td(
|
||||
h.Class("px-4 py-2 text-gray-400"),
|
||||
g.Attr("x-text", "req.ResponseBodyType || '-'"),
|
||||
),
|
||||
h.Td(
|
||||
h.Class("px-4 py-2 text-gray-400"),
|
||||
g.Attr("x-text", "formatTime(req.Time)"),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
func networkDetailsPanel() g.Node {
|
||||
return h.Div(
|
||||
g.Attr("x-show", "selected"),
|
||||
g.Attr("x-data", "{ activeTab: 'general' }"),
|
||||
h.Class("fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"),
|
||||
g.Attr("@click.self", "selected = null"),
|
||||
h.Div(
|
||||
h.Class("bg-gray-800 rounded-lg shadow-xl w-3/4 h-3/4 flex flex-col"),
|
||||
g.Attr("@click.stop", ""),
|
||||
// Header
|
||||
h.Div(
|
||||
h.Class("flex items-center justify-between p-4 border-b border-gray-700"),
|
||||
h.H2(
|
||||
h.Class("text-lg font-semibold"),
|
||||
g.Attr("x-text", "selected?.URL"),
|
||||
),
|
||||
h.Button(
|
||||
g.Attr("@click", "selected = null"),
|
||||
h.Class("text-gray-400 hover:text-gray-200"),
|
||||
g.Text("X"),
|
||||
),
|
||||
),
|
||||
// Tabs
|
||||
h.Div(
|
||||
h.Class("flex border-b border-gray-700"),
|
||||
tab("general", "General"),
|
||||
tab("request", "Request"),
|
||||
tab("response", "Response"),
|
||||
),
|
||||
// Content
|
||||
h.Div(
|
||||
h.Class("flex-1 overflow-auto p-4"),
|
||||
generalTabContent(),
|
||||
requestTabContent(),
|
||||
responseTabContent(),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func tab(name, label string) g.Node {
|
||||
return h.Button(
|
||||
g.Attr("@click", "activeTab = '"+name+"'"),
|
||||
g.Attr(":class", "activeTab === '"+name+"' ? 'border-b-2 border-blue-500 text-blue-500' : 'text-gray-400 hover:text-gray-200'"),
|
||||
h.Class("px-4 py-2 font-medium"),
|
||||
g.Text(label),
|
||||
)
|
||||
}
|
||||
|
||||
func generalTabContent() g.Node {
|
||||
return h.Div(
|
||||
g.Attr("x-show", "activeTab === 'general'"),
|
||||
h.Class("space-y-4"),
|
||||
h.H3(h.Class("font-medium"), g.Text("Details")),
|
||||
h.Div(
|
||||
h.Class("text-sm space-y-1 text-gray-300"),
|
||||
detailRow("URL:", "selected?.URL"),
|
||||
detailRow("Source:", "selected?.SourceAddr"),
|
||||
detailRow("Method:", "selected?.Method"),
|
||||
detailRow("Status:", "selected?.Status"),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func requestTabContent() g.Node {
|
||||
return h.Div(
|
||||
g.Attr("x-show", "activeTab === 'request'"),
|
||||
h.Class("space-y-4"),
|
||||
h.H3(h.Class("font-medium"), g.Text("Headers")),
|
||||
h.Div(
|
||||
h.Class("text-sm space-y-1 text-gray-300 font-mono"),
|
||||
h.Template(
|
||||
g.Attr("x-for", "(values, key) in selected?.RequestHeaders"),
|
||||
h.Div(
|
||||
h.Span(h.Class("text-gray-500"), g.Attr("x-text", "key + ':'")),
|
||||
g.Text(" "),
|
||||
h.Span(g.Attr("x-text", "values.join(', ')")),
|
||||
),
|
||||
),
|
||||
),
|
||||
h.H3(h.Class("font-medium"), g.Text("Body")),
|
||||
h.Pre(
|
||||
h.Class("text-sm text-gray-300 font-mono bg-gray-900 p-3 rounded overflow-auto max-h-96"),
|
||||
h.Code(g.Attr("x-text", "formatData(selected?.RequestBody)")),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func responseTabContent() g.Node {
|
||||
return h.Div(
|
||||
g.Attr("x-show", "activeTab === 'response'"),
|
||||
h.Class("space-y-4"),
|
||||
h.H3(h.Class("font-medium"), g.Text("Headers")),
|
||||
h.Div(
|
||||
h.Class("text-sm space-y-1 text-gray-300 font-mono mb-4"),
|
||||
h.Template(
|
||||
g.Attr("x-for", "(values, key) in selected?.ResponseHeaders"),
|
||||
h.Div(
|
||||
h.Span(h.Class("text-gray-500"), g.Attr("x-text", "key + ':'")),
|
||||
g.Text(" "),
|
||||
h.Span(g.Attr("x-text", "values.join(', ')")),
|
||||
),
|
||||
),
|
||||
),
|
||||
h.H3(h.Class("font-medium"), g.Text("Body")),
|
||||
h.Pre(
|
||||
h.Class("text-sm text-gray-300 font-mono bg-gray-900 p-3 rounded overflow-auto max-h-96"),
|
||||
h.Code(g.Attr("x-text", "formatData(selected?.ResponseBody)")),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func detailRow(label, value string) g.Node {
|
||||
return h.Div(
|
||||
h.Span(h.Class("text-gray-500"), g.Text(label)),
|
||||
g.Text(" "),
|
||||
h.Span(g.Attr("x-text", value)),
|
||||
)
|
||||
}
|
||||
47
web/pages/networkScript.js
Normal file
47
web/pages/networkScript.js
Normal file
@@ -0,0 +1,47 @@
|
||||
function networkMonitor() {
|
||||
return {
|
||||
requests: [],
|
||||
selected: null,
|
||||
|
||||
init() {
|
||||
const es = new EventSource("/stream");
|
||||
es.onmessage = (e) => {
|
||||
const record = JSON.parse(e.data);
|
||||
const foundIdx = this.requests.findIndex((r) => r.ID === record.ID);
|
||||
if (foundIdx >= 0) {
|
||||
this.requests[foundIdx] = record;
|
||||
} else {
|
||||
this.requests.unshift(record);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
clear() {
|
||||
this.requests = [];
|
||||
this.selected = null;
|
||||
},
|
||||
|
||||
statusColor(status) {
|
||||
if (!status) return "text-gray-400";
|
||||
if (status < 300) return "text-green-400";
|
||||
if (status < 400) return "text-blue-400";
|
||||
if (status < 500) return "text-yellow-400";
|
||||
return "text-red-400";
|
||||
},
|
||||
|
||||
formatTime(time) {
|
||||
return new Date(time).toLocaleTimeString();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function formatData(base64Data) {
|
||||
if (!base64Data) return "";
|
||||
try {
|
||||
const decoded = atob(base64Data);
|
||||
const parsed = JSON.parse(decoded);
|
||||
return JSON.stringify(parsed, null, 2);
|
||||
} catch {
|
||||
return atob(base64Data);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user