Widget

Widget components for dashboards and data displays.

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.

`AddReplaceMinerDialog`

Modal for adding a new miner to a slot or swapping the existing one with a replacement unit

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/dialogs/add-replace-miner-dialog/add-replace-miner-dialog.tsx

Props

Prop	Status	Type / Options	Default	Description
`onClose`	Required	`VoidFunction`	-	Called when the dialog should close
`open`	Required	`boolean`	-	Controls dialog visibility
`currentDialogFlow`	Optional	`string`	-	Active flow identifier
`isDirectToMaintenanceMode`	Optional	`boolean`	`false`	Skip add/replace and go directly to maintenance
`minersType`	Optional	`string`	-	Miner hardware type filter
`selectedEditSocket`	Optional	`UnknownRecord`	-	`Socket` being edited
`selectedSocketToReplace`	Optional	`UnknownRecord`	-	`Socket` being replaced

`BatchContainerControlsCard`

Bulk-controls card that applies start/stop/mode changes to multiple selected containers at once

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/details-view/batch-container-controls-card/batch-container-controls-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`alarmsDataItems`	Optional	`TimelineItemData[]`	-	Alarm timeline entries to display
`connectedMiners`	Optional	`unknown`	-	Array of currently connected miners
`isBatch`	Optional	`boolean`	`true`	Whether in batch (multi-select) mode
`isCompact`	Optional	`boolean`	-	Compact layout for tighter spaces
`onNavigate`	Optional	`(path: string) => void`	-	Navigation callback for alarm deep-links

`BitdeerOptions`

Options panel for a Bitdeer container — exposes vendor-specific operating modes and thresholds.

Main container for Bitdeer cooling system options. Displays dry cooler and pumps components

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitdeer/settings/container-options/bitdeer-options.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`UnknownRecord`	-	Container settings payload; both components derive state from `cooling_system` fields

`BitdeerPumps`

Pump telemetry panel for a Bitdeer container showing per-pump RPM, flow, and alert states.

Displays exhaust fan status using an indicator

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitdeer/settings/container-options/bitdeer-pumps.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`UnknownRecord`	-	-

`BitdeerSettings`

Settings tab for a Bitdeer container — vendor-specific configuration controls and limits.

Displays container parameter settings and editable threshold forms for Bitdeer containers with oil temperature and tank pressure monitoring.

Includes: - Container parameter display (MAC address, serial number, etc.) - Editable threshold forms for oil temperature and tank pressure - Color-coded alerts and flash indicators - Sound alert configuration

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitdeer/settings/bitdeer-settings.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`UnknownRecord`	`{}`	Container settings payload from the API

`BitdeerTankPressureCharts`

Stacked time-series of dielectric tank pressure for a Bitdeer immersion container

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitdeer/charts/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`chartDataPayload`	Optional	`ChartDataPayload`	-	Declarative chart configuration
`chartTitle`	Optional	`string`	-	Title shown in the chart header
`data`	Optional	`UnknownRecord[]`	`[]`	Raw container telemetry entries (with `ts` + nested stats group)
`dateRange`	Optional	`{ start?: number \| undefined; end?: number \| undefined; }`	-	Custom date range as Unix epoch seconds. Currently unused — accepted by the shared props type but not read by the chart components
`fixedTimezone`	Optional	`string`	-	IANA timezone for x-axis ticks
`footer`	Optional	`React.ReactNode`	-	Footer (e.g. min/max/avg stats)
`height`	Optional	`number`	-	Chart pixel height
`rangeOptions`	Optional	`{ label: string; value: string; }[]`	`5m/30m/3h/1D`	Override the default range selector options
`showLegend`	Optional	`boolean`	`true`	Show the toggleable legend
`showRangeSelector`	Optional	`boolean`	`true`	Show the range selector buttons
`tag`	Optional	`string`	-	Container tag (any leading prefix is stripped)
`timeline`	Optional	`string`	`"24h"`	Initial / controlled timeline value

`BitdeerTankTempCharts`

Tank Temperature Charts for Bitdeer containers

Displays oil and water temperature readings (hot and cold) for a specific tank.

Features: - Tank Oil TempL (Cold) - Yellow line (4px) - Tank Oil TempH (Hot) - Violet line - Tank Water TempL (Cold) - Blue line - Tank Water TempH (Hot) - Sky Blue line

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitdeer/charts/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`chartDataPayload`	Optional	`ChartDataPayload`	-	Declarative chart configuration
`chartTitle`	Optional	`string`	-	Title shown in the chart header
`data`	Optional	`UnknownRecord[]`	`[]`	Raw container telemetry entries (with `ts` + nested stats group)
`dateRange`	Optional	`{ start?: number \| undefined; end?: number \| undefined; }`	-	Custom date range as Unix epoch seconds. Currently unused — accepted by the shared props type but not read by the chart components
`fixedTimezone`	Optional	`string`	-	IANA timezone for x-axis ticks
`footer`	Optional	`React.ReactNode`	-	Footer (e.g. min/max/avg stats)
`height`	Optional	`number`	-	Chart pixel height
`rangeOptions`	Optional	`{ label: string; value: string; }[]`	`5m/30m/3h/1D`	Override the default range selector options
`showLegend`	Optional	`boolean`	`true`	Show the toggleable legend
`showRangeSelector`	Optional	`boolean`	`true`	Show the range selector buttons
`tag`	Optional	`string`	-	Container tag (any leading prefix is stripped)
`tankNumber`	Optional	`string \| number`	`1`	Tank number (1 or 2)
`timeline`	Optional	`string`	`"24h"`	Initial / controlled timeline value

`BitMainBasicSettings`

General settings form for a BitMain container — naming, location, and power limits.

Main settings view displaying: - Cooling system status (pumps and fans) - Power distribution - GPS positioning

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain/status-item/settings/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`Device`	-	Container data

`BitMainControlsTab`

Read-only status tab for a BitMain container: fan status, tank levels, and GPS location.

Displays container controls including: - Container fan status - Tank levels (A, B, C, D) - GPS location (latitude/longitude)

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain-immersion/controls-tab/bitmain-immersion-controls-tab.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Required	`Device`	-	Device data

`BitMainCoolingSystem`

Cooling subsystem panel for a BitMain container — pumps, fans, and dry-cooler status.

Displays the status of cooling system components including: - Circulating pump - Fluid infusion pump - Fans (1-2) - Cooling tower fans (1-3)

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain/status-item/settings/cooling-system/bitmain-cooling-system.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`Device`	-	Container data

`BitMainHydroLiquidTemperatureCharts`

Time-series charts of dielectric liquid temperature for a BitMain hydro-cooled container.

Displays secondary liquid supply temperature readings (Temp1 and Temp2) for Bitmain Hydro containers.

Features: - Sec. Liquid supply Temp1 - Sky Blue line - Sec. Liquid supply Temp2 - Violet line - Interactive legend for toggling series - Timeline selector (1h, 6h, 24h, 7d, 30d) - Current temperature display

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain/charts/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`chartDataPayload`	Optional	`ChartDataPayload`	-	Declarative chart configuration
`chartTitle`	Optional	`string`	-	Title shown in the chart header
`data`	Optional	`UnknownRecord[]`	`[]`	Raw container telemetry entries (with `ts` + nested stats group)
`dateRange`	Optional	`{ start?: number \| undefined; end?: number \| undefined; }`	-	Custom date range as Unix epoch seconds. Currently unused — accepted by the shared props type but not read by the chart components
`fixedTimezone`	Optional	`string`	-	IANA timezone for x-axis ticks
`footer`	Optional	`React.ReactNode`	-	Footer (e.g. min/max/avg stats)
`height`	Optional	`number`	-	Chart pixel height
`rangeOptions`	Optional	`{ label: string; value: string; }[]`	`5m/30m/3h/1D`	Override the default range selector options
`showLegend`	Optional	`boolean`	`true`	Show the toggleable legend
`showRangeSelector`	Optional	`boolean`	`true`	Show the range selector buttons
`tag`	Optional	`string`	-	Container tag (any leading prefix is stripped)
`timeline`	Optional	`string`	`"24h"`	Initial / controlled timeline value

`BitMainHydroSettings`

Settings form for a BitMain hydro-cooled container; flow, temperature, and pump configuration.

Main settings view for BitMain Hydro containers displaying: - Basic settings (cooling system, power, positioning) - Threshold configuration forms (water temperature, pressure)

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`Device`	-	Device data

`BitMainImmersionControlBox`

Control box for a BitMain immersion container exposing tank, pump, and unit-level actions.

A flexible container component with configurable columns and optional bottom content. Used for displaying control information in a structured layout

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain-immersion/control-box/bitmain-immersion-control-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`bottomContent`	Optional	`React.ReactNode`	-	Content for bottom row
`className`	Optional	`string`	-	Custom className
`leftContent`	Optional	`React.ReactNode`	-	Content for left column
`rightContent`	Optional	`React.ReactNode`	-	Content for right column
`secondary`	Optional	`boolean`	`false`	Secondary variant (no border)
`title`	Optional	`string`	-	Box title

`BitMainImmersionPumpStationControlBox`

Pump-station control card for a BitMain immersion container with per-pump enable/disable.

Displays pump station status including: - Alarm/Normal status - Ready state - Operating state - Started state

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain-immersion/pump-station/bitmain-immersion-pump-station-control-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`alarmStatus`	Optional	`boolean`	`false`	Alarm/fault status
`className`	Optional	`string`	-	Custom className
`operation`	Optional	`boolean`	-	Operation status
`ready`	Optional	`boolean`	-	Ready status
`start`	Optional	`boolean`	-	Start status
`title`	Optional	`string`	-	Box title

`BitMainImmersionSettings`

Settings form for a BitMain immersion container — tank thresholds, pump curves, and limits.

Settings form for BitMain immersion containers with temperature threshold configuration

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain-immersion/bitmain-immersion-settings.tsx

Props

Prop	Status	Type / Options	Default	Description
`containerSettings`	Optional	`{ thresholds?: Record<string, unknown> \| undefined; } \| null`	`null`	Container settings with custom thresholds
`data`	Optional	`Device`	-	Device data

`BitMainImmersionSummaryBox`

Summary card for a BitMain immersion-cooled container: temps, pumps, power, and overall status

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/container/bitmain-immersion-summary-box/bitmain-immersion-summary-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`containerSettings`	Optional	`BitMainImmersionSummaryBoxContainerSettings \| null`	`null`	Optional threshold configuration that drives colour/flash states on temperature stats
`data`	Optional	`Device`	-	Live device object from the devices store. Returns `null` when omitted

`BitMainImmersionSystemStatus`

Aggregated system-status card for a BitMain immersion container; rolls up subsystem health.

Displays system status information including: - Server start permission - Connection status

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain-immersion/system-status/bitmain-immersion-system-status.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`Device`	-	Device data

`BitMainImmersionUnitControlBox`

Per-unit control card inside a BitMain immersion container with start/stop and reset actions

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain-immersion/unit-control-box/USAGE.md#bitmainimmersioncompactunitcontrolbox-props-detail

Props

Prop	Status	Type / Options	Default	Description
`alarmStatus`	Optional	`boolean`	`false`	Alarm/fault status
`className`	Optional	`string`	-	Custom className
`frequency`	Optional	`number`	-	Frequency value in Hz
`isDryCooler`	Optional	`boolean`	`false`	Whether this is a dry cooler unit
`running`	Optional	`boolean`	`false`	Whether the unit is running
`secondary`	Optional	`boolean`	`false`	Secondary variant (no border)
`showFrequencyInLeftColumn`	Optional	`boolean`	`false`	Show frequency in left column instead of right
`title`	Optional	`string`	-	Box title

`BitMainLiquidPressureCharts`

Time-series charts of dielectric liquid pressure across a BitMain immersion container.

Displays supply and return liquid pressure readings for Bitmain containers. Converts pressure values from MPa to bar for display.

Features: - Supply Liquid Pressure - Sky Blue line - Return Liquid Pressure - Violet line - Automatic MPa to bar conversion - Interactive legend for toggling series - Timeline selector (1h, 6h, 24h, 7d, 30d) - Current pressure display

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain/charts/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`chartDataPayload`	Optional	`ChartDataPayload`	-	Declarative chart configuration
`chartTitle`	Optional	`string`	-	Title shown in the chart header
`data`	Optional	`UnknownRecord[]`	`[]`	Raw container telemetry entries (with `ts` + nested stats group)
`dateRange`	Optional	`{ start?: number \| undefined; end?: number \| undefined; }`	-	Custom date range as Unix epoch seconds. Currently unused — accepted by the shared props type but not read by the chart components
`fixedTimezone`	Optional	`string`	-	IANA timezone for x-axis ticks
`footer`	Optional	`React.ReactNode`	-	Footer (e.g. min/max/avg stats)
`height`	Optional	`number`	-	Chart pixel height
`rangeOptions`	Optional	`{ label: string; value: string; }[]`	`5m/30m/3h/1D`	Override the default range selector options
`showLegend`	Optional	`boolean`	`true`	Show the toggleable legend
`showRangeSelector`	Optional	`boolean`	`true`	Show the range selector buttons
`tag`	Optional	`string`	-	Container tag (any leading prefix is stripped)
`timeline`	Optional	`string`	`"24h"`	Initial / controlled timeline value

`BitMainLiquidTempCharts`

Time-series charts of dielectric liquid temperature across a BitMain immersion container.

Displays supply and return liquid temperature readings for Bitmain containers.

Features: - Supply Liquid Temp - Sky Blue line - Return Liquid Temp - Violet line - Interactive legend for toggling series - Timeline selector (1h, 6h, 24h, 7d, 30d) - Current temperature display

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain/charts/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`chartDataPayload`	Optional	`ChartDataPayload`	-	Declarative chart configuration
`chartTitle`	Optional	`string`	-	Title shown in the chart header
`data`	Optional	`UnknownRecord[]`	`[]`	Raw container telemetry entries (with `ts` + nested stats group)
`dateRange`	Optional	`{ start?: number \| undefined; end?: number \| undefined; }`	-	Custom date range as Unix epoch seconds. Currently unused — accepted by the shared props type but not read by the chart components
`fixedTimezone`	Optional	`string`	-	IANA timezone for x-axis ticks
`footer`	Optional	`React.ReactNode`	-	Footer (e.g. min/max/avg stats)
`height`	Optional	`number`	-	Chart pixel height
`rangeOptions`	Optional	`{ label: string; value: string; }[]`	`5m/30m/3h/1D`	Override the default range selector options
`showLegend`	Optional	`boolean`	`true`	Show the toggleable legend
`showRangeSelector`	Optional	`boolean`	`true`	Show the range selector buttons
`tag`	Optional	`string`	-	Container tag (any leading prefix is stripped)
`timeline`	Optional	`string`	`"24h"`	Initial / controlled timeline value

`BitMainPowerAndPositioning`

Power and physical-positioning settings for a BitMain container — circuits, phases, and rack slots.

Displays power distribution and GPS location information: - Distribution box #1 and #2 power consumption - Latitude and longitude coordinates with direction

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain/status-item/settings/power-and-positioning/bitmain-power-and-positioning.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`Device`	-	Container data

`BitMainPowerCharts`

Time-series charts of per-phase power, voltage, and current draw for a BitMain container.

Displays power consumption for Bitmain containers with distribution boxes. Shows total power and individual power for each distribution box. Automatically calculates total power from the sum of both boxes and formats the display units (kW/MW) based on the power magnitude.

Features: - Total Power - Sky Blue line (sum of both boxes) - Dist. Box 1 Power - Violet line - Dist. Box 2 Power - Red line - Interactive legend for toggling series - Timeline selector (1h, 6h, 24h, 7d, 30d) - Current power consumption display with auto unit (W/kW/MW) - Automatic kW to W conversion for chart display

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain/charts/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`chartDataPayload`	Optional	`ChartDataPayload`	-	Declarative chart configuration
`chartTitle`	Optional	`string`	-	Title shown in the chart header
`data`	Optional	`UnknownRecord[]`	`[]`	Raw container telemetry entries (with `ts` + nested stats group)
`dateRange`	Optional	`{ start?: number \| undefined; end?: number \| undefined; }`	-	Custom date range as Unix epoch seconds. Currently unused — accepted by the shared props type but not read by the chart components
`fixedTimezone`	Optional	`string`	-	IANA timezone for x-axis ticks
`footer`	Optional	`React.ReactNode`	-	Footer (e.g. min/max/avg stats)
`height`	Optional	`number`	-	Chart pixel height
`rangeOptions`	Optional	`{ label: string; value: string; }[]`	`5m/30m/3h/1D`	Override the default range selector options
`showLegend`	Optional	`boolean`	`true`	Show the toggleable legend
`showRangeSelector`	Optional	`boolean`	`true`	Show the range selector buttons
`tag`	Optional	`string`	-	Container tag (any leading prefix is stripped)
`timeline`	Optional	`string`	`"24h"`	Initial / controlled timeline value

`BitMainSupplyLiquidFlowCharts`

Time-series charts of supply-side coolant flow rates for a BitMain immersion container.

Displays supply liquid flow rate for Bitmain containers in cubic meters per hour (m³/h).

Features: - Supply Liquid Flow - Sky Blue line - Interactive timeline selector (1h, 6h, 24h, 7d, 30d) - Current flow rate display - Optional legend and range selector

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain/charts/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`chartDataPayload`	Optional	`ChartDataPayload`	-	Declarative chart configuration
`chartTitle`	Optional	`string`	-	Title shown in the chart header
`data`	Optional	`UnknownRecord[]`	`[]`	Raw container telemetry entries (with `ts` + nested stats group)
`dateRange`	Optional	`{ start?: number \| undefined; end?: number \| undefined; }`	-	Custom date range as Unix epoch seconds. Currently unused — accepted by the shared props type but not read by the chart components
`fixedTimezone`	Optional	`string`	-	IANA timezone for x-axis ticks
`footer`	Optional	`React.ReactNode`	-	Footer (e.g. min/max/avg stats)
`height`	Optional	`number`	-	Chart pixel height
`rangeOptions`	Optional	`{ label: string; value: string; }[]`	`5m/30m/3h/1D`	Override the default range selector options
`showLegend`	Optional	`boolean`	`true`	Show the toggleable legend
`showRangeSelector`	Optional	`boolean`	`true`	Show the range selector buttons
`tag`	Optional	`string`	-	Container tag (any leading prefix is stripped)
`timeline`	Optional	`string`	`"24h"`	Initial / controlled timeline value

`ContainerCharts`

Tabbed chart panel showing per-container hashrate, power, and temperature time series

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/container/container-charts/container-charts.tsx

Props

Prop	Status	Type / Options	Default	Description
`combinations`	Required	`ContainerChartCombinationOption[]`	-	Options for the combination selector
`chartRawData`	Optional	`ChartEntry[] \| null`	`null`	Raw overview stats rows passed to chart adapters
`defaultSelectedCombination`	Optional	`string \| null`	`null`	Initial selection when uncontrolled
`disabledMessage`	Optional	`string`	`"Container Charts feature is not enabled"`	Message when `featureEnabled` is false
`featureEnabled`	Optional	`boolean`	`true`	When false, shows an empty state (feature gate)
`getDatasetBorderColor`	Optional	`ContainerChartsDatasetBorderColorResolver`	-	Optional per-dataset line colors after adapters run (e.g. demo or host branding)
`isLoadingCharts`	Optional	`boolean`	`false`	Loading state for the chart panels
`isLoadingCombinations`	Optional	`boolean`	`false`	Loading state for combination options
`onSelectedCombinationChange`	Optional	`((value: string \| null) => void)`	-	Called when the selected combination changes
`selectedCombination`	Optional	`string \| null`	-	Controlled selected combination value
`title`	Optional	`string`	`"Container Charts"`	Section heading

`ContainerControlsBox`

Control panel for a single container — start/stop, mode select, and operator actions

agent-ready

Source

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

Props

Prop	Status	Type / Options	Default	Description
`onNavigate`	Required	`(path: string) => void`	-	Navigation callback used by alarm row click-throughs
`alarmsDataItems`	Optional	`TimelineItemData[]`	`[]`	Active alarm feed items to display inline
`data`	Optional	`Device`	-	The container device object
`isBatch`	Optional	`boolean`	`false`	When `true`, operates on `selectedDevices` instead of a single `data` record
`isCompact`	Optional	`boolean`	-	-
`pendingSubmissions`	Optional	`PendingSubmission[]`	`[]`	In-flight command queue; disables conflicting actions
`powerModesLog`	Optional	`UnknownRecord`	-	-
`selectedDevices`	Optional	`Device[]`	`[]`	Devices included in a batch operation
`tailLogData`	Optional	`UnknownRecord[]`	-	Recent log tail entries

`ContainerControlsCard`

Per-socket controls card for the container detail view: powers the selected miner sockets on/off and shows their aggregate power / current. Reads the selected sockets from the devices store (populated by deriveSelectedSockets) and queues switchSocket drafts. Container-level "power all sockets" lives on BatchContainerControlsCard; this card drives an explicit socket selection, which the flat Explorer list does not yet surface (a container-PDU grid is the follow-on) — hence advanced rather than agent-ready

advanced

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/details-view/container-controls-card/container-controls-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`buttonsStates`	Optional	`ButtonsStates`	-	-
`isLoading`	Optional	`boolean`	-	-

`ContainerFanLegend`

Legend strip describing fan states and colours used by the container fans visualisation.

Displays a single fan status with number and icon

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitdeer/settings/container-options/dry-cooler/container-fans-card/container-fans-legend.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Custom className
`enabled`	Optional	`boolean`	`false`	Running state; controls the icon and colour class
`index`	Optional	`number \| null`	-	Fan index/number to display

`ContainerFansCard`

Card displaying the array of cooling fans in a container with live state per fan.

Displays a grid of fan status indicators. Shows fan number and on/off state with icon

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitdeer/settings/container-options/dry-cooler/container-fans-card/container-fans-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`fansData`	Optional	`PumpItem[]`	-	Array of fan state objects. Renders an empty card when the array is empty; returns `null` when absent

`ContainerSelectionDialog`

Modal that lists containers and lets the operator pick one or many for a follow-up action

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/dialogs/position-change-dialog/container-selection-dialog/container-selection-dialog.tsx

Props

Prop	Status	Type / Options	Default	Description
`onClose`	Required	`(value?: boolean \| undefined) => void`	-	Called when dialog closes
`open`	Required	`boolean`	-	Controls visibility
`containers`	Optional	`Device[]`	`[]`	Available target containers
`isLoading`	Optional	`boolean`	-	Show loading spinner
`miner`	Optional	`Device`	-	The miner being moved

`ContainerWidgetCard`

Presentational summary card for a single container in the Site Overview widgets grid: a header row (title / alarms / power), then either an offline / error banner or the body (optional vendor content, a miners summary, and a miner-activity chart).

Fully props-driven — no data fetching, formatting, or alarm math. The owning feature/hook shapes every value (including flash and summary)

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/container/container-widget-card/container-widget-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`summary`	Required	`MinersSummaryParam[]`	-	Pre-formatted miners-summary rows (label + display value incl. units)
`title`	Required	`string`	-	Container display name shown in the header row
`activity`	Optional	`ContainerActivityData`	`{}`	Miner-state activity counts for the embedded chart
`activityError`	Optional	`ContainerActivityError`	`null`	Activity chart error payload
`alarms`	Optional	`Partial<Record<AlarmPropKey, Alert[]>>`	-	Per-category alarm badges for the header row
`className`	Optional	`string`	-	Additional class for the root element
`errorMessage`	Optional	`string`	-	Container-level error message; renders an error banner instead of the body
`flash`	Optional	`boolean`	`false`	Critical-high alarm flash. Computed upstream (by the data hook) so the card stays presentational — never derive alarm state inside this component
`isActivityError`	Optional	`boolean`	`false`	Activity chart error state
`isActivityLoading`	Optional	`boolean`	`false`	Activity chart loading state
`isOffline`	Optional	`boolean`	`false`	Render the offline banner instead of the body
`onClick`	Optional	`(() => void)`	-	Invoked when the card is clicked (navigation is the caller's concern)
`power`	Optional	`number`	-	Latest container power draw in watts (rendered in kW by the top row)
`powerUnit`	Optional	`string`	-	Power unit label shown next to the reading
`statsErrorMessage`	Optional	`string \| ErrorWithTimestamp[] \| null`	-	Raw stats error surfaced as a tooltip in place of the power reading
`vendorContent`	Optional	`React.ReactNode`	-	Optional vendor-specific content (supply-liquid / tanks / immersion / MicroBT boxes) rendered above the miners summary. Kept as a slot so the generic card carries no per-model branching

`CostMetrics`

Three "$/MWh" tiles that summarise the cost-summary period. Order mirrors the OSS Cost page: All-in (highlighted), Energy, Operations

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/reporting-tool/financial/cost/cost-metrics.tsx

Props

Prop	Status	Type / Options	Default	Description
`metrics`	Required	`CostSummaryDisplayMetrics`	-	-

`DryCooler`

Dry-cooler subsystem panel showing inlet/outlet temperatures and fan-stage status.

Displays dry cooler status with fans and associated pumps. Shows two cooler groups with fan status indicators and pump controls

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitdeer/settings/container-options/dry-cooler/dry-cooler.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`UnknownRecord`	-	Container settings payload. `cooling_system.dry_cooler` is read for fan state; `cooling_system.oil_pump` and `cooling_system.water_pump` are read for pump state

`EnabledDisableToggle`

Switch with confirmation that enables or disables a container, miner, or feature flag

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/container/enabled-disable-toggle/enabled-disable-toggle.tsx

Props

Prop	Status	Type / Options	Default	Description
`isButtonDisabled`	Required	`boolean`	-	Disables the Enable/Disable buttons when a command is in-flight
`isOffline`	Required	`boolean`	-	Disables all controls and shows an offline tooltip
`onToggle`	Required	`(params: EnabledDisableToggleCbParams) => void`	-	Callback fired when the user confirms a state change
`tankNumber`	Required	`string \| number`	-	Tank identifier used in the label (`Tank {N} Circulation`). Pass an empty string for the air exhaust label
`value`	Required	`unknown`	-	Current state. A boolean drives a switch display; non-boolean shows action buttons

`ExplorerDetail`

Per-type Explorer detail panel. Reads the selection the useExplorerSelection bridge writes into devicesStore and composes the matching cards:

container: BatchContainerControlsCard (batch when >1 selected) with the connected-miner power-mode controls and the active-alarms box, plus StatsGroupCard for the connected miners and ContainerControlsCard when an explicit per-socket selection exists. - miner: MinerControlsCard write controls, MinerInfoCard read-only info rows, MinerChipsCard per-chip stats, StatsGroupCard aggregate, and the active-alarms box. - cabinet: read-only CabinetDetailCard — powermeter + temperature readings and the LV-cabinet warnings timeline.

Writes queue into the actions draft store; submission stays gated behind the ActionsSidebar

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/features/explorer/explorer-detail/explorer-detail.tsx

Props

Prop	Status	Type / Options	Default	Description
`deviceType`	Required	`"container" \| "miner" \| "cabinet"`	-	The active Explorer tab — selects which per-type panel renders
`isCompact`	Optional	`boolean`	`true`	Compact layout for the narrower Explorer detail column
`onNavigate`	Optional	`((path: string) => void)`	`no-op`	Router navigate used by alarm rows to deep-link into `/alerts/:id`

`FireStatusBox`

Fire Status Box Component x Displays fire safety and environmental monitoring status

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/micro-bt/fire-status-box/fire-status-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`{ smokeDetector: string \| number; waterIngressDetector: string \| number; coolingFanStatus: string \| number; }`	-	Device data

`GaugeChartComponent`

Single-needle gauge chart used inside container settings for thresholded percentage values.

Displays a value as a gauge/speedometer chart with label and unit

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/micro-bt/gauge-chart/gauge-chart-component.tsx

Props

Prop	Status	Type / Options	Default	Description
`max`	Required	`number`	-	Maximum value for the gauge
`unit`	Required	`string`	-	Unit of measurement
`value`	Required	`number`	-	Current value
`chartStyle`	Optional	`React.CSSProperties`	`{}`	Custom chart style
`className`	Optional	`string`	-	Custom className
`colors`	Optional	`string[]`	`[COLOR.EMERALD, COLOR.SOFT_TEAL]`	Arc colors in HEX format
`height`	Optional	`number`	`200`	Chart height in pixels
`hideText`	Optional	`boolean`	`true`	Hide the percentage text inside the chart
`label`	Optional	`string`	`""`	`Label`/title for the chart

`GenericDataBox`

Reusable labelled stat box used by container summary panels for one-off numeric values.

Displays a table of label-value-unit rows

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/container/generic-data-box/generic-data-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`DataItem[]`	`[]`	Array of data items to display
`fallbackValue`	Optional	`unknown`	-	Fallback value when value is undefined

`MaintenanceDialogContent`

Body of the maintenance dialog — captures the work-order details before applying the maintenance flag

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/dialogs/position-change-dialog/maintenance-dialog-content/maintenance-dialog-content.tsx

Props

Prop	Status	Type / Options	Default	Description
`onCancel`	Optional	`VoidFunction`	-	Called when the user cancels
`selectedEditSocket`	Optional	`Partial<SelectedEditSocket>`	-	The socket/slot being flagged for maintenance

`MicroBTCooling`

Cooling subsystem panel for a MicroBT container — pumps, fans, and coolant flow telemetry.

Displays cooling system status for MicroBT containers including: - Cycle pump status - Main circulation pump (status, switch, speed) - Cooling fan (status, switch, speed) - Make-up water pump (status, switch, fault)

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/micro-bt/cooling/micro-bt-cooling.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`Device`	-	Device data

`MicroBTSettings`

Settings form for a MicroBT container with vendor-specific operating limits.

Settings form for MicroBT containers with temperature threshold configuration

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/micro-bt/settings/micro-bt-settings.tsx

Props

Prop	Status	Type / Options	Default	Description
`containerSettings`	Optional	`{ thresholds?: Record<string, unknown> \| undefined; } \| null`	`null`	Container settings with custom thresholds
`data`	Optional	`Device`	-	Device data

`MicroBTWidgetBox`

Summary card for a MicroBT-equipped container showing pumps, fans, and operating mode

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/container/micro-bt-widget-box/micro-bt-widget-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`Device`	-	Live device object. Returns `null` when omitted

`MinerChip`

Chip representing a single miner; surfaces slot index, temperature, and frequency

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/details-view/miner-chips-card/miner-chip/miner-chip.tsx

Props

Prop	Status	Type / Options	Default	Description
`frequency`	Required	`{ current: number; }`	-	Current frequency in MHz
`index`	Required	`number`	-	Chip slot index
`temperature`	Required	`{ avg: number; min: number; max: number; }`	-	Temperature readings in °C

`MinerChipsCard`

Card listing every miner in a container as <MinerChip>s for at-a-glance selection

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/details-view/miner-chips-card/miner-chips-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Required	`ContainerStats`	-	Container stats including chip frequency and temperature arrays

`MinerControlsCard`

Action card for a single miner: power, reboot, mode select, and maintenance entry points

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/details-view/miner-controls-card/miner-controls-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`buttonsStates`	Required	`Record<string, boolean \| undefined>`	-	Map of action name → loading/disabled state
`isLoading`	Required	`boolean`	-	Whether the card itself is in a loading state
`showPowerModeSelector`	Optional	`boolean`	`true`	Show the power-mode selection button

`MinerInfoCard`

Info card for one miner — serial, model, firmware, location, and recent activity summary

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/details-view/miner-info-card/miner-info-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`InfoItem[]`	-	Array of label/value pairs to display
`label`	Optional	`string`	`"Miner info"`	Card heading label

`MinerMetricCard`

Single-metric card (hashrate, temperature, or power) for one miner with sparkline and delta.

Displays key metrics for a miner including: - Efficiency (fixed position top-right) - Hash rate, Temperature - Frequency, Consumption - Optional secondary stats in grid

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/details-view/miner-metric-card/miner-metric-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`primaryStats`	Optional	`StatItem[]`	-	Primary statistics (efficiency, hashrate, temperature, frequency, consumption)
`secondaryStats`	Optional	`StatItem[]`	-	Secondary statistics to display in grid
`showSecondaryStats`	Optional	`boolean`	`true`	Whether to show secondary stats section

`MinerPowerModeSelectionButtons`

Segmented control letting an operator switch a miner between low / normal / turbo power modes

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/details-view/miner-power-mode-selection-buttons/miner-power-mode-selection-buttons.tsx

Props

Prop	Status	Type / Options	Default	Description
`connectedMiners`	Optional	`Device[]`	-	Currently connected miners
`disabled`	Optional	`boolean`	`false`	Disable all buttons
`hasMargin`	Optional	`boolean`	`false`	Add margin around the button group
`powerModesLog`	Optional	`UnknownRecord`	-	Log of previous power mode selections
`selectedDevices`	Optional	`Device[]`	`[]`	Devices to apply the power mode to
`setPowerMode`	Optional	`((devices: Device[], mode: string) => void)`	-	Callback to apply the selected mode

`MinersActivityChart`

Per-status miner counts (online / offline / faulted / power-mode). Renders as coloured indicator dots (indicators) or tinted status tiles (tiles)

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/details-view/miners-activity-chart/miners-activity-chart.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`MinersActivityData`	`{}`	Time-series data for online/offline/faulted counts
`error`	Optional	`MinerActivityChartErrorProp \| null`	`null`	Error details to display
`isDemoMode`	Optional	`boolean`	`false`	Use demo/mock data
`isError`	Optional	`boolean`	`false`	Show error state
`isLoading`	Optional	`boolean`	`false`	Show loading state
`large`	Optional	`boolean`	`false`	Use tall variant
`showLabel`	Optional	`boolean`	`true`	Show axis labels
`variant`	Optional	`"indicators" \| "tiles"`	`"indicators"`	`indicators` (default) renders coloured dots; `tiles` renders tinted status tiles

`MinersSummaryBox`

Headline card summarising miner counts by state (online, offline, faulted) for one container.

Displays mining summary parameters in a 2-column grid layout. Accepts pre-formatted values - consumers handle data formatting

agent-ready

Source

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

Props

Prop	Status	Type / Options	Default	Description
`params`	Required	`MinersSummaryParam[]`	-	Array of label-value pairs to display in a 2-column grid
`className`	Optional	`string`	-	Additional CSS class name

`PositionChangeDialog`

Modal that moves a miner to a different rack slot, validating the destination first

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/dialogs/position-change-dialog/position-change-dialog.tsx

Props

Prop	Status	Type / Options	Default	Description
`onClose`	Required	`(currentDialogFlow: string, isDontReset?: boolean \| undefined) => void`	-	Called when dialog closes
`open`	Required	`boolean`	-	Controls dialog visibility
`dialogFlow`	Optional	`string`	-	Initial dialog step/flow identifier
`isContainerEmpty`	Optional	`boolean`	`false`	Whether the target container slot is empty
`onChangePositionClicked`	Optional	`VoidFunction`	-	Callback when position change is triggered
`onPositionChangedSuccess`	Optional	`VoidFunction`	-	Callback on successful position change
`selectedEditSocket`	Optional	`UnknownRecord`	-	`Socket` being edited
`selectedSocketToReplace`	Optional	`UnknownRecord`	-	`Socket` being replaced

`PowerMeters`

Per-circuit power-meter panel showing live kW, kWh, and power-factor readings.

Displays power meter readings for container devices including: - Communication status - Voltage measurements (A-B, B-C, C-A) - Power factor and frequency - Active and apparent power - Energy consumption

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/micro-bt/power-meters/power-meters.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`Device`	-	Device data

`PumpBox`

Single-pump status card with RPM, flow, and fault state for one immersion-cooling pump

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitdeer/settings/container-options/pump-box/pump-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`pumpTitle`	Required	`string`	-	`Label` prefix for the pump (e.g. `"Circulation"`)
`pumpItem`	Optional	`PumpItem`	-	Pump data. `index` is 0-based; displayed as `index + 1`

`RemoveMinerDialog`

Confirmation modal for removing a miner from a slot. Renders nothing when isRemoveMinerFlow is false

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/dialogs/position-change-dialog/remove-miner-dialog/remove-miner-dialog.tsx

Props

Prop	Status	Type / Options	Default	Description
`isRemoveMinerFlow`	Required	`boolean`	-	Controls whether the dialog is open; `false` renders nothing
`onCancel`	Required	`VoidFunction`	-	Called when the action is cancelled
`headDevice`	Optional	`Device`	`{}`	The miner being removed

`SecondaryStatCard`

Compact stat tile rendered alongside a primary stat to provide supporting context.

Displays a secondary statistic with a name and value in a card format

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/details-view/secondary-stat-card/secondary-stat-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Custom className
`name`	Optional	`string`	`""`	Stat name/label
`value`	Optional	`string \| number`	`""`	Stat value

`SingleStatCard`

Hero stat tile rendering one big number with a label and optional delta indicator.

Displays a single statistic with optional animations and variants

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/details-view/single-stat-card/single-stat-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`color`	Optional	`string`	`"inherit"`	Color for flash/border
`flash`	Optional	`boolean`	`false`	Enable flash animation
`name`	Optional	`string`	-	Stat name/label
`row`	Optional	`boolean`	`false`	Row layout
`subtitle`	Optional	`string`	`""`	Subtitle text
`superflash`	Optional	`boolean`	`false`	Enable superflash animation (faster)
`unit`	Optional	`string`	`""`	Unit of measurement
`value`	Optional	`string \| number \| null`	`null`	Stat value
`variant`	Optional	`"primary" \| "secondary" \| "tertiary" \| "highlighted"`	`"primary"`	Card variant

`Socket`

Per-socket panel showing the miner slotted into a container slot, its state, and quick actions.

Displays a socket in a PDU with power/current info, miner status, and heatmap visualization

Features: - Power and current display - Miner status indicators - Heatmap mode with temperature/hashrate - Cooling fan indicator - Socket enable/disable states - Add miner flow

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/container/socket/socket.tsx

Props

Prop	Status	Type / Options	Default	Description
`clickDisabled`	Optional	`boolean`	`false`	Whether click is disabled
`cooling`	Optional	`boolean`	`undefined`	Cooling status
`current_a`	Optional	`number \| null`	`null`	Current in amperes
`enabled`	Optional	`boolean`	`false`	Whether socket is enabled
`heatmap`	Optional	`Heatmap \| null`	`null`	`Heatmap` configuration
`innerRef`	Optional	`React.ForwardedRef<HTMLDivElement>`	-	Forwarded ref for the container
`isContainerControlSupported`	Optional	`boolean`	`false`	Whether container control is supported
`isEditFlow`	Optional	`boolean`	`false`	Whether in edit flow mode
`isEmptyPowerDashed`	Optional	`boolean`	`false`	Whether to show dashed border for empty power
`miner`	Optional	`Miner \| null`	`null`	Miner data
`pdu`	Optional	`Pdu`	-	PDU information
`power_w`	Optional	`number \| null`	`null`	Power in watts
`selected`	Optional	`boolean`	`false`	Whether socket is selected
`socket`	Optional	`number \| null`	`null`	`Socket` number/index

`StatsGroupCard`

Card grouping multiple <SingleStatCard>s or <SecondaryStatCard>s under a shared title.

Displays aggregated statistics for selected miners: - Hash rate, Temperature, Frequency, Consumption - Optional: Power mode, Uptime, LED, Status (for single miner)

Can render in two modes: - Miner Metrics: Uses MinerMetricCard layout - Stats Grid: Uses SingleStatCard and SecondaryStatCard in rows

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/details-view/stats-group-card/stats-group-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`isMinerMetrics`	Optional	`boolean`	`false`	Whether to show miner metrics card layout
`miners`	Optional	`Device[] \| DeviceData[]`	-	Array of miners to display stats for

`StatusItem`

Compact labelled status pill used inside container panels for boolean or enum readings.

Displays a label with a colored status indicator

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/explorer/containers/bitmain/status-item/status-item.tsx

Props

Prop	Status	Type / Options	Default	Description
`label`	Optional	`string`	-	Status label text
`status`	Optional	`"warning" \| "normal" \| "fault" \| "unavailable"`	-	Status type

`SupplyLiquidBox`

Status card for the dielectric supply tank — level, temperature, and pressure readings

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/container/supply-liquid-box/supply-liquid-box.tsx

Props

Prop	Status	Type / Options	Default	Description
`containerSettings`	Optional	`SupplyLiquidBoxContainerSettings \| null`	`null`	Optional threshold map that controls colour and flash states on readings
`data`	Optional	`Device`	-	Live device object. Returns `null` when omitted

`TankRow`

Single tank-list row used inside <TanksBox> to display per-tank temperature and pressure

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/container/tanks-box/tank-row.tsx

Props

Prop	Status	Type / Options	Default	Description
`color`	Required	`string`	-	CSS colour for the temperature value (threshold-driven)
`label`	Required	`string`	-	Tank identifier label (e.g. "Tank 1")
`oilPumpEnabled`	Required	`boolean`	-	Running state for the oil pump
`pressure`	Required	`Partial<{ value: number; flash: boolean; color: string; tooltip: string; }>`	-	Pressure reading with optional flash/colour/tooltip
`temperature`	Required	`number`	-	Current temperature value
`unit`	Required	`string`	-	Temperature unit string (e.g. "°C")
`waterPumpEnabled`	Required	`boolean`	-	Running state for the water pump
`flash`	Optional	`boolean`	-	Enables flash animation on the temperature row
`tooltip`	Optional	`string`	-	`Tooltip` text for the temperature value

`TanksBox`

Card listing all tanks inside an immersion container with per-tank temperature and pressure rows.

Displays tank rows with temperature, pressure, and oil/water pump status

agent-ready

Source

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

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`{ oil_pump: Tank[]; water_pump: WaterPump[]; pressure: TanksBoxPressure[]; }`	-	Tank telemetry arrays; returns `null` when omitted

`WidgetTopRow`

Compact header row used at the top of container / miner widgets — shows the title, per-category alarm badges, and the current power reading (or an error tooltip)

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/widget-top-row/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`title`	Required	`string`	-	Widget title
`alarms`	Optional	`Partial<Record<AlarmPropKey, Alert[]>>`	-	Per-category alarm badges
`className`	Optional	`string`	-	Additional class names
`power`	Optional	`number`	-	Power reading; rendered in kilo-units
`statsErrorMessage`	Optional	`string \| ErrorWithTimestamp[] \| null`	-	Error tooltip content; replaces power
`unit`	Optional	`string`	-	Power unit (e.g. `"kW"`)

Show steps

On this page