PhiaUi.Components.UptimeBar (phia_ui v0.1.17)

Copy Markdown View Source

Uptime status bar — a row of colored segments indicating service health over time.

Inspired by Instastatus and Statuspage.io. Each segment represents a time period (hour, day, or week) with a color conveying its health status:

StatusColorTailwind class
:upGreenbg-green-500
:downRedbg-red-500
:degradedYellowbg-yellow-500

The overall uptime percentage is computed server-side from the segment list. Native browser tooltips (title attribute) reveal date/status details on hover — no JavaScript required.

Examples

<%!-- Static 90-day bar --%>
<.uptime_bar segments={@daily_statuses} />

<%!-- Custom period --%>
<.uptime_bar segments={@hourly_statuses} days={7} />

<%!-- With labels (shown as native tooltip) --%>
<.uptime_bar segments={
  Enum.map(@log, fn entry ->
    %{status: entry.status, label: Date.to_iso8601(entry.date)}
  end)
} />

Summary

Functions

uptime_bar(assigns)

Renders a horizontal uptime bar with colored segments and an uptime percentage.

Functions

uptime_bar(assigns)

Renders a horizontal uptime bar with colored segments and an uptime percentage.

Example

<.uptime_bar segments={@statuses} days={90} />

Attributes

  • segments (:list) - List of segment maps. Each map must have :status (:up | :down | :degraded). Optional :label string is shown as a native browser tooltip on hover. Defaults to [].

  • days (:integer) - Number of days represented (used for the '90 days ago' label). Default: 90. Defaults to 90.
  • class (:string) - Additional CSS classes for the root element. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root <div> element.