Implementation:Infiniflow Ragflow AgentLogPage Component
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Agent_System, Monitoring |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Agent execution log viewer page with conversation history and message detail modal.
Description
This page component displays a tabular log of agent execution sessions for a specific agent canvas. It features a breadcrumb navigation chain (Agent > Agent Name > Log), a search bar with ID/title keyword filtering, a date range picker defaulting to the current day, sortable table columns (ID, Title, State indicator, Round number, Latest Date, Create Date), server-side pagination, and a detail modal (`AgentLogDetailModal`) that shows individual message content and reference data when a log row is clicked. The component manages search parameters, sort configuration, and pagination state locally, syncing them to the `useFetchAgentLog` query hook. State indicators use colored dots (green for success, red for errors).
Usage
Accessed as a dedicated route page for monitoring agent execution history. Navigated to from the agent canvas page via the log/monitoring action, with the canvas ID passed as a URL parameter.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/agents/agent-log-page.tsx
- Lines: 1-364
Signature
const AgentLogPage: React.FC = () => { ... };
export default AgentLogPage;
Import
import AgentLogPage from '@/pages/agents/agent-log-page';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| Route param: id | string | Yes | The agent canvas ID extracted from the URL via useParams(), used to fetch log data. |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | JSX.Element | Full page layout with breadcrumb header, search/filter controls, sortable data table, pagination, and log detail modal. |
Usage Examples
// In route configuration (UmiJS routes)
{
path: '/agents/:id/log',
component: '@/pages/agents/agent-log-page',
}
// Navigating to the log page from the agent canvas
const { navigateToAgent } = useNavigatePage();
// The log page is accessed via: /agents/{canvasId}/log