Implementation:FlowiseAI Flowise ServerLogsView

Knowledge Sources	FlowiseAI Flowise
Domains	UI, Logging, Server Administration
Last Updated	2026-02-12 07:00 GMT

Overview

The ServerLogsView is a React view component that provides a log viewer interface for browsing and filtering server-side logs by time range or custom date selection.

Description

This component renders a full-page log viewer within a MainCard layout. It allows users to select predefined time ranges (from "Last hour" to "Last 3 months") or specify custom start/end dates using date pickers. Log content is displayed in a read-only CodeMirror editor with the Sublime theme and markdown syntax highlighting. The component fetches log data from the server API using the logsApi.getLogs endpoint and concatenates the results for display.

Usage

Use this component as the main view for the server logs page (typically mounted at the "/server-logs" route). It is intended for administrators who need to inspect application logs for debugging, monitoring, or auditing purposes.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/serverlogs/index.jsx
• Lines: 1-315

Signature

const Logs = () => {
    // State: isLoading, logData, selectedTimeSearch, startDate, endDate
    // Uses: useApi(logsApi.getLogs), useTheme(), useError()
    return <MainCard>...</MainCard>
}

export default Logs

Import

import Logs from '@/views/serverlogs/index'

I/O Contract

Inputs

Name	Type	Required	Description
(none)	-	-	This is a top-level view component with no props. It fetches data internally via the logs API.

Outputs

Name	Type	Description
Rendered view	JSX.Element	A full server logs viewer page with time range filtering and a CodeMirror-based log display.

Internal Components

DatePickerCustomInput

A forwardRef component that wraps a ListItemButton to serve as a custom trigger for the react-datepicker DatePicker.

Prop	Type	Description
value	string	The formatted date string displayed in the button
onClick	function	Handler triggered when the button is clicked to open the date picker

Key Constants and Helpers

searchTimeRanges

An array of predefined time range options:

const searchTimeRanges = [
    'Last hour', 'Last 4 hours', 'Last 24 hours',
    'Last 2 days', 'Last 7 days', 'Last 14 days',
    'Last 1 month', 'Last 2 months', 'Last 3 months', 'Custom'
]

Helper Functions

• getDateBefore(unit, value) -- Returns a Date object offset by the specified unit ('hours', 'days', 'months') and value.
• getDateTimeFormatted(date) -- Formats a date into YYYY-MM-DD-HH string for the API.
• subtractTime(months, days, hours) -- Subtracts the given months, days, and hours from the current time and returns a formatted string.

Usage Examples

Basic Usage

// In a route configuration
import Logs from '@/views/serverlogs/index'

<Route path="/server-logs" element={<Logs />} />

Related Pages

• Principle:FlowiseAI_Flowise_Server_Monitoring