agent-log-page.tsx

Overview

agent-log-page.tsx is a React functional component that renders the Agent Log Page within an application. This page provides a comprehensive interface for viewing, searching, filtering, sorting, and paginating logs related to agents. Users can filter logs by date range and keywords, sort logs by different columns, and view detailed information about individual log entries via a modal dialog.

The component leverages several custom UI components (e.g., tables, pagination, breadcrumbs, inputs), hooks for data fetching and navigation, and integrates with React Query for data management and cache invalidation. It is part of a larger agent management module, interacting with agent details and logs.

Detailed Explanation

Component: AgentLogPage

The main export of this file, AgentLogPage, is a React Functional Component that encapsulates the entire page functionality.

Purpose

• Display a paged, sortable, and searchable table of agent logs.

• Allow filtering logs by keywords (ID/Title) and date ranges.

• Show the status of logs visually.

• Support pagination and sorting on specific columns.

• Provide navigation breadcrumbs for context.

• Show detailed log data in a modal upon row click.

Helper Functions

getStartOfToday(): Date

Returns a Date object set to the start of the current day (00:00:00.000).

const getStartOfToday = (): Date => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return today;
};

getEndOfToday(): Date

Returns a Date object set to the end of the current day (23:59:59.999).

const getEndOfToday = (): Date => {
  const today = new Date();
  today.setHours(23, 59, 59, 999);
  return today;
};

State Variables

Columns Definition

The columns array defines the structure of the table columns including titles, keys, and custom renderers:

Data Fetching

• Uses custom hook useFetchAgentLog to fetch agent logs based on current searchParams.

• Uses useQueryClient from React Query to invalidate and refresh cached queries on search events.

Key Methods and Handlers

handleDateRangeChange({from, to}: DateRange)

Updates the currentDate state when the user selects a new date range.

const handleDateRangeChange = ({ from: startDate, to: endDate }: DateRange) => {
  setCurrentDate({ from: startDate, to: endDate });
};

handlePageChange(current?: number, pageSize?: number)

Handles pagination changes. Resets to page 1 if page size changes.

const handlePageChange = (current?: number, pageSize?: number) => {
  let page = current || 1;
  if (pagination.pageSize !== pageSize) {
    page = 1;
  }
  setPagination({
    ...pagination,
    current: page,
    pageSize: pageSize || 10,
  });
};

handleSearch()

Updates searchParams based on the current filters, pagination, sorting, and keyword states.

const handleSearch = () => {
  setSearchParams((pre) => ({
    ...pre,
    from_date: currentDate.from as Date,
    to_date: currentDate.to as Date,
    page: pagination.current,
    page_size: pagination.pageSize,
    orderby: sortConfig?.orderby || '',
    desc: sortConfig?.desc as boolean,
    keywords,
  }));
};

handleClickSearch()

Resets the current page to 1 and triggers a search followed by cache invalidation.

const handleClickSearch = () => {
  setPagination({ ...pagination, current: 1 });
  handleSearch();
  queryClient.invalidateQueries({ queryKey: ['fetchAgentLog'] });
};

handleSort(key: string)

Toggles sorting order (asc/desc) when sorting a sortable column header.

const handleSort = (key: string) => {
  let desc = false;
  if (sortConfig && sortConfig.orderby === key) {
    desc = !sortConfig.desc;
  }
  setSortConfig({ orderby: key, desc });
};

handleReset()

Resets all filters, keywords, and date ranges to their initial default values.

const handleReset = () => {
  setSearchParams(init);
  setKeywords(init.keywords);
  setCurrentDate({ from: init.from_date, to: init.to_date });
};

showLogDetail(item: IAgentLogResponse)

Opens the detail modal for a specific log entry when a table row is clicked.

const showLogDetail = (item: IAgentLogResponse) => {
  if (item?.round) {
    setModalData(item);
    setOpenModal(true);
  }
};

Rendered UI Structure

• Page Header with Breadcrumb navigation:

  • Links to Agents list and specific Agent details.

  • Current page labeled "Log".

• Search Controls:

  • Search input for keywords (ID/Title).

  • Time range picker to select date range.

  • Search and Reset buttons.

• Table:

  • Displays paginated agent logs with columns defined.

  • Sortable columns for dates.

  • Loading indicator while fetching data.

  • Clickable rows to open detail modal.

• Pagination:

  • Custom RAGFlowPagination component for page navigation.

• Modal:

  • AgentLogDetailModal shows detailed message and reference data for the selected log.

Usage Example

import AgentLogPage from '@/pages/agent-log-page';

function App() {
  return (
    <div>
      <AgentLogPage />
    </div>
  );
}

Implementation Details and Algorithms

• Date Range Defaults: Date filters default to the full current day, computed via getStartOfToday and getEndOfToday.

• Sorting Logic: Clicking sortable table headers toggles the sorting order (ascending/descending) for that column.

• Pagination Reset: Changing the page size resets the current page to 1 to avoid invalid page numbers.

• React Query Integration: Uses invalidateQueries to ensure data freshness after search operations.

• Conditional Rendering: Table rows render loading spinner, data rows, or a "No data" message depending on current state.

• Modal Management: Modal visibility and content are managed via state hooks, opened by selecting a table row.

Interaction with Other Parts of the System

• Uses navigation hooks (useNavigatePage) to navigate between agent list and specific agent detail pages.

• Fetches agent logs via useFetchAgentLog hook, which likely calls backend APIs.

• Uses React Query (useQueryClient) for caching and managing asynchronous data.

• Depends on UI components from shared libraries/folders:

  • Breadcrumb navigation components

  • Table components (Table, TableRow, TableCell, etc.)

  • Pagination component

  • Input components (SearchInput, TimeRangePicker)

  • Modal component (AgentLogDetailModal)

• Retrieves current agent ID from URL params (useParams from umi).

• Uses custom hooks for initial agent detail data fetching (useFetchDataOnMount).

Mermaid Component Diagram

componentDiagram
    component AgentLogPage {
      +state: searchParams, currentDate, keywords, pagination, sortConfig, openModal, modalData
      +methods:
        - handleDateRangeChange()
        - handlePageChange()
        - handleSearch()
        - handleClickSearch()
        - handleSort()
        - handleReset()
        - showLogDetail()
      +renders:
        - PageHeader (Breadcrumb)
        - SearchInput
        - TimeRangePicker
        - Table (TableHead, TableBody, TableRow, TableCell)
        - RAGFlowPagination
        - AgentLogDetailModal
    }
    component useFetchAgentLog
    component useNavigatePage
    component useFetchDataOnMount
    component ReactQuery(useQueryClient)
    component umi(useParams)

    AgentLogPage --> useFetchAgentLog : fetches logs
    AgentLogPage --> useNavigatePage : navigation helpers
    AgentLogPage --> useFetchDataOnMount : fetch agent details
    AgentLogPage --> ReactQuery : cache management
    AgentLogPage --> umi : get route params
    AgentLogPage --> PageHeader
    AgentLogPage --> SearchInput
    AgentLogPage --> TimeRangePicker
    AgentLogPage --> Table
    AgentLogPage --> RAGFlowPagination
    AgentLogPage --> AgentLogDetailModal

Summary

agent-log-page.tsx is a well-structured React component forming the core of the agent log viewing functionality in the system. It provides a rich, interactive UI for filtering, sorting, and paginating agent logs, while integrating closely with API hooks and routing/navigation utilities. The modular use of components and hooks makes it maintainable and extensible.

If you need further clarifications or details on specific parts of this file or its interactions, feel free to ask!