Agent.jsx

Go to the documentation of this file.

// =============================================
// Agent.jsx — Clean Rebuild (Header + Sidebar + Content)
// =============================================
import React, { useState, useEffect, Suspense, lazy } from "react";
import { apiFetch } from "../lib/api";
import { AgentSidebar } from "./AgentSidebar";
import MainLayout from "../components/Layout/MainLayout";
import { useParams } from "react-router-dom";
import dashboardWS from "../services/dashboardWS";
import "./agent.css";
 
// Lazy-loaded tab components
const TabSystem = lazy(() => import("./tabs/TabSystem"));
const TabMetrics = lazy(() => import("./tabs/TabMetrics"));
const TabRds = lazy(() => import("./tabs/TabRds"));
const TabPrograms = lazy(() => import("./tabs/TabPrograms"));
const TabTasks = lazy(() => import("./tabs/TabTasks"));
const TabTerminal = lazy(() => import("./tabs/TabTerminal"));
const TabServices = lazy(() => import("./tabs/TabServices"));
const TabEvents = lazy(() => import("./tabs/TabEvents"));
const TabLogs = lazy(() => import("./tabs/TabLogs"));
const TabFiles = lazy(() => import("./tabs/TabFiles"));
const TabScriptRunner = lazy(() => import("./tabs/TabScriptRunner"));
const TabScriptIse = lazy(() => import("./tabs/TabScriptIse"));
 
export default function Agent() {
  const { agentId } = useParams();
  const [activeTab, setActiveTab] = useState("system");
  const [agentData, setAgentData] = useState(null);
  const [wsData, setWsData] = useState(null);
  const [statusLoading, setStatusLoading] = useState(true);
 
  useEffect(() => {
    if (!agentId) return;
    setStatusLoading(true);
 
    // Fetch status, hardware info, and MeshCentral info
    Promise.all([
      apiFetch(`/agent/${agentId}/status`).then(r => r.ok ? r.json() : null),
      apiFetch(`/agent/${agentId}/hardware`).then(r => r.ok ? r.json() : null),
      apiFetch(`/agent/${agentId}/meshcentral-info`).then(r => r.ok ? r.json() : null)
    ])
      .then(([status, hardware, meshInfo]) => {
        // Merge all data sources, prioritizing our agent data but filling in gaps with MeshCentral
        const mergedData = {
          ...status,
          hardware: hardware || {}
        };
        
        // If we have MeshCentral info, merge it intelligently
        if (meshInfo && !meshInfo.error) {
          // Use MeshCentral last seen if our agent hasn't been seen recently
          if (meshInfo.lastSeen && (!mergedData.last_seen || new Date(meshInfo.lastSeen) > new Date(mergedData.last_seen))) {
            mergedData.last_seen = meshInfo.lastSeen;
          }
          
          // Use MeshCentral hostname if ours is missing
          if (!mergedData.hostname && meshInfo.hostname) {
            mergedData.hostname = meshInfo.hostname;
          }
          
          // Use MeshCentral platform/OS if ours is missing
          if (!mergedData.os && meshInfo.platform) {
            mergedData.os = meshInfo.platform;
          }
          
          // Use MeshCentral IP if ours is missing
          if (!mergedData.ip_address && meshInfo.lastAddress) {
            mergedData.ip_address = meshInfo.lastAddress;
          }
          
          // Merge hardware info from MeshCentral if we don't have it locally
          if (meshInfo.hardware) {
            if (!mergedData.hardware.model && meshInfo.hardware.model) {
              mergedData.hardware.model = `${meshInfo.hardware.manufacturer || ''} ${meshInfo.hardware.model}`.trim();
            }
            
            if (!mergedData.hardware.cpu_model && meshInfo.hardware.cpu_model) {
              mergedData.hardware.cpu_model = meshInfo.hardware.cpu_model;
            }
            
            if (!mergedData.hardware.ram_bytes && meshInfo.hardware.ram_bytes) {
              mergedData.hardware.ram_bytes = meshInfo.hardware.ram_bytes;
            }
            
            if (!mergedData.hardware.ipv4_address && meshInfo.hardware.ipv4_address) {
              mergedData.hardware.ipv4_address = meshInfo.hardware.ipv4_address;
            }
            
            if ((!mergedData.hardware.drives || mergedData.hardware.drives.length === 0) && meshInfo.hardware.drives) {
              mergedData.hardware.drives = meshInfo.hardware.drives;
            }
          }
          
          // Store MeshCentral connection status
          mergedData.meshcentral_connected = meshInfo.connected;
          mergedData.meshcentral_nodeid = meshInfo.meshcentralNodeId;
        }
        
        setAgentData(mergedData);
      })
      .catch((err) => {
        console.error('Failed to load agent data:', err);
        setAgentData(null);
      })
      .finally(() => setStatusLoading(false));
  }, [agentId]);
 
  // WebSocket integration for real-time data
  useEffect(() => {
    if (!agentData?.agent_uuid) return;
 
    // Subscribe to this agent's metrics
    dashboardWS.subscribe([agentData.agent_uuid]);
 
    const handleMetrics = (uuid, data) => {
      if (uuid === agentData.agent_uuid) {
        setWsData(data);
      }
    };
 
    dashboardWS.on('metrics', handleMetrics);
 
    return () => {
      dashboardWS.off('metrics', handleMetrics);
      dashboardWS.unsubscribe([agentData.agent_uuid]);
    };
  }, [agentData?.agent_uuid]);
 
  // Status helpers - Use meshcentral_connected from backend
  const getStatusClass = (agent) => {
    if (!agent) return "status-offline";
    return agent.meshcentral_connected ? "status-online" : "status-offline";
  };
  const getStatusText = (agent) => {
    if (!agent) return "Offline";
    return agent.meshcentral_connected ? "Online" : formatLastSeen(agent.last_seen);
  };
  const formatLastSeen = (lastSeen) => {
    if (!lastSeen) return "Never";
    const date = new Date(lastSeen);
    const now = new Date();
    const diffMs = now - date;
    const diffMinutes = Math.floor(diffMs / 1000 / 60);
    const diffHours = Math.floor(diffMinutes / 60);
    const diffDays = Math.floor(diffHours / 24);
    if (diffMinutes < 1) return "Just now";
    if (diffMinutes < 60) return `${diffMinutes}m ago`;
    if (diffHours < 24) return `${diffHours}h ago`;
    if (diffDays < 7) return `${diffDays}d ago`;
    return date.toLocaleDateString();
  };
 
  // Shorthand formatters for header stats
  const formatModelShort = (model) => {
    if (!model) return "Unknown";
    // Remove everything in parentheses and extra words
    return model.replace(/\‍(.*?\‍)/g, "").replace(/Standard PC|PC/gi, "").trim() || model;
  };
 
  const formatCpuShort = (cpu) => {
    if (!cpu) return "Unknown";
    // Extract main CPU name: "Intel Core Ultra 7 265K" -> "Core Ultra 7 265K"
    let cleaned = cpu.replace(/\‍(R\‍)|\‍(TM\‍)|\r|\n|Intel\‍(R\‍)|AMD/gi, "").trim();
    // Remove "Processor" suffix
    cleaned = cleaned.replace(/Processor$/i, "").trim();
    // Limit to 30 chars
    return cleaned.substring(0, 30);
  };
 
  const formatBytesShort = (bytes) => {
    if (!bytes || bytes === 0) return "0 GB";
    const gb = bytes / (1024 * 1024 * 1024);
    return `${gb.toFixed(0)} GB`;
  };
 
  const formatBytes = (bytes) => {
    if (!bytes || bytes === 0) return "0 GB";
    const gb = bytes / (1024 * 1024 * 1024);
    return `${gb.toFixed(2)} GB`;
  };
 
  const renderContent = () => {
    switch (activeTab) {
      case "system":
        return <TabSystem key="tab-system" agentId={agentId} agentUuid={agentData?.agent_uuid} agent={agentData} />;
      case "metrics":
        return <TabMetrics key="tab-metrics" agentId={agentId} wsData={wsData} />;
      case "rds":
        return <TabRds key="tab-rds" agentId={agentId} agentUuid={agentData?.agent_uuid} />;
      case "programs":
        return <TabPrograms key="tab-programs" agentId={agentId} />;
      case "task":
        return <TabTasks key="tab-task" agentId={agentId} />;
      case "terminal":
        return <TabTerminal key="tab-terminal" agentId={agentId} />;
      case "services":
        return <TabServices key="tab-services" agentId={agentId} />;
      case "event":
        return <TabEvents key="tab-events" agentId={agentId} agentUuid={agentData?.agent_uuid} agent={agentData} />;
      case "log":
        return <TabLogs key="tab-logs" agentId={agentId} />;
      case "file":
        return <TabFiles key="tab-file" agentId={agentId} />;
      case "script":
        return <TabScriptRunner key="tab-script" agentId={agentId} agentUuid={agentData?.agent_uuid} agent={agentData} />;
      case "ise":
        return <TabScriptIse key="tab-ise" agentId={agentId} />;
      default:
        return <div>Select a tab.</div>;
    }
  };
 
  return (
    <MainLayout>
      <div className="agent-page-layout">
        {/* Header */}
        <header className="agent-header-enhanced">
          {statusLoading ? (
            <div className="agent-header-loading">
              <span className="status-indicator status-loading">Loading agent information...</span>
            </div>
          ) : agentData ? (
            <>
              <div className="agent-header-top">
                <div className="agent-title-section">
                  <span
                    className={`status-dot ${getStatusClass(agentData)}`}
                    title={getStatusText(agentData)}
                  />
                  <div>
                    <h1>{agentData.hostname || "Unknown Agent"}</h1>
                    <div className="agent-subtitle">
                      <span>{agentData.os || "Unknown OS"}</span>
                      <span>•</span>
                      <span>v{agentData.version || "Unknown"}</span>
                      <span>•</span>
                      <span className={getStatusClass(agentData)}>
                        {getStatusText(agentData)}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
 
              <div className="agent-header-stats" style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
                gap: '12px'
              }}>
                <div className="stat-card">
                  <span className="material-symbols-outlined stat-icon">computer</span>
                  <div className="stat-content">
                    <div className="stat-label">Computer</div>
                    <div className="stat-value">
                      {formatModelShort(agentData.hardware?.model)}
                    </div>
                  </div>
                </div>
 
                <div className="stat-card">
                  <span className="material-symbols-outlined stat-icon">settings</span>
                  <div className="stat-content">
                    <div className="stat-label">Processor</div>
                    <div className="stat-value">
                      {formatCpuShort(agentData.hardware?.cpu_model || agentData.hardware?.cpu)}
                    </div>
                  </div>
                </div>
 
                <div className="stat-card">
                  <span className="material-symbols-outlined stat-icon">memory</span>
                  <div className="stat-content">
                    <div className="stat-label">Memory</div>
                    <div className="stat-value">
                      {formatBytesShort(agentData.hardware?.ram_bytes || agentData.hardware?.memory)}
                    </div>
                  </div>
                </div>
 
                <div className="stat-card">
                  <span className="material-symbols-outlined stat-icon">storage</span>
                  <div className="stat-content">
                    <div className="stat-label">Storage</div>
                    <div className="stat-value">
                      {(() => {
                        // Use WebSocket disk data if available
                        if (wsData?.disk && Array.isArray(wsData.disk)) {
                          const totalBytes = wsData.disk.reduce((sum, d) => sum + (d.total || 0), 0);
                          return formatBytes(totalBytes);
                        }
                        // Fall back to API drives data
                        if (agentData.hardware?.drives && Array.isArray(agentData.hardware.drives)) {
                          const totalGB = agentData.hardware.drives.reduce((sum, d) => sum + (d.Total || 0), 0);
                          return formatBytes(totalGB * 1024 * 1024 * 1024);
                        }
                        return "N/A";
                      })()}
                    </div>
                  </div>
                </div>
 
                <div className="stat-card">
                  <span className="material-symbols-outlined stat-icon">lan</span>
                  <div className="stat-content">
                    <div className="stat-label">IP Address</div>
                    <div className="stat-value">
                      {wsData?.network?.ipv4 ||
                        agentData.hardware?.ipv4_address ||
                        agentData.hardware?.ip_address ||
                        agentData.ip_address ||
                        "Unknown"}
                    </div>
                  </div>
                </div>
 
                <div className="stat-card">
                  <span className="material-symbols-outlined stat-icon">schedule</span>
                  <div className="stat-content">
                    <div className="stat-label">Last Seen</div>
                    <div className="stat-value">
                      {formatLastSeen(agentData.last_seen)}
                    </div>
                  </div>
                </div>
              </div>
            </>
          ) : (
            <div className="agent-header-error">
              <span>⚠️ Failed to load agent information</span>
            </div>
          )}
        </header>
 
        {/* Sidebar + Content */}
        <div className="agent-body">
          <AgentSidebar selected={activeTab} onSelect={setActiveTab} />
 
          <main className="agent-content">
            <Suspense fallback={<div>Loading...</div>}>
              {renderContent()}
            </Suspense>
          </main>
        </div>
      </div>
    </MainLayout>
  );
}