Dashboard Components
Dashboard layouts and container components
Components for building dashboard layouts and containers.
Prerequisites
- Complete the installation
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
@tetherto/mdk-react-devkit
AlarmsBellButton
Top-bar bell button with a three-line severity badge (critical / high / medium). Counts are caller-provided so the button stays domain-agnostic; pair with useActiveIncidents or useSiteMinerCounts to wire them.
onClick fires for the bell itself; pass onSeverityClick to make each count its own button (severity-filtered deep-link). The two are independent — clicking a severity does not also fire onClick.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
counts | AlarmsBellButtonCounts | undefined | - | Severity-bucketed alarm counts rendered in the stacked badge. | |
onClick | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined | - | Click handler — typically opens an alerts panel or routes to /alerts. | |
onSeverityClick | ((severity: AlarmSeverity, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined | - | Click handler for an individual severity count. When provided, each badge row becomes its own button so an operator can jump straight to the alerts page filtered by that severity (e.g. /alerts?severity=critical). When omitted, the counts render as plain (non-interactive) text. | |
label | string | undefined | - | Accessible label. Defaults to "Active alarms". | |
className | string | undefined | - | - |
DashboardDateRangePicker
Dashboard-friendly wrapper around the core DateRangePicker that speaks { start, end } epoch-millisecond timestamps instead of Date objects, so it drops straight into useDashboardDateRange from @tetherto/mdk-react-adapter.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
value | DashboardDateRange | ✓ | - | Current range as { start, end } epoch-millisecond timestamps. |
onChange | (next: DashboardDateRange) => void | ✓ | - | Fires with the next { start, end } window when the user applies a range. |
dateFormat | string | undefined | - | Display format. Defaults to dd/MM/yyyy. | |
disabled | boolean | undefined | - | Disable the trigger. | |
className | string | undefined | - | Optional class hook. |
ExportButton
Split-button trigger for downloading the current dashboard state. The left half labels the action (↓ Export); the right half opens a dropdown with the available formats and invokes onExport(format) on selection.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
onExport | (format: ExportFormat) => void | ✓ | - | Fires with the chosen format when the user picks an item. |
formats | readonly ExportFormat[] | undefined | - | Formats to offer in the dropdown — defaults to ['csv', 'json']. | |
label | string | undefined | - | Button label — defaults to 'Export'. | |
disabled | boolean | undefined | - | Disable the button. | |
className | string | undefined | - | Optional class hook on the wrapper. |
HeaderConsumptionBox
Single-row consumption cell for the dashboard's header strip. The 1.663 style numeric is rendered in orange (the warning token) to match the Mining OS visual treatment.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
icon | React.ReactNode | - | - | |
valueMw | number | undefined | - | Current site-level power consumption, in megawatts. | |
unit | string | undefined | - | Unit label — defaults to MW. | |
className | string | undefined | - | - |
HeaderEfficiencyBox
Single-row efficiency cell for the dashboard's header strip. Displays the W/TH/s metric derived from power_w / hashrate_th.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
icon | React.ReactNode | - | - | |
valueWthS | number | undefined | - | Efficiency in watts per TH/s. | |
unit | string | undefined | - | Unit label — defaults to W/TH/S. | |
className | string | undefined | - | - |
HeaderHashrateBox
Two-row hashrate cell for the dashboard's header strip. Shows the MOS-side and pool-side aggregate hashrate side by side. Values fall back to — when undefined.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
icon | React.ReactNode | - | - | |
mosPhs | number | undefined | - | MOS-side aggregate hashrate in PH/s. | |
poolPhs | number | undefined | - | Pool-side aggregate hashrate in PH/s. | |
unit | string | undefined | - | Hashrate unit label — defaults to PH/s. | |
className | string | undefined | - | - |
HeaderMinersBox
Two-row miner-count cell for the dashboard's header strip. Top row carries the MOS-side online / error / offline breakdown; the bottom row shows the pool-side equivalent. Numbers fall back to — when undefined.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
icon | React.ReactNode | - | Icon shown next to the "Miners" label. Caller-provided so the package stays icon-agnostic. | |
total | number | undefined | - | Total miners across the site (denominator of the 158 / 2,188 ratio). | |
online | number | undefined | - | Online miners (the 158 numerator). | |
error | number | undefined | - | Miners flagged in warning (the small amber count). | |
offline | number | undefined | - | Miners offline (the small red count). | |
mosTotal | number | undefined | - | Optional MOS-side meta line — total miners reporting to MOS. | |
poolTotal | number | undefined | - | Optional pool-side meta — total miners as reported by upstream pools. | |
poolOnline | number | undefined | - | Optional pool-side online count (green). | |
poolMismatch | number | undefined | - | Optional pool-side mismatch count (red). | |
className | string | undefined | - | - |
HeaderStatsBar
Horizontal flex strip that hosts the dashboard's stat boxes (HeaderMinersBox, HeaderHashrateBox, HeaderConsumptionBox, HeaderEfficiencyBox). Lives inside <AppHeader> as the middle slot.
Slot-based: the caller decides which boxes to render and in which order. The bar interleaves an angled chevron divider between adjacent children to match the Mining OS visual treatment.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
children | React.ReactNode | ✓ | - | Stat boxes to render in order, left-to-right. |
className | string | undefined | - | Optional class hook. |
ProfileMenu
Top-bar profile dropdown. Wraps the core DropdownMenu primitive with the user-avatar icon as the trigger. Items are caller-provided so the menu surface stays application-driven.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
items | ProfileMenuItem[] | ✓ | - | Items rendered in the dropdown, top-to-bottom. Defaults to a single "Sign out" item. |
user | React.ReactNode | - | Optional user label rendered at the top of the dropdown (e.g. an email). | |
icon | React.ReactNode | - | Override the trigger icon — defaults to the user-avatar icon. | |
label | string | undefined | - | Accessible label for the trigger button. | |
className | string | undefined | - | - |
SiteStatsBar
Site-level summary strip composed from WidgetTopRow (title + power) and GenericDataBox (hashrate / miner-count / container-count). Designed to sit at the top of a dashboard page above the chart cards.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
title | string | ✓ | - | Site label rendered in the header row. |
power | number | undefined | - | Current site-level power consumption, in watts (or whatever powerUnit says). | |
powerUnit | string | undefined | - | Display unit for power — defaults to kW. | |
totalHashrate | number | undefined | - | Aggregate hashrate, in TH/s. | |
hashrateUnit | string | undefined | - | Hashrate display unit — defaults to TH/s. | |
minerCount | number | undefined | - | Total miner count across the site. | |
containerCount | number | undefined | - | Total container count across the site. | |
isLoading | boolean | undefined | - | Render a skeleton bar while data is loading. | |
className | string | undefined | - | Optional class hook. |
TimelineSelector
Dropdown for picking the dashboard time range. Wraps core/Select and the canonical option list from getTimelineOptions. Pair with the useDashboardTimeRange hook in @tetherto/mdk-react-adapter.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
value | string | ✓ | - | Currently selected timeline value (e.g. '1m', '5m'). |
onChange | (next: string) => void | ✓ | - | Called whenever the user picks a new option. |
options | TimelineOption[] | undefined | - | Available options — defaults to getTimelineOptions. Pass a custom list to localise labels or restrict the range. | |
label | string | undefined | - | ARIA label / placeholder for the trigger. | |
className | string | undefined | - | Tailwind/BEM class hook on the trigger. |