Container components

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

Prerequisites

• Complete the @mdk/foundation installation and add the dependency

Container subpages

Dedicated pages for the socket primitive and vendor-specific UI:

• Socket — PDU socket tile primitive
• Bitdeer
• Bitmain
• Bitmain Immersion
• MicroBT

All container components

Every component in this category, including shared chrome and vendor-specific widgets.

Shared components

Container-authoring primitives that work with any container device record. Use these as building blocks inside the vendor-specific pages above, or when composing your own container view. For the PDU socket tile, see the dedicated Socket page.

EnabledDisableToggle

Toggle control to enable/disable tank circulation or the air exhaust system. Disabled when the container is offline.

Import

import { EnabledDisableToggle } from '@mdk/foundation'

Props

Basic usage

<EnabledDisableToggle
  value={tank.circulationEnabled}
  tankNumber={1}
  isButtonDisabled={false}
  isOffline={false}
  onToggle={({ tankNumber, isOn }) => submitToggle(tankNumber, isOn)}
/>

Air exhaust variant

<EnabledDisableToggle
  value={exhaustEnabled}
  tankNumber=""
  isButtonDisabled={false}
  isOffline={false}
  onToggle={({ isOn }) => setExhaust(isOn)}
/>

Styling

• .mdk-enabled-disable-toggle: Root element
• .mdk-enabled-disable-toggle__toggle: Label and Switch row shown when value is boolean

GenericDataBox

Renders a table of label/value/unit rows with optional highlighting, color, and flash states, using a shared fallback when a value is missing.

Import

import { GenericDataBox } from '@mdk/foundation'

Props

DataItem type

type DataItem = {
  label?: string
  value?: unknown
  units?: string
  unit?: string          // Alternative unit field
  isHighlighted?: boolean
  color?: string
  flash?: boolean
}

Basic usage

<GenericDataBox
  data={[
    { label: 'Temperature', value: 45, units: '°C' },
    { label: 'Pressure', value: 2.5, units: 'bar', isHighlighted: true },
    { label: 'Status', value: 'Running', color: 'green' },
  ]}
/>

Styling

• .mdk-generic-data-box: Root element
• Renders each row through DataRow

TankRow

Row showing a tank's temperature, optional pressure, and oil/water pump running indicators, with color and flash hints for alerts.

Import

import { TankRow } from '@mdk/foundation'

Props

TankRowPressure type

type TankRowPressure = Partial<{
  value: number
  flash: boolean
  color: string
  tooltip: string
}>

Basic usage

<TankRow
  label="Tank 1"
  temperature={45}
  unit="°C"
  oilPumpEnabled
  waterPumpEnabled={false}
  color=""
  pressure={{ value: 1.2 }}
/>

With alert state

<TankRow
  label="Tank 2"
  temperature={82}
  unit="°C"
  oilPumpEnabled
  waterPumpEnabled
  color="red"
  flash
  tooltip="Oil temperature above threshold"
  pressure={{ value: 2.4, color: 'orange', flash: true }}
/>

Styling

• .mdk-tanks-box__row: Root row element
• .mdk-tanks-box__params: Temperature and pressure group
• .mdk-tanks-box__param / __param-label / __param-value: Individual readouts
• .mdk-tanks-box__pump-statuses: Pump indicator group
• .mdk-tanks-box__pump-status / __pump-status-title: Per-pump indicator

ContainerFanLegend

Small badge displaying a numbered fan with an on/off styled fan icon. Used as a legend tile within fan grids.

Import

import { ContainerFanLegend } from '@mdk/foundation'

Props

Basic usage

<ContainerFanLegend index={1} enabled />
<ContainerFanLegend index={2} enabled={false} />

Styling

• .mdk-container-fan-legend: Root element
• .mdk-container-fan-legend--on / --off: On/off state modifier
• .mdk-container-fan-legend__number: Fan number badge
• .mdk-container-fan-legend__icon / --on / --off: Fan icon container

ContainerFansCard

Renders a grid of ContainerFanLegend entries from a fans data array, showing each fan's number and on/off state.

Import

import { ContainerFansCard } from '@mdk/foundation'

Props

PumpItem type

type PumpItem = {
  enabled?: boolean
  index: number
}

Basic usage

<ContainerFansCard
  fansData={[
    { enabled: true, index: 0 },
    { enabled: false, index: 1 },
    { enabled: true, index: 2 },
  ]}
/>

Styling

• .mdk-container-fans-card: Root grid element
• Renders one ContainerFanLegend per entry

DryCooler

Displays two dry cooler segments, each with a running/off indicator, fan grid, and associated oil and water pump boxes, backfilling empty slots when data is partial.

Import

import { DryCooler } from '@mdk/foundation'

Props

Basic usage

<DryCooler data={containerDevice} />

Expected data shape

The component reads the following path from data:

// data.container_specific_stats.cooling_system
{
  dry_cooler: [
    { index: 0, enabled: true, fans: [{ enabled: true, index: 0 }] },
    { index: 1, enabled: false, fans: [] },
  ],
  oil_pump:   [{ enabled: true, index: 0 }, { enabled: false, index: 1 }],
  water_pump: [{ enabled: true, index: 0 }, { enabled: true,  index: 1 }],
}

Styling

• .mdk-dry-cooler: Root element
• .mdk-dry-cooler__segment: Per-cooler group
• .mdk-dry-cooler__card: Cooler card with status and fans
• .mdk-dry-cooler__status: Title and indicator row
• .mdk-dry-cooler__title: Cooler title
• .mdk-dry-cooler__pumps: Oil and water pump column

PumpBox

Compact box showing a named, numbered pump with a running or off indicator. Renders nothing when the pump has no boolean enabled state.

Import

import { PumpBox } from '@mdk/foundation'

Props

PumpItem type

type PumpItem = {
  enabled?: boolean
  index: number        // zero-based; shown as index + 1
}

Basic usage

<PumpBox pumpTitle="Oil" pumpItem={{ enabled: true, index: 0 }} />
<PumpBox pumpTitle="Water" pumpItem={{ enabled: false, index: 1 }} />

Styling

• .mdk-pump-box: Root element
• .mdk-pump-box__status: Title and indicator row
• .mdk-pump-box__title: Pump title text

Next steps

• For browsing containers, racks, and miners, see the device explorer.
• For container-level controls, see ContainerControlsBox on the Controls page.
• For container summary widgets that surface on the dashboard, see TanksBox, SupplyLiquidBox, and MinersSummaryBox.