TabSystem.jsx

Go to the documentation of this file.

// SystemTab.jsx - Enhanced system information display
 
import React from "react";
import { apiFetch } from "../../lib/api";
import MeshCentralEmbed, { VIEWMODE } from "../../components/MeshCentralEmbed";
 
export default function TabSystem({ agentId, agentUuid, agent }) {
  const [info, setInfo] = React.useState(null);
  const [agentInfo, setAgentInfo] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [useMeshCentral, setUseMeshCentral] = React.useState(false);
  const [meshInfo, setMeshInfo] = React.useState(null);
  const [meshLoading, setMeshLoading] = React.useState(false);
 
  // Check if MeshCentral is available
  React.useEffect(() => {
    if (!agentId && !agentUuid) return;
 
    setMeshLoading(true);
    apiFetch(`/agent/${agentUuid || agentId}/meshcentral-url`)
      .then((res) => res.ok ? res.json() : null)
      .then((data) => {
        if (data?.meshcentralNodeId) {
          setMeshInfo(data);
        }
      })
      .catch(() => { })
      .finally(() => setMeshLoading(false));
  }, [agentId, agentUuid]);
 
  React.useEffect(() => {
    if (!agentId) return;
    setLoading(true);
 
    // Fetch both hardware info and agent details
    Promise.all([
      apiFetch(`/agent/${agentId}/hardware`).then(res => res.ok ? res.json() : null),
      apiFetch(`/agent/${agentId}/status`).then(res => res.ok ? res.json() : null)
    ])
      .then(([hardwareData, statusData]) => {
        setInfo(hardwareData);
        setAgentInfo(statusData);
      })
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, [agentId]);
 
  const formatBytes = (bytes) => {
    if (!bytes) return 'N/A';
    const gb = (bytes / (1024 * 1024 * 1024)).toFixed(2);
    return `${gb} GB (${bytes.toLocaleString()} bytes)`;
  };
 
  const formatUptime = (seconds) => {
    if (!seconds) return 'N/A';
    const days = Math.floor(seconds / 86400);
    const hours = Math.floor((seconds % 86400) / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    return `${days}d ${hours}h ${minutes}m`;
  };
 
  const formatDate = (dateString) => {
    if (!dateString) return 'N/A';
    try {
      return new Date(dateString).toLocaleString();
    } catch {
      return dateString;
    }
  };
 
  if (loading || meshLoading) return <div className="card">Loading system information...</div>;
  if (error) return <div className="card error">Error: {error}</div>;
  if (!info && !agentInfo && !meshInfo?.available) return <div className="card">No information available.</div>;
 
  return (
    <div className="tab-container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        <h2 style={{ margin: 0 }}>System Information</h2>
        {meshInfo?.available && (
          <button
            className="btn-sm"
            onClick={() => setUseMeshCentral(!useMeshCentral)}
            style={{ display: 'flex', alignItems: 'center', gap: '4px' }}
          >
            <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>
              {useMeshCentral ? 'list' : 'desktop_windows'}
            </span>
            {useMeshCentral ? 'Switch to Legacy View' : 'Switch to MeshCentral'}
          </button>
        )}
      </div>
 
      {/* MeshCentral Details View */}
      {useMeshCentral && meshInfo?.available && (
        <div className="card" style={{ padding: '16px', marginBottom: '16px' }}>
          <MeshCentralEmbed
            agentUuid={agent?.uuid || agentUuid}
            viewMode={VIEWMODE.DETAILS}
            title="System Details (MeshCentral)"
          />
        </div>
      )}
 
      {/* Legacy System Information */}
      {(!useMeshCentral || !meshInfo?.available) && (
 
        <div className="card-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '16px' }}>
 
          {/* Computer Information */}
          <div className="card">
            <h3><span className="material-symbols-outlined">computer</span> Computer</h3>
            <table style={{ width: '100%', fontSize: '0.9rem' }}>
              <tbody>
                <tr><td><strong>Name:</strong></td><td>{info?.computerName || agentInfo?.hostname || 'N/A'}</td></tr>
                <tr><td><strong>Manufacturer:</strong></td><td>{info?.manufacturer || 'N/A'}</td></tr>
                <tr><td><strong>Model:</strong></td><td>{info?.model || 'N/A'}</td></tr>
                <tr><td><strong>Serial:</strong></td><td>{info?.serial_number || 'N/A'}</td></tr>
                <tr><td><strong>UUID:</strong></td><td style={{ fontSize: '0.75rem', wordBreak: 'break-all' }}>{info?.uuid || agentInfo?.hardware_uuid || 'N/A'}</td></tr>
              </tbody>
            </table>
          </div>
 
          {/* Operating System */}
          <div className="card">
            <h3><span className="material-symbols-outlined">desktop_windows</span> Operating System</h3>
            <table style={{ width: '100%', fontSize: '0.9rem' }}>
              <tbody>
                <tr><td><strong>OS:</strong></td><td>{agentInfo?.os || info?.platform || 'N/A'}</td></tr>
                <tr><td><strong>Version:</strong></td><td>{info?.os_version || 'N/A'}</td></tr>
                <tr><td><strong>Build:</strong></td><td>{info?.os_build || 'N/A'}</td></tr>
                <tr><td><strong>Architecture:</strong></td><td>{info?.arch || 'N/A'}</td></tr>
                <tr><td><strong>Install Date:</strong></td><td>{formatDate(info?.os_install_date)}</td></tr>
                <tr><td><strong>Last Reboot:</strong></td><td>{formatDate(info?.last_reboot)}</td></tr>
              </tbody>
            </table>
          </div>
 
          {/* Processor */}
          <div className="card">
            <h3><span className="material-symbols-outlined">settings</span> Processor</h3>
            <table style={{ width: '100%', fontSize: '0.9rem' }}>
              <tbody>
                <tr><td><strong>CPU:</strong></td><td>{info?.cpu_model || (info?.cpus && info.cpus[0]) || info?.cpu || 'N/A'}</td></tr>
                <tr><td><strong>Cores:</strong></td><td>{info?.cpu_cores || (info?.cpus && info.cpus.length) || 'N/A'}</td></tr>
                <tr><td><strong>Threads:</strong></td><td>{info?.cpu_threads || 'N/A'}</td></tr>
              </tbody>
            </table>
          </div>
 
          {/* Memory - Enhanced like Storage */}
          <div className="card">
            <h3><span className="material-symbols-outlined">memory</span> Memory</h3>
            {(() => {
              const totalBytes = info?.ram_bytes || info?.memory || info?.ram;
              const totalGB = totalBytes ? (totalBytes / (1024 * 1024 * 1024)).toFixed(2) : null;
              const usedBytes = info?.used_memory;
              const usedGB = usedBytes ? (usedBytes / (1024 * 1024 * 1024)).toFixed(2) : null;
              const freeBytes = info?.available_memory || info?.free_memory;
              const freeGB = freeBytes ? (freeBytes / (1024 * 1024 * 1024)).toFixed(2) : null;
 
              // Calculate percentage
              let usedPercent = info?.memory_usage;
              if (!usedPercent && usedGB && totalGB) {
                usedPercent = ((usedGB / totalGB) * 100).toFixed(1);
              }
 
              return totalGB ? (
                <div>
                  <table style={{ width: '100%', fontSize: '0.9rem', marginBottom: '12px' }}>
                    <tbody>
                      <tr><td><strong>Total RAM:</strong></td><td>{totalGB} GB</td></tr>
                      <tr><td><strong>Used:</strong></td><td>{usedGB || 'N/A'} GB</td></tr>
                      <tr><td><strong>Available:</strong></td><td>{freeGB || 'N/A'} GB</td></tr>
                    </tbody>
                  </table>
 
                  {usedPercent && (
                    <div>
                      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px', fontSize: '0.9rem' }}>
                        <span>Memory Usage</span>
                        <span style={{
                          fontWeight: 'bold',
                          color: usedPercent > 90 ? '#dc3545' : usedPercent > 75 ? '#ffc107' : '#28a745'
                        }}>
                          {usedPercent}%
                        </span>
                      </div>
                      <div style={{
                        width: '100%',
                        height: '8px',
                        background: '#e0e0e0',
                        borderRadius: '4px',
                        overflow: 'hidden'
                      }}>
                        <div style={{
                          width: `${usedPercent}%`,
                          height: '100%',
                          background: usedPercent > 90 ? '#dc3545' : usedPercent > 75 ? '#ffc107' : '#007bff',
                          transition: 'width 0.3s ease'
                        }} />
                      </div>
                    </div>
                  )}
                </div>
              ) : (
                <table style={{ width: '100%', fontSize: '0.9rem' }}>
                  <tbody>
                    <tr><td><strong>Total RAM:</strong></td><td>{formatBytes(totalBytes)}</td></tr>
                    <tr><td><strong>Available:</strong></td><td>N/A</td></tr>
                    <tr><td><strong>Used:</strong></td><td>N/A</td></tr>
                  </tbody>
                </table>
              );
            })()}
          </div>
 
          {/* Storage */}
          <div className="card" style={{ gridColumn: info?.drives && Array.isArray(info.drives) && info.drives.length > 0 ? 'span 2' : 'span 1' }}>
            <h3><span className="material-symbols-outlined">storage</span> Storage</h3>
 
            {info?.drives && Array.isArray(info.drives) && info.drives.length > 0 ? (
              <div>
                {/* Drive Summary */}
                <table style={{ width: '100%', fontSize: '0.9rem', marginBottom: '16px' }}>
                  <tbody>
                    <tr><td><strong>Total Drives:</strong></td><td>{info.drives.length}</td></tr>
                    <tr>
                      <td><strong>Total Space:</strong></td>
                      <td>{info.drives.reduce((sum, d) => sum + (d.Total || 0), 0).toFixed(2)} GB</td>
                    </tr>
                    <tr>
                      <td><strong>Total Used:</strong></td>
                      <td>{info.drives.reduce((sum, d) => sum + (d.Used || 0), 0).toFixed(2)} GB</td>
                    </tr>
                    <tr>
                      <td><strong>Total Free:</strong></td>
                      <td>{info.drives.reduce((sum, d) => sum + (d.Free || 0), 0).toFixed(2)} GB</td>
                    </tr>
                  </tbody>
                </table>
 
                {/* Individual Drives */}
                <div style={{ borderTop: '1px solid #ddd', paddingTop: '12px' }}>
                  <strong style={{ fontSize: '0.95rem', marginBottom: '8px', display: 'block' }}>Individual Drives:</strong>
                  {info.drives.map((drive, idx) => {
                    // Calculate percentage if not provided
                    const usedPercent = drive.UsedPercent ||
                      (drive.Used && drive.Total ? ((drive.Used / drive.Total) * 100).toFixed(1) : 0);
 
                    return (
                      <div key={idx} style={{
                        marginBottom: '12px',
                        padding: '10px',
                        background: '#f9f9f9',
                        borderRadius: '4px',
                        borderLeft: '3px solid #007bff'
                      }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '6px' }}>
                          <div>
                            <strong style={{ fontSize: '1rem' }}>
                              <span className="material-symbols-outlined" style={{ fontSize: '18px', verticalAlign: 'middle', marginRight: '4px' }}>
                                hard_drive
                              </span>
                              Drive {drive.Drive || drive.Name}:
                            </strong>
                            {drive.Root && (
                              <span style={{ fontSize: '0.85rem', color: '#666', marginLeft: '8px' }}>
                                {drive.Root}
                              </span>
                            )}
                          </div>
                          <div style={{
                            fontSize: '0.9rem',
                            fontWeight: 'bold',
                            color: usedPercent > 90 ? '#dc3545' : usedPercent > 75 ? '#ffc107' : '#28a745'
                          }}>
                            {usedPercent}% used
                          </div>
                        </div>
 
                        {/* Progress bar */}
                        <div style={{
                          width: '100%',
                          height: '8px',
                          background: '#e0e0e0',
                          borderRadius: '4px',
                          overflow: 'hidden',
                          marginBottom: '6px'
                        }}>
                          <div style={{
                            width: `${usedPercent}%`,
                            height: '100%',
                            background: usedPercent > 90 ? '#dc3545' : usedPercent > 75 ? '#ffc107' : '#007bff',
                            transition: 'width 0.3s ease'
                          }} />
                        </div>
 
                        {/* Drive stats */}
                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '8px', fontSize: '0.85rem' }}>
                          <div>
                            <div style={{ color: '#666' }}>Total</div>
                            <div style={{ fontWeight: '500' }}>{drive.Total} GB</div>
                          </div>
                          <div>
                            <div style={{ color: '#666' }}>Used</div>
                            <div style={{ fontWeight: '500', color: '#dc3545' }}>{drive.Used} GB</div>
                          </div>
                          <div>
                            <div style={{ color: '#666' }}>Free</div>
                            <div style={{ fontWeight: '500', color: '#28a745' }}>{drive.Free} GB</div>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            ) : (
              <table style={{ width: '100%', fontSize: '0.9rem' }}>
                <tbody>
                  <tr><td><strong>Drives:</strong></td><td>{info?.drive_count || 'N/A'}</td></tr>
                  <tr><td><strong>Total Space:</strong></td><td>{formatBytes(info?.total_disk)}</td></tr>
                  <tr><td><strong>Used Space:</strong></td><td>{formatBytes(info?.used_disk)}</td></tr>
                  <tr><td><strong>Free Space:</strong></td><td>{formatBytes(info?.free_disk)}</td></tr>
                  <tr><td><strong>Disk Usage:</strong></td><td>{info?.disk_usage ? `${info.disk_usage}%` : 'N/A'}</td></tr>
                </tbody>
              </table>
            )}
          </div>
 
          {/* Graphics */}
          <div className="card">
            <h3><span className="material-symbols-outlined">videogame_asset</span> Graphics</h3>
            <table style={{ width: '100%', fontSize: '0.9rem' }}>
              <tbody>
                <tr><td><strong>GPU:</strong></td><td>{info?.gpu || 'Unknown'}</td></tr>
                <tr><td><strong>Adapter:</strong></td><td>{info?.adapter || 'N/A'}</td></tr>
                <tr><td><strong>Video RAM:</strong></td><td>{formatBytes(info?.video_memory)}</td></tr>
              </tbody>
            </table>
          </div>
 
          {/* Network */}
          <div className="card">
            <h3><span className="material-symbols-outlined">lan</span> Network</h3>
            <table style={{ width: '100%', fontSize: '0.9rem' }}>
              <tbody>
                <tr><td><strong>IP Address:</strong></td><td>{info?.ip_address || agentInfo?.ip_address || 'N/A'}</td></tr>
                <tr><td><strong>IPv6:</strong></td><td>{info?.ipv6_address || 'N/A'}</td></tr>
                <tr><td><strong>MAC Address:</strong></td><td>{info?.mac_address || 'N/A'}</td></tr>
                <tr><td><strong>Domain:</strong></td><td>{info?.domain || 'N/A'}</td></tr>
                <tr><td><strong>Workgroup:</strong></td><td>{info?.workgroup || 'N/A'}</td></tr>
              </tbody>
            </table>
          </div>
 
          {/* Security */}
          <div className="card">
            <h3><span className="material-symbols-outlined">shield</span> Security</h3>
            <table style={{ width: '100%', fontSize: '0.9rem' }}>
              <tbody>
                <tr><td><strong>Antivirus:</strong></td><td>{info?.antivirus || 'Not detected'}</td></tr>
                <tr><td><strong>AV Version:</strong></td><td>{info?.antivirus_version || 'N/A'}</td></tr>
                <tr><td><strong>Firewall:</strong></td><td>{info?.firewall_enabled ? 'Enabled' : 'Disabled'}</td></tr>
                <tr><td><strong>BitLocker:</strong></td><td>{info?.bitlocker_key ? 'Encrypted' : info?.disk_encryption_status || 'Not encrypted'}</td></tr>
                <tr><td><strong>Windows Updates:</strong></td><td>{info?.windows_update_status || 'N/A'}</td></tr>
              </tbody>
            </table>
          </div>
 
          {/* Agent Information */}
          <div className="card">
            <h3><span className="material-symbols-outlined">smart_toy</span> Agent</h3>
            <table style={{ width: '100%', fontSize: '0.9rem' }}>
              <tbody>
                <tr><td><strong>Version:</strong></td><td>{agentInfo?.version || info?.agent_version || 'N/A'}</td></tr>
                <tr><td><strong>Status:</strong></td><td>{agentInfo?.status || 'Unknown'}</td></tr>
                <tr><td><strong>Last Seen:</strong></td><td>{formatDate(agentInfo?.last_seen)}</td></tr>
                <tr><td><strong>Registered:</strong></td><td>{formatDate(agentInfo?.created_at)}</td></tr>
                <tr><td><strong>Uptime:</strong></td><td>{formatUptime(info?.uptime)}</td></tr>
              </tbody>
            </table>
          </div>
 
          {/* User Information */}
          {(info?.username || info?.user_list) && (
            <div className="card">
              <h3><span className="material-symbols-outlined">person</span> Users</h3>
              <table style={{ width: '100%', fontSize: '0.9rem' }}>
                <tbody>
                  <tr><td><strong>Current User:</strong></td><td>{info?.username || 'N/A'}</td></tr>
                  {info?.user_list && Array.isArray(info.user_list) && (
                    <tr>
                      <td colSpan="2">
                        <strong>All Users:</strong>
                        <ul style={{ margin: '4px 0', paddingLeft: '20px' }}>
                          {info.user_list.map((user, i) => (
                            <li key={i} style={{ fontSize: '0.85rem' }}>{user}</li>
                          ))}
                        </ul>
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          )}
 
          {/* BIOS Information */}
          {info?.bios_version && (
            <div className="card">
              <h3><span className="material-symbols-outlined">bolt</span> BIOS</h3>
              <table style={{ width: '100%', fontSize: '0.9rem' }}>
                <tbody>
                  <tr><td><strong>Version:</strong></td><td>{info.bios_version}</td></tr>
                  <tr><td><strong>Vendor:</strong></td><td>{info.bios_vendor || 'N/A'}</td></tr>
                  <tr><td><strong>Date:</strong></td><td>{info.bios_date || 'N/A'}</td></tr>
                </tbody>
              </table>
            </div>
          )}
 
        </div>
      )}
    </div>
  );
}