baud/ui component sheet — templ · htmx · hyperscript fleetctl demo

Tokens

--bg-app
--bg-panel
--bg-raised
--bg-hover
--bg-active
--bg-input
--border
--border-strong
--fg
--fg-muted
--fg-faint
--accent
--accent-2
--on-accent
--ok
--warn
--err
--info
--sel
--shadow

Layout — panes

32ch drag the gutter — size persists
1fr nested data-panes-rows
1fr static split

Primitives — buttons & kbd

⌘Kesc

Primitives — badge & dot

okwarnerrinfoaccentneutral
okwarnerrinfoaccentneutral
okwarnerrinfoaccentneutral
okwarnerrinfoaccentneutral

Field / Input

ms
host: .local
fqdn preferred
✗ host unreachable

Choice — checkbox · radio · toggle

DatePicker

Structure — deflist & breadcrumb

host
db-04.prod
region
eu-west-1
kernel
6.8.0-41
uptime
41d 6h 12m
cpu
72.4%
mem
18.2 / 32.0 GiB
disk
412 GiB free
status
healthy

TagInput

env= prod region= eu-west enter adds · backspace pops
canary

Structure — panel · statusbar · toolbar

navigator
panel body — no actions slot
log tail f
000 ingest-gw accepted batch seq=0000
001 ingest-gw accepted batch seq=0007
002 ingest-gw accepted batch seq=0014
003 ingest-gw accepted batch seq=0021
004 ingest-gw accepted batch seq=0028
005 ingest-gw accepted batch seq=0035
006 ingest-gw accepted batch seq=0042
007 ingest-gw accepted batch seq=0049
008 ingest-gw accepted batch seq=0056
009 ingest-gw accepted batch seq=0063
010 ingest-gw accepted batch seq=0070
011 ingest-gw accepted batch seq=0077
012 ingest-gw accepted batch seq=0084
013 ingest-gw accepted batch seq=0091
014 ingest-gw accepted batch seq=0098
015 ingest-gw accepted batch seq=0105
016 ingest-gw accepted batch seq=0112
017 ingest-gw accepted batch seq=0119
018 ingest-gw accepted batch seq=0126
019 ingest-gw accepted batch seq=0133
020 ingest-gw accepted batch seq=0140
021 ingest-gw accepted batch seq=0147
022 ingest-gw accepted batch seq=0154
023 ingest-gw accepted batch seq=0161
024 ingest-gw accepted batch seq=0168
025 ingest-gw accepted batch seq=0175
026 ingest-gw accepted batch seq=0182
027 ingest-gw accepted batch seq=0189
028 ingest-gw accepted batch seq=0196
029 ingest-gw accepted batch seq=0203
030 ingest-gw accepted batch seq=0210
031 ingest-gw accepted batch seq=0217
032 ingest-gw accepted batch seq=0224
033 ingest-gw accepted batch seq=0231
034 ingest-gw accepted batch seq=0238
035 ingest-gw accepted batch seq=0245
036 ingest-gw accepted batch seq=0252
037 ingest-gw accepted batch seq=0259
038 ingest-gw accepted batch seq=0266
039 ingest-gw accepted batch seq=0273
NORMALfleet.gomain ↑2utf-8ln 128:14

Tabs — underline · boxed

39 pods running across 3 nodes
metrics window 5m — 60 samples

Select — native · menu · combobox

Data — pagination & diff

row 0001 — fixture
row 0002 — fixture
row 0003 — fixture
row 0004 — fixture
row 0005 — fixture
row 0001 — fixture
row 0002 — fixture
row 0003 — fixture
row 0004 — fixture
row 0005 — fixture
cmd/fleetctl/main.go +2 −2
@@ -12,6 +12,7 @@ func main() {
12 12 cfg := loadConfig()
13 pool := newPool(cfg, 4)
13 + pool := newPool(cfg, 8)
14 + pool.Audit = true
14 15 if err := pool.Start(); err != nil {
15 16 fatal(err)
16 17 }
@@ -41,5 +42,4 @@ func shutdown(p *Pool) {
41 42 p.Drain()
42 p.FlushLogs()
43 43 log.Println("bye")
44 44 }

Data — table (htmx sort)

fleet hosts — htmx sort
Host Reg CPU% Mem% St
auth-svcuse182.461.0ok
edge-cacheuse122.595.1ok
ingest-gweuw196.788.9err
kafka-brkuse148.966.4ok
media-procaps177.090.3warn
notif-faneuw112.923.1ok
pg-primaryuse161.278.0ok
search-idxusw258.371.5warn
Region Hosts RPS
use11491,244
euw1648,022
usw2922,310
aps12422
Region Hosts RPS
use11491,244
euw1648,022
usw2922,310
aps12422

Tree — fleet navigator

  • prod
    • ├─ core
      • │ ├─ ingest-gw12 pods
      • │ ├─ api-core8 pods
      • │ └─ billing3 pods
      • ├─ smoke
      • └─ soak
    • docs

    Toasts — OOB notification stack

    Deployed ingest-gw v2.14.1 rollout complete on 12 pods
    Connection lost eu-west-1 etcd quorum unreachable
    p99 latency above SLO
    Maintenance window eu-west-1 rotates certs at 02:00

    Feedback — progress · spinner · states · confirm

    rebalance ▰▰▰▰▰▰▰▰▰▰▰▱▱▱▱▱▱▱▱▱▱▱ 50% disk db-04 ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▱▱ 90% sync ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰ 100% quota ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▱▱▱▱▱▱▱▱ 64%
    fetching units…
    skeleton
    loading
    loading units $ fleetctl get units --watch
    empty
    no units try widening the filter
    error
    type db-04 to confirm

    Overlays — popover · tooltip

    Quick actions
    Deploy target
    Latency is over SLO and the error budget is burning. Hover a badge too.

    Overlays — modal & drawer

    Overlays — command palette (⌘K · htmx filter)

    ∅ no action run yet