Site overview details
Rack-level miner grid detail view with drag-to-select and pool assignment for a single container site
@tetherto/mdk-react-devkit/foundation
PoolManagerSiteOverviewDetails is the detail view for a single container site in the Pool Manager. It renders a rack/PDU miner grid, a status legend, and a pool-assignment panel. Operators can multi-select miners by dragging a rectangle over socket cells, then assign pool configurations from the sidebar or modal.
For the site card grid that navigates here see Sites overview. For the miner-level assign dialog see Assign pool.
Prerequisites
- Complete the @tetherto/mdk-react-devkit installation and add the dependency
<MdkProvider>from@tetherto/mdk-react-adapterwithuseActions()wired up- Site data as a
Devicerow from your API layer - Pool configuration data (
PoolConfigData[]) from your API layer - Optionally,
useSiteOverviewDetailsDatafrom@tetherto/mdk-react-adapterto supplydataOptions
Components
PoolManagerSiteOverviewDetails
Import
import { PoolManagerSiteOverviewDetails } from '@tetherto/mdk-react-devkit/foundation'
import type { PoolManagerSiteOverviewDetailsProps } from '@tetherto/mdk-react-devkit/foundation'Props
| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
unit | Required | Device | none | The site (container unit) to render details for |
unitName | Required | string | none | Display name shown in the breadcrumb (Site Overview / <unitName>) |
poolConfig | Required | PoolConfigData[] | none | Pool configurations powering the per-pool detail rows |
dataOptions | Optional | SiteOverviewDetailsDataOptions | none | Data-fetch knobs forwarded to useSiteOverviewDetailsData |
isLoading | Optional | boolean | false | Show a centered loader instead of the detail container |
backButtonClick | Required | VoidFunction | none | Called when the operator clicks the "Site Overview" back link |
Basic usage
import { PoolManagerSiteOverviewDetails } from '@tetherto/mdk-react-devkit/foundation'
export const SiteDetailPage = ({ site, poolConfig, isLoading }) => (
<PoolManagerSiteOverviewDetails
unit={site}
unitName={site.name}
poolConfig={poolConfig}
isLoading={isLoading}
backButtonClick={() => router.push('/pool-manager/sites')}
/>
)More examples
Behaviour
The component renders a breadcrumb header (Site Overview / <unitName>) with a back link, then delegates the body to the internal SiteOverviewDetailsContainer.
The container renders:
- A rack/PDU miner grid (
GridUnit) with each socket showing hashrate, status color, and socket ID - A status legend
- A pool-assignment panel when miners are selected:
- Desktop: sticky sidebar column with
SetPoolConfiguration - Tablet: a fixed FAB button that opens
SetPoolConfigurationModal
- Desktop: sticky sidebar column with
On submission the selected miners are queued as a SETUP_POOLS action through useActions().setAddPendingSubmissionAction, and the selection is cleared. Only miners in mining or not_mining status are eligible for pool assignment.
A Loader is shown while isLoading is true.
Miner selection
Miners are selected using react-selecto. Selection is always available once the grid has loaded — no prop is required to enable it.
Interaction reference
| Interaction | Result |
|---|---|
| Drag a rectangle | Selects all miner socket cells intersected by the rectangle |
| Click a socket | Selects that single miner |
| Shift + click or drag | Adds to the current selection |
| Click a rack bar | Selects all miners in that rack |
| Control / Command + click a rack bar | Deselects all miners in that rack |
| Select All (header button) | Selects every miner in the grid |
| Deselect All (header button) | Clears the selection |
Empty sockets (no connected miner) are not selectable.
Styling
PoolManagerSiteOverviewDetails (feature wrapper)
.mdk-pm-sod: Root element.mdk-pm-sod__header: Breadcrumb header row.mdk-pm-sod__title: "Site Overview" label.mdk-pm-sod__subtitle: Back-link wrapper.mdk-pm-sod__back-link: "Site Overview" back button
SiteOverviewDetailsContainer (inner container)
.mdk-sodc: Flex row wrapping rack column and sticky column.mdk-sodc__racks-col: Rack grid column; narrows when a sticky sidebar is visible.mdk-sodc__racks-col--narrow: Applied when miners are selected and the sidebar is shown (desktop).mdk-sodc__sticky-col: Sticky pool-assignment sidebar column (desktop).mdk-sodc__tablet-btn: Fixed FAB button (tablet, when miners are selected)
GridUnit (rack grid)
.mdk-grid-unit: Root of each rack/PDU grid section.mdk-grid-unit__row-label: Rack row label (Rack {pdu}).mdk-grid-unit__socket-container: Selectable miner socket cell (drag-select target).mdk-grid-unit__socket-container--disabled: Socket cell not eligible for pool assignment.mdk-grid-unit__miner-box--selected: Applied to a miner cell when selected
Related hooks
| Hook | Supplies |
|---|---|
useSiteOverviewDetailsData | Data options forwarded to the container via dataOptions prop |