WardrikWeb.Components (wardrik_web v0.1.0-rc.1)

Copy Markdown

Components and formatting helpers for dashboard pages.

Use them in extension pages to match the look of the dashboard.

import WardrikWeb.Components

<.head title="Fleet" lead="Runs and cost for each agent." />
<.status value="parked" />

Summary

Functions

An ISO 8601 time, shown as time ago, for example 5m ago.

A size in bytes, in the largest unit that keeps it at 1 or more: 512 B, 1.8 MB.

Describes what an agent is doing, given the latest event of its current run.

A list of events. Each row shows the time, the event type and a short preview. Click a row to see the full event.

Shows a flash message from a LiveComponent.

A page heading, with an optional breadcrumb, badge and action buttons.

A JSON value, pretty-printed.

Shows whether the page is receiving live updates.

Returns an error's message.

A bar that shows count as a share of limit, with both numbers and the percentage.

A cost given in micro-USD, formatted in dollars.

A number with thousands separators.

Says a settings page is off, and how to turn it on.

A menu for choosing an owner, such as an org or a person. Choosing one sends the "owner" event with %{"owner" => owner}.

Renders the extensions' panels for slot, passing them assigns.

A one-line preview of event data. It shows the first three plain values, except except.

A small line chart of values, oldest first. Hover a point to see its value.

A status label for an agent or a run.

A small ⓘ mark that shows text on hover or keyboard focus.

A token count, abbreviated above a thousand: 8.4k, 1.2M.

A duration in milliseconds, shown in its two largest units: 850 ms, 4.2s, 3m 10s, 6d 20h.

A cost in dollars.

Functions

ago(time, now \\ DateTime.utc_now())

@spec ago(String.t() | nil, DateTime.t()) :: String.t()

An ISO 8601 time, shown as time ago, for example 5m ago.

bytes(count)

@spec bytes(integer() | nil) :: String.t()

A size in bytes, in the largest unit that keeps it at 1 or more: 512 B, 1.8 MB.

doing_text(item)

@spec doing_text(map()) :: String.t()

Describes what an agent is doing, given the latest event of its current run.

events(assigns)

A list of events. Each row shows the time, the event type and a short preview. Click a row to see the full event.

Set :agent to show a link to each event's agent. The link needs :dashboard.

Attributes

  • events (:list) (required)
  • empty (:string) - Defaults to "No events.".
  • dashboard (:any) - Defaults to nil.
  • agent (:boolean) - Defaults to false.

flash(socket, kind, message)

@spec flash(Phoenix.LiveView.Socket.t(), :info | :error, String.t()) ::
  Phoenix.LiveView.Socket.t()

Shows a flash message from a LiveComponent.

LiveView only shows a component's flash when the component navigates. This function sends the message to the parent LiveView, which shows it.

head(assigns)

A page heading, with an optional breadcrumb, badge and action buttons.

Attributes

  • title (:string) (required)
  • lead (:string) - Defaults to nil.

Slots

  • crumb
  • badge
  • actions

json(assigns)

A JSON value, pretty-printed.

Attributes

  • value (:any) (required)

live(assigns)

Shows whether the page is receiving live updates.

Attributes

  • live (:boolean) (required)
  • stopped (:string) - Defaults to nil.

message(message)

@spec message(Wardrik.Error.t() | String.t()) :: String.t()

Returns an error's message.

meter(assigns)

A bar that shows count as a share of limit, with both numbers and the percentage.

At 80% or more the bar turns red and says it's near the limit. Set :warn to false for a share that isn't a limit.

Attributes

  • label (:string) (required)
  • count (:integer) (required)
  • limit (:integer) (required)
  • format (:any) - Defaults to &WardrikWeb.Components.number/1.
  • warn (:boolean) - Defaults to true.
  • tip (:string) - explains the bar, shown on hover or focus. Defaults to nil.

micro_usd(micro)

@spec micro_usd(non_neg_integer() | nil) :: String.t()

A cost given in micro-USD, formatted in dollars.

number(n)

@spec number(integer() | nil) :: String.t()

A number with thousands separators.

off(assigns)

Says a settings page is off, and how to turn it on.

Attributes

  • key (:atom) (required)
  • behaviour (:atom) (required)

owner_picker(assigns)

A menu for choosing an owner, such as an org or a person. Choosing one sends the "owner" event with %{"owner" => owner}.

Attributes

  • owners (:list) (required)
  • owner (:string) (required)

panels(assigns)

Renders the extensions' panels for slot, passing them assigns.

Attributes

  • dashboard (WardrikWeb.Dashboard) (required)
  • slot (:atom) (required)
  • scope (:any) (required)
  • assigns (:map) - Defaults to %{}.

preview(data, except \\ nil)

@spec preview(term(), String.t() | nil) :: String.t()

A one-line preview of event data. It shows the first three plain values, except except.

spark(assigns)

A small line chart of values, oldest first. Hover a point to see its value.

:format turns a value into the text the tooltip shows. Set :max for a fixed scale from 0 to :max. Without it, the scale fits the values, so small changes are visible.

Attributes

  • values (:list) (required)
  • label (:string) (required)
  • format (:any) - Defaults to nil.
  • max (:any) - Defaults to nil.

status(assigns)

A status label for an agent or a run.

Attributes

  • value (:string) (required)

tip(assigns)

A small ⓘ mark that shows text on hover or keyboard focus.

Attributes

  • text (:string) (required)

tokens(n)

@spec tokens(integer() | nil) :: String.t()

A token count, abbreviated above a thousand: 8.4k, 1.2M.

took(ms)

@spec took(non_neg_integer() | nil) :: String.t()

A duration in milliseconds, shown in its two largest units: 850 ms, 4.2s, 3m 10s, 6d 20h.

usd(dollars)

@spec usd(number() | nil) :: String.t()

A cost in dollars.