overview-table.tsx

Overview

overview-table.tsx is a React functional component file that implements a versatile, paginated, and sortable data table to display file and dataset logs in a user interface. The component supports two distinct views (tabs) — File Logs and Dataset Logs — each with customized columns and operations. It leverages the powerful @tanstack/react-table library for table state management, sorting, filtering, pagination, and row selection.

The component provides interactive features such as:

Row selection via checkboxes.
Dynamic navigation to detailed dataflow results.
Modal dialog to display detailed process logs.
Status badges and icons for visual indication of log states.
Pagination controls to navigate through multiple pages of data.

The file exports:

FileLogsTable component: The main table UI component.
getFileLogsTableColumns function: Returns column definitions for the File Logs view.
getDatasetLogsTableColumns function: Returns column definitions for the Dataset Logs view.

Exports

`getFileLogsTableColumns`

function getFileLogsTableColumns(
  t: TFunction<'translation', string>,
  setIsModalVisible: Dispatch<SetStateAction<boolean>>,
  navigateToDataflowResult: (id: string, knowledgeId?: string) => () => void,
): ColumnDef<DocumentLog>[]

Description

Generates and returns an array of column definitions tailored for the File Logs table view.

Parameters

t: i18next translation function scoped to 'translation' namespace.
setIsModalVisible: React state setter function to control the visibility of the process log modal.
navigateToDataflowResult: A function that returns a navigation handler function to navigate to detailed dataflow results for a given file log ID and optional knowledge ID.

Returns

Array of ColumnDef<DocumentLog> objects defining each column's header, cell rendering, and interaction.

Usage Example

const columns = getFileLogsTableColumns(t, setIsModalVisible, navigateToDataflowResult);

Important Columns

Select: Checkbox for row selection (supports select all).
ID: Displays the log ID.
File Name: Displays filename with a file icon, clickable to navigate to dataflow results.
Source: Data source name.
Data Pipeline: Pipeline name with avatar.
Start Date: Date when processing started.
Task: Task description.
Status: Visual badge showing processing status.
Operations: Buttons to open process log modal and navigate to dataflow results.

`getDatasetLogsTableColumns`

function getDatasetLogsTableColumns(
  t: TFunction<'translation', string>,
  setIsModalVisible: Dispatch<SetStateAction<boolean>>
): ColumnDef<DocumentLog>[]

Description

Returns column definitions customized for the Dataset Logs table view.

Parameters

t: Translation function.
setIsModalVisible: Setter to show/hide the process log modal.

Returns

Array of ColumnDef<DocumentLog> tailored for dataset logs.

Usage Example

const columns = getDatasetLogsTableColumns(t, setIsModalVisible);

Important Columns

Select: Row selection checkbox.
ID: Log identifier.
Start Date: Log start date.
Processing Type: Displays processing type with corresponding SVG icon.
Status: Status badge.
Operations: Button to open the process log modal.

`FileLogsTable`

const FileLogsTable: FC<FileLogsTableProps>

Description

The main React functional component that renders a paginated, sortable, and filterable table of logs for files or datasets depending on the active tab. It manages table state, renders the table UI, pagination controls, and process log modal.

Props

Name	Type	Description
`data`	`DocumentLog[]`	Array of log entries to display.
`pageCount`	`number`	Total number of pages (not used explicitly).
`pagination`	`{ current: number; pageSize: number; total: number }`	Pagination state (current page, page size, total items).
`setPagination`	`(pagination: { page: number; pageSize: number }) => void`	Callback to update pagination state.
`loading`	`boolean` (optional)	Flag indicating if data is loading.
`active`	`typeof LogTabs[keyof typeof LogTabs]`	Indicates which tab is active (File Logs or Dataset Logs). Default is File Logs.

Returns

JSX element rendering the full table UI including headers, rows, pagination, and modal.

Usage Example

<FileLogsTable
  data={logs}
  pagination={{ current: 1, pageSize: 10, total: 100 }}
  setPagination={({ page, pageSize }) => setPageInfo({ page, pageSize })}
  active={LogTabs.FILE_LOGS}
/>

Implementation Details

Uses React Table hooks (useReactTable) to manage table state:
- Sorting, filtering, pagination, and row selection.
Memoizes columns based on active tab and translation function.
Handles user interactions like row selection and modal visibility.
Uses imported UI components for table structure (Table, TableBody, etc.).
Shows a ProcessLogModal when the user clicks the eye icon in operations.
Displays pagination controls (RAGFlowPagination) and handles page changes.
Hardcoded example taskInfo object is passed to the modal for demonstration.

Interfaces

`DocumentLog`

Represents a single log entry.

Property	Type	Description
`id`	`string`	Unique identifier of the log.
`fileName`	`string`	Name of the file involved.
`source`	`string`	Source of the data/file.
`pipeline`	`string`	Name of the data pipeline used.
`startDate`	`string`	Start date/time of the log entry.
`task`	`string`	Task description.
`status`	`'Success' \	'Failed' \

`FileLogsTableProps`

Props for the FileLogsTable component.

Property	Type	Description
`data`	`DocumentLog[]`	Array of log entries.
`pageCount`	`number`	Total pages (not directly used).
`pagination`	`{ current: number; pageSize: number; total: number }`	Pagination state.
`setPagination`	`(pagination: { page: number; pageSize: number }) => void`	Function to update pagination.
`loading`	`boolean` (optional)	Loading indicator.
`active`	`LogTabs` (enum value)	Active tab indicator (File or Dataset Logs).

Important Implementation Details and Algorithms

Dynamic Column Selection: Depending on the active tab (LogTabs.FILE_LOGS or LogTabs.DATASET_LOGS), the component dynamically loads appropriate column definitions using getFileLogsTableColumns or getDatasetLogsTableColumns.
React Table Integration:
- Uses useReactTable from @tanstack/react-table for:
  - Sorting (SortingState and getSortedRowModel).
  - Filtering (ColumnFiltersState and getFilteredRowModel).
  - Pagination (getPaginationRowModel, manual pagination).
  - Row selection (rowSelection state).
- Table state is fully controlled and synchronized with React state hooks.
Row Selection:
- Supports selecting all rows via header checkbox.
- Individual row selection via checkboxes.
- Visual feedback via data-state="selected".
Process Log Modal:
- Clicking the eye icon button opens a modal with detailed process log information.
- Modal visibility controlled by React state isModalVisible.
Navigation:
- Clicking file name or clipboard icon triggers navigation handlers to detailed dataflow results.
Pagination:
- Pagination component RAGFlowPagination is controlled and synced with pagination prop and setPagination callback.
Icons and Badges:
- Uses custom icons (FileIcon, SvgIcon, RAGFlowAvatar) and status badges (FileStatusBadge) to enhance visual clarity.

Interaction With Other System Components

UI Components:
- Imports from local UI library components: Button, Table family, RAGFlowPagination, FileStatusBadge, SvgIcon, RAGFlowAvatar.
Hooks:
- Uses useTranslate for i18n translations.
- Uses useNavigatePage for page navigation logic.
Modal:
- Opens ProcessLogModal component to show detailed processing logs.
Icons:
- Uses lucide-react icons (ClipboardList, Eye) for operation buttons.
Table Logic:
- Uses @tanstack/react-table for advanced table state management.

Visual Diagram

classDiagram
    class FileLogsTable {
        -data: DocumentLog[]
        -pagination: {current: number; pageSize: number; total: number}
        -loading?: boolean
        -active: LogTabs
        -sorting: SortingState
        -columnFilters: ColumnFiltersState
        -rowSelection: object
        -isModalVisible: boolean
        +render()
    }

    class getFileLogsTableColumns {
        +t: TFunction
        +setIsModalVisible: Dispatch<SetStateAction<boolean>>
        +navigateToDataflowResult(id: string, knowledgeId?: string): () => void
        +returns ColumnDef<DocumentLog>[]
    }

    class getDatasetLogsTableColumns {
        +t: TFunction
        +setIsModalVisible: Dispatch<SetStateAction<boolean>>
        +returns ColumnDef<DocumentLog>[]
    }

    FileLogsTable --> getFileLogsTableColumns : uses
    FileLogsTable --> getDatasetLogsTableColumns : uses
    FileLogsTable --> ProcessLogModal : renders
    FileLogsTable --> RAGFlowPagination : renders
    FileLogsTable --> useReactTable : manages state

Summary

The overview-table.tsx file implements a comprehensive log viewing component for files and datasets. It provides flexible column configurations, rich interactive features (selection, sorting, filtering, pagination), and integrates tightly with the application’s UI components and navigation logic. The clear separation of column definitions for different tabs and the use of @tanstack/react-table for state management make this component both powerful and maintainable.