TabMetrics.jsx

Go to the documentation of this file.

import React from "react";
import { Line } from "react-chartjs-2";
import { apiFetch } from "../../lib/api";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler,
} from "chart.js";
 
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler
);
 
export default function TabMetrics({ agentId, wsData }) {
  const [history, setHistory] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [realtimeMetric, setRealtimeMetric] = React.useState(null);
 
  // Load historical data from API
  React.useEffect(() => {
    if (!agentId) return;
    setLoading(true);
    apiFetch(`/agent/${agentId}/metrics?limit=100`)
      .then((res) => res.json())
      .then((d) => {
        console.log('[TabMetrics] Received data:', d);
        if (Array.isArray(d)) {
          console.log('[TabMetrics] Data is array, length:', d.length);
          // Reverse to show oldest first (chronological order)
          setHistory(d.reverse());
        } else {
          console.log('[TabMetrics] Data is not array:', typeof d);
          setHistory([]);
        }
      })
      .catch((err) => {
        console.error("Failed to load metrics:", err);
        setError(err.message);
      })
      .finally(() => setLoading(false));
  }, [agentId]);
 
  // Update realtime metric from WebSocket
  React.useEffect(() => {
    if (wsData) {
      console.log('[TabMetrics] WebSocket data received:', wsData);
      setRealtimeMetric({
        timestamp: new Date().toISOString(),
        cpu: wsData.cpuLoad1 || wsData.cpu || 0,
        memory: wsData.memPercent || wsData.memory || 0,
        disk: Array.isArray(wsData.disk) ? wsData.disk.reduce((sum, d) => sum + (d.used || 0), 0) : (wsData.disk || 0),
        uptime: wsData.uptime || 0,
        raw: wsData
      });
    }
  }, [wsData]);
 
  if (loading) {
    return (
      <div className="tab-container">
        <h2>Performance Metrics</h2>
        <div className="card">Loading metrics...</div>
      </div>
    );
  }
 
  if (error) {
    return (
      <div className="tab-container">
        <h2>Performance Metrics</h2>
        <div className="card error">Error: {error}</div>
      </div>
    );
  }
 
  // Combine historical data with realtime metric for display
  let displayData = history;
  if (realtimeMetric && history.length > 0) {
    // Append realtime data to history for charts
    displayData = [...history, realtimeMetric];
  } else if (realtimeMetric && history.length === 0) {
    // Only have realtime data, use it alone
    displayData = [realtimeMetric];
  }
 
  if (!Array.isArray(displayData) || displayData.length === 0) {
    return (
      <div className="tab-container">
        <h2>Performance Metrics</h2>
        <div className="card">
          <p style={{ textAlign: "center", color: "var(--text-secondary)" }}>
            No metrics data available yet. Metrics are collected in real-time from the agent.
          </p>
        </div>
      </div>
    );
  }
 
  // Take last 50 data points for better readability
  const recent = displayData.slice(-50);
 
  const labels = recent.map((h) => {
    const date = new Date(h.timestamp);
    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
  });
 
  const cpuData = recent.map((h) => parseFloat(h.cpu) || 0);
  const memoryData = recent.map((h) => parseFloat(h.memory) || 0);
  const diskData = recent.map((h) => {
    // disk is in bytes, convert to GB
    const diskBytes = parseFloat(h.disk) || 0;
    return (diskBytes / (1024 * 1024 * 1024)).toFixed(2);
  });
 
  const cpuChartData = {
    labels,
    datasets: [
      {
        label: "CPU Usage (%)",
        data: cpuData,
        borderColor: "rgb(75, 192, 192)",
        backgroundColor: "rgba(75, 192, 192, 0.1)",
        tension: 0.4,
        fill: true,
      },
    ],
  };
 
  const memoryChartData = {
    labels,
    datasets: [
      {
        label: "Memory Usage (%)",
        data: memoryData,
        borderColor: "rgb(255, 99, 132)",
        backgroundColor: "rgba(255, 99, 132, 0.1)",
        tension: 0.4,
        fill: true,
      },
    ],
  };
 
  const diskChartData = {
    labels,
    datasets: [
      {
        label: "Disk Usage (GB)",
        data: diskData,
        borderColor: "rgb(153, 102, 255)",
        backgroundColor: "rgba(153, 102, 255, 0.1)",
        tension: 0.4,
        fill: true,
      },
    ],
  };
 
  const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: true,
        position: "top",
      },
      tooltip: {
        mode: "index",
        intersect: false,
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        grid: {
          color: "rgba(0, 0, 0, 0.05)",
        },
      },
      x: {
        grid: {
          display: false,
        },
      },
    },
  };
 
  const diskChartOptions = {
    ...chartOptions,
    scales: {
      ...chartOptions.scales,
      y: {
        ...chartOptions.scales.y,
        ticks: {
          callback: function (value) {
            return value + " GB";
          },
        },
      },
    },
  };
 
  // Calculate current stats - prefer realtime data if available
  const latest = realtimeMetric || recent[recent.length - 1];
  const currentCPU = parseFloat(latest?.cpu || 0).toFixed(1);
  const currentMemory = parseFloat(latest?.memory || 0).toFixed(1);
  const currentDisk = (parseFloat(latest?.disk || 0) / (1024 * 1024 * 1024)).toFixed(2);
  const uptime = parseInt(latest?.uptime || 0);
  const uptimeHours = Math.floor(uptime / 3600);
  const uptimeDays = Math.floor(uptimeHours / 24);
 
  return (
    <div className="tab-container">
      <h2>Performance Metrics</h2>
 
      {/* Current Stats Summary */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "16px", marginBottom: "24px" }}>
        <div className="card" style={{ padding: "16px" }}>
          <div style={{ fontSize: "12px", color: "var(--text-secondary)", marginBottom: "4px" }}>CPU Usage</div>
          <div style={{ fontSize: "24px", fontWeight: "600", color: "var(--text)" }}>{currentCPU}%</div>
        </div>
        <div className="card" style={{ padding: "16px" }}>
          <div style={{ fontSize: "12px", color: "var(--text-secondary)", marginBottom: "4px" }}>Memory Usage</div>
          <div style={{ fontSize: "24px", fontWeight: "600", color: "var(--text)" }}>{currentMemory}%</div>
        </div>
        <div className="card" style={{ padding: "16px" }}>
          <div style={{ fontSize: "12px", color: "var(--text-secondary)", marginBottom: "4px" }}>Disk Used</div>
          <div style={{ fontSize: "24px", fontWeight: "600", color: "var(--text)" }}>{currentDisk} GB</div>
        </div>
        <div className="card" style={{ padding: "16px" }}>
          <div style={{ fontSize: "12px", color: "var(--text-secondary)", marginBottom: "4px" }}>Uptime</div>
          <div style={{ fontSize: "24px", fontWeight: "600", color: "var(--text)" }}>
            {uptimeDays > 0 ? `${uptimeDays}d ${uptimeHours % 24}h` : `${uptimeHours}h`}
          </div>
        </div>
      </div>
 
      {/* CPU Chart */}
      <div className="card" style={{ padding: "20px", marginBottom: "20px" }}>
        <h3 style={{ marginTop: 0, marginBottom: "16px", fontSize: "16px", fontWeight: "600" }}>
          CPU Usage Over Time
        </h3>
        <div style={{ height: "250px" }}>
          <Line data={cpuChartData} options={chartOptions} />
        </div>
      </div>
 
      {/* Memory Chart */}
      <div className="card" style={{ padding: "20px", marginBottom: "20px" }}>
        <h3 style={{ marginTop: 0, marginBottom: "16px", fontSize: "16px", fontWeight: "600" }}>
          Memory Usage Over Time
        </h3>
        <div style={{ height: "250px" }}>
          <Line data={memoryChartData} options={chartOptions} />
        </div>
      </div>
 
      {/* Disk Chart */}
      <div className="card" style={{ padding: "20px" }}>
        <h3 style={{ marginTop: 0, marginBottom: "16px", fontSize: "16px", fontWeight: "600" }}>
          Disk Usage Over Time
        </h3>
        <div style={{ height: "250px" }}>
          <Line data={diskChartData} options={diskChartOptions} />
        </div>
      </div>
 
      <div style={{ marginTop: "16px", fontSize: "12px", color: "var(--text-secondary)", textAlign: "center" }}>
        Showing last {recent.length} data points • Metrics collected every 2 minutes
      </div>
    </div>
  );
}