Dashboard

Components for building dashboard layouts and containers.

Prerequisites

Complete the installation

Add the dependency to your app's package.json

{
  "dependencies": {
    "@tetherto/mdk-react-devkit": "*",
    "@tetherto/mdk-react-adapter": "*",
    "@tetherto/mdk-ui-foundation": "*"
  }
}

Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.

Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Components

@tetherto/mdk-react-devkit

Import the public APIs on this page from @tetherto/mdk-react-devkit.

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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/header-actions/alarms-bell-button.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Additional class names
`counts`	Optional	`AlarmsBellButtonCounts`	`{}`	Severity-bucketed alarm counts rendered in the stacked badge
`label`	Optional	`string`	`"Active alarms"`	Accessible label. Defaults to "Active alarms"
`onClick`	Optional	`((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)`	-	Click handler — typically opens an alerts panel or routes to /alerts
`onSeverityClick`	Optional	`((severity: AlarmSeverity, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)`	-	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

`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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/dashboard/dashboard-date-range-picker/dashboard-date-range-picker.tsx

Props

Prop	Status	Type / Options	Default	Description
`onChange`	Required	`(next: DashboardDateRange) => void`	-	Fires with the next `{ start, end }` window when the user applies a range
`value`	Required	`DashboardDateRange`	-	Current range as `{ start, end }` epoch-millisecond timestamps
`className`	Optional	`string`	-	Optional class hook
`dateFormat`	Optional	`string`	`"dd/MM/yyyy"`	Display format. Defaults to `dd/MM/yyyy`
`disabled`	Optional	`boolean`	`false`	Disable the trigger

`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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/dashboard/export-button/export-button.tsx

Props

Prop	Status	Type / Options	Default	Description
`onExport`	Required	`(format: ExportFormat) => void`	-	Fires with the chosen format when the user picks an item
`className`	Optional	`string`	-	Optional class hook on the wrapper
`disabled`	Optional	`boolean`	`false`	Disable the button
`formats`	Optional	`readonly ExportFormat[]`	`['csv', 'json']`	Formats to offer in the dropdown — defaults to `['csv', 'json']`
`label`	Optional	`string`	`"Export"`	`Button` label — defaults to `'Export'`

`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 reference app's visual treatment

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/header-stats/header-consumption-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Additional class names
`icon`	Optional	`React.ReactNode`	-	Icon shown next to the stat
`unit`	Optional	`string`	`MW`	Unit label — defaults to `MW`
`valueMw`	Optional	`number`	-	Current site-level power consumption, in megawatts

`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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/header-stats/header-efficiency-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Additional class names
`icon`	Optional	`React.ReactNode`	-	Icon shown next to the stat
`unit`	Optional	`string`	`W/TH/S`	Unit label — defaults to `W/TH/S`
`valueWthS`	Optional	`number`	-	Efficiency in watts per TH/s

`HeaderHashrateBox`

Two-row hashrate cell for the dashboard's header strip. Shows the app-side and pool-side aggregate hashrate side by side. Values fall back to — when undefined

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/header-stats/header-hashrate-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`appLabel`	Optional	`string`	`WEBAPP_SHORT_NAME ("APP")`	`Label` for the app-side row
`appPhs`	Optional	`number`	-	App-side aggregate hashrate in PH/s
`className`	Optional	`string`	-	Additional class names
`fractionDigits`	Optional	`number`	`3`	Decimal places shown for both values — defaults to `3`
`icon`	Optional	`React.ReactNode`	-	Icon shown next to the stat
`poolPhs`	Optional	`number`	-	Pool-side aggregate hashrate in PH/s
`unit`	Optional	`string`	`PH/s`	`Hashrate` unit label — defaults to `PH/s`

`HeaderMinersBox`

Two-row miner-count cell for the dashboard's header strip. Top row carries the app-side online / error / offline breakdown; the bottom row shows the pool-side equivalent. Numbers fall back to — when undefined

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/header-stats/header-miners-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`appLabel`	Optional	`string`	`WEBAPP_SHORT_NAME ("APP")`	`Label` for the app-side row
`appTotal`	Optional	`number`	-	Optional app-side meta line — total miners reporting to the app
`className`	Optional	`string`	-	Additional class names
`error`	Optional	`number`	-	Miners flagged in warning (the small amber count)
`icon`	Optional	`React.ReactNode`	-	Icon shown next to the "Miners" label. Caller-provided so the package stays icon-agnostic
`offline`	Optional	`number`	-	Miners offline (the small red count)
`online`	Optional	`number`	-	Online miners (the `158` numerator)
`poolMismatch`	Optional	`number`	-	Optional pool-side mismatch count (red)
`poolOnline`	Optional	`number`	-	Optional pool-side online count (green)
`poolTotal`	Optional	`number`	-	Optional pool-side meta — total miners as reported by upstream pools
`total`	Optional	`number`	-	Total miners across the site (denominator of the `158 / 2,188` ratio)

`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 reference app visual treatment

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/header-stats/header-stats-bar.tsx

Props

Prop	Status	Type / Options	Default	Description
`children`	Required	`React.ReactNode`	-	Stat boxes to render in order, left-to-right
`className`	Optional	`string`	-	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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/header-actions/profile-menu.tsx

Props

Prop	Status	Type / Options	Default	Description
`items`	Required	`ProfileMenuItem[]`	-	Items rendered in the dropdown, top-to-bottom
`className`	Optional	`string`	-	Additional class names
`icon`	Optional	`React.ReactNode`	`<UserAvatarIcon />`	Override the trigger icon — defaults to the user-avatar icon
`label`	Optional	`string`	`"Profile menu"`	Accessible label for the trigger button
`user`	Optional	`React.ReactNode`	-	Optional user label rendered at the top of the dropdown (e.g. an email)

`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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/dashboard/site-stats-bar/site-stats-bar.tsx

Props

Prop	Status	Type / Options	Default	Description
`title`	Required	`string`	-	Site label rendered in the header row
`className`	Optional	`string`	-	Optional class hook
`containerCount`	Optional	`number`	-	Total container count across the site
`hashrateUnit`	Optional	`string`	`"TH/s"`	`Hashrate` display unit — defaults to `TH/s`
`isLoading`	Optional	`boolean`	`false`	Render a skeleton bar while data is loading
`minerCount`	Optional	`number`	-	Total miner count across the site
`power`	Optional	`number`	-	Current site-level power consumption, in watts (or whatever `powerUnit` says)
`powerUnit`	Optional	`string`	`"kW"`	Display unit for `power` — defaults to `kW`
`totalHashrate`	Optional	`number`	-	Aggregate hashrate, in TH/s

`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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/dashboard/timeline-selector/timeline-selector.tsx

Props

Prop	Status	Type / Options	Default	Description
`onChange`	Required	`(next: string) => void`	-	Called whenever the user picks a new option
`value`	Required	`string`	-	Currently selected timeline value (e.g. `'1m'`, `'5m'`)
`className`	Optional	`string`	-	Tailwind/BEM class hook on the trigger
`label`	Optional	`string`	`"Time range"`	ARIA label / placeholder for the trigger
`options`	Optional	`TimelineOption[]`	`getTimelineOptions()`	Available options — defaults to `getTimelineOptions`. Pass a custom list to localise labels or restrict the range

Dashboard

Prerequisites

Components

`AlarmsBellButton`

Props

`DashboardDateRangePicker`

Props

`ExportButton`

Props

`HeaderConsumptionBox`

Props

`HeaderEfficiencyBox`

Props

`HeaderHashrateBox`

Props

`HeaderMinersBox`

Props

`HeaderStatsBar`

Props

`ProfileMenu`

Props

`SiteStatsBar`

Props

`TimelineSelector`

Props

On this page

Dashboard

Show steps

On this page