ImpersonationAuditTable.jsx

Go to the documentation of this file.

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { apiFetch } from '../../lib/api';
 
function ImpersonationAuditTable({ tenantId }) {
  const [logs, setLogs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    async function fetchLogs() {
      setLoading(true);
      setError(null);
      try {
        const res = await apiFetch(`/tenants/${tenantId}/impersonation-audit`);
        if (res.ok) {
          const data = await res.json();
          setLogs(data.logs || []);
        } else {
          setError('Failed to fetch audit logs');
        }
      } catch (err) {
        setError('Error fetching audit logs');
      }
      setLoading(false);
    }
    if (tenantId) fetchLogs();
  }, [tenantId]);
 
  if (loading) return <div>Loading impersonation logs...</div>;
  if (error) return <div style={{ color: 'red' }}>{error}</div>;
  if (!logs.length) return <div>No impersonation activity found.</div>;
 
  return (
    <table className="impersonation-audit-table">
      <thead>
        <tr>
          <th>Timestamp</th>
          <th>Impersonator</th>
          <th>Action</th>
          <th>IP Address</th>
          <th>User Agent</th>
        </tr>
      </thead>
      <tbody>
        {logs.map(log => (
          <tr key={log.audit_id}>
            <td>{new Date(log.timestamp).toLocaleString()}</td>
            <td>{log.impersonator_name || log.impersonator_id}</td>
            <td>{log.action}</td>
            <td>{log.ip_address}</td>
            <td>{log.user_agent}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
 
ImpersonationAuditTable.propTypes = {
  tenantId: PropTypes.string.isRequired,
};
 
export default ImpersonationAuditTable;