process-log-modal.tsx

Overview

process-log-modal.tsx defines a React functional component ProcessLogModal that presents detailed information about a background or asynchronous task in a modal dialog interface. Its primary purpose is to display the status and metadata of a processing task (such as a file processing job) in a user-friendly, organized format.

This component is designed to be reusable within a React application, especially in contexts where users need to monitor or review logs and details of tasks that run in the background, providing visual cues about the task state and timing information.

Detailed Breakdown

Interfaces

ProcessLogModalProps

Defines the props accepted by the main ProcessLogModal component.

Components

StatusTag

A small presentational component that displays the current state of the task as a colored tag with a dot indicator.

• Props:

  • state: string — The status string of the task, e.g., "Running", "Completed".

• Behavior:

  • Maps the state string to a predefined color scheme using Tailwind CSS classes.

  • Shows a colored dot followed by the state text.

• Return:

  • A styled <span> element representing the status tag.

• Example Usage:

  <StatusTag state="Completed" />
  

• Implementation Details:

  • Uses a switch statement inside getTagStyle() to select CSS classes based on the state.

  • Defaults to a gray style if the state is unrecognized.

InfoItem

Displays a labeled piece of information with optional styling.

• Props:

  • label: string — The label or title of the information.

  • value: string | React.ReactNode — The content or value associated with the label.

  • className?: string — Optional additional CSS classes.

• Return:

  • A vertically stacked label and value block, styled for clarity.

• Example Usage:

  <InfoItem label="File Name" value="report.pdf" />
  <InfoItem label="Details" value={<em>Task executed successfully</em>} />
  

Main Component: ProcessLogModal

Displays a modal dialog showing detailed information about a processing task.

• Props: Accepts ProcessLogModalProps as described above.

• Functionality:

  • Uses a Modal component (imported from UI library) to render the modal dialog.

  • Shows task metadata on the left (task ID, file name/size, source, task description, details).

  • Shows task status and timing info on the right (state tag, start/end time, duration).

  • Includes a localized title and a footer with a close button.

  • Supports multi-column responsive layout using CSS grid and Tailwind classes.

• Usage Example:

  <ProcessLogModal
    visible={isModalVisible}
    onCancel={() => setModalVisible(false)}
    taskInfo={{
      taskId: '1234',
      fileName: 'example.txt',
      fileSize: '2MB',
      source: 'Upload',
      task: 'Virus Scan',
      state: 'Running',
      startTime: '2024-06-15T10:00:00Z',
      details: 'Scanning in progress...'
    }}
  />
  

• Implementation Details:

  • Uses the useTranslate hook to localize modal title and button text.

  • The modal footer contains a single "Close" button wired to the onCancel handler.

  • Displays '-' for optional fields if data is missing (e.g., endTime, duration).

  • The StatusTag component visually emphasizes the task state.

  • Layout adapts to different screen sizes using grid-cols-1 (mobile) and grid-cols-2 (desktop).

Important Implementation Details & Algorithms

• Status Color Mapping: The StatusTag component uses a simple switch statement to map task states to specific color classes, ensuring uniform and intuitive visual feedback.

• Responsive Layout: The modal content is arranged in a CSS grid that adapts from single column on small screens (grid-cols-1) to two columns on medium and larger screens (md:grid-cols-2).

• Localization Support: All user-visible text strings (modal title, button text) are wrapped using the useTranslate hook, which fetches translations from the knowledgeDetails namespace, facilitating internationalization.

Interaction with Other Parts of the System

• UI Components:

  • Imports and uses Button and Modal from the app’s UI component library (@/components/ui).

• Localization:

  • Uses useTranslate hook assumed to be a custom hook for i18n support.

• Parent Components:

  • ProcessLogModal is a controlled component: its visibility and close behavior are managed externally via props.

  • Typically used in pages or components that manage task execution and want to expose detailed logs or status info.

• Styling:

  • Relies on Tailwind CSS utility classes for styling.

  • The modal has a custom class process-log-modal, allowing for further styling overrides if needed.

Visual Diagram

componentDiagram
    component ProcessLogModal {
        +visible: boolean
        +onCancel(): void
        +taskInfo: TaskInfo
        --
        -render()
    }
    component StatusTag {
        +state: string
        --
        -getTagStyle(): string
        -render()
    }
    component InfoItem {
        +label: string
        +value: string | ReactNode
        +className?: string
        --
        -render()
    }
    ProcessLogModal --> StatusTag : uses
    ProcessLogModal --> InfoItem : uses (multiple)
    ProcessLogModal --> Modal : UI wrapper
    ProcessLogModal --> Button : UI footer button
    ProcessLogModal --> useTranslate : i18n hook

Summary

process-log-modal.tsx encapsulates a reusable, localized modal component that displays comprehensive task processing logs and metadata with clear visual status indicators and a responsive design. It leverages modular subcomponents (StatusTag and InfoItem) to maintain clear separation of concerns and facilitate maintainability. It integrates with UI and localization infrastructure and is intended to be used wherever detailed task status reporting is required in the app.