updated UI
continuous-integration/drone/push Build is passing

This commit is contained in:
2026-04-17 15:21:27 +10:00
parent 7848557002
commit 98e92a8264
14 changed files with 1566 additions and 855 deletions
+75 -57
View File
@@ -1,6 +1,9 @@
package views
import "vctp/components/core"
import (
"fmt"
"vctp/components/core"
)
type SnapshotEntry struct {
Label string
@@ -52,23 +55,24 @@ templ SnapshotListPage(title string, subtitle string, entries []SnapshotEntry) {
<html lang="en">
@core.Header()
<body class="flex flex-col min-h-screen web2-bg">
<main class="flex-grow web2-shell space-y-8">
<section class="web2-header">
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div>
<div class="web2-pill">Snapshot Library</div>
<h1 class="mt-3 text-4xl font-bold">{ title }</h1>
<p class="mt-2 text-sm text-slate-600">{ subtitle }</p>
</div>
<a class="web2-button" href="/">Back to Dashboard</a>
</div>
<main class="flex-grow web2-shell web2-card-grid">
<section class="web2-header web2-page-head">
@core.PageHeader(
"Snapshot Library",
title,
subtitle,
[]core.ActionLink{
{
Label: "Back to Dashboard",
Href: "/",
Class: "web2-button secondary",
},
},
)
</section>
<section class="web2-card">
<div class="flex items-center justify-between gap-3 mb-4 flex-wrap">
<h2 class="text-lg font-semibold">Available Exports</h2>
<span class="web2-badge">{ len(entries) } files</span>
</div>
<div class="overflow-hidden border border-slate-200 rounded">
@core.SectionHead("Available Exports", fmt.Sprintf("%d files", len(entries)))
<div class="web2-table-shell">
<table class="web2-table">
<thead>
<tr>
@@ -81,13 +85,13 @@ templ SnapshotListPage(title string, subtitle string, entries []SnapshotEntry) {
for i, entry := range entries {
if entry.Group != "" && (i == 0 || entries[i-1].Group != entry.Group) {
<tr class="web2-group-row">
<td colspan="3" class="font-semibold text-slate-700">{ entry.Group }</td>
<td colspan="3" class="font-semibold">{ entry.Group }</td>
</tr>
}
<tr>
<td>
<div class="flex flex-col">
<span class="text-sm font-semibold text-slate-700">{ entry.Label }</span>
<span class="text-sm font-semibold">{ entry.Label }</span>
</div>
</td>
<td>
@@ -113,23 +117,24 @@ templ VcenterList(links []VcenterLink) {
<html lang="en">
@core.Header()
<body class="flex flex-col min-h-screen web2-bg">
<main class="flex-grow web2-shell space-y-8">
<section class="web2-header">
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div>
<div class="web2-pill">vCenter Inventory</div>
<h1 class="mt-3 text-4xl font-bold">Monitored vCenters</h1>
<p class="mt-2 text-sm text-slate-600">Select a vCenter to view snapshot totals over time.</p>
</div>
<a class="web2-button" href="/">Back to Dashboard</a>
</div>
<main class="flex-grow web2-shell web2-card-grid">
<section class="web2-header web2-page-head">
@core.PageHeader(
"vCenter Inventory",
"Monitored vCenters",
"Select a vCenter to view snapshot totals over time.",
[]core.ActionLink{
{
Label: "Back to Dashboard",
Href: "/",
Class: "web2-button secondary",
},
},
)
</section>
<section class="web2-card">
<div class="flex items-center justify-between gap-3 mb-4 flex-wrap">
<h2 class="text-lg font-semibold">vCenters</h2>
<span class="web2-badge">{ len(links) } total</span>
</div>
<div class="overflow-hidden border border-slate-200 rounded">
@core.SectionHead("vCenters", fmt.Sprintf("%d total", len(links)))
<div class="web2-table-shell">
<table class="web2-table">
<thead>
<tr>
@@ -140,7 +145,7 @@ templ VcenterList(links []VcenterLink) {
<tbody>
for _, link := range links {
<tr>
<td class="font-semibold text-slate-700">{ link.Name }</td>
<td class="font-semibold">{ link.Name }</td>
<td class="text-right">
<a class="web2-link" href={ link.Link }>View Totals</a>
</td>
@@ -161,29 +166,42 @@ templ VcenterTotalsPage(vcenter string, entries []VcenterTotalsEntry, chart Vcen
<html lang="en">
@core.Header()
<body class="flex flex-col min-h-screen web2-bg">
<main class="flex-grow web2-shell web2-shell-wide space-y-8 max-w-screen-2xl mx-auto" style="max-width: 1400px; width: 100%;">
<section class="web2-header">
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div>
<div class="web2-pill">vCenter Totals</div>
<h1 class="mt-3 text-4xl font-bold">Totals for { vcenter }</h1>
<p class="mt-2 text-sm text-slate-600">{ meta.TypeLabel } snapshots of VM count, vCPU, and RAM over time.</p>
</div>
<div class="flex gap-3">
<a class="web2-button secondary" href="/vcenters">All vCenters</a>
<a class="web2-button" href="/">Dashboard</a>
</div>
</div>
<div class="web3-button-group mt-8 mb-3">
<a class={ meta.HourlyClass } href={ meta.HourlyLink }>Hourly Detail (45d)</a>
<a class={ meta.DailyClass } href={ meta.DailyLink }>Daily Aggregated</a>
</div>
</section>
<main class="flex-grow web2-shell web2-shell-wide web2-card-grid">
<section class="web2-header web2-page-head">
@core.PageHeader(
"vCenter Totals",
"Totals for "+vcenter,
meta.TypeLabel+" snapshots of VM count, vCPU, and RAM over time.",
[]core.ActionLink{
{
Label: "All vCenters",
Href: "/vcenters",
Class: "web2-button secondary",
},
{
Label: "Dashboard",
Href: "/",
Class: "web2-button",
},
},
)
@core.SegmentedActions(
[]core.SegmentedLink{
{
Label: "Hourly Detail (45d)",
Href: meta.HourlyLink,
Class: meta.HourlyClass,
},
{
Label: "Daily Aggregated",
Href: meta.DailyLink,
Class: meta.DailyClass,
},
},
)
</section>
<section class="web2-card">
<div class="flex items-center justify-between gap-3 mb-4 flex-wrap">
<h2 class="text-lg font-semibold">{ meta.TypeLabel } Snapshots</h2>
<span class="web2-badge">{ len(entries) } records</span>
</div>
@core.SectionHead(meta.TypeLabel+" Snapshots", fmt.Sprintf("%d records", len(entries)))
if chart.ConfigJSON != "" {
<div class="mb-6 overflow-auto">
<div class="web3-chart-frame">
@@ -198,7 +216,7 @@ templ VcenterTotalsPage(vcenter string, entries []VcenterTotalsEntry, chart Vcen
</script>
</div>
}
<div class="overflow-hidden border border-slate-200 rounded">
<div class="web2-table-shell">
<table class="web2-table">
<thead>
<tr>