Documentation
¶
Overview ¶
templ: version: v0.3.1020
templ: version: v0.3.1020
templ: version: v0.3.1020
templ: version: v0.3.1020
templ: version: v0.3.1020
templ: version: v0.3.1020
templ: version: v0.3.1020
templ: version: v0.3.1020
templ: version: v0.3.1020
Index ¶
- Constants
- func AboutButton(slug string) templ.Component
- func AboutDialog(slug, description string) templ.Component
- func Button(kind ButtonKind, size ButtonSize, attrs templ.Attributes) templ.Component
- func ButtonClass(k ButtonKind, s ButtonSize) string
- func ButtonLink(kind ButtonKind, size ButtonSize, href string) templ.Component
- func CodeBlock(id, code string, attrs templ.Attributes) templ.Component
- func CopyIcon(target, label string) templ.Component
- func DefinitionList(rows []Def) templ.Component
- func Dot(status string) templ.Component
- func Drawer(id, title string, foot templ.Component) templ.Component
- func Duration(d *time.Duration) string
- func Empty(msg, hint string) templ.Component
- func ErrorButton(runID string) templ.Component
- func ErrorDialog(runID, workflow, status, message string) templ.Component
- func Freshness(status string) templ.Component
- func FreshnessLabel(s string) string
- func FreshnessMark(status string) templ.Component
- func GlyphNames() []string
- func Heatmap(v CalendarView) templ.Component
- func Icon(name, class string) templ.Component
- func IconButton(label, icon string, attrs templ.Attributes) templ.Component
- func KV(items []KVItem) templ.Component
- func Kbd(keys string) templ.Component
- func Link(href, label string) templ.Component
- func LoadBars(bars []LoadBar, missed int) templ.Component
- func LoadBarsSized(bars []LoadBar, missed int, size string) templ.Component
- func LoadTrend(series []TrendSeries, window string) templ.Component
- func Logo(key string, size int) templ.Component
- func LogoKeys() []string
- func LogoTitle(ctx context.Context, key string) string
- func MethodPill(method string) templ.Component
- func Modal(id, title string, foot templ.Component) templ.Component
- func NavBadge(kind, text string) templ.Component
- func Panel(title, count string) templ.Component
- func PanelLink(title, count, href, label string) templ.Component
- func Retry(attempt int) templ.Component
- func RunsChart(buckets []postgres.Bucket) templ.Component
- func SearchInput(name, value, label, filters string) templ.Component
- func Segmented(label string, options []SegOption) templ.Component
- func ShortStamp(t *time.Time) templ.Component
- func Spark(values []*int64) templ.Component
- func State(status string) templ.Component
- func StateFill(s string) string
- func StateWord(ctx context.Context, status string) string
- func Stats(items []Stat) templ.Component
- func Status(kind string) templ.Component
- func StatusKinds() []string
- func StatusMark(kind string) templ.Component
- func Switch(label string, on bool, attrs templ.Attributes) templ.Component
- func TableFoot(shown, total int, noun string) templ.Component
- func Tabs(label string, tabs []Tab) templ.Component
- func Tag(text, rota string) templ.Component
- func Text(s string) templ.Component
- func Timestamp(t *time.Time) string
- func Toast(kind, message, action, href string) templ.Component
- func TrendGeometry() (int, int)
- func TrendWindow(days []postgres.LoadDay) string
- func UTCStamp(t *time.Time) string
- func When(t *time.Time) string
- type Bar
- type BarSegment
- type Brand
- type ButtonKind
- type ButtonSize
- type CalendarSummary
- type CalendarView
- type Def
- type GridLine
- type KVItem
- type LoadBar
- type Month
- type SegOption
- type Square
- type Stat
- type Tab
- type TrendPoint
- type TrendSeries
- type WeekdayLabel
Constants ¶
const ButtonAccent = ButtonPrimary
ButtonAccent is ButtonPrimary by its older name: it was the workbench's Run, which is that screen's primary action, and the two are one kind now.
const TrendDays = 90
TrendDays is how far back the trend reads. Ninety rather than the calendar's year: a chart with 364 points on 300 units of width draws under one point per pixel, and "is it getting worse" is a question about the recent past.
Variables ¶
This section is empty.
Functions ¶
func AboutButton ¶
AboutButton and AboutDialog: a workflow's description, behind a question mark ---------------------------------------------------------------------------
The description used to sit as a paragraph above the counts, and a real one is not a line. `id_profile_economics` writes fifteen: why the cube exists, why it moved from 05:40 to :40, which upstream refreshes every fifteen minutes, and the measured cost of both halves. All of it worth having, and all of it pushing the parameters, the rates and the graph below the fold -- so the page about a workflow opened on an essay about it.
A question mark beside the NAME keeps both: the answer is one click from the thing it explains, and the page goes back to being the page.
func AboutDialog ¶
func Button ¶
func Button(kind ButtonKind, size ButtonSize, attrs templ.Attributes) templ.Component
Button is a <button>, `type="button"` unless the attributes say otherwise: one inside a form defaults to submit, and a filter bar that posts the form around it by accident is how a statement ends up somewhere it should not. Its content -- an icon, a word -- is the children.
func ButtonClass ¶
func ButtonClass(k ButtonKind, s ButtonSize) string
ButtonClass is a button's look, for a control that is not a Button -- a link that opens a dialog and has to carry its own attributes.
func ButtonLink ¶
func ButtonLink(kind ButtonKind, size ButtonSize, href string) templ.Component
ButtonLink is a link drawn as a button: a verb that goes somewhere (open in the workbench) rather than one that acts here. A link and not a <button>, so it opens in a new tab, shows its address and works with no script.
func CodeBlock ¶
func CodeBlock(id, code string, attrs templ.Attributes) templ.Component
CodeBlock is a block of code to read and to copy -- a curl, a command.
THE COPY BUTTON IS HIDDEN UNTIL A SCRIPT CAN DRIVE IT. Without ui.js it would be a button that does nothing; the text is selectable either way. The id is the caller's, because the button copies by it.
attrs go on the <pre>: what a script needs to keep the code current (the endpoint's curl follows its form).
func CopyIcon ¶
CopyIcon is the 18px Copy beside a value: the text of the element target names goes to the clipboard. The caller decides when it shows (a cell's hover, or always) and wraps it in `data-js`, since it needs the script.
func DefinitionList ¶
DefinitionList is configuration: a term and its value, aligned in two columns. A machine's value is mono and may break anywhere -- a URI has no spaces to wrap at.
func Drawer ¶
Drawer is a panel that slides in from the right over the page: a form, a detail, an explanation that does not deserve a page of its own.
A NATIVE <dialog>, opened with showModal() by any `data-dialogo="<id>"` control (ui.js), so focus containment, Escape and an inert page come with the element. Its name is its heading (aria-labelledby). The close button is a `method="dialog"` form, which closes it with no script, and it is NOT autofocused: ui.js puts the focus on the body's first field, where the reader starts, and gives it back to the opener on close.
foot holds the drawer's actions, pinned under the scrolling body; nil for none.
func Duration ¶
Duration picks the unit by order of magnitude. "0.4s" says more than "400ms" in a column whose neighbour takes minutes.
ENGLISH, for the screens that call it without a context; i18n.Elapsed is the same in the page's language, and a screen moves to it when it is translated.
func Empty ¶
Empty communicates the absence of data without looking like an error. An empty table with no explanation sends the operator looking for a defect where there is none.
func ErrorButton ¶
--------------------------------------------------------------------------- Err em dialogo
The error used to occupy a whole row below the run, inside the table. With a real stack trace that pushed the rest of the list off the screen and mixed two things — the list and the detail. Now the row holds a button, and the text lives in a native <dialog>: ESC closes it, the backdrop dims and the focus stays trapped inside it without a line of JavaScript of ours. ---------------------------------------------------------------------------
func ErrorDialog ¶
func Freshness ¶
Freshness is a destination's or a writer's status against its schedule, in words as well as colour: the colour helps whoever sees it, the word works for everyone, screen readers and colour-blind operators included.
A MARK AND A WORD (screen-load-v2 LV1), drawn by Status like State: the tinted badge was the last one density-base left on the screen.
func FreshnessLabel ¶
FreshnessLabel is the word for a status, as the page and the summary say it.
func FreshnessMark ¶
FreshnessMark is a status's mark alone, for a place that says the word beside it -- a filter's choice.
func GlyphNames ¶
func GlyphNames() []string
GlyphNames is every glyph there is, sorted: the gallery draws them all.
func Heatmap ¶
func Heatmap(v CalendarView) templ.Component
Heatmap draws a year of days, one square each.
Server-rendered SVG like every other chart here: it needs no library, it is in the HTML the first time the page arrives, and it prints. The tooltip is a <title>, which the browser shows on its own. A day that ran is a link -- to where the Calendar's caller said -- and the day chosen has a ring.
func Icon ¶
Icon draws one glyph inline, in the text's own colour, at the size the class gives it. `shrink-0` is always added: an icon beside a long label in a flex row is the first thing the browser squeezes, and a squeezed glyph reads as a different one.
The stroke is 1.7 rather than Lucide's 2 -- the weight of the handoff's glyphs, and closer to IBM Plex's at 13px. A name nobody drew renders nothing.
func IconButton ¶
func IconButton(label, icon string, attrs templ.Attributes) templ.Component
IconButton is a button with a glyph and no word, so its label is an ARGUMENT and not an attribute somebody may remember: it is spoken as the name and shown as the tooltip.
func KV ¶
KV is a dense key-value grid (density-base DB6): three to a row (one on a phone), each a mono key, its value and a faint note, with Copy on the value that shows on the cell's hover or focus. The hairlines are the gap showing the line colour, as in Stats.
func Link ¶
Link is a quiet link as a component, for a slot that takes one -- "2 workflows still failing →" under a number.
func LoadBars ¶
LoadBars draws a destination's loads, oldest first, each bar a link to its run, followed by `missed` dashed bars: slots that went by without a load.
A load that did not say how many rows it wrote is drawn hollow at full height -- present, uncounted -- and never as a zero; one that wrote zero is a red sliver.
func LoadBarsSized ¶
LoadBarsSized is LoadBars at another height class: 26px inside a KPI cell (screen-load-v2 LV2), 44px on its own.
func LoadTrend ¶
func LoadTrend(series []TrendSeries, window string) templ.Component
LoadTrend draws what a workflow's pipelines have been loading.
Four sparklines, server-rendered like the calendar: a chart that needs a runtime is a chart that does not appear on the page somebody opens during an incident.
The panel is DRAWN ONLY when there is history. A workflow whose steps are shell commands has no load to trend, and four empty boxes on its page would be four questions with no answer -- the caller checks, so this never has to render an apology.
func Logo ¶
Logo is a connector's or a language's mark at 18, 28 or 40px: the brand's own drawing on a quiet tile, or a monogram where there is no mark. It is named (role=img) for whoever cannot see it. See logo.go for the registry.
func LogoTitle ¶
logoTitle is a mark's name for a screen reader. A brand is its own name in every language; the two monograms that are words are translated. LogoTitle is the name a key's logo is read by, in the request's language: what a filter writes beside the mark.
func MethodPill ¶
MethodPill is an HTTP method, as the protocol writes it. GET is green because it is the safe one -- the only one this console's endpoints serve.
func NavBadge ¶
NavBadge is a sidebar section's signal: a count that needs somebody (fail), or a pulse that something is live (live).
func Panel ¶
Panel is one block of a page (density-base DB1): a 38px heading -- a 13px title and, faint beside it, a count -- over its content, which brings its own padding. One component where there were two: a page-local card, and a Card whose title was a caps accent eyebrow. count may be "".
func PanelLink ¶
PanelLink is a Panel with a link on the right of its heading ("see all"): the heading already has the room, and a footer row for one link costs a line of the page.
func Retry ¶
Retry marks a run on its second attempt or later: `↻N`, what it means in the tooltip. Nothing on a first try -- attempt counts from 0.
func RunsChart ¶
RunsChart draws one stacked column per bucket -- success, failed, in flight -- the Overview's "how many, and how did they end" (screen-overview T5). The average-duration line it carried is gone: the duration is a KPI, and a second scale on one chart is a chart nobody reads twice.
func SearchInput ¶
SearchInput is a list's search box. It is not a form: the caller puts it in the GET form whose URL carries the filter, so a search is a link and works with no script. `/` focuses it (ui.js).
filters names the element whose rows it filters while somebody types (`data-filter-for`, driven by ui.js); empty for a box that only submits.
THE LABEL IS SPOKEN AND SHOWN. A placeholder is not a label -- it vanishes on the first keystroke and some readers skip it -- so the same words are the aria-label too.
func Segmented ¶
Segmented is a filter with few values -- a status, a kind -- drawn as one control. Each choice is a LINK, so the filter is a URL; the chosen one says `aria-current="true"`, because `aria-pressed` belongs to buttons and `aria-current="page"` to the sidebar.
func ShortStamp ¶
ShortStamp is a date as a table cell shows it (density-base DB2): `Oct 16 02:23`, in UTC, with the full UTC in its title -- a column of them reads at a glance, and the year and the seconds are one hover away. A detail line keeps UTCStamp. nil is "—".
func Spark ¶
Spark draws a destination's last loads as a small line: one point per load, oldest on the left.
A load whose step did not say how many rows it wrote leaves a GAP, not a point at zero. Absent is not zero, and a line dropping to the floor would tell an operator the table emptied overnight when the step merely did not count.
Hand-written SVG with only numbers in it, so there is nothing to escape.
func State ¶
State draws a run's or a step's status.
The colours are desaturated on purpose: a dashboard's pure green and red shout louder than the information. The shape carries the meaning too -- see Status -- so it does not depend on colour alone.
func StateFill ¶
StateFill is a state's colour as a fill, without the pulse a dot has: a strip of squares where every running one blinked would be noise.
func StateWord ¶
StateWord is a run's or a step's status in the reader's language, as the State mark says it -- for a line of text that names a state without the mark beside it.
func Stats ¶
Stats is a strip of numbers -- an endpoint's limits, a screen's headline figures -- in one bordered band rather than one card each, which is what lets four numbers be read as a row.
A <dl>, because each number is the definition of its label. The hairlines between cells are the gap showing the line colour underneath, so they stay right however the cells wrap.
func Status ¶
Status is a state the way every screen says it: a mark in a shape, the word, both in the state's colour -- so nobody has to tell red from green to read it. See statuses for the vocabulary.
func StatusKinds ¶
func StatusKinds() []string
StatusKinds is every kind Status draws, for the gallery.
func StatusMark ¶
StatusMark is the mark alone, for a dense column where the word is said elsewhere; the word stays in the title and for screen readers.
func Switch ¶
Switch is an on/off control, announced as one: role=switch with its state and a name. ui.js flips aria-checked on click; `data-manual` in attrs leaves that to the screen's own script, for a switch whose state the server holds.
func TableFoot ¶
TableFoot says how much of a list is on screen, and says "of" only when a filter is hiding part of it.
The total and the noun ride along as data, so the list filter can say it again as rows are hidden without knowing how to pluralise anything.
func Tabs ¶
Tabs is a tablist. The MARKUP is the contract -- `data-tab` per tab, `aria-selected` on one -- and the island that owns the panels drives it, since only it knows what a panel is. Each tab is `type="button"`, because a tab inside a form must not submit it.
func Timestamp ¶
Timestamp is the full date, for audit columns, in the timezone of WHOEVER FORMATS -- which is the process's TZ, not the reader's.
The marker is not decoration. It used to render "2026-03-10 22:00:00" and stop there, and the same instant reads 22:00 on a machine at UTC-3 and 01:00 in a pod at UTC. Two people comparing one failure at three in the morning disagreed about when it happened, with nothing on the screen to reconcile them. notify/slack.go had already learned this and appends MST for the same reason; the screen had not.
For a value that IS UTC by contract -- a slot, an auto param -- use UTCStamp: local time there would make the screen disagree with the $BREVIS_AUTO_* variable the step actually reads.
func Toast ¶
Toast is one sentence saying what just happened, in its state's mark, with an action when there is one ("Undo", "View logs"). kind is ok, fail or run. It is drawn into the page's toast region -- by the server for a flash, by Brevis.toast for a script -- and ui.js removes it after 4.2s.
func TrendGeometry ¶
TrendGeometry hands the template the viewBox it should use.
func TrendWindow ¶
TrendWindow is the span the panel covers, for the caption.
func UTCStamp ¶
UTCStamp is the full date in UTC, for values that are UTC by contract.
The slot and the auto params are stored, injected and read in UTC -- a step gets `2026-03-11T01:00:00Z` in $BREVIS_AUTO_ADJUSTED_AT. Rendering those in the server's local time made the screen show `2026-03-10 22:00:00` beside a `date` of `2026-03-11`: one day apart, in the same grid, with nothing saying why, and a third answer for anyone who checked the environment.
The screen agreeing with the contract is worth more than the screen agreeing with the clock of whoever ran the deployment.
Types ¶
type BarSegment ¶
type BarSegment struct {
Class string
}
BarSegment is one part of a Stat's bar: its share of the whole (0..1) and its colour class.
type ButtonKind ¶
type ButtonKind int
ButtonKind is what a button is for, and therefore how loud it is.
const ( // ButtonSecondary is the default: bordered, quiet, most buttons. ButtonSecondary ButtonKind = iota // ButtonPrimary is the one thing a screen most wants done, in the accent: // the lime is spent here, on the open section and on the focus ring, and // nowhere else, so it always points at the next click. One per screen. ButtonPrimary // ButtonDanger is a verb that loses something. ButtonDanger )
type ButtonSize ¶
type ButtonSize int
ButtonSize is a button's height.
const ( SizeRegular ButtonSize = iota // 32px SizeSmall // 26px, in a table row or a dense toolbar )
type CalendarSummary ¶
CalendarSummary is what the calendar says before its grid: how many days it ran, how many failed, how many days since the last failure -- or since it began, if it never failed -- when that was, and since when it runs.
type CalendarView ¶
type CalendarView struct {
Squares []Square
Months []Month
Weekdays []WeekdayLabel
Width, Height int
Summary CalendarSummary
}
CalendarView is a drawn calendar: its squares and labels, its size, and its summary.
func Calendar ¶
func Calendar(ctx context.Context, days []postgres.Day, now time.Time, link func(time.Time) string, selected *time.Time) CalendarView
Calendar lays a year of days out as a grid of weeks, Monday at the top, ending with the week of now: 53 columns, the days still to come in this week drawn as such. link is where a day with runs goes; selected is the day chosen, marked.
The colour is the day's WORST OUTCOME, not its volume, and that is the whole decision behind this chart. GitHub encodes how much happened, because that is its question. The question here is "when did this pipeline break", and a heatmap where a busy Tuesday and a broken Tuesday are both dark answers neither.
type Def ¶
type Def struct {
Term, Value string
// Mono draws the value in the machine's face: a URI, a cron, a key.
Mono bool
}
Def is one row of a DefinitionList.
type KVItem ¶
type KVItem struct {
Key, Value, Note string
}
KVItem is one cell of a key-value grid: a machine's key, its value, and a note on what it means.
type SegOption ¶
type SegOption struct {
Label, Href string
// Count is printed beside the label when set: how many rows the choice
// would show. A string so the caller decides "3" or "3+".
Count string
Current bool
}
SegOption is one choice in a segmented filter: a link, so the filter is a URL and works with no script.
type Square ¶
type Square struct {
X, Y int
Date time.Time
Fill string
Tooltip string
// Link opens the day's runs; empty for a day with none.
Link string
// Empty says nothing ran. It is drawn, and drawn faintly: a missing square
// would make the grid ragged and a reader would count the gap as a week.
Empty bool
// Future is a day of this week still to come; Selected the day chosen.
Future, Selected bool
}
Square is one day of the calendar.
type Stat ¶
type Stat struct {
Label, Value string
// Unit is printed small beside the number ("s", "GB"); Note faint, on
// the value's line (density-base DB4).
Unit, Note string
// Icon is a glyph name for the label; empty draws none.
Icon string
// Dot is a state's colour (a `bg-state-*` class) for a dot before the
// label; empty draws none.
Dot string
// Bar is an optional thin bar under the value, in segments.
Bar []BarSegment
// Sub is faint text beside the label ("· 3 loads").
Sub string
// Tone is a text colour class for the value, for a number that needs a
// look (`text-state-failed`); empty is the ink.
Tone string
// Body is drawn under the label in place of a value: a small chart.
Body templ.Component
// Title is the cell's tooltip: how to read what it shows.
Title string
// Foot is a line under the value -- a link to what the number counts,
// the context it needs; nil draws none.
Foot templ.Component
}
Stat is one number in a Stats strip.
type Tab ¶
type Tab struct {
Key, Label string
// Count is drawn quieter beside the label ("Logs 17"); empty draws none.
Count string
Selected bool
}
Tab is one tab in a tablist.
type TrendPoint ¶
TrendPoint is one day on the line, carrying its own tooltip.
type TrendSeries ¶
type TrendSeries struct {
Label string
Latest string // the current value, formatted
Delta string // how it moved across the window, e.g. "+38%"
Hue string // the CSS class for Delta
Note string // what the number means, in words
Path string // the polyline's points
Area string // the same, closed to the baseline
Points []TrendPoint
Empty bool // no data at all: the panel says so instead of drawing a flat line
Flat bool // one day only, so there is no trend yet
}
TrendSeries is one line of the load trend, ready to draw.
Everything the template needs is computed here rather than in the markup: a `.templ` file that does arithmetic is a file where a division by zero becomes a blank page during an incident.
func Trend ¶
func Trend(days []postgres.LoadDay) []TrendSeries
Trend turns a workflow's load history into the four series the screen draws.
Four, and these four, because they are the note's own questions: is the dataset growing, is each row getting fatter, is the source getting slower, is the destination getting slower. A fifth would be a number nobody asked for, and this panel has to be readable at a glance during an incident.
type WeekdayLabel ¶
WeekdayLabel is one of the three labels down the calendar's left edge.
Source Files