Implementation:Infiniflow Ragflow ProcessLogModal Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Knowledge_Base
Last Updated	2026-02-12 06:00 GMT

Overview

Modal component for displaying process log details with dynamic field rendering, status badges, and error text highlighting.

Description

ProcessLogModal renders a modal that dynamically iterates over all keys of the logInfo object, rendering each as an InfoItem (label + value). Special handling exists for: details (rendered in a scrollable pre-formatted container with replaceText error highlighting), status (rendered as a FileStatusBadge using RunningStatusMap). The replaceText utility (also exported) uses reactStringReplace with the regex /(\[ERROR\].+\s)/g to wrap error lines in red spans, and collapses duplicate newlines. InfoItem supports an optional overflowTip mode with Tooltip for truncated values. A blacklist filters out empty-string keys.

Usage

Opened from the dataset table or overview page to show detailed processing logs for document parsing operations.

Code Reference

Source Location

Repository: Infiniflow_Ragflow
File: web/src/pages/dataset/process-log-modal.tsx
Lines: 1-176

Signature

export interface ILogInfo {
  fileName: string; details: string; status?: RunningStatus;
  // ... additional optional fields
}

export const replaceText = (text: string) => ReactNode;

const ProcessLogModal: React.FC<ProcessLogModalProps>;
export default ProcessLogModal;

Import

import ProcessLogModal, { replaceText } from '../process-log-modal';

I/O Contract

Inputs

Name	Type	Required	Description
visible	boolean	Yes	Modal visibility
onCancel	function	Yes	Close modal callback
logInfo	ILogInfo	Yes	Log data object with dynamic fields
title	string	Yes	Modal title
translateKey	string	No	i18n namespace for field labels

Outputs

Name	Type	Description
JSX.Element	React element	Modal with dynamically rendered log fields

Usage Examples

<ProcessLogModal
  visible={logVisible}
  onCancel={hideLog}
  logInfo={logInfo}
  title="File Logs"
/>

Related Pages

Environment:Infiniflow_Ragflow_Frontend_Node_Environment

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment