Sites overview

Pool-manager landing screen listing every site as a status card with pool assignment, miner counts, and hashrate

@tetherto/mdk-react-devkit/foundation

PoolManagerSitesOverview is the multi-site landing screen for pool management. It renders every site as a status card showing pool assignment, online miner count, hashrate, and active incidents. Selecting one or more cards exposes a pool-assignment panel (sidebar on desktop, modal on tablet) backed by useActions().

For the miner-level pool assignment dialog see Assign pool. For the pool manager landing page see Pool Manager overview.

Prerequisites

Complete the @tetherto/mdk-react-devkit installation and add the dependency
<MdkProvider> from @tetherto/mdk-react-adapter with useActions() and useDeviceResolution() wired up
Site data normalised through useSitesOverviewData from @tetherto/mdk-react-adapter
Pool configuration data (PoolConfigData[]) from your API layer

Components

Component	Description
`PoolManagerSitesOverview`	Sites overview table in the pool manager

`PoolManagerSitesOverview`

Tabular overview of all sites with pool assignment status, miner counts, and hashrate for the pool manager.

Import

import { PoolManagerSitesOverview } from '@tetherto/mdk-react-devkit/foundation'
import type { PoolManagerSitesOverviewProps } from '@tetherto/mdk-react-devkit/foundation'
import type { ProcessedContainerUnit } from '@tetherto/mdk-react-adapter'

Props

Prop	Status	Type	Default	Description
`units`	Required	`ProcessedContainerUnit[]`	none	Sites to render, normalised through `useSitesOverviewData`
`poolConfig`	Required	`PoolConfigData[]`	none	Pool configurations used to resolve pool names on each card
`isLoading`	Optional	`boolean`	none	Show a skeleton loader while site data is fetching
`error`	Optional	`unknown`	none	Surface a "Failed to load data" error alert when defined
`backButtonClick`	Required	`function`	none	Called when the operator clicks the "Pool Manager" back link
`onCardClick`	Required	`function`	none	Called with the clicked unit id — typically navigates to `/sites/:id`

`ProcessedContainerUnit` type

Produced by useSitesOverviewData from @tetherto/mdk-react-adapter. Pass the result directly to units.

type ContainerUnit = {
  id?: string
  type?: string
  info?: {
    container?: string
    nominalMinerCapacity?: string
    poolConfig?: string        // pool config id currently assigned
  }
  miners?: {
    total: number
    disconnected: number
    actualMiners: number
  }
  last?: {
    snap?: {
      stats?: { status?: string; [key: string]: unknown }
    }
  }
}

type ProcessedContainerUnit = ContainerUnit & {
  hashrateMhs: number          // per-container hashrate in MH/s
  status: 'mining' | 'offline'
  poolStats?: ContainerPoolStat
}

Basic usage

import { PoolManagerSitesOverview } from '@tetherto/mdk-react-devkit/foundation'
import { useSitesOverviewData } from '@tetherto/mdk-react-adapter'
import type { PoolConfigData } from '@tetherto/mdk-react-devkit/foundation'

export const SitesOverviewPage = ({
  rawUnits,
  poolStats,
  tailLog,
  poolConfig,
}: {
  rawUnits: ContainerUnit[]
  poolStats: ContainerPoolStat[]
  tailLog: SitesOverviewTailLogItem
  poolConfig: PoolConfigData[]
}) => {
  const { units } = useSitesOverviewData({ units: rawUnits, poolStats, tailLog })

  return (
    <PoolManagerSitesOverview
      units={units}
      poolConfig={poolConfig}
      backButtonClick={() => router.push('/pool-manager')}
      onCardClick={(id) => router.push(`/pool-manager/sites/${id}`)}
    />
  )
}

More examples

Behaviour

The component renders a page header ("Site Overview" title + "Pool Manager" back link) and delegates the card grid to the internal SitesOverviewStatusCardList.

Each site card shows:

Container / unit name
Assigned pool name (resolved from poolConfig via usePoolConfigs)
Formatted hashrate
Online miner count
Pool override count
Status indicator (mining / offline)

Selecting one or more cards activates a pool-assignment panel:

Desktop: a sticky sidebar column with SetPoolConfiguration
Tablet: a FAB button that opens SetPoolConfigurationModal

On submission the selected units are queued as a SETUP_POOLS action through useActions().setAddPendingSubmissionAction, and the selection is cleared.

A Loader is shown while units or pool configs are loading; a CoreAlert error is shown if either fails.

Styling

.mdk-pm-sites-overview: Root element
.mdk-pm-sites-overview__header: Title and back-link row
.mdk-pm-sites-overview__title: "Site Overview" heading text
.mdk-pm-sites-overview__subtitle: Back-link wrapper
.mdk-pm-sites-overview__back-link: "Pool Manager" back button
.mdk-pm-sites-list: Card grid container (rendered by internal list component)
.mdk-pm-sites-list__row: Flex row containing card grid and optional sticky sidebar
.mdk-pm-sites-list__unit-col: Card grid column
.mdk-pm-sites-list__unit-grid: CSS grid of status cards
.mdk-pm-sites-list__sticky-col: Sticky sidebar column (desktop, when units are selected)
.mdk-pm-sites-list__fab: Floating action button (tablet, when units are selected)

Sites overview

Loading state

Error state

On this page