Job Queue Depth Monitor — Live Backlog Trend, Threshold Status, and Drain Estimate

<div class="demo">
  <div class="queue-card">
    <div class="queue-header">
      <div>
        <span class="queue-title">email-delivery queue</span>
        <span class="queue-status" id="queueStatus">Healthy</span>
      </div>
      <button class="queue-pause" id="queuePauseBtn">Pause updates</button>
    </div>

    <div class="queue-stats">
      <div class="queue-stat">
        <span class="queue-stat-value" id="queueDepthValue">0</span>
        <span class="queue-stat-label">Jobs waiting</span>
      </div>
      <div class="queue-stat">
        <span class="queue-stat-value" id="queueRateValue">0/s</span>
        <span class="queue-stat-label">Processing rate</span>
      </div>
      <div class="queue-stat">
        <span class="queue-stat-value" id="queueEtaValue">—</span>
        <span class="queue-stat-label">Est. drain time</span>
      </div>
    </div>

    <svg class="queue-spark" id="queueSpark" viewBox="0 0 300 70" preserveAspectRatio="none"></svg>

    <div class="queue-thresholds">
      <span class="thresh healthy">● Healthy &lt; 200</span>
      <span class="thresh warn">● Elevated &lt; 500</span>
      <span class="thresh crit">● Critical ≥ 500</span>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { width: 380px; max-width: 100%; }

.queue-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.queue-header { display: flex; align-items: center; justify-content: space-between; }
.queue-title { display: block; font-size: 13px; font-weight: 800; color: #111827; font-family: 'SFMono-Regular', Consolas, monospace; }
.queue-status { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #ecfdf5; color: #047857; transition: background 0.2s, color 0.2s; }
.queue-status.warn { background: #fffbeb; color: #b45309; }
.queue-status.crit { background: #fef2f2; color: #b91c1c; }
.queue-pause { border: 1.5px solid #e2e8f0; background: #fff; color: #475569; font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.queue-pause:hover { border-color: #6366f1; color: #4338ca; }

.queue-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.queue-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px; background: #f8fafc; border-radius: 10px; }
.queue-stat-value { font-size: 17px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.queue-stat-label { font-size: 10px; color: #94a3b8; font-weight: 600; }

.queue-spark { width: 100%; height: 70px; display: block; }

.queue-thresholds { display: flex; gap: 12px; flex-wrap: wrap; }
.thresh { font-size: 10px; font-weight: 700; }
.thresh.healthy { color: #10b981; }
.thresh.warn { color: #f59e0b; }
.thresh.crit { color: #ef4444; }

const depthValue = document.getElementById('queueDepthValue');
const rateValue = document.getElementById('queueRateValue');
const etaValue = document.getElementById('queueEtaValue');
const statusEl = document.getElementById('queueStatus');
const sparkSvg = document.getElementById('queueSpark');
const pauseBtn = document.getElementById('queuePauseBtn');

const HISTORY_LEN = 40;
const history = Array.from({ length: HISTORY_LEN }, () => 120);
let currentDepth = 120;
let paused = false;
let intervalId = null;

// Thresholds are defined once and reused for both the numeric status label
// and the sparkline's stroke color — a single source of truth for "what
// counts as healthy vs elevated vs critical" rather than two independently
// maintained threshold checks that could disagree with each other.
function classify(depth) {
  if (depth >= 500) return 'crit';
  if (depth >= 200) return 'warn';
  return 'healthy';
}

const STATUS_LABEL = { healthy: 'Healthy', warn: 'Elevated', crit: 'Critical' };
const STROKE_COLOR = { healthy: '#10b981', warn: '#f59e0b', crit: '#ef4444' };

function renderSpark() {
  const max = Math.max(...history, 500);
  const points = history.map((v, i) => {
    const x = (i / (HISTORY_LEN - 1)) * 300;
    const y = 66 - (v / max) * 60;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');

  const state = classify(currentDepth);
  sparkSvg.innerHTML = `
    <polyline points="${points}" fill="none" stroke="${STROKE_COLOR[state]}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
    <circle cx="300" cy="${(66 - (currentDepth / max) * 60).toFixed(1)}" r="3.5" fill="${STROKE_COLOR[state]}" />
  `;
}

function render(processingRate) {
  const state = classify(currentDepth);
  depthValue.textContent = Math.round(currentDepth).toLocaleString();
  rateValue.textContent = processingRate.toFixed(1) + '/s';
  statusEl.textContent = STATUS_LABEL[state];
  statusEl.className = 'queue-status ' + (state === 'healthy' ? '' : state);

  // Drain-time estimate is undefined (not "0s" or "Infinity") whenever the
  // processing rate can't actually clear the backlog — showing a bogus
  // finite number in that case would be actively misleading to whoever is
  // watching this dashboard during an incident.
  if (processingRate > 0.2) {
    const etaSeconds = currentDepth / processingRate;
    etaValue.textContent = etaSeconds < 60 ? Math.round(etaSeconds) + 's' : Math.round(etaSeconds / 60) + 'm';
  } else {
    etaValue.textContent = currentDepth > 0 ? 'stalled' : '—';
  }

  renderSpark();
}

function tick() {
  // Simulated queue dynamics: jobs arrive faster than they're processed
  // sometimes (backlog grows), and slower other times (backlog drains) —
  // a real implementation replaces this with actual metrics polled from
  // a queue backend (depth and processed-per-second) on the same interval.
  const arrivalRate = 8 + Math.random() * 10;
  const processingRate = 9 + Math.sin(Date.now() / 4000) * 6 + Math.random() * 2;

  currentDepth = Math.max(0, currentDepth + arrivalRate - processingRate);
  history.push(currentDepth);
  history.shift();

  render(Math.max(0, processingRate));
}

function start() {
  intervalId = setInterval(tick, 900);
}

function stop() {
  clearInterval(intervalId);
}

pauseBtn.addEventListener('click', () => {
  paused = !paused;
  pauseBtn.textContent = paused ? 'Resume updates' : 'Pause updates';
  if (paused) stop(); else start();
});

render(9);
start();