TabEvents.jsx

Go to the documentation of this file.

import React from "react";
import { apiFetch } from "../../lib/api";
import MeshCentralEmbed, { VIEWMODE } from "../../components/MeshCentralEmbed";
 
export default function TabEvents({ agentId, agentUuid }) {
  const [events, setEvents] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [filter, setFilter] = React.useState('all'); // all, error, warning, information
  const [useMeshCentral, setUseMeshCentral] = React.useState(true);
  const [meshInfo, setMeshInfo] = React.useState(null);
  const [meshLoading, setMeshLoading] = React.useState(false);
  const [meshError, setMeshError] = React.useState(null);
 
  // 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);
          setUseMeshCentral(true);
        } else {
          setUseMeshCentral(false);
        }
      })
      .catch(() => setUseMeshCentral(false))
      .finally(() => setMeshLoading(false));
  }, [agentId, agentUuid]);
 
  React.useEffect(() => {
    if (!agentId || useMeshCentral) return;
    setLoading(true);
    setError(null);
 
    apiFetch(`/agent/${agentId}/events`)
      .then((data) => {
        setEvents(Array.isArray(data) ? data : []);
      })
      .catch((err) => {
        setError(err.message || "Failed to load event logs");
        setEvents([]);
      })
      .finally(() => setLoading(false));
  }, [agentId, useMeshCentral]);
 
  if (meshLoading) {
    return (
      <div className="tab-container">
        <h2>Event Viewer</h2>
        <div className="card">Checking MeshCentral availability...</div>
      </div>
    );
  }
 
  // Render MeshCentral Event Viewer if available
  if (useMeshCentral && meshInfo?.meshcentralNodeId) {
    return (
      <div className="tab-container" style={{ height: 'calc(100vh - 200px)', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
          <h2>Event Viewer</h2>
          <button
            className="btn btn-secondary"
            onClick={() => setUseMeshCentral(false)}
            style={{ fontSize: '0.9em' }}
          >
            Switch to Legacy View
          </button>
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          <MeshCentralEmbed
            agentId={agentId || agentUuid}
            nodeId={meshInfo.meshcentralNodeId}
            viewMode={VIEWMODE.EVENTS}
            title="Event Viewer"
          />
        </div>
      </div>
    );
  }
 
  if (loading) {
    return (
      <div className="tab-container">
        <h2>Event Viewer</h2>
        <div className="card">Loading event logs...</div>
      </div>
    );
  }
 
  if (error) {
    return (
      <div className="tab-container">
        <h2>Event Viewer</h2>
        <div className="card error">{error}</div>
      </div>
    );
  }
 
  // Filter events based on level
  const filteredEvents = filter === 'all'
    ? events
    : events.filter(e => e.level?.toLowerCase() === filter.toLowerCase());
 
  // Get event level color
  const getLevelColor = (level) => {
    const l = level?.toLowerCase();
    if (l === 'error' || l === 'critical') return '#dc3545';
    if (l === 'warning') return '#ffc107';
    if (l === 'information' || l === 'info') return '#17a2b8';
    return '#666';
  };
 
  // Get event level icon
  const getLevelIcon = (level) => {
    const l = level?.toLowerCase();
    if (l === 'error' || l === 'critical') return 'error';
    if (l === 'warning') return 'warning';
    if (l === 'information' || l === 'info') return 'info';
    return 'description';
  };
 
  return (
    <div className="tab-container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        <h2 style={{ margin: 0 }}>Event Viewer</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 Event Viewer */}
      {useMeshCentral && meshInfo?.available && (
        <div className="card" style={{ padding: '16px', marginBottom: '16px' }}>
          <MeshCentralEmbed
            agentUuid={agent?.uuid}
            viewMode={VIEWMODE.EVENTS}
            title="Event Viewer (MeshCentral)"
          />
        </div>
      )}
 
      {/* Legacy Event Viewer */}
      {(!useMeshCentral || !meshInfo?.available) && (
        <>
          {/* Filter Bar */}
          <div className="card" style={{ marginBottom: '16px', padding: '12px', display: 'flex', gap: '8px', alignItems: 'center' }}>
            <span style={{ fontSize: '14px', fontWeight: '500', marginRight: '8px' }}>Filter:</span>
            <button
              className={`btn-sm ${filter === 'all' ? 'btn-primary' : ''}`}
              onClick={() => setFilter('all')}
            >
              All ({events.length})
            </button>
            <button
              className={`btn-sm ${filter === 'error' ? 'btn-primary' : ''}`}
              onClick={() => setFilter('error')}
              style={{ color: filter !== 'error' ? '#dc3545' : undefined }}
            >
              Errors ({events.filter(e => e.level?.toLowerCase() === 'error' || e.level?.toLowerCase() === 'critical').length})
            </button>
            <button
              className={`btn-sm ${filter === 'warning' ? 'btn-primary' : ''}`}
              onClick={() => setFilter('warning')}
              style={{ color: filter !== 'warning' ? '#ffc107' : undefined }}
            >
              Warnings ({events.filter(e => e.level?.toLowerCase() === 'warning').length})
            </button>
            <button
              className={`btn-sm ${filter === 'information' ? 'btn-primary' : ''}`}
              onClick={() => setFilter('information')}
              style={{ color: filter !== 'information' ? '#17a2b8' : undefined }}
            >
              Information ({events.filter(e => e.level?.toLowerCase() === 'information' || e.level?.toLowerCase() === 'info').length})
            </button>
          </div>
 
          {/* Events List */}
          <div className="card">
            {filteredEvents.length === 0 ? (
              <div style={{ padding: '40px 20px', textAlign: 'center', color: '#888' }}>
                <span className="material-symbols-outlined" style={{ fontSize: '48px', opacity: 0.3 }}>
                  event_note
                </span>
                <p style={{ marginTop: '16px', fontSize: '16px' }}>
                  {filter === 'all' ? 'No event logs available yet' : `No ${filter} events found`}
                </p>
                <p style={{ fontSize: '14px', opacity: 0.7 }}>
                  Event logs will be collected from Windows Event Viewer during the next agent update
                </p>
              </div>
            ) : (
              <div className="log-box" style={{ maxHeight: '700px', overflow: 'auto' }}>
                {filteredEvents.map((e, i) => (
                  <div
                    key={i}
                    className="log-entry"
                    style={{
                      padding: '12px 16px',
                      borderLeft: `4px solid ${getLevelColor(e.level)}`,
                      marginBottom: '8px',
                      borderRadius: '4px',
                      background: '#f9f9f9'
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
                      <span
                        className="material-symbols-outlined"
                        style={{
                          fontSize: '20px',
                          color: getLevelColor(e.level)
                        }}
                      >
                        {getLevelIcon(e.level)}
                      </span>
                      <strong style={{ color: getLevelColor(e.level) }}>
                        [{e.level?.toUpperCase() || 'INFO'}]
                      </strong>
                      <span style={{ color: '#888', fontSize: '13px', marginLeft: 'auto' }}>
                        {e.timestamp ? new Date(e.timestamp).toLocaleString() : ''}
                      </span>
                    </div>
 
                    <div style={{ fontSize: '14px', color: '#333', marginLeft: '28px', marginBottom: '4px' }}>
                      {e.message || 'No message'}
                    </div>
 
                    {e.source && (
                      <div style={{ fontSize: '12px', color: '#888', marginLeft: '28px' }}>
                        Source: {e.source}
                      </div>
                    )}
 
                    {e.event_id && (
                      <div style={{ fontSize: '12px', color: '#888', marginLeft: '28px' }}>
                        Event ID: {e.event_id}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
}