Container components

Components for viewing, navigating, and controlling Bitcoin mining containers, racks, and associated hardware.

Prerequisites

Before using these components, complete the @mdk/foundation installation and add the dependency.

`DeviceExplorer`

Hierarchical view of containers, racks, and miners with filtering, search, and selection capabilities.

Import

import { DeviceExplorer } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`deviceType`	`'container' \| 'miner' \| 'cabinet'`	required	Current view type
`data`	`Device[]`	required	Array of devices to display
`filterOptions`	`DeviceExplorerFilterOption[]`	required	`Cascader` filter options
`searchOptions`	`DeviceExplorerSearchOption[]`	required	Search autocomplete options
`searchTags`	`string[]`	required	Current search tags
`onSearchTagsChange`	`(tags: string[]) => void`	required	Search tags change handler
`onDeviceTypeChange`	`(type: DeviceExplorerDeviceType) => void`	required	Device type tab change handler
`onFiltersChange`	`(value: LocalFilters) => void`	required	Filter change handler
`selectedDevices`	`DataTableRowSelectionState`	`{}`	Selected row state
`onSelectedDevicesChange`	`(selections: DataTableRowSelectionState) => void`	none	Selection change handler
`renderAction`	`(device: Device) => ReactNode`	none	Custom action column renderer
`getFormattedDate`	`(date: Date) => string`	required	Date formatter function
`className`	`string`	none	Additional CSS class

Basic usage

<DeviceExplorer
  deviceType="container"
  data={containers}
  filterOptions={[
    { value: 'site-a', label: 'Site A' },
    { value: 'site-b', label: 'Site B' },
  ]}
  searchOptions={[
    { value: 'container-001', label: 'Container 001' },
  ]}
  searchTags={searchTags}
  onSearchTagsChange={setSearchTags}
  onDeviceTypeChange={setDeviceType}
  onFiltersChange={handleFilters}
  getFormattedDate={(date) => date.toLocaleDateString()}
/>

With selection

<DeviceExplorer
  deviceType="miner"
  data={miners}
  filterOptions={filterOptions}
  searchOptions={searchOptions}
  searchTags={[]}
  onSearchTagsChange={setSearchTags}
  onDeviceTypeChange={setDeviceType}
  onFiltersChange={handleFilters}
  selectedDevices={selected}
  onSelectedDevicesChange={setSelected}
  getFormattedDate={formatDate}
  renderAction={(device) => (
    <Button size="sm" onClick={() => viewDetails(device.id)}>
      View
    </Button>
  )}
/>

Styling

.mdk-device-explorer: Root element
.mdk-device-explorer__toolbar: Toolbar container
.mdk-device-explorer__toolbar__filter: Filter Cascader
.mdk-device-explorer__toolbar__search: Search input
.mdk-device-explorer__toolbar__tabs: Device type tabs
.mdk-device-explorer__toolbar__tabs-list: Tabs list container
.mdk-device-explorer__toolbar__tab-trigger: Individual tab trigger

`ContainerControlsBox`

Batch container operations panel with start/stop, cooling controls, power management, and alarm reset functionality. Adapts UI based on container type (Bitdeer, Bitmain, MicroBT).

Import

import { ContainerControlsBox } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`data`	`Device`	none	Container device data
`isBatch`	`boolean`	`false`	Enable batch operations mode
`selectedDevices`	`Device[]`	`[]`	Selected devices for batch operations
`pendingSubmissions`	`PendingSubmission[]`	`[]`	Pending action submissions
`alarmsDataItems`	`TimelineItemData[]`	`[]`	Active alarms to display
`tailLogData`	`UnknownRecord[]`	none	Tail log data for power modes
`onNavigate`	`(path: string) => void`	required	Navigation handler

Basic usage

<ContainerControlsBox
  data={container}
  onNavigate={(path) => router.push(path)}
/>

Batch operations

<ContainerControlsBox
  isBatch
  selectedDevices={selectedContainers}
  pendingSubmissions={pending}
  alarmsDataItems={alarms}
  onNavigate={handleNavigate}
/>

Container type features

The component automatically adapts based on container type:

Bitdeer: Start/Stop, Reset Alarm, Tank 1/2 toggles, Air Exhaust toggle, Socket controls
Bitmain Hydro: Start/Stop Cooling, PID Mode display
Bitmain Immersion: Start/Stop Cooling, PID Mode, Running Mode, System Status
MicroBT: Start/Stop Cooling, Socket controls

Styling

.mdk-container-controls-box: Root element
.mdk-container-controls-box__buttons-row: Action buttons row
.mdk-container-controls-box__toggles-row: Toggle switches row
.mdk-container-controls-box__toggle: Individual toggle container
.mdk-container-controls-box__bulk-row: Bulk action buttons row

`TanksBox`

Displays immersion tank status with temperature, pressure, and pump indicators for each tank.

Import

import { TanksBox } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`data`	`TanksBoxData`	none	Tank data object

`TanksBoxData` type

type Tank = {
  cold_temp_c: number
  enabled: boolean
  color?: string      // Visual indicator color
  flash?: boolean     // Enable flash animation
  tooltip?: string    // Tooltip text
}

type TanksBoxData = {
  oil_pump: Tank[]
  water_pump: { enabled: boolean }[]
  pressure: { value?: number; flash?: boolean; color?: string; tooltip?: string }[]
}

Basic usage

<TanksBox
  data={{
    oil_pump: [
      { cold_temp_c: 45, enabled: true },
      { cold_temp_c: 42, enabled: true },
    ],
    water_pump: [
      { enabled: true },
      { enabled: false },
    ],
    pressure: [
      { value: 1.2 },
      { value: 1.1 },
    ],
  }}
/>

With visual alerts

<TanksBox
  data={{
    oil_pump: [
      { cold_temp_c: 85, enabled: true, color: 'red', flash: true, tooltip: 'High temp!' },
    ],
    water_pump: [{ enabled: true }],
    pressure: [{ value: 2.5, color: 'orange', flash: true }],
  }}
/>

Styling

.mdk-tanks-box: Root element
Uses TankRow internally for each tank display

`SupplyLiquidBox`

Displays cooling liquid supply metrics including temperature, set temperature, and pressure.

Import

import { SupplyLiquidBox } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`data`	`Device`	none	Container device data
`containerSettings`	`SupplyLiquidBoxContainerSettings`	`null`	Threshold configuration

Basic usage

<SupplyLiquidBox data={containerDevice} />

With threshold settings

<SupplyLiquidBox
  data={containerDevice}
  containerSettings={{
    thresholds: {
      supply_liquid_temp: { warning: 35, critical: 40 },
      supply_liquid_pressure: { warning: 1.8, critical: 2.0 },
    },
  }}
/>

Features

The component displays three SingleStatCard items:

Supply Liquid Temp: Current liquid temperature
Supply Liquid Set Temp: Target temperature
Supply Liquid Pressure: Current pressure

Each stat automatically shows color and flash indicators based on threshold settings.

Styling

.mdk-supply-liquid-box: Root element
.mdk-supply-liquid-box__stats: Stats container

`MinersSummaryBox`

Displays mining summary parameters in a 2-column grid layout.

Import

import { MinersSummaryBox } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`params`	`MinersSummaryParam[]`	required	Array of label-value pairs
`className`	`string`	none	Additional CSS class

`MinersSummaryParam` type

type MinersSummaryParam = {
  label: string   // Parameter name
  value: string   // Pre-formatted display value (including units)
}

Basic usage

<MinersSummaryBox
  params={[
    { label: 'Efficiency', value: '32.5 W/TH/S' },
    { label: 'Hash Rate', value: '1.24 PH/s' },
    { label: 'Max Temp', value: '72 °C' },
    { label: 'Avg Temp', value: '65 °C' },
  ]}
/>

Notes

Values must be pre-formatted strings (the component does not format data)
Text size automatically adjusts for long values (>12 or >15 characters)

Styling

.mdk-miners-summary-box: Root element
.mdk-miners-summary-box__param: Individual parameter row
.mdk-miners-summary-box__label: Parameter label
.mdk-miners-summary-box__label--small: Smaller text for long values
.mdk-miners-summary-box__label--tiny: Tiny text for very long values
.mdk-miners-summary-box__value: Parameter value

Container components

On this page