Monitorex.Components.Core (monitorex v0.3.0)

Copy Markdown

Reusable UI components for the Monitorex dashboard.

Provides a cohesive design system with dark theme, responsive layout, and accessible touch-friendly targets.

Components:

Summary

Functions

Renders a back link for detail pages.

Renders a sortable, striped data table with responsive card layout.

Renders a compact metric tile.

Renders a dropdown node selector.

Renders a page header with title, optional subtitle, and actions slot.

Renders a pagination control.

Renders a color-coded HTTP status badge.

Renders a summary card with icon, label, value, and optional trend indicator.

Functions

back_link(assigns)

Renders a back link for detail pages.

Assigns

  • to — the URL to navigate back to
  • label — link text (default: "Back")

Attributes

  • to (:string) (required)
  • label (:string) - Defaults to "Back".

data_table(assigns)

Renders a sortable, striped data table with responsive card layout.

Assigns

  • columns — list of maps with :label, :key, and optional :sortable? (boolean)
  • rows — list of maps (each map has keys matching those in columns)
  • empty_message — string to show when there are no rows

Events

  • "sort" — sent when a sortable column header is clicked, with the column key as the value

Attributes

  • columns (:list) (required)
  • rows (:list) - Defaults to [].
  • empty_message (:string) - Defaults to "No data".
  • sort_by (:string) - Defaults to nil.
  • sort_dir (:string) - Defaults to nil.

metric_tile(assigns)

Renders a compact metric tile.

Assigns

  • label — metric label
  • value — metric value string
  • class — additional CSS classes

Attributes

  • label (:string) (required)
  • value (:string) (required)
  • class (:string) - Defaults to "".

node_selector(assigns)

Renders a dropdown node selector.

Assigns

  • nodes — list of node names (strings)
  • selected — currently selected node (string)
  • event — event name to send on change

Attributes

  • nodes (:list) (required)
  • selected (:string) - Defaults to "".
  • event (:string) - Defaults to "select_node".

page_header(assigns)

Renders a page header with title, optional subtitle, and actions slot.

Assigns

  • title — page title string
  • subtitle — optional subtitle string
  • inner_block — optional content for the actions area (right side)

Attributes

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

Slots

  • inner_block

pagination(assigns)

Renders a pagination control.

Assigns

  • current — current page number (integer)
  • total — total number of pages (integer)
  • event — event name to send on page change (default: "go_page")

Attributes

  • current (:integer) (required)
  • total (:integer) (required)
  • event (:string) - Defaults to "go_page".

status_badge(assigns)

Renders a color-coded HTTP status badge.

Assigns

  • status — integer HTTP status code

Colors:

  • 2xx — green
  • 3xx — blue
  • 4xx — yellow
  • 5xx — red

Attributes

  • status (:integer) (required)

summary_card(assigns)

Renders a summary card with icon, label, value, and optional trend indicator.

Assigns

  • label — card label string
  • value — display value string
  • trend — optional :up or :down atom for trend icon
  • icon — optional SVG icon HTML string (default: chart icon)
  • class — additional CSS classes

Attributes

  • label (:string) (required)
  • value (:string) (required)
  • trend (:atom) - Defaults to nil.Must be one of :up, :down, or nil.
  • icon (:string) - Defaults to nil.
  • class (:string) - Defaults to "".