Build a Monitoring Dashboard

// src/metrics/simulator.ts
interface MetricPoint {
  timestamp: number;
  value: number;
}

interface SimulatorConfig {
  baseValue: number;
  variance: number;
  spikeProbability: number;
  spikeMultiplier: number;
}

class MetricSimulator {
  private current: number;
  private config: SimulatorConfig;

  constructor(config: SimulatorConfig) {
    this.config = config;
    this.current = config.baseValue;
  }

  tick(): MetricPoint {
    const { variance, spikeProbability, spikeMultiplier } = this.config;
    const drift = (Math.random() - 0.5) * variance;
    const isSpike = Math.random() < spikeProbability;

    this.current += drift;
    this.current = Math.max(0, Math.min(100, this.current));

    const value = isSpike ? Math.min(100, this.current * spikeMultiplier) : this.current;

    return { timestamp: Date.now(), value: Math.round(value * 100) / 100 };
  }
}

export const simulators = {
  cpu: new MetricSimulator({
    baseValue: 35,
    variance: 8,
    spikeProbability: 0.05,
    spikeMultiplier: 2.2,
  }),
  memory: new MetricSimulator({
    baseValue: 62,
    variance: 3,
    spikeProbability: 0.02,
    spikeMultiplier: 1.4,
  }),
  disk: new MetricSimulator({
    baseValue: 45,
    variance: 1,
    spikeProbability: 0.01,
    spikeMultiplier: 1.2,
  }),
  requestRate: new MetricSimulator({
    baseValue: 150,
    variance: 40,
    spikeProbability: 0.08,
    spikeMultiplier: 3.0,
  }),
};

// src/storage/ring-buffer.ts
class RingBuffer<T> {
  private buffer: (T | undefined)[];
  private head: number = 0;
  private count: number = 0;

  constructor(private capacity: number) {
    this.buffer = new Array(capacity);
  }

  push(item: T): void {
    this.buffer[this.head] = item;
    this.head = (this.head + 1) % this.capacity;
    this.count = Math.min(this.count + 1, this.capacity);
  }

  toArray(): T[] {
    const result: T[] = [];
    const start = this.count < this.capacity ? 0 : this.head;
    for (let i = 0; i < this.count; i++) {
      const index = (start + i) % this.capacity;
      result.push(this.buffer[index] as T);
    }
    return result;
  }

  query(predicate: (item: T) => boolean): T[] {
    return this.toArray().filter(predicate);
  }
}

// src/metrics/collector.ts
import { EventEmitter } from "events";

interface CollectorOptions {
  intervalMs: number;
  retentionSlots: number;
}

class MetricsCollector extends EventEmitter {
  private timers: Map<string, NodeJS.Timeout> = new Map();
  private stores: Map<string, RingBuffer<MetricPoint>> = new Map();

  register(name: string, simulator: MetricSimulator, options: CollectorOptions): void {
    const store = new RingBuffer<MetricPoint>(options.retentionSlots);
    this.stores.set(name, store);

    const timer = setInterval(() => {
      const point = simulator.tick();
      store.push(point);
      this.emit("metric", { name, point });
    }, options.intervalMs);

    this.timers.set(name, timer);
  }

  getRange(name: string, startTs: number, endTs: number): MetricPoint[] {
    const store = this.stores.get(name);
    if (!store) return [];
    return store.query((p) => p.timestamp >= startTs && p.timestamp <= endTs);
  }

  shutdown(): void {
    for (const timer of this.timers.values()) clearInterval(timer);
  }
}

// src/api/routes.ts
app.get("/api/metrics/:name", (req, res) => {
  const { name } = req.params;
  const duration = parseInt(req.query.duration as string) || 300000;
  const now = Date.now();
  const points = collector.getRange(name, now - duration, now);

  res.json({
    metric: name,
    start: now - duration,
    end: now,
    resolution: "1s",
    points,
  });
});

app.get("/api/metrics", (_req, res) => {
  const metrics = ["cpu", "memory", "disk", "requestRate"];
  const summary = metrics.map((name) => {
    const points = collector.getRange(name, Date.now() - 60000, Date.now());
    const values = points.map((p) => p.value);
    return {
      name,
      current: values.at(-1) ?? 0,
      avg: values.reduce((a, b) => a + b, 0) / (values.length || 1),
      max: Math.max(...values, 0),
      min: Math.min(...values, 0),
    };
  });
  res.json(summary);
});

// src/api/sse.ts
app.get("/api/stream", (req, res) => {
  res.writeHead(200, {
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
    Connection: "keep-alive",
  });

  const handler = (data: { name: string; point: MetricPoint }) => {
    res.write(`event: metric\ndata: ${JSON.stringify(data)}\n\n`);
  };

  collector.on("metric", handler);
  req.on("close", () => collector.off("metric", handler));
});

// src/alerts/engine.ts
interface AlertRule {
  metric: string;
  operator: "gt" | "lt" | "eq";
  threshold: number;
  windowMs: number;
  cooldownMs: number;
}

class AlertEngine {
  private rules: AlertRule[] = [];
  private lastFired: Map<string, number> = new Map();

  addRule(rule: AlertRule): void {
    this.rules.push(rule);
  }

  evaluate(name: string, points: MetricPoint[]): string[] {
    const now = Date.now();
    const fired: string[] = [];

    for (const rule of this.rules.filter((r) => r.metric === name)) {
      const key = `${rule.metric}-${rule.operator}-${rule.threshold}`;
      const lastFire = this.lastFired.get(key) || 0;
      if (now - lastFire < rule.cooldownMs) continue;

      const recent = points.filter((p) => p.timestamp >= now - rule.windowMs);
      const avg = recent.reduce((a, b) => a + b.value, 0) / (recent.length || 1);

      const triggered =
        (rule.operator === "gt" && avg > rule.threshold) ||
        (rule.operator === "lt" && avg < rule.threshold);

      if (triggered) {
        this.lastFired.set(key, now);
        fired.push(
          `ALERT: ${name} ${rule.operator} ${rule.threshold} (current avg: ${avg.toFixed(1)})`
        );
      }
    }
    return fired;
  }
}

// src/ui/chart.ts
function renderChart(
  ctx: CanvasRenderingContext2D,
  points: MetricPoint[],
  options: { width: number; height: number; threshold?: number; color: string }
): void {
  const { width, height, threshold, color } = options;
  ctx.clearRect(0, 0, width, height);

  if (points.length < 2) return;

  const minTs = points[0].timestamp;
  const maxTs = points[points.length - 1].timestamp;
  const maxVal = Math.max(...points.map((p) => p.value)) * 1.1;

  // Grid lines
  ctx.strokeStyle = "rgba(255, 255, 255, 0.06)";
  for (let i = 0; i <= 4; i++) {
    const y = (i / 4) * height;
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(width, y);
    ctx.stroke();
  }

  // Threshold line
  if (threshold !== undefined) {
    const ty = height - (threshold / maxVal) * height;
    ctx.strokeStyle = "rgba(239, 68, 68, 0.6)";
    ctx.setLineDash([4, 4]);
    ctx.beginPath();
    ctx.moveTo(0, ty);
    ctx.lineTo(width, ty);
    ctx.stroke();
    ctx.setLineDash([]);
  }

  // Data series
  ctx.strokeStyle = color;
  ctx.lineWidth = 2;
  ctx.beginPath();
  points.forEach((p, i) => {
    const x = ((p.timestamp - minTs) / (maxTs - minTs)) * width;
    const y = height - (p.value / maxVal) * height;
    i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
  });
  ctx.stroke();
}

<div class="dashboard-grid">
  <div class="panel" id="panel-cpu">
    <h3>CPU Usage <span class="badge" id="cpu-current"></span></h3>
    <canvas id="chart-cpu" width="600" height="200"></canvas>
  </div>
  <div class="panel" id="panel-memory">
    <h3>Memory Usage <span class="badge" id="memory-current"></span></h3>
    <canvas id="chart-memory" width="600" height="200"></canvas>
  </div>
  <!-- disk and requestRate panels follow the same pattern -->
</div>

const source = new EventSource("/api/stream");
const datasets: Record<string, MetricPoint[]> = {
  cpu: [],
  memory: [],
  disk: [],
  requestRate: [],
};

source.addEventListener("metric", (event) => {
  const { name, point } = JSON.parse(event.data);
  const arr = datasets[name];
  arr.push(point);
  if (arr.length > 300) arr.shift(); // Keep last 5 minutes at 1s resolution
  renderChart(getContext(name), arr, chartConfigs[name]);
  updateBadge(name, point.value);
});

source.addEventListener("alert", (event) => {
  const alert = JSON.parse(event.data);
  const toast = document.createElement("div");
  toast.className = "alert-toast";
  toast.innerHTML = `
    <strong>${alert.metric.toUpperCase()}</strong>
    <span>${alert.message}</span>
    <time>${new Date(alert.timestamp).toLocaleTimeString()}</time>
  `;
  document.getElementById("alert-container")?.prepend(toast);
  setTimeout(() => toast.remove(), 10000);

  // Flash the relevant panel border
  const panel = document.getElementById(`panel-${alert.metric}`);
  panel?.classList.add("alert-active");
  setTimeout(() => panel?.classList.remove("alert-active"), 3000);
});

function downsample(points: MetricPoint[], buckets: number): MetricPoint[] {
  if (points.length <= buckets) return points;
  const bucketSize = Math.ceil(points.length / buckets);
  const result: MetricPoint[] = [];

  for (let i = 0; i < points.length; i += bucketSize) {
    const slice = points.slice(i, i + bucketSize);
    const avgValue = slice.reduce((s, p) => s + p.value, 0) / slice.length;
    const midTs = slice[Math.floor(slice.length / 2)].timestamp;
    result.push({ timestamp: midTs, value: Math.round(avgValue * 100) / 100 });
  }
  return result;
}