cmpt815perf/static/app.js

const { useState, useEffect, useRef } = React;

const MetricCard = ({ title, stats }) => (
  <div className="bg-white shadow rounded-lg p-4">
    <div className="pb-2">
      <h2 className="text-lg font-semibold">{title}</h2>
    </div>
    <div className="space-y-2">
      <div className="grid grid-cols-2 gap-2">
        <div>Avg: {stats.avg} ms</div>
        <div>P50: {stats.p50} ms</div>
        <div>P95: {stats.p95} ms</div>
        <div>P99: {stats.p99} ms</div>
      </div>
    </div>
  </div>
);

const DBActivityCard = ({ stats }) => (
  <div className="bg-white shadow rounded-lg p-4">
    <div className="pb-2">
      <h2 className="text-lg font-semibold">Database Activity</h2>
    </div>
    <div className="space-y-2">
      <div className="grid grid-cols-2 gap-2">
        <div>Rows Read: {stats.rowsRead}</div>
        <div>Rows Written: {stats.rowsWritten}</div>
        <div>Total Rows: {stats.totalRows}</div>
      </div>
    </div>
  </div>
);

const CacheActivityCard = ({ stats }) => (
  <div className="bg-white shadow rounded-lg p-4">
    <div className="pb-2">
      <h2 className="text-lg font-semibold">Cache Activity</h2>
    </div>
    <div className="space-y-2">
      <div className="grid grid-cols-2 gap-2">
        <div>Cache Hits: {stats.hits}</div>
        <div>Cache Misses: {stats.misses}</div>
        <div>Hit Rate: {stats.hitRate}%</div>
      </div>
    </div>
  </div>
);

const MetricsDashboard = () => {
  const [data, setData] = useState([]);
  const [timeRange, setTimeRange] = useState("30m");
  const [customStart, setCustomStart] = useState("");
  const [customEnd, setCustomEnd] = useState("");
  const [stats, setStats] = useState({
    service: { avg: 0, p50: 0, p95: 0, p99: 0 },
    db: { avg: 0, p50: 0, p95: 0, p99: 0 },
    cache: { avg: 0, p50: 0, p95: 0, p99: 0 },
    dbActivity: { rowsRead: 0, rowsWritten: 0, totalRows: 0 },
    cacheActivity: { hits: 0, misses: 0, hitRate: 0 },
  });

  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  const getTimeRangeParams = () => {
    const now = Date.now();
    switch (timeRange) {
      case "30m":
        return `?start=${now - 30 * 60 * 1000}&end=${now}`;
      case "1h":
        return `?start=${now - 60 * 60 * 1000}&end=${now}`;
      case "24h":
        return `?start=${now - 24 * 60 * 60 * 1000}&end=${now}`;
      case "7d":
        return `?start=${now - 7 * 24 * 60 * 60 * 1000}&end=${now}`;
      case "custom":
        if (customStart && customEnd) {
          return `?start=${new Date(customStart).getTime()}&end=${new Date(customEnd).getTime()}`;
        }
        return "";
      case "all":
        return "";
      default:
        return `?start=${now - 30 * 60 * 1000}&end=${now}`;
    }
  };

  const bucketDataForChart = (data, bucketSizeMs = 1000) => {
    const buckets = {};

    data.forEach((point) => {
      const bucketKey =
        Math.floor(point.timestamp / bucketSizeMs) * bucketSizeMs;

      if (!buckets[bucketKey]) {
        buckets[bucketKey] = {
          timestamp: bucketKey,
          service_time: [],
          db_time: [],
          cache_time: [],
          db_rows_read: [],
          db_rows_written: [],
          cache_hits: [],
          cache_misses: [],
        };
      }

      buckets[bucketKey].service_time.push(point.service_time);
      buckets[bucketKey].db_time.push(point.db_time);
      buckets[bucketKey].cache_time.push(point.cache_time);
      buckets[bucketKey].db_rows_read.push(point.db_rows_read);
      buckets[bucketKey].db_rows_written.push(point.db_rows_written);
      buckets[bucketKey].cache_hits.push(point.cache_hits);
      buckets[bucketKey].cache_misses.push(point.cache_misses);
    });

    return Object.values(buckets).map((bucket) => ({
      timestamp: bucket.timestamp,
      service_time: _.mean(bucket.service_time),
      db_time: _.mean(bucket.db_time),
      cache_time: _.mean(bucket.cache_time),
      db_rows_read: _.sum(bucket.db_rows_read),
      db_rows_written: _.sum(bucket.db_rows_written),
      cache_hits: _.sum(bucket.cache_hits),
      cache_misses: _.sum(bucket.cache_misses),
    }));
  };

  const calculateStats = (data) => {
    // Input validation with early return
    if (!data?.length) {
      return {
        service: { avg: 0, p50: 0, p95: 0, p99: 0 },
        db: { avg: 0, p50: 0, p95: 0, p99: 0 },
        cache: { avg: 0, p50: 0, p95: 0, p99: 0 },
        dbActivity: { rowsRead: 0, rowsWritten: 0, totalRows: 0 },
        cacheActivity: { hits: 0, misses: 0, hitRate: 0 },
      };
    }

    // Create separate arrays for each metric type and sort them independently
    const serviceValues = data
      .map((d) => Number(d.service_time) || 0)
      .sort((a, b) => a - b);
    const dbValues = data
      .map((d) => Number(d.db_time) || 0)
      .sort((a, b) => a - b);
    const cacheValues = data
      .map((d) => Number(d.cache_time) || 0)
      .sort((a, b) => a - b);

    // Calculate percentile indices
    const len = data.length;
    const p50idx = Math.floor(len * 0.5);
    const p95idx = Math.floor(len * 0.95);
    const p99idx = Math.floor(len * 0.99);

    // Log the actual values we're using
    console.log("Sorted Values Sample:", {
      service: serviceValues.slice(0, 5),
      db: dbValues.slice(0, 5),
      cache: cacheValues.slice(0, 5),
    });

    console.log("Median Values:", {
      service: serviceValues[p50idx],
      db: dbValues[p50idx],
      cache: cacheValues[p50idx],
    });

    // Get latest values for activity metrics
    const latest = data[0] || {
      cache_hits: 0,
      cache_misses: 0,
      db_rows_read: 0,
      db_rows_written: 0,
      db_total_rows: 0,
    };

    const totalCacheRequests = latest.cache_hits + latest.cache_misses;
    const hitRate =
      totalCacheRequests > 0
        ? (latest.cache_hits / totalCacheRequests) * 100
        : 0;

    const stats = {
      service: {
        avg: _.round(_.mean(serviceValues), 2),
        p50: _.round(serviceValues[p50idx] || 0, 2),
        p95: _.round(serviceValues[p95idx] || 0, 2),
        p99: _.round(serviceValues[p99idx] || 0, 2),
      },
      db: {
        avg: _.round(_.mean(dbValues), 2),
        p50: _.round(dbValues[p50idx] || 0, 2),
        p95: _.round(dbValues[p95idx] || 0, 2),
        p99: _.round(dbValues[p99idx] || 0, 2),
      },
      cache: {
        avg: _.round(_.mean(cacheValues), 2),
        p50: _.round(cacheValues[p50idx] || 0, 2),
        p95: _.round(cacheValues[p95idx] || 0, 2),
        p99: _.round(cacheValues[p99idx] || 0, 2),
      },
      dbActivity: {
        rowsRead: latest.db_rows_read,
        rowsWritten: latest.db_rows_written,
        totalRows: latest.db_total_rows,
      },
      cacheActivity: {
        hits: latest.cache_hits,
        misses: latest.cache_misses,
        hitRate: _.round(hitRate, 1),
      },
    };

    // Log final calculated stats
    console.log("Final Stats:", stats);

    return stats;
  };

  const updateChart = (forceReset = false) => {
    if (!chartRef.current) return;

    if (!chartInstance.current || forceReset) {
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }
      initializeChart();
    }

    const bucketedData = bucketDataForChart(data);

    chartInstance.current.data.datasets[0].data = bucketedData.map((d) => ({
      x: d.timestamp,
      y: d.service_time,
    }));
    chartInstance.current.data.datasets[1].data = bucketedData.map((d) => ({
      x: d.timestamp,
      y: d.db_time,
    }));
    chartInstance.current.data.datasets[2].data = bucketedData.map((d) => ({
      x: d.timestamp,
      y: d.cache_time,
    }));

    chartInstance.current.update("none");
  };

  const initializeChart = () => {
    if (!chartRef.current) {
      console.log("Chart ref not ready");
      return;
    }

    console.log("Initializing chart");
    const ctx = chartRef.current.getContext("2d");

    chartInstance.current = new Chart(ctx, {
      type: "line",
      data: {
        datasets: [
          {
            label: "Service Time",
            borderColor: "#8884d8",
            data: [],
            tension: 0.1,
          },
          {
            label: "DB Time",
            borderColor: "#82ca9d",
            data: [],
            tension: 0.1,
          },
          {
            label: "Cache Time",
            borderColor: "#ffc658",
            data: [],
            tension: 0.1,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        animation: false,
        scales: {
          x: {
            type: "time",
            time: {
              parser: "MM/DD/YYYY HH:mm",
              tooltipFormat: "ll HH:mm",
              unit: "second",
              displayFormats: {
                second: "HH:mm:ss",
              },
            },
            title: {
              display: true,
              text: "Time",
            },
          },
          y: {
            beginAtZero: true,
            title: {
              display: true,
              text: "Time (ms)",
            },
          },
        },
      },
    });
  };

  const fetchMetrics = async () => {
    try {
      console.log("Fetching metrics with params:", getTimeRangeParams());
      const response = await fetch(`/api/metrics${getTimeRangeParams()}`);
      const newData = await response.json();
      console.log("Received metrics data:", newData);

      if (!newData || newData.length === 0) {
        console.log("No data received");
        setData([]);
        setStats(calculateStats([]));
        return;
      }

      const newStats = calculateStats(newData);
      console.log("Calculated stats:", newStats);
      if (newStats) {
        setStats(newStats);
      }

      setData(newData || []);
    } catch (error) {
      console.error("Error fetching metrics:", error);
      setData([]);
      setStats(calculateStats([]));
    }
  };

  useEffect(() => {
    console.log("Initial fetch and chart setup");
    fetchMetrics();
    updateChart(true);

    let interval;
    if (timeRange !== "all" && timeRange !== "custom") {
      interval = setInterval(fetchMetrics, 1000);
      console.log("Set up polling interval");
    }
    return () => {
      if (interval) {
        console.log("Cleaning up interval");
        clearInterval(interval);
      }
    };
  }, [timeRange, customStart, customEnd]);

  useEffect(() => {
    console.log("Data updated:", data.length, "points");
    if (data.length > 0 && chartRef.current) {
      updateChart();
    }
  }, [data]);

  const exportCSV = () => {
    try {
      console.log("Exporting data:", data);
      const csv = Papa.unparse(data);
      const blob = new Blob([csv], { type: "text/csv" });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `metrics_export_${new Date().toISOString()}.csv`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error("Error exporting CSV:", error);
    }
  };

  return (
    <div className="container mx-auto p-4 space-y-4">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">Service Performance Metrics</h1>
        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-2">
            <select
              value={timeRange}
              onChange={(e) => setTimeRange(e.target.value)}
              className="rounded border p-2"
            >
              <option value="30m">Last 30m</option>
              <option value="1h">Last 1h</option>
              <option value="24h">Last 24h</option>
              <option value="7d">Last 7d</option>
              <option value="custom">Custom Range</option>
              <option value="all">All Data</option>
            </select>
          </div>

          {timeRange === "custom" && (
            <div className="flex items-center space-x-2">
              <input
                type="datetime-local"
                value={customStart}
                onChange={(e) => setCustomStart(e.target.value)}
                className="rounded border p-2"
              />
              <span>to</span>
              <input
                type="datetime-local"
                value={customEnd}
                onChange={(e) => setCustomEnd(e.target.value)}
                className="rounded border p-2"
              />
            </div>
          )}

          <div className="space-x-2">
            <button
              onClick={exportCSV}
              className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
            >
              Export CSV
            </button>

            <button
              onClick={async () => {
                await fetch("/api/clear", { method: "POST" });
                setData([]);
                if (chartInstance.current) {
                  chartInstance.current.data.datasets.forEach((dataset) => {
                    dataset.data = [];
                  });
                  chartInstance.current.update();
                }
                fetchMetrics();
              }}
              className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
            >
              Clear Data
            </button>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <MetricCard title="Service Time" stats={stats.service} />
        <MetricCard title="Database Time" stats={stats.db} />
        <MetricCard title="Cache Time" stats={stats.cache} />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <DBActivityCard stats={stats.dbActivity} />
        <CacheActivityCard stats={stats.cacheActivity} />
      </div>

      <div className="w-full h-96">
        <canvas ref={chartRef}></canvas>
      </div>
    </div>
  );
};

// Render the app
ReactDOM.createRoot(document.getElementById("root")).render(
  <MetricsDashboard />,
);