Database Connection Pool Monitor Tile — Live Active/Idle/Waiting Breakdown

Database Connection Pool Monitor Tile · Dashboards · Plain HTML, CSS & JS · Live preview

Share & Support

What's included

Features

Three distinct connection states (active, idle, waiting) tracked and visualized separately, not blended into one percentage
Health badge logic checks for actual saturation (waiting > 0) before falling back to a softer utilization warning
Simulated pool churn models specific realistic events, not an unconstrained random walk
Values explicitly clamped so active + idle can never exceed the pool's real maximum capacity
Segmented bar visualizes proportional composition of the pool at a glance
role="img" with a dynamically updated aria-label summarizing exact counts for screen readers
Self-contained simulation with realistic randomized timing between updates
Clear, swappable boundary between the simulation logic and the rendering logic for easy real-data integration

About this UI Snippet

Connection Pool Monitor Tile — Health Status Derived From Real Signals

Screenshot of the Database Connection Pool Monitor Tile snippet rendered live

A connection pool's health isn't just "how full is it" — a pool sitting at 90% utilization with zero queued requests is fine; a pool with even one *waiting* request is actively causing latency for whoever is stuck behind it. This tile models that distinction directly: its health badge is computed from which specific condition is currently true, not from a single blended percentage.

Three distinct connection states, each visually and numerically tracked

The pool's connections are modeled as three separate counts — active (currently executing a query), idle (checked out but not currently in use, sitting ready), and waiting (a request that wants a connection but the pool is fully exhausted). The segmented bar renders one colored segment per state, sized proportionally to MAX_CONNECTIONS, so a glance at the bar's composition tells you not just how full the pool is, but *what kind* of full it is.

Health status logic checks waiting first, since it's the sharper signal

render()'s badge logic checks waiting > 0 before anything else — any waiting request at all immediately marks the pool "Saturated" (critical), because a nonzero wait queue means real requests are being actively delayed right now. Only if there's no queueing at all does the logic fall back to a softer check: whether total connections (active + idle) are at or above 85% of capacity, which is a "getting close" warning rather than an active problem. This ordering matters — checking utilization percentage first could mask a genuinely saturated-with-queued-requests pool that happens to still have a spare idle connection or two.

Simulated churn models realistic pool behavior, not just a random walk

tick() doesn't just nudge numbers up and down randomly — it models specific *events* a real pool experiences: a new query checking out a connection (active increases within capacity), a finished query returning its connection to idle, an unused idle connection being reaped, the pool filling up and a new request having to queue, and a queued request finally getting a freed connection. Each event has its own probability band and its own precondition (e.g. a connection can only be reaped if idle > 0), so the simulated numbers move in ways that resemble genuine pool dynamics rather than an unconstrained random walk that could, for instance, show waiting connections increasing while the pool has open capacity.

Clamping keeps every simulated value physically sensible

After every tick, active, idle, and waiting are all explicitly clamped — idle specifically clamped to MAX_CONNECTIONS - active, not just 0 to MAX_CONNECTIONS independently — so active + idle can never exceed the pool's real maximum capacity even if several probabilistic branches happened to push the numbers in the same direction in a short span.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Ask an AI assistant to explain why checking for actively waiting connections before checking overall utilization percentage produces a more operationally useful health signal, and to discuss what other pool metrics (like average wait time or connection churn rate) might improve on this simple three-state model. It's also worth asking for a version that plots a short rolling history of the active/idle/waiting counts as a small sparkline strip beneath the current snapshot, or one that fires a visible alert animation the moment the pool first transitions into a saturated state.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a database connection pool monitoring dashboard tile in HTML, CSS and vanilla JavaScript with a realistic simulated live data feed — no external libraries.

Requirements:
- Track three distinct connection pool states as separate numeric counts: active (in use), idle (available), and waiting (requests queued because the pool is fully exhausted), all bounded by a defined maximum pool capacity.
- Render the current state as a segmented horizontal bar where each segment's width is proportional to its count relative to the maximum capacity, using a distinct color per state.
- Compute a health status badge from real conditions, not a single blended percentage: any nonzero waiting count must immediately produce a "critical/saturated" status regardless of overall utilization; only when there are zero waiting connections should a near-capacity utilization percentage (e.g. 85% or higher) produce a softer "warning" status; otherwise show a "healthy" status.
- Simulate realistic pool churn on an interval using a small set of distinct, named probabilistic events (e.g. a connection being checked out, a connection finishing and going idle, an idle connection being reaped, the pool filling and a request queueing, a queued request being served) rather than adjusting the three counts with unconstrained random noise.
- After every simulated update, ensure the active and idle counts together can never exceed the pool's maximum capacity, and that no count goes negative.
- Give the visualization an appropriate ARIA role and a dynamically updated descriptive label summarizing the exact current counts for screen reader users.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

  1. 1
    Watch the tile update liveActive, idle, and waiting counts change every ~1 second, simulating realistic connection pool churn.
  2. 2
    Watch the badge change under saturationWhen waiting connections appear, the badge immediately switches to "Saturated" — the clearest real signal of pool exhaustion.
  3. 3
    Adjust MAX_CONNECTIONSChange the pool's total capacity constant to model a differently-sized connection pool.
  4. 4
    Adjust the health thresholdsChange the 0.85 utilization threshold for the "Near limit" warning state to match your own alerting philosophy.
  5. 5
    Replace the simulation with real metricsSwap the tick() function's probabilistic state changes for periodic polling of your actual database driver's pool statistics endpoint.

Real-world uses

Common Use Cases

OPS
Database Operations Dashboards
Monitor a production database connection pool's health at a glance on an internal ops dashboard.
BACKEND
Backend Service Health Panels
Apply the same active/idle/waiting pattern to any pooled resource — HTTP connections, worker threads, etc.
DEVOPS
Incident Triage Views
Quickly spot which service's connection pool is actually saturated versus merely running warm.
CAPACITY
Capacity Planning Reviews
Reference implementation for visualizing pooled-resource utilization broken into meaningful states.
Related: Dependency Graph Viewer
See the Dependency Graph Viewer for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

A nonzero waiting count means real requests are actively queued and being delayed right now — the sharpest possible signal of genuine saturation. Utilization percentage alone can be misleading (a pool at 90% with zero waiters is fine), so waiting connections are checked first and immediately mark the pool critical regardless of the utilization number.

Yes — after every simulated tick, idle is explicitly clamped to MAX_CONNECTIONS - active (not just an independent 0-to-max clamp), which enforces that the two counts together can never exceed the pool's real total capacity, even if multiple state changes happened to push in the same direction within one tick.

tick() models specific named events — a connection checkout, a connection returning to idle, an idle connection being reaped, the pool filling and a request queueing, and a queued request being served — each with its own probability and precondition, rather than nudging the three numbers independently with no relationship between them.

Replace the tick() function's probabilistic state changes with periodic polling of your actual pool's real statistics — most database drivers and connection pool libraries (e.g. node-postgres's Pool, HikariCP) expose current active/idle/waiting counts directly, which you'd feed into the same render() function.

It's a visual indicator strip scaled from the waiting count (capped at a reasonable maximum width) rather than a literal fraction of pool capacity, since waiting requests aren't occupying pool slots the way active/idle connections are — its purpose is to make any nonzero waiting count immediately visible in the bar, not to represent an exact proportion.

Yes — change the 0.85 threshold (85% utilization) in the badge logic to whatever fraction matches your own operational alerting philosophy for when a pool nearing capacity deserves a warning versus staying "Healthy".