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
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…
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… | |
label | string | undefined | - | Accessible label. Defaults to "Active alarms". | |
className | string | undefined | - | - |
DashboardDateRangePicker
Dashboard-friendly wrapper around the core [**DateRangePicker**](/reference/ui/components/forms/#daterangepicker) that speaks { start, end } epoch-millisecond timestamps instead of Date objects, so it drops straight into useDashboardDateRange fro…
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…
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 — w…
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**](/reference/ui/components/navigation/#appheader)> as the middle slot.
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**](/reference/ui/components/widgets/#widgettoprow) (title + power) and [**GenericDataBox**](/reference/ui/components/widgets/#genericdatabox) (hashrate / miner-count / container-count). Designed to sit at the top of a dashboard page above the chart c…
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**](/reference/ui/components/forms/#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. |