Struct Button 

pub struct Button<M = ()>(/* private fields */);

button: a push button. A click sends action with actions.click ("click" by default); it never takes focus.

Implementations

impl<M> Button<M>

pub fn key(self, key: impl Into<NodeKey>) -> Self

Identity among siblings: keeps the node’s id (and Tern’s view state) across reorders. A string, or an integer.

Examples found in repository

examples/ask.rs (line 38)

fn view() -> View<()> {
	let sizes = SIZES.iter().map(|(value, label)| choice(value, label));
	View::new().main([html::form().key("ask").child(
		ui::card()
			.key("card")
			.head("Which size?")
			.max(Bound::w(Extent::Ch(48.0)))
			.child(ui::row().key("sizes").gap("lg").children(sizes))
			.child(
				ui::button("Create")
					.key("go")
					.variant("primary")
					.actions(Actions::new().click("submit")),
			),
	)])
}

examples/dashboard.rs (line 708)

	fn head(&self) -> ui::Row<Msg> {
		let title = ui::text(spans![
			ui::span("Fleet").style("title"),
			" ",
			ui::span(format!(
				"production · {} services · up {}",
				self.services.len(),
				ago(UPTIME + u64::from(self.ticks))
			))
			.style("muted"),
		])
		.key("title");
		let worst = self
			.services
			.iter()
			.map(|s| s.health)
			.max_by_key(|h| match h {
				Health::Healthy => 0,
				Health::Degraded => 1,
				Health::Down => 2,
			})
			.unwrap_or(Health::Healthy);
		let status = match worst {
			Health::Healthy => ui::badge("Operational").tone(Tone::Success),
			Health::Degraded => ui::badge("Degraded").tone(Tone::Warning),
			Health::Down => ui::badge("Partial outage").tone(Tone::Error),
		};
		let refresh = ui::button("Refresh")
			.key("refresh")
			.icon("repeat")
			.keys(["r"])
			.on_click(Msg::Refresh);
		ui::row()
			.key("head")
			.justify("between")
			.align("center")
			.child(title)
			.child(
				ui::row()
					.key("end")
					.gap("sm")
					.align("center")
					.children(nodes![status.key("status"), refresh]),
			)
	}

	/// The stats strip: at most four tiles, directly on the page.
	fn stats(&self) -> ui::Stats<Msg> {
		let total = self.services.len();
		let healthy = self
			.services
			.iter()
			.filter(|s| s.health == Health::Healthy)
			.count();
		let deploys = |state| self.deploys.iter().filter(|d| d.state == state).count();
		let open = self
			.incidents
			.iter()
			.filter(|i| i.phase != Phase::Resolved)
			.count();
		let unacked = self
			.incidents
			.iter()
			.filter(|i| i.phase == Phase::Open)
			.count();
		let rps: f64 = self.services.iter().filter_map(|s| s.rps.last()).sum();
		let mut services = StatItem::new("Healthy", format!("{healthy}/{total}")).sub("services");
		if healthy < total {
			services = services.tone(Tone::Warning);
		}
		let mut incidents =
			StatItem::new("Open incidents", open.to_string()).sub(format!("{unacked} unacknowledged"));
		if unacked > 0 {
			incidents = incidents.tone(Tone::Error);
		}
		ui::stats([
			services,
			StatItem::new("Rolling out", deploys(State::Running).to_string())
				.sub(format!("{} need approval", deploys(State::Waiting))),
			incidents,
			StatItem::new("Traffic", format!("{rps:.0}")).sub("req/s"),
		])
	}

	/// The tabs: one per view, with muted counts.
	fn nav(&self) -> ui::Tabs<Msg> {
		let count = |n: usize| ui::span(n.to_string()).style("muted");
		let open = self
			.incidents
			.iter()
			.filter(|i| i.phase != Phase::Resolved)
			.count();
		ui::tabs()
			.key("nav")
			.active(self.page.id())
			.tab("services", spans!["Services ", count(self.services.len())])
			.tab("deploys", spans!["Deploys ", count(self.deploys.len())])
			.tab("incidents", spans!["Incidents ", count(open)])
			.on_select(|id| Msg::Page(id.to_owned()))
	}

	/// The active view: its table beside the selected row's detail card
	/// (under it when `plain`).
	fn body(&self, plain: bool) -> Node<Msg> {
		let page = self.page;
		let selected = self.selected[page.index()];
		let (list, detail) = match page {
			Page::Services => (
				nodes![self.services_table()],
				selected
					.and_then(|id| self.services.iter().find(|s| s.id == id))
					.map(service_card),
			),
			Page::Deploys => (
				nodes![self.deploys_bar(), self.deploys_table()],
				selected
					.and_then(|id| self.deploys.iter().find(|d| d.id == id))
					.map(deploy_card),
			),
			Page::Incidents => (
				nodes![self.incidents_table()],
				selected
					.and_then(|id| self.incidents.iter().find(|i| i.id == id))
					.map(incident_card),
			),
		};
		let mut parts: Vec<Node<Msg>> = nodes![
			ui::col()
				.key("list")
				.gap("sm")
				.grow(1.0)
				.basis(0.0)
				.children(list)
		];
		if let Some(card) = detail {
			parts.push(
				card
					.key("detail")
					.min(Bound::w(Extent::Ch(44.0)))
					.max(Bound::w(Extent::Ch(56.0)))
					.into(),
			);
		}
		if plain {
			ui::col().key(page.id()).gap("md").children(parts).into()
		} else {
			ui::row()
				.key(page.id())
				.align("stretch")
				.gap("lg")
				.children(parts)
				.into()
		}
	}

	/// A selectable table of `page` with its handlers and selection.
	fn table(&self, page: Page, empty: &str) -> ui::Table<Msg> {
		let mut table = ui::table()
			.key("table")
			.selectable(true)
			.empty(empty)
			.on_select(move |id| Msg::Select(page, id.to_owned()))
			.on_activate(move |id| Msg::Open(page, id.to_owned()));
		if let Some(id) = self.selected[page.index()] {
			table = table.selected(id);
		}
		table
	}

	/// The services table.
	fn services_table(&self) -> ui::Table<Msg> {
		let mut table = self
			.table(Page::Services, "No services yet")
			.col(Column::new("name", "Service").grow(1.0).priority(6.0))
			.col(Column::new("region", "Region").priority(3.0))
			.col(Column::new("version", "Version").mono(true).priority(2.0))
			.col(Column::new("traffic", "Traffic").priority(1.0))
			.col(
				Column::new("rps", "req/s")
					.align(TextAlign::End)
					.mono(true)
					.priority(4.0),
			)
			.col(
				Column::new("p95", "p95")
					.align(TextAlign::End)
					.mono(true)
					.priority(4.0),
			)
			.col(
				Column::new("errors", "Errors")
					.align(TextAlign::End)
					.mono(true)
					.priority(4.0),
			)
			.col(Column::new("health", "Health").priority(5.0));
		for s in &self.services {
			let (label, tone) = s.health.look();
			let mut errors = TextCell::new(format!("{:.1}%", s.errors));
			if s.errors >= 1.0 {
				errors = errors.tone(Tone::Error);
			}
			table = table.row(
				TableRow::new(s.id)
					.cell("name", TextCell::new(s.id).dot(tone.clone()))
					.cell("region", s.region)
					.cell("version", s.version)
					.cell("traffic", SparkCell::new(s.rps.clone()))
					.cell("rps", format!("{:.0}", s.rps.last().copied().unwrap_or_default()))
					.cell("p95", format!("{:.0} ms", s.p95))
					.cell("errors", errors)
					.cell("health", BadgeSpec::new(label).tone(tone)),
			);
		}
		table
	}

	/// The deploys toolbar: a muted description and the filter.
	fn deploys_bar(&self) -> ui::Row<Msg> {
		let attention = self
			.deploys
			.iter()
			.filter(|d| matches!(d.state, State::Waiting | State::Failed))
			.count();
		ui::row()
			.key("bar")
			.justify("between")
			.align("center")
			.child(
				ui::text(ui::span("Rollouts to production, newest first").style("muted")).key("about"),
			)
			.child(
				ui::tabs()
					.key("filter")
					.variant("segmented")
					.active(self.filter.clone())
					.tab("all", "All")
					.tab("attention", spans![
						"Needs you ",
						ui::span(attention.to_string()).style("muted")
					])
					.on_select(|id| Msg::Filter(id.to_owned())),
			)
	}

	/// The deploys table.
	fn deploys_table(&self) -> ui::Table<Msg> {
		let mut table = self
			.table(Page::Deploys, "Nothing needs you right now")
			.col(Column::new("service", "Service").grow(1.0).priority(6.0))
			.col(Column::new("commit", "Commit").mono(true).priority(3.0))
			.col(Column::new("region", "Region").priority(2.0))
			.col(Column::new("traffic", "Traffic").priority(1.0))
			.col(Column::new("rollout", "Rollout").priority(1.0))
			.col(Column::new("state", "State").priority(5.0));
		for d in self.shown_deploys() {
			let (label, tone) = d.state.look();
			table = table.row(
				TableRow::new(d.id)
					.cell("service", TextCell::new(d.service).dot(tone.clone()))
					.cell("commit", d.commit)
					.cell("region", d.region)
					.cell("traffic", SparkCell::new(d.rps.clone()))
					.cell("rollout", MeterCell {
						value: Some(d.done),
						title: Some(format!("{:.0}%", d.done * 100.0)),
						..MeterCell::default()
					})
					.cell("state", BadgeSpec::new(label).tone(tone)),
			);
		}
		table
	}

	/// The incidents table.
	fn incidents_table(&self) -> ui::Table<Msg> {
		let mut table = self
			.table(Page::Incidents, "No incidents. All quiet.")
			.col(Column::new("title", "Incident").grow(1.0).priority(6.0))
			.col(Column::new("id", "Id").mono(true).priority(2.0))
			.col(Column::new("service", "Service").priority(3.0))
			.col(Column::new("severity", "Severity").priority(4.0))
			.col(
				Column::new("age", "Open for")
					.align(TextAlign::End)
					.mono(true)
					.priority(4.0),
			)
			.col(Column::new("phase", "State").priority(5.0));
		for i in &self.incidents {
			let (sev, sev_tone) = i.severity.look();
			let (phase, phase_tone) = i.phase.look();
			table = table.row(
				TableRow::new(i.id)
					.cell("title", TextCell::new(i.title).dot(sev_tone.clone()))
					.cell("id", i.id)
					.cell("service", i.service)
					.cell("severity", BadgeSpec::new(sev).tone(sev_tone))
					.cell("age", ago(i.age))
					.cell("phase", BadgeSpec::new(phase).tone(phase_tone)),
			);
		}
		table
	}

	/// The key legend.
	fn legend(&self) -> ui::Row<Msg> {
		let key = |k: &str| ui::span(k).style("key");
		let muted = |t: &str| ui::span(t).style("muted");
		let keys = if self.confirming.is_some() {
			spans![key("enter"), muted(" confirm  "), key("esc"), muted(" back")]
		} else {
			spans![
				key("tab"),
				muted(" views  "),
				key("j"),
				key("k"),
				muted(" move  "),
				key("enter"),
				muted(" open  "),
				key("a"),
				muted(" action  "),
				key("r"),
				muted(" refresh  "),
				key("q"),
				muted(" quit"),
			]
		};
		let note = if self.note.is_empty() {
			"Up to date"
		} else {
			self.note.as_str()
		};
		ui::row()
			.key("legend")
			.justify("between")
			.align("center")
			.child(ui::text(keys).key("keys"))
			.child(ui::text(muted(note)).key("note"))
	}
}

/// A detail card: the head with the primary action at its end, the `kv` and
/// the `danger` trigger.
fn detail(
	page: Page,
	id: &'static str,
	meta: impl Into<Text>,
	kv: ui::Kv<Msg>,
	action: Option<&'static str>,
	risk: &Risk,
) -> ui::Card<Msg> {
	let mut card = ui::card().head(id).meta(meta);
	if let Some(label) = action {
		card = card.end(
			ui::button(label)
				.key("act")
				.variant("primary")
				.keys(["a"])
				.on_click(Msg::Act(page, id.into())),
		);
	}
	let mut trigger = ui::button(risk.button)
		.key("risk")
		.variant("danger")
		.on_click(Msg::Ask(page, id.into()));
	if let Some(why) = risk.blocked {
		trigger = trigger.disabled(why);
	}
	card
		.child(kv.key("kv"))
		.child(ui::row().key("bar").child(trigger))
}

/// The selected service's detail card.
fn service_card(s: &Service) -> ui::Card<Msg> {
	let (label, _) = s.health.look();
	let rps = s.rps.last().copied().unwrap_or_default();
	let kv = ui::kv()
		.item("Health", ui::span(label).style("strong"))
		.item("Version", mono(s.version))
		.item("Replicas", mono(s.replicas.to_string()))
		.item("Traffic", mono(format!("{rps:.0} req/s")))
		.item("p95", mono(format!("{:.0} ms", s.p95)))
		.item("Errors", mono(format!("{:.1}%", s.errors)));
	detail(Page::Services, s.id, s.region, kv, Some(s.action()), &s.risk())
}

/// The selected deploy's detail card.
fn deploy_card(d: &Deploy) -> ui::Card<Msg> {
	let (label, _) = d.state.look();
	let rps = d.rps.last().copied().unwrap_or_default();
	let kv = ui::kv()
		.item("State", ui::span(label).style("strong"))
		.item("Service", d.service)
		.item("Commit", mono(d.commit))
		.item("Rollout", mono(format!("{:.0}%", d.done * 100.0)))
		.item("Traffic", mono(format!("{rps:.0} req/s")));
	detail(Page::Deploys, d.id, d.region, kv, d.action(), &d.risk())
}

/// The selected incident's detail card.
fn incident_card(i: &Incident) -> ui::Card<Msg> {
	let (phase, _) = i.phase.look();
	let (sev, _) = i.severity.look();
	let kv = ui::kv()
		.item("State", ui::span(phase).style("strong"))
		.item("What", i.title)
		.item("Service", i.service)
		.item("Severity", sev)
		.item("Open for", mono(ago(i.age)));
	detail(Page::Incidents, i.id, i.service, kv, i.action(), &i.risk())
}

/// The confirm strip before a destructive action: `error` with a `danger`
/// confirm; its buttons sit in the head's end.
fn confirm(risk: &Risk) -> ui::Card<Msg> {
	let buttons = ui::row()
		.gap("sm")
		.child(
			ui::button("Keep")
				.key("keep")
				.variant("quiet")
				.keys(["esc"])
				.on_click(Msg::Keep),
		)
		.child(
			ui::button(risk.button)
				.key("go")
				.variant("danger")
				.keys(["enter"])
				.on_click(Msg::Confirm),
		);
	ui::card()
		.key("confirm")
		.tone(Tone::Error)
		.head(risk.ask.clone())
		.end(buttons)
		.child(ui::text(risk.then).key("t"))
}

pub fn role(self, role: impl Into<String>) -> Self

A name of yours, exposed to CSS as data-role.

pub fn tone(self, tone: impl Into<Tone>) -> Self

The semantic color of the node’s chrome.

pub fn hidden(self, hidden: bool) -> Self

Keeps the node mounted but not laid out.

pub fn mark(self, mark: impl Into<Mark>) -> Self

A transient selection mark drawn over the node.

pub fn aria(self, aria: impl Into<String>) -> Self

The accessible name of a node that shows no text.

pub fn hovercard<N>(self, card: impl Into<Node<N>>) -> Self

A floating card of card’s tree shown while the pointer rests on the node, in place of title. Sent id-less (ids, keys and handlers inside are ignored); an older Tern ignores it.

pub fn href(self, href: impl Into<String>) -> Self

A link: ⌘-click opens it; copy and open use it.

pub fn grow(self, grow: f64) -> Self

Flex grow inside a row or col.

pub fn shrink(self, shrink: f64) -> Self

Flex shrink inside a row or col.

pub fn basis(self, basis: impl Into<Basis>) -> Self

Flex basis: a fraction of the parent, or the content’s size.

pub fn prop(self, name: &str, value: impl Serialize) -> Self

Sets any prop untyped; null removes it.

pub fn min(self, min: Bound) -> Self

Lower size bounds.

pub fn title(self, title: impl Into<String>) -> Self

A tooltip.

pub fn max(self, max: Bound) -> Self

Upper size bounds (a max.h also clips the node).

pub fn actions(self, actions: Actions) -> Self

What a pointer does, by action name.

Examples found in repository

examples/ask.rs (line 40)

fn view() -> View<()> {
	let sizes = SIZES.iter().map(|(value, label)| choice(value, label));
	View::new().main([html::form().key("ask").child(
		ui::card()
			.key("card")
			.head("Which size?")
			.max(Bound::w(Extent::Ch(48.0)))
			.child(ui::row().key("sizes").gap("lg").children(sizes))
			.child(
				ui::button("Create")
					.key("go")
					.variant("primary")
					.actions(Actions::new().click("submit")),
			),
	)])
}

pub fn on_click(self, msg: M) -> Self

where M: Clone + Send + Sync + 'static,

Sends msg on a click (sets actions.click to "click" unless the node names its click action itself).

Examples found in repository

examples/dashboard.rs (line 711)

	fn head(&self) -> ui::Row<Msg> {
		let title = ui::text(spans![
			ui::span("Fleet").style("title"),
			" ",
			ui::span(format!(
				"production · {} services · up {}",
				self.services.len(),
				ago(UPTIME + u64::from(self.ticks))
			))
			.style("muted"),
		])
		.key("title");
		let worst = self
			.services
			.iter()
			.map(|s| s.health)
			.max_by_key(|h| match h {
				Health::Healthy => 0,
				Health::Degraded => 1,
				Health::Down => 2,
			})
			.unwrap_or(Health::Healthy);
		let status = match worst {
			Health::Healthy => ui::badge("Operational").tone(Tone::Success),
			Health::Degraded => ui::badge("Degraded").tone(Tone::Warning),
			Health::Down => ui::badge("Partial outage").tone(Tone::Error),
		};
		let refresh = ui::button("Refresh")
			.key("refresh")
			.icon("repeat")
			.keys(["r"])
			.on_click(Msg::Refresh);
		ui::row()
			.key("head")
			.justify("between")
			.align("center")
			.child(title)
			.child(
				ui::row()
					.key("end")
					.gap("sm")
					.align("center")
					.children(nodes![status.key("status"), refresh]),
			)
	}

	/// The stats strip: at most four tiles, directly on the page.
	fn stats(&self) -> ui::Stats<Msg> {
		let total = self.services.len();
		let healthy = self
			.services
			.iter()
			.filter(|s| s.health == Health::Healthy)
			.count();
		let deploys = |state| self.deploys.iter().filter(|d| d.state == state).count();
		let open = self
			.incidents
			.iter()
			.filter(|i| i.phase != Phase::Resolved)
			.count();
		let unacked = self
			.incidents
			.iter()
			.filter(|i| i.phase == Phase::Open)
			.count();
		let rps: f64 = self.services.iter().filter_map(|s| s.rps.last()).sum();
		let mut services = StatItem::new("Healthy", format!("{healthy}/{total}")).sub("services");
		if healthy < total {
			services = services.tone(Tone::Warning);
		}
		let mut incidents =
			StatItem::new("Open incidents", open.to_string()).sub(format!("{unacked} unacknowledged"));
		if unacked > 0 {
			incidents = incidents.tone(Tone::Error);
		}
		ui::stats([
			services,
			StatItem::new("Rolling out", deploys(State::Running).to_string())
				.sub(format!("{} need approval", deploys(State::Waiting))),
			incidents,
			StatItem::new("Traffic", format!("{rps:.0}")).sub("req/s"),
		])
	}

	/// The tabs: one per view, with muted counts.
	fn nav(&self) -> ui::Tabs<Msg> {
		let count = |n: usize| ui::span(n.to_string()).style("muted");
		let open = self
			.incidents
			.iter()
			.filter(|i| i.phase != Phase::Resolved)
			.count();
		ui::tabs()
			.key("nav")
			.active(self.page.id())
			.tab("services", spans!["Services ", count(self.services.len())])
			.tab("deploys", spans!["Deploys ", count(self.deploys.len())])
			.tab("incidents", spans!["Incidents ", count(open)])
			.on_select(|id| Msg::Page(id.to_owned()))
	}

	/// The active view: its table beside the selected row's detail card
	/// (under it when `plain`).
	fn body(&self, plain: bool) -> Node<Msg> {
		let page = self.page;
		let selected = self.selected[page.index()];
		let (list, detail) = match page {
			Page::Services => (
				nodes![self.services_table()],
				selected
					.and_then(|id| self.services.iter().find(|s| s.id == id))
					.map(service_card),
			),
			Page::Deploys => (
				nodes![self.deploys_bar(), self.deploys_table()],
				selected
					.and_then(|id| self.deploys.iter().find(|d| d.id == id))
					.map(deploy_card),
			),
			Page::Incidents => (
				nodes![self.incidents_table()],
				selected
					.and_then(|id| self.incidents.iter().find(|i| i.id == id))
					.map(incident_card),
			),
		};
		let mut parts: Vec<Node<Msg>> = nodes![
			ui::col()
				.key("list")
				.gap("sm")
				.grow(1.0)
				.basis(0.0)
				.children(list)
		];
		if let Some(card) = detail {
			parts.push(
				card
					.key("detail")
					.min(Bound::w(Extent::Ch(44.0)))
					.max(Bound::w(Extent::Ch(56.0)))
					.into(),
			);
		}
		if plain {
			ui::col().key(page.id()).gap("md").children(parts).into()
		} else {
			ui::row()
				.key(page.id())
				.align("stretch")
				.gap("lg")
				.children(parts)
				.into()
		}
	}

	/// A selectable table of `page` with its handlers and selection.
	fn table(&self, page: Page, empty: &str) -> ui::Table<Msg> {
		let mut table = ui::table()
			.key("table")
			.selectable(true)
			.empty(empty)
			.on_select(move |id| Msg::Select(page, id.to_owned()))
			.on_activate(move |id| Msg::Open(page, id.to_owned()));
		if let Some(id) = self.selected[page.index()] {
			table = table.selected(id);
		}
		table
	}

	/// The services table.
	fn services_table(&self) -> ui::Table<Msg> {
		let mut table = self
			.table(Page::Services, "No services yet")
			.col(Column::new("name", "Service").grow(1.0).priority(6.0))
			.col(Column::new("region", "Region").priority(3.0))
			.col(Column::new("version", "Version").mono(true).priority(2.0))
			.col(Column::new("traffic", "Traffic").priority(1.0))
			.col(
				Column::new("rps", "req/s")
					.align(TextAlign::End)
					.mono(true)
					.priority(4.0),
			)
			.col(
				Column::new("p95", "p95")
					.align(TextAlign::End)
					.mono(true)
					.priority(4.0),
			)
			.col(
				Column::new("errors", "Errors")
					.align(TextAlign::End)
					.mono(true)
					.priority(4.0),
			)
			.col(Column::new("health", "Health").priority(5.0));
		for s in &self.services {
			let (label, tone) = s.health.look();
			let mut errors = TextCell::new(format!("{:.1}%", s.errors));
			if s.errors >= 1.0 {
				errors = errors.tone(Tone::Error);
			}
			table = table.row(
				TableRow::new(s.id)
					.cell("name", TextCell::new(s.id).dot(tone.clone()))
					.cell("region", s.region)
					.cell("version", s.version)
					.cell("traffic", SparkCell::new(s.rps.clone()))
					.cell("rps", format!("{:.0}", s.rps.last().copied().unwrap_or_default()))
					.cell("p95", format!("{:.0} ms", s.p95))
					.cell("errors", errors)
					.cell("health", BadgeSpec::new(label).tone(tone)),
			);
		}
		table
	}

	/// The deploys toolbar: a muted description and the filter.
	fn deploys_bar(&self) -> ui::Row<Msg> {
		let attention = self
			.deploys
			.iter()
			.filter(|d| matches!(d.state, State::Waiting | State::Failed))
			.count();
		ui::row()
			.key("bar")
			.justify("between")
			.align("center")
			.child(
				ui::text(ui::span("Rollouts to production, newest first").style("muted")).key("about"),
			)
			.child(
				ui::tabs()
					.key("filter")
					.variant("segmented")
					.active(self.filter.clone())
					.tab("all", "All")
					.tab("attention", spans![
						"Needs you ",
						ui::span(attention.to_string()).style("muted")
					])
					.on_select(|id| Msg::Filter(id.to_owned())),
			)
	}

	/// The deploys table.
	fn deploys_table(&self) -> ui::Table<Msg> {
		let mut table = self
			.table(Page::Deploys, "Nothing needs you right now")
			.col(Column::new("service", "Service").grow(1.0).priority(6.0))
			.col(Column::new("commit", "Commit").mono(true).priority(3.0))
			.col(Column::new("region", "Region").priority(2.0))
			.col(Column::new("traffic", "Traffic").priority(1.0))
			.col(Column::new("rollout", "Rollout").priority(1.0))
			.col(Column::new("state", "State").priority(5.0));
		for d in self.shown_deploys() {
			let (label, tone) = d.state.look();
			table = table.row(
				TableRow::new(d.id)
					.cell("service", TextCell::new(d.service).dot(tone.clone()))
					.cell("commit", d.commit)
					.cell("region", d.region)
					.cell("traffic", SparkCell::new(d.rps.clone()))
					.cell("rollout", MeterCell {
						value: Some(d.done),
						title: Some(format!("{:.0}%", d.done * 100.0)),
						..MeterCell::default()
					})
					.cell("state", BadgeSpec::new(label).tone(tone)),
			);
		}
		table
	}

	/// The incidents table.
	fn incidents_table(&self) -> ui::Table<Msg> {
		let mut table = self
			.table(Page::Incidents, "No incidents. All quiet.")
			.col(Column::new("title", "Incident").grow(1.0).priority(6.0))
			.col(Column::new("id", "Id").mono(true).priority(2.0))
			.col(Column::new("service", "Service").priority(3.0))
			.col(Column::new("severity", "Severity").priority(4.0))
			.col(
				Column::new("age", "Open for")
					.align(TextAlign::End)
					.mono(true)
					.priority(4.0),
			)
			.col(Column::new("phase", "State").priority(5.0));
		for i in &self.incidents {
			let (sev, sev_tone) = i.severity.look();
			let (phase, phase_tone) = i.phase.look();
			table = table.row(
				TableRow::new(i.id)
					.cell("title", TextCell::new(i.title).dot(sev_tone.clone()))
					.cell("id", i.id)
					.cell("service", i.service)
					.cell("severity", BadgeSpec::new(sev).tone(sev_tone))
					.cell("age", ago(i.age))
					.cell("phase", BadgeSpec::new(phase).tone(phase_tone)),
			);
		}
		table
	}

	/// The key legend.
	fn legend(&self) -> ui::Row<Msg> {
		let key = |k: &str| ui::span(k).style("key");
		let muted = |t: &str| ui::span(t).style("muted");
		let keys = if self.confirming.is_some() {
			spans![key("enter"), muted(" confirm  "), key("esc"), muted(" back")]
		} else {
			spans![
				key("tab"),
				muted(" views  "),
				key("j"),
				key("k"),
				muted(" move  "),
				key("enter"),
				muted(" open  "),
				key("a"),
				muted(" action  "),
				key("r"),
				muted(" refresh  "),
				key("q"),
				muted(" quit"),
			]
		};
		let note = if self.note.is_empty() {
			"Up to date"
		} else {
			self.note.as_str()
		};
		ui::row()
			.key("legend")
			.justify("between")
			.align("center")
			.child(ui::text(keys).key("keys"))
			.child(ui::text(muted(note)).key("note"))
	}
}

/// A detail card: the head with the primary action at its end, the `kv` and
/// the `danger` trigger.
fn detail(
	page: Page,
	id: &'static str,
	meta: impl Into<Text>,
	kv: ui::Kv<Msg>,
	action: Option<&'static str>,
	risk: &Risk,
) -> ui::Card<Msg> {
	let mut card = ui::card().head(id).meta(meta);
	if let Some(label) = action {
		card = card.end(
			ui::button(label)
				.key("act")
				.variant("primary")
				.keys(["a"])
				.on_click(Msg::Act(page, id.into())),
		);
	}
	let mut trigger = ui::button(risk.button)
		.key("risk")
		.variant("danger")
		.on_click(Msg::Ask(page, id.into()));
	if let Some(why) = risk.blocked {
		trigger = trigger.disabled(why);
	}
	card
		.child(kv.key("kv"))
		.child(ui::row().key("bar").child(trigger))
}

/// The selected service's detail card.
fn service_card(s: &Service) -> ui::Card<Msg> {
	let (label, _) = s.health.look();
	let rps = s.rps.last().copied().unwrap_or_default();
	let kv = ui::kv()
		.item("Health", ui::span(label).style("strong"))
		.item("Version", mono(s.version))
		.item("Replicas", mono(s.replicas.to_string()))
		.item("Traffic", mono(format!("{rps:.0} req/s")))
		.item("p95", mono(format!("{:.0} ms", s.p95)))
		.item("Errors", mono(format!("{:.1}%", s.errors)));
	detail(Page::Services, s.id, s.region, kv, Some(s.action()), &s.risk())
}

/// The selected deploy's detail card.
fn deploy_card(d: &Deploy) -> ui::Card<Msg> {
	let (label, _) = d.state.look();
	let rps = d.rps.last().copied().unwrap_or_default();
	let kv = ui::kv()
		.item("State", ui::span(label).style("strong"))
		.item("Service", d.service)
		.item("Commit", mono(d.commit))
		.item("Rollout", mono(format!("{:.0}%", d.done * 100.0)))
		.item("Traffic", mono(format!("{rps:.0} req/s")));
	detail(Page::Deploys, d.id, d.region, kv, d.action(), &d.risk())
}

/// The selected incident's detail card.
fn incident_card(i: &Incident) -> ui::Card<Msg> {
	let (phase, _) = i.phase.look();
	let (sev, _) = i.severity.look();
	let kv = ui::kv()
		.item("State", ui::span(phase).style("strong"))
		.item("What", i.title)
		.item("Service", i.service)
		.item("Severity", sev)
		.item("Open for", mono(ago(i.age)));
	detail(Page::Incidents, i.id, i.service, kv, i.action(), &i.risk())
}

/// The confirm strip before a destructive action: `error` with a `danger`
/// confirm; its buttons sit in the head's end.
fn confirm(risk: &Risk) -> ui::Card<Msg> {
	let buttons = ui::row()
		.gap("sm")
		.child(
			ui::button("Keep")
				.key("keep")
				.variant("quiet")
				.keys(["esc"])
				.on_click(Msg::Keep),
		)
		.child(
			ui::button(risk.button)
				.key("go")
				.variant("danger")
				.keys(["enter"])
				.on_click(Msg::Confirm),
		);
	ui::card()
		.key("confirm")
		.tone(Tone::Error)
		.head(risk.ask.clone())
		.end(buttons)
		.child(ui::text(risk.then).key("t"))
}

pub fn on_dblclick(self, msg: M) -> Self

where M: Clone + Send + Sync + 'static,

Sends msg on a double click (sets actions.dblclick to "dblclick" unless the node names it).

pub fn on_menu(self, act: impl Into<String>, msg: M) -> Self

where M: Clone + Send + Sync + 'static,

Adds act to the context menu and sends msg when it is picked.

pub fn on_action(self, act: impl Into<String>, msg: M) -> Self

where M: Clone + Send + Sync + 'static,

Sends msg on action events whose action is act (name or name=value).

pub fn on_action_with( self, act: impl Into<String>, f: impl Fn(&Action) -> M + Send + Sync + 'static, ) -> Self

Maps action events whose action is act to a message.

pub fn on_toggle(self, f: impl Fn(bool) -> M + Send + Sync + 'static) -> Self

Maps toggle events (the new collapsed; a menu, select or trace line that opened is not collapsed) to a message.

pub fn on_select(self, f: impl Fn(&str) -> M + Send + Sync + 'static) -> Self

Maps select events (the item) to a message. On a list’s item the item’s own handler runs first.

pub fn on_activate(self, f: impl Fn(&str) -> M + Send + Sync + 'static) -> Self

Maps activate events (the item) to a message.

pub fn on_change(self, f: impl Fn(&Change) -> M + Send + Sync + 'static) -> Self

Maps change events to a message.

pub fn on_focus(self, msg: M) -> Self

where M: Clone + Send + Sync + 'static,

Sends msg on focus events (a click asked for the keys).

pub fn on_edit(self, f: impl Fn(&Edit) -> M + Send + Sync + 'static) -> Self

Maps edit events (native editing) to a message.

pub fn on_undo(self, msg: M) -> Self

where M: Clone + Send + Sync + 'static,

Sends msg on undo events.

pub fn on_send(self, f: impl Fn(&str) -> M + Send + Sync + 'static) -> Self

Maps send events (the text to submit) to a message.

impl<M> Button<M>

pub fn text(self, value: impl Into<String>) -> Self

The label.

pub fn icon(self, value: impl Into<Icon>) -> Self

A leading icon.

Examples found in repository

examples/dashboard.rs (line 709)

	fn head(&self) -> ui::Row<Msg> {
		let title = ui::text(spans![
			ui::span("Fleet").style("title"),
			" ",
			ui::span(format!(
				"production · {} services · up {}",
				self.services.len(),
				ago(UPTIME + u64::from(self.ticks))
			))
			.style("muted"),
		])
		.key("title");
		let worst = self
			.services
			.iter()
			.map(|s| s.health)
			.max_by_key(|h| match h {
				Health::Healthy => 0,
				Health::Degraded => 1,
				Health::Down => 2,
			})
			.unwrap_or(Health::Healthy);
		let status = match worst {
			Health::Healthy => ui::badge("Operational").tone(Tone::Success),
			Health::Degraded => ui::badge("Degraded").tone(Tone::Warning),
			Health::Down => ui::badge("Partial outage").tone(Tone::Error),
		};
		let refresh = ui::button("Refresh")
			.key("refresh")
			.icon("repeat")
			.keys(["r"])
			.on_click(Msg::Refresh);
		ui::row()
			.key("head")
			.justify("between")
			.align("center")
			.child(title)
			.child(
				ui::row()
					.key("end")
					.gap("sm")
					.align("center")
					.children(nodes![status.key("status"), refresh]),
			)
	}

pub fn variant(self, value: impl Into<ButtonVariant>) -> Self

The chrome.

Examples found in repository

examples/ask.rs (line 39)

fn view() -> View<()> {
	let sizes = SIZES.iter().map(|(value, label)| choice(value, label));
	View::new().main([html::form().key("ask").child(
		ui::card()
			.key("card")
			.head("Which size?")
			.max(Bound::w(Extent::Ch(48.0)))
			.child(ui::row().key("sizes").gap("lg").children(sizes))
			.child(
				ui::button("Create")
					.key("go")
					.variant("primary")
					.actions(Actions::new().click("submit")),
			),
	)])
}

examples/dashboard.rs (line 1037)

fn detail(
	page: Page,
	id: &'static str,
	meta: impl Into<Text>,
	kv: ui::Kv<Msg>,
	action: Option<&'static str>,
	risk: &Risk,
) -> ui::Card<Msg> {
	let mut card = ui::card().head(id).meta(meta);
	if let Some(label) = action {
		card = card.end(
			ui::button(label)
				.key("act")
				.variant("primary")
				.keys(["a"])
				.on_click(Msg::Act(page, id.into())),
		);
	}
	let mut trigger = ui::button(risk.button)
		.key("risk")
		.variant("danger")
		.on_click(Msg::Ask(page, id.into()));
	if let Some(why) = risk.blocked {
		trigger = trigger.disabled(why);
	}
	card
		.child(kv.key("kv"))
		.child(ui::row().key("bar").child(trigger))
}

/// The selected service's detail card.
fn service_card(s: &Service) -> ui::Card<Msg> {
	let (label, _) = s.health.look();
	let rps = s.rps.last().copied().unwrap_or_default();
	let kv = ui::kv()
		.item("Health", ui::span(label).style("strong"))
		.item("Version", mono(s.version))
		.item("Replicas", mono(s.replicas.to_string()))
		.item("Traffic", mono(format!("{rps:.0} req/s")))
		.item("p95", mono(format!("{:.0} ms", s.p95)))
		.item("Errors", mono(format!("{:.1}%", s.errors)));
	detail(Page::Services, s.id, s.region, kv, Some(s.action()), &s.risk())
}

/// The selected deploy's detail card.
fn deploy_card(d: &Deploy) -> ui::Card<Msg> {
	let (label, _) = d.state.look();
	let rps = d.rps.last().copied().unwrap_or_default();
	let kv = ui::kv()
		.item("State", ui::span(label).style("strong"))
		.item("Service", d.service)
		.item("Commit", mono(d.commit))
		.item("Rollout", mono(format!("{:.0}%", d.done * 100.0)))
		.item("Traffic", mono(format!("{rps:.0} req/s")));
	detail(Page::Deploys, d.id, d.region, kv, d.action(), &d.risk())
}

/// The selected incident's detail card.
fn incident_card(i: &Incident) -> ui::Card<Msg> {
	let (phase, _) = i.phase.look();
	let (sev, _) = i.severity.look();
	let kv = ui::kv()
		.item("State", ui::span(phase).style("strong"))
		.item("What", i.title)
		.item("Service", i.service)
		.item("Severity", sev)
		.item("Open for", mono(ago(i.age)));
	detail(Page::Incidents, i.id, i.service, kv, i.action(), &i.risk())
}

/// The confirm strip before a destructive action: `error` with a `danger`
/// confirm; its buttons sit in the head's end.
fn confirm(risk: &Risk) -> ui::Card<Msg> {
	let buttons = ui::row()
		.gap("sm")
		.child(
			ui::button("Keep")
				.key("keep")
				.variant("quiet")
				.keys(["esc"])
				.on_click(Msg::Keep),
		)
		.child(
			ui::button(risk.button)
				.key("go")
				.variant("danger")
				.keys(["enter"])
				.on_click(Msg::Confirm),
		);
	ui::card()
		.key("confirm")
		.tone(Tone::Error)
		.head(risk.ask.clone())
		.end(buttons)
		.child(ui::text(risk.then).key("t"))
}

pub fn size(self, value: impl Into<ButtonSize>) -> Self

The height.

pub fn on(self, value: impl Into<bool>) -> Self

Drawn pressed (a toggle that is on).

pub fn disabled(self, value: impl Into<Disabled>) -> Self

Dimmed and silent; a reason string is the tooltip.

Examples found in repository

examples/dashboard.rs (line 1047)

fn detail(
	page: Page,
	id: &'static str,
	meta: impl Into<Text>,
	kv: ui::Kv<Msg>,
	action: Option<&'static str>,
	risk: &Risk,
) -> ui::Card<Msg> {
	let mut card = ui::card().head(id).meta(meta);
	if let Some(label) = action {
		card = card.end(
			ui::button(label)
				.key("act")
				.variant("primary")
				.keys(["a"])
				.on_click(Msg::Act(page, id.into())),
		);
	}
	let mut trigger = ui::button(risk.button)
		.key("risk")
		.variant("danger")
		.on_click(Msg::Ask(page, id.into()));
	if let Some(why) = risk.blocked {
		trigger = trigger.disabled(why);
	}
	card
		.child(kv.key("kv"))
		.child(ui::row().key("bar").child(trigger))
}

pub fn busy(self, value: impl Into<bool>) -> Self

A spinner leads and it sends nothing.

pub fn keys<K: Into<String>>(self, keys: impl IntoIterator<Item = K>) -> Self

Keycaps drawn after the label (display only).

Examples found in repository

examples/dashboard.rs (line 710)

	fn head(&self) -> ui::Row<Msg> {
		let title = ui::text(spans![
			ui::span("Fleet").style("title"),
			" ",
			ui::span(format!(
				"production · {} services · up {}",
				self.services.len(),
				ago(UPTIME + u64::from(self.ticks))
			))
			.style("muted"),
		])
		.key("title");
		let worst = self
			.services
			.iter()
			.map(|s| s.health)
			.max_by_key(|h| match h {
				Health::Healthy => 0,
				Health::Degraded => 1,
				Health::Down => 2,
			})
			.unwrap_or(Health::Healthy);
		let status = match worst {
			Health::Healthy => ui::badge("Operational").tone(Tone::Success),
			Health::Degraded => ui::badge("Degraded").tone(Tone::Warning),
			Health::Down => ui::badge("Partial outage").tone(Tone::Error),
		};
		let refresh = ui::button("Refresh")
			.key("refresh")
			.icon("repeat")
			.keys(["r"])
			.on_click(Msg::Refresh);
		ui::row()
			.key("head")
			.justify("between")
			.align("center")
			.child(title)
			.child(
				ui::row()
					.key("end")
					.gap("sm")
					.align("center")
					.children(nodes![status.key("status"), refresh]),
			)
	}

	/// The stats strip: at most four tiles, directly on the page.
	fn stats(&self) -> ui::Stats<Msg> {
		let total = self.services.len();
		let healthy = self
			.services
			.iter()
			.filter(|s| s.health == Health::Healthy)
			.count();
		let deploys = |state| self.deploys.iter().filter(|d| d.state == state).count();
		let open = self
			.incidents
			.iter()
			.filter(|i| i.phase != Phase::Resolved)
			.count();
		let unacked = self
			.incidents
			.iter()
			.filter(|i| i.phase == Phase::Open)
			.count();
		let rps: f64 = self.services.iter().filter_map(|s| s.rps.last()).sum();
		let mut services = StatItem::new("Healthy", format!("{healthy}/{total}")).sub("services");
		if healthy < total {
			services = services.tone(Tone::Warning);
		}
		let mut incidents =
			StatItem::new("Open incidents", open.to_string()).sub(format!("{unacked} unacknowledged"));
		if unacked > 0 {
			incidents = incidents.tone(Tone::Error);
		}
		ui::stats([
			services,
			StatItem::new("Rolling out", deploys(State::Running).to_string())
				.sub(format!("{} need approval", deploys(State::Waiting))),
			incidents,
			StatItem::new("Traffic", format!("{rps:.0}")).sub("req/s"),
		])
	}

	/// The tabs: one per view, with muted counts.
	fn nav(&self) -> ui::Tabs<Msg> {
		let count = |n: usize| ui::span(n.to_string()).style("muted");
		let open = self
			.incidents
			.iter()
			.filter(|i| i.phase != Phase::Resolved)
			.count();
		ui::tabs()
			.key("nav")
			.active(self.page.id())
			.tab("services", spans!["Services ", count(self.services.len())])
			.tab("deploys", spans!["Deploys ", count(self.deploys.len())])
			.tab("incidents", spans!["Incidents ", count(open)])
			.on_select(|id| Msg::Page(id.to_owned()))
	}

	/// The active view: its table beside the selected row's detail card
	/// (under it when `plain`).
	fn body(&self, plain: bool) -> Node<Msg> {
		let page = self.page;
		let selected = self.selected[page.index()];
		let (list, detail) = match page {
			Page::Services => (
				nodes![self.services_table()],
				selected
					.and_then(|id| self.services.iter().find(|s| s.id == id))
					.map(service_card),
			),
			Page::Deploys => (
				nodes![self.deploys_bar(), self.deploys_table()],
				selected
					.and_then(|id| self.deploys.iter().find(|d| d.id == id))
					.map(deploy_card),
			),
			Page::Incidents => (
				nodes![self.incidents_table()],
				selected
					.and_then(|id| self.incidents.iter().find(|i| i.id == id))
					.map(incident_card),
			),
		};
		let mut parts: Vec<Node<Msg>> = nodes![
			ui::col()
				.key("list")
				.gap("sm")
				.grow(1.0)
				.basis(0.0)
				.children(list)
		];
		if let Some(card) = detail {
			parts.push(
				card
					.key("detail")
					.min(Bound::w(Extent::Ch(44.0)))
					.max(Bound::w(Extent::Ch(56.0)))
					.into(),
			);
		}
		if plain {
			ui::col().key(page.id()).gap("md").children(parts).into()
		} else {
			ui::row()
				.key(page.id())
				.align("stretch")
				.gap("lg")
				.children(parts)
				.into()
		}
	}

	/// A selectable table of `page` with its handlers and selection.
	fn table(&self, page: Page, empty: &str) -> ui::Table<Msg> {
		let mut table = ui::table()
			.key("table")
			.selectable(true)
			.empty(empty)
			.on_select(move |id| Msg::Select(page, id.to_owned()))
			.on_activate(move |id| Msg::Open(page, id.to_owned()));
		if let Some(id) = self.selected[page.index()] {
			table = table.selected(id);
		}
		table
	}

	/// The services table.
	fn services_table(&self) -> ui::Table<Msg> {
		let mut table = self
			.table(Page::Services, "No services yet")
			.col(Column::new("name", "Service").grow(1.0).priority(6.0))
			.col(Column::new("region", "Region").priority(3.0))
			.col(Column::new("version", "Version").mono(true).priority(2.0))
			.col(Column::new("traffic", "Traffic").priority(1.0))
			.col(
				Column::new("rps", "req/s")
					.align(TextAlign::End)
					.mono(true)
					.priority(4.0),
			)
			.col(
				Column::new("p95", "p95")
					.align(TextAlign::End)
					.mono(true)
					.priority(4.0),
			)
			.col(
				Column::new("errors", "Errors")
					.align(TextAlign::End)
					.mono(true)
					.priority(4.0),
			)
			.col(Column::new("health", "Health").priority(5.0));
		for s in &self.services {
			let (label, tone) = s.health.look();
			let mut errors = TextCell::new(format!("{:.1}%", s.errors));
			if s.errors >= 1.0 {
				errors = errors.tone(Tone::Error);
			}
			table = table.row(
				TableRow::new(s.id)
					.cell("name", TextCell::new(s.id).dot(tone.clone()))
					.cell("region", s.region)
					.cell("version", s.version)
					.cell("traffic", SparkCell::new(s.rps.clone()))
					.cell("rps", format!("{:.0}", s.rps.last().copied().unwrap_or_default()))
					.cell("p95", format!("{:.0} ms", s.p95))
					.cell("errors", errors)
					.cell("health", BadgeSpec::new(label).tone(tone)),
			);
		}
		table
	}

	/// The deploys toolbar: a muted description and the filter.
	fn deploys_bar(&self) -> ui::Row<Msg> {
		let attention = self
			.deploys
			.iter()
			.filter(|d| matches!(d.state, State::Waiting | State::Failed))
			.count();
		ui::row()
			.key("bar")
			.justify("between")
			.align("center")
			.child(
				ui::text(ui::span("Rollouts to production, newest first").style("muted")).key("about"),
			)
			.child(
				ui::tabs()
					.key("filter")
					.variant("segmented")
					.active(self.filter.clone())
					.tab("all", "All")
					.tab("attention", spans![
						"Needs you ",
						ui::span(attention.to_string()).style("muted")
					])
					.on_select(|id| Msg::Filter(id.to_owned())),
			)
	}

	/// The deploys table.
	fn deploys_table(&self) -> ui::Table<Msg> {
		let mut table = self
			.table(Page::Deploys, "Nothing needs you right now")
			.col(Column::new("service", "Service").grow(1.0).priority(6.0))
			.col(Column::new("commit", "Commit").mono(true).priority(3.0))
			.col(Column::new("region", "Region").priority(2.0))
			.col(Column::new("traffic", "Traffic").priority(1.0))
			.col(Column::new("rollout", "Rollout").priority(1.0))
			.col(Column::new("state", "State").priority(5.0));
		for d in self.shown_deploys() {
			let (label, tone) = d.state.look();
			table = table.row(
				TableRow::new(d.id)
					.cell("service", TextCell::new(d.service).dot(tone.clone()))
					.cell("commit", d.commit)
					.cell("region", d.region)
					.cell("traffic", SparkCell::new(d.rps.clone()))
					.cell("rollout", MeterCell {
						value: Some(d.done),
						title: Some(format!("{:.0}%", d.done * 100.0)),
						..MeterCell::default()
					})
					.cell("state", BadgeSpec::new(label).tone(tone)),
			);
		}
		table
	}

	/// The incidents table.
	fn incidents_table(&self) -> ui::Table<Msg> {
		let mut table = self
			.table(Page::Incidents, "No incidents. All quiet.")
			.col(Column::new("title", "Incident").grow(1.0).priority(6.0))
			.col(Column::new("id", "Id").mono(true).priority(2.0))
			.col(Column::new("service", "Service").priority(3.0))
			.col(Column::new("severity", "Severity").priority(4.0))
			.col(
				Column::new("age", "Open for")
					.align(TextAlign::End)
					.mono(true)
					.priority(4.0),
			)
			.col(Column::new("phase", "State").priority(5.0));
		for i in &self.incidents {
			let (sev, sev_tone) = i.severity.look();
			let (phase, phase_tone) = i.phase.look();
			table = table.row(
				TableRow::new(i.id)
					.cell("title", TextCell::new(i.title).dot(sev_tone.clone()))
					.cell("id", i.id)
					.cell("service", i.service)
					.cell("severity", BadgeSpec::new(sev).tone(sev_tone))
					.cell("age", ago(i.age))
					.cell("phase", BadgeSpec::new(phase).tone(phase_tone)),
			);
		}
		table
	}

	/// The key legend.
	fn legend(&self) -> ui::Row<Msg> {
		let key = |k: &str| ui::span(k).style("key");
		let muted = |t: &str| ui::span(t).style("muted");
		let keys = if self.confirming.is_some() {
			spans![key("enter"), muted(" confirm  "), key("esc"), muted(" back")]
		} else {
			spans![
				key("tab"),
				muted(" views  "),
				key("j"),
				key("k"),
				muted(" move  "),
				key("enter"),
				muted(" open  "),
				key("a"),
				muted(" action  "),
				key("r"),
				muted(" refresh  "),
				key("q"),
				muted(" quit"),
			]
		};
		let note = if self.note.is_empty() {
			"Up to date"
		} else {
			self.note.as_str()
		};
		ui::row()
			.key("legend")
			.justify("between")
			.align("center")
			.child(ui::text(keys).key("keys"))
			.child(ui::text(muted(note)).key("note"))
	}
}

/// A detail card: the head with the primary action at its end, the `kv` and
/// the `danger` trigger.
fn detail(
	page: Page,
	id: &'static str,
	meta: impl Into<Text>,
	kv: ui::Kv<Msg>,
	action: Option<&'static str>,
	risk: &Risk,
) -> ui::Card<Msg> {
	let mut card = ui::card().head(id).meta(meta);
	if let Some(label) = action {
		card = card.end(
			ui::button(label)
				.key("act")
				.variant("primary")
				.keys(["a"])
				.on_click(Msg::Act(page, id.into())),
		);
	}
	let mut trigger = ui::button(risk.button)
		.key("risk")
		.variant("danger")
		.on_click(Msg::Ask(page, id.into()));
	if let Some(why) = risk.blocked {
		trigger = trigger.disabled(why);
	}
	card
		.child(kv.key("kv"))
		.child(ui::row().key("bar").child(trigger))
}

/// The selected service's detail card.
fn service_card(s: &Service) -> ui::Card<Msg> {
	let (label, _) = s.health.look();
	let rps = s.rps.last().copied().unwrap_or_default();
	let kv = ui::kv()
		.item("Health", ui::span(label).style("strong"))
		.item("Version", mono(s.version))
		.item("Replicas", mono(s.replicas.to_string()))
		.item("Traffic", mono(format!("{rps:.0} req/s")))
		.item("p95", mono(format!("{:.0} ms", s.p95)))
		.item("Errors", mono(format!("{:.1}%", s.errors)));
	detail(Page::Services, s.id, s.region, kv, Some(s.action()), &s.risk())
}

/// The selected deploy's detail card.
fn deploy_card(d: &Deploy) -> ui::Card<Msg> {
	let (label, _) = d.state.look();
	let rps = d.rps.last().copied().unwrap_or_default();
	let kv = ui::kv()
		.item("State", ui::span(label).style("strong"))
		.item("Service", d.service)
		.item("Commit", mono(d.commit))
		.item("Rollout", mono(format!("{:.0}%", d.done * 100.0)))
		.item("Traffic", mono(format!("{rps:.0} req/s")));
	detail(Page::Deploys, d.id, d.region, kv, d.action(), &d.risk())
}

/// The selected incident's detail card.
fn incident_card(i: &Incident) -> ui::Card<Msg> {
	let (phase, _) = i.phase.look();
	let (sev, _) = i.severity.look();
	let kv = ui::kv()
		.item("State", ui::span(phase).style("strong"))
		.item("What", i.title)
		.item("Service", i.service)
		.item("Severity", sev)
		.item("Open for", mono(ago(i.age)));
	detail(Page::Incidents, i.id, i.service, kv, i.action(), &i.risk())
}

/// The confirm strip before a destructive action: `error` with a `danger`
/// confirm; its buttons sit in the head's end.
fn confirm(risk: &Risk) -> ui::Card<Msg> {
	let buttons = ui::row()
		.gap("sm")
		.child(
			ui::button("Keep")
				.key("keep")
				.variant("quiet")
				.keys(["esc"])
				.on_click(Msg::Keep),
		)
		.child(
			ui::button(risk.button)
				.key("go")
				.variant("danger")
				.keys(["enter"])
				.on_click(Msg::Confirm),
		);
	ui::card()
		.key("confirm")
		.tone(Tone::Error)
		.head(risk.ask.clone())
		.end(buttons)
		.child(ui::text(risk.then).key("t"))
}

Trait Implementations

impl<M> Clone for Button<M>

fn clone(&self) -> Self

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl<M> Debug for Button<M>

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl<M> From<Button<M>> for Slot<M>

fn from(n: Button<M>) -> Self

Converts to this type from the input type.

impl<M> From<Button<M>> for Node<M>

fn from(n: Button<M>) -> Self

Converts to this type from the input type.

impl<M> From<Button<M>> for View<M>

A bare node is main’s one child.

fn from(n: Button<M>) -> Self

Converts to this type from the input type.

impl<M> From<Node<M>> for Button<M>

fn from(node: Node<M>) -> Self

Converts to this type from the input type.