Container List
Running containers with state, image tag and resource use. Restart count is shown whenever it is non-zero — a container "running" with 47 restarts is crash-looping, and its state says everything is fine.
src/components/ui/container-list.tsxAbout
From the component's own source, where it was written.
Running containers with their state, ports and resource use.
Restart count is shown whenever it is non-zero, not just when the container is unhealthy. A container that is "running" with 47 restarts is crash-looping and its state alone says everything is fine.
The image tag is shown separately from the repository, because :latest is the detail that explains why two hosts are running different code.
Actions are offered per state: you cannot start a running container, and the control is absent rather than disabled — a greyed-out Start on a running container is noise on every row.
Install
npx astralyx-ui add container-list
Usage
import { ContainerList } from '@/components/ui/container-list'
<ContainerList containers={containers} onRestart={restart} />Composer
Change the props and the source below follows.
apiRunning
ghcr.io/acme/api:sha-8f21c4a
up 12.4% CPU393 MB0.0.0.0:8080→8080
workerRunning47 restarts
ghcr.io/acme/api:sha-8f21c4a
up 88.1% CPU1.2 GB
postgresRunning
postgres:17.4
up 4.2% CPU2.0 GB127.0.0.1:5432→5432
redisRestarting3 restarts
redis:latest
0.8% CPU61 MB
migrateExited
ghcr.io/acme/api:sha-8f21c4a
<ContainerList containers={containers} onRestart={restart} />Examples
A compose stack
<ContainerList containers={containers} now={now} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
ContainerList
Running containers with their state, ports and resource use.
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| containers | Container[] | required | { id, name, image, tag?, state, startedAt?, restarts?, ports?, cpu?, memory? }. |
| onStart | (id: string) => void | — | — |
| onStop | (id: string) => void | — | — |
| onRestart | (id: string) => void | — | — |
| now | Date | — | — |
| locale | string | 'en-GB' | — |
| emptyLabel | ReactNode | 'No containers' | — |
| upLabel | ReactNode | 'up' | Precedes the uptime. |
| restartsLabel | (count: number) => ReactNode | DEFAULT_RESTARTS_LABEL | Restart count, given the number. |
| startLabel | string | 'Start' | — |
| stopLabel | string | 'Stop' | — |
| restartLabel | string | 'Restart' | — |
Types
Container
| Field | Type | Description |
|---|---|---|
| id | string | — |
| name | ReactNode | — |
| image | string | Repository, without the tag. |
| tag? | string | :latest is the detail that explains why two hosts are running different code. |
| state | ContainerState | — |
| startedAt? | Date | — |
| restarts? | number | Not only when unhealthy. A crash loop hides behind a green "running". |
| ports? | string[] | — |
| cpu? | number | — |
| memory? | number | — |
| Type | Definition | Description |
|---|---|---|
ContainerState | 'running' | 'exited' | 'restarting' | 'paused' | 'created' | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| actions | per state | Start is absent on a running container rather than disabled — a greyed control on every row is noise. |