Function SystemEvents

frontend/src/components/SystemEvents.jsx:174–335

()

};

const SystemEvents = () => {
  const [events, setEvents] = useState([]);
  const [totalEvents, setTotalEvents] = useState(0);
  const [isExpanded, setIsExpanded] = useState(false);
  const { ref: cardRef, width: cardWidth } = useElementSize();
  const isNarrow = cardWidth < 650;
  const [isLoading, setIsLoading] = useState(false);

  const [eventsRefreshInterval, setEventsRefreshInterval] = useLocalStorage(
    'events-refresh-interval',
    0
  );
  const [eventsLimit, setEventsLimit] = useLocalStorage('events-limit', 100);
  const [currentPage, setCurrentPage] = useState(1);

  // Calculate offset based on current page and limit
  const offset = (currentPage - 1) * eventsLimit;
  const totalPages = Math.ceil(totalEvents / eventsLimit);

  const fetchEvents = useCallback(async () => {
    try {
      setIsLoading(true);
      const response = await getSystemEvents(eventsLimit, offset);
      if (response && response.events) {
        setEvents(response.events);
        setTotalEvents(response.total || 0);
      }
    } catch (error) {
      console.error('Error fetching system events:', error);
    } finally {
      setIsLoading(false);
    }
  }, [eventsLimit, offset]);

  // Fetch events on mount and when eventsRefreshInterval changes
  useEffect(() => {
    fetchEvents();

    // Set up polling if interval is set and events section is expanded
    if (eventsRefreshInterval > 0 && isExpanded) {
      const interval = setInterval(fetchEvents, eventsRefreshInterval * 1000);
      return () => clearInterval(interval);
    }
  }, [fetchEvents, eventsRefreshInterval, isExpanded]);

  // Reset to first page when limit changes
  useEffect(() => {
    setCurrentPage(1);
  }, [eventsLimit]);

  return (
    <Card
      ref={cardRef}
      shadow="sm"
      padding="sm"
      radius="md"
      withBorder
      style={{