TabLogs.jsx

Go to the documentation of this file.

import React from "react";
import { apiFetch } from "../../lib/api";
 
export default function TabLogs({ agentId }) {
  const [activityLogs, setActivityLogs] = React.useState([]);
  const [agentLogs, setAgentLogs] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [activeTab, setActiveTab] = React.useState('activity'); // 'activity' or 'agent'
 
  React.useEffect(() => {
    if (!agentId) return;
    setLoading(true);
    
    Promise.all([
      apiFetch(`/agent/${agentId}/activity-logs`).catch(() => []),
      apiFetch(`/agent/${agentId}/agent-logs`).catch(() => [])
    ]).then(([activity, agent]) => {
      setActivityLogs(activity);
      setAgentLogs(agent);
    }).finally(() => setLoading(false));
  }, [agentId]);
 
  if (loading) {
    return (
      <div className="tab-container">
        <h2>Logs</h2>
        <div className="card">Loading logs...</div>
      </div>
    );
  }
 
  const safeActivityLogs = Array.isArray(activityLogs) ? activityLogs : [];
  const safeAgentLogs = Array.isArray(agentLogs) ? agentLogs : [];
 
  return (
    <div className="tab-container">
      <h2>Logs</h2>
      
      {/* Tab Switcher */}
      <div className="card" style={{ marginBottom: '16px', padding: '8px', display: 'flex', gap: '8px' }}>
        <button 
          className={`btn ${activeTab === 'activity' ? 'btn-primary' : 'btn-secondary'}`}
          onClick={() => setActiveTab('activity')}
          style={{ flex: 1 }}
        >
          Activity Logs
        </button>
        <button 
          className={`btn ${activeTab === 'agent' ? 'btn-primary' : 'btn-secondary'}`}
          onClick={() => setActiveTab('agent')}
          style={{ flex: 1 }}
        >
          Agent Logs
        </button>
      </div>
 
      {/* Activity Logs Tab */}
      {activeTab === 'activity' && (
        <div className="card">
          <h3 style={{ marginTop: 0 }}>Activity Logs</h3>
          <p style={{ color: '#888', fontSize: '14px', marginBottom: '16px' }}>
            User actions: Remote sessions, script executions, file transfers, and system changes
          </p>
          <div className="log-box" style={{ maxHeight: '600px', overflow: 'auto' }}>
            {safeActivityLogs.length === 0 ? (
              <div style={{ padding: '20px', textAlign: 'center', color: '#888' }}>
                No activity logs available yet
              </div>
            ) : (
              safeActivityLogs.map((log, i) => (
                <div key={i} className="log-entry" style={{ 
                  padding: '12px',
                  borderBottom: '1px solid #eee',
                  fontSize: '14px'
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
                    <strong style={{ color: '#333' }}>{log.action || 'Unknown Action'}</strong>
                    <span style={{ color: '#888', fontSize: '12px' }}>
                      {log.timestamp ? new Date(log.timestamp).toLocaleString() : ''}
                    </span>
                  </div>
                  <div style={{ color: '#666', fontSize: '13px' }}>
                    {log.details || log.message || 'No details'}
                  </div>
                  {log.user && (
                    <div style={{ color: '#888', fontSize: '12px', marginTop: '4px' }}>
                      User: {log.user}
                    </div>
                  )}
                </div>
              ))
            )}
          </div>
        </div>
      )}
 
      {/* Agent Logs Tab */}
      {activeTab === 'agent' && (
        <div className="card">
          <h3 style={{ marginTop: 0 }}>Agent Logs</h3>
          <p style={{ color: '#888', fontSize: '14px', marginBottom: '16px' }}>
            Agent internal logs: Heartbeats, errors, updates, and system events
          </p>
          <div className="log-box" style={{ maxHeight: '600px', overflow: 'auto', fontFamily: 'monospace' }}>
            {safeAgentLogs.length === 0 ? (
              <div style={{ padding: '20px', textAlign: 'center', color: '#888' }}>
                No agent logs available yet
              </div>
            ) : (
              safeAgentLogs.map((log, i) => (
                <div key={i} className="log-entry" style={{ 
                  padding: '8px 12px',
                  borderBottom: '1px solid #eee',
                  fontSize: '13px',
                  whiteSpace: 'pre-wrap'
                }}>
                  <span style={{ color: '#888' }}>
                    {log.timestamp ? new Date(log.timestamp).toLocaleString() : ''}
                  </span>
                  {' '}
                  <span style={{ 
                    color: log.level === 'error' ? '#dc3545' : 
                           log.level === 'warn' ? '#ffc107' : '#666' 
                  }}>
                    [{log.level?.toUpperCase() || 'INFO'}]
                  </span>
                  {' '}
                  {log.message || log.details || 'No message'}
                </div>
              ))
            )}
          </div>
        </div>
      )}
    </div>
  );
}