Connection Pool

What is checked out, idle and waiting. A pool at 100% with nothing queued is exactly the right size; the same pool with twelve waiting is an outage forming — so waiters are drawn beyond the bar rather than folded into it.

src/components/ui/connection-pool.tsx

About

From the component's own source, where it was written.

A database connection pool: what is in use, idle, and waiting.

**Waiting is the number that matters, and it is not part of the pool.** A pool at 100% utilisation is fine if nothing is queued — it means the pool is exactly the right size. The same pool with twelve requests waiting is an outage forming. So the bar shows the pool, and waiters are drawn beyond its end rather than folded into it, because they are demand the pool cannot meet.

Idle connections are shown rather than hidden. A pool sitting at two active and thirty idle is paying to keep thirty sockets open against a database with a connection limit, and that is a real finding.

Install

npx astralyx-ui add connection-pool

Usage

import { ConnectionPool } from '@/components/ui/connection-pool'

<ConnectionPool active={18} idle={4} max={25} waiting={0} />

Composer

Change the props and the source below follows.

Connection pool

22 / 25

18 active
4 idle
mean wait 2ms

Props

active

waiting

tsx

<ConnectionPool
  active={18}
  idle={4}
  max={25}
  waiting={0}
/>

Examples

Healthy, and saturated

tsx

<ConnectionPool active={18} idle={4} max={25} />
<ConnectionPool active={25} idle={0} max={25} waiting={12} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`ConnectionPool`

A database connection pool: what is in use, idle, and waiting.

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
active	number	required	Checked out, open but unused, and the ceiling. Idle is shown rather than hidden: two active and thirty idle is paying to hold thirty sockets against a connection limit.
idle	number	required	Checked out, open but unused, and the ceiling. Idle is shown rather than hidden: two active and thirty idle is paying to hold thirty sockets against a connection limit.
max	number	required	Checked out, open but unused, and the ceiling. Idle is shown rather than hidden: two active and thirty idle is paying to hold thirty sockets against a connection limit.
waiting	number	0	Requests queued for a connection — the number that signals trouble. Drawn past the end of the bar, because it is demand the pool cannot meet.
waitMs	number	—	Mean time before a connection is handed over.
label	ReactNode	'Connection pool'	—
activeLabel	string	'active'	—
idleLabel	string	'idle'	—
waitingLabel	string	'waiting'	—
saturatedLabel	(waiting: number) => ReactNode	(count) => `${count} request${count === 1 ? '' : 's'} queued for a connection`	—