mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-26 08:56:47 +08:00
### What problem does this PR solve? feat: Added UI functions related to data-flow knowledge base #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
chanx
9
web/src/pages/dataset/dataset-overview/dataset-common.ts
Normal file
9
web/src/pages/dataset/dataset-overview/dataset-common.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export enum LogTabs {
|
||||
FILE_LOGS = 'fileLogs',
|
||||
DATASET_LOGS = 'datasetLogs',
|
||||
}
|
||||
|
||||
export enum processingType {
|
||||
knowledgeGraph = 'knowledgeGraph',
|
||||
raptor = 'raptor',
|
||||
}
|
||||
91
web/src/pages/dataset/dataset-overview/dataset-filter.tsx
Normal file
91
web/src/pages/dataset/dataset-overview/dataset-filter.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
import { FilterButton } from '@/components/list-filter-bar';
|
||||
import {
|
||||
CheckboxFormMultipleProps,
|
||||
FilterPopover,
|
||||
} from '@/components/list-filter-bar/filter-popover';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { SearchInput } from '@/components/ui/input';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { ChangeEventHandler, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { LogTabs } from './dataset-common';
|
||||
|
||||
interface IProps {
|
||||
searchString?: string;
|
||||
onSearchChange?: ChangeEventHandler<HTMLInputElement>;
|
||||
active?: (typeof LogTabs)[keyof typeof LogTabs];
|
||||
setActive?: (active: (typeof LogTabs)[keyof typeof LogTabs]) => void;
|
||||
}
|
||||
const DatasetFilter = (
|
||||
props: IProps & Omit<CheckboxFormMultipleProps, 'setOpen'>,
|
||||
) => {
|
||||
const {
|
||||
searchString,
|
||||
onSearchChange,
|
||||
value,
|
||||
onChange,
|
||||
filters,
|
||||
onOpenChange,
|
||||
active = LogTabs.FILE_LOGS,
|
||||
setActive,
|
||||
...rest
|
||||
} = props;
|
||||
const { t } = useTranslation();
|
||||
const filterCount = useMemo(() => {
|
||||
return typeof value === 'object' && value !== null
|
||||
? Object.values(value).reduce((pre, cur) => {
|
||||
return pre + cur.length;
|
||||
}, 0)
|
||||
: 0;
|
||||
}, [value]);
|
||||
return (
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex space-x-2 bg-bg-card p-1 rounded-md">
|
||||
<Button
|
||||
className={cn(
|
||||
'px-4 py-2 rounded-md hover:text-text-primary hover:bg-bg-base',
|
||||
{
|
||||
'bg-bg-base text-text-primary': active === LogTabs.FILE_LOGS,
|
||||
'bg-transparent text-text-secondary ':
|
||||
active !== LogTabs.FILE_LOGS,
|
||||
},
|
||||
)}
|
||||
onClick={() => setActive?.(LogTabs.FILE_LOGS)}
|
||||
>
|
||||
{t('knowledgeDetails.fileLogs')}
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
'px-4 py-2 rounded-md hover:text-text-primary hover:bg-bg-base',
|
||||
{
|
||||
'bg-bg-base text-text-primary': active === LogTabs.DATASET_LOGS,
|
||||
'bg-transparent text-text-secondary ':
|
||||
active !== LogTabs.DATASET_LOGS,
|
||||
},
|
||||
)}
|
||||
onClick={() => setActive?.(LogTabs.DATASET_LOGS)}
|
||||
>
|
||||
{t('knowledgeDetails.datasetLogs')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<FilterPopover
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
filters={filters}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<FilterButton count={filterCount}></FilterButton>
|
||||
</FilterPopover>
|
||||
|
||||
<SearchInput
|
||||
value={searchString}
|
||||
onChange={onSearchChange}
|
||||
className="w-32"
|
||||
></SearchInput>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { DatasetFilter };
|
||||
156
web/src/pages/dataset/dataset-overview/index.tsx
Normal file
156
web/src/pages/dataset/dataset-overview/index.tsx
Normal file
@ -0,0 +1,156 @@
|
||||
import {
|
||||
CircleQuestionMark,
|
||||
Cpu,
|
||||
FileChartLine,
|
||||
HardDriveDownload,
|
||||
} from 'lucide-react';
|
||||
import { FC, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { LogTabs } from './dataset-common';
|
||||
import { DatasetFilter } from './dataset-filter';
|
||||
import FileLogsTable from './overview-table';
|
||||
|
||||
interface StatCardProps {
|
||||
title: string;
|
||||
value: number;
|
||||
icon: JSX.Element;
|
||||
children?: JSX.Element;
|
||||
}
|
||||
|
||||
const StatCard: FC<StatCardProps> = ({ title, value, children, icon }) => {
|
||||
return (
|
||||
<div className="bg-bg-card p-4 rounded-lg border border-border flex flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="flex items-center gap-1 text-sm font-medium text-text-secondary">
|
||||
{title}
|
||||
<CircleQuestionMark size={12} />
|
||||
</h3>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-text-primary">{value}</div>
|
||||
<div className="h-12 w-full flex items-center">
|
||||
<div className="flex-1">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface CardFooterProcessProps {
|
||||
total: number;
|
||||
completed: number;
|
||||
success: number;
|
||||
failed: number;
|
||||
}
|
||||
const CardFooterProcess: FC<CardFooterProcessProps> = ({
|
||||
total,
|
||||
completed,
|
||||
success,
|
||||
failed,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const successPrecentage = (success / total) * 100;
|
||||
const failedPrecentage = (failed / total) * 100;
|
||||
return (
|
||||
<div className="flex items-center flex-col gap-2">
|
||||
<div className="flex justify-between w-full text-sm text-text-secondary">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1">
|
||||
{success}
|
||||
<span>{t('knowledgeDetails.success')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{failed}
|
||||
<span>{t('knowledgeDetails.failed')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{completed}
|
||||
<span>{t('knowledgeDetails.completed')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex rounded-full h-3 bg-bg-card text-sm font-bold text-text-primary">
|
||||
<div
|
||||
className=" rounded-full h-3 bg-accent-primary"
|
||||
style={{ width: successPrecentage + '%' }}
|
||||
></div>
|
||||
<div
|
||||
className=" rounded-full h-3 bg-state-error"
|
||||
style={{ width: failedPrecentage + '%' }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const FileLogsPage: FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [active, setActive] = useState<(typeof LogTabs)[keyof typeof LogTabs]>(
|
||||
LogTabs.FILE_LOGS,
|
||||
);
|
||||
const mockData = Array(30)
|
||||
.fill(0)
|
||||
.map((_, i) => ({
|
||||
id: i === 0 ? '#952734' : `14`,
|
||||
fileName: 'PRD for DealBees 1.2 (1).txt',
|
||||
source: 'GitHub',
|
||||
pipeline: i === 0 ? 'data demo for...' : i === 1 ? 'test' : 'kiki’s demo',
|
||||
startDate: '14/03/2025 14:53:39',
|
||||
task: i === 0 ? 'Parse' : 'Parser',
|
||||
status:
|
||||
i === 0
|
||||
? 'Success'
|
||||
: i === 1
|
||||
? 'Failed'
|
||||
: i === 2
|
||||
? 'Running'
|
||||
: 'Pending',
|
||||
}));
|
||||
|
||||
const pagination = {
|
||||
current: 1,
|
||||
pageSize: 30,
|
||||
total: 100,
|
||||
};
|
||||
|
||||
const changeActiveLogs = (active: (typeof LogTabs)[keyof typeof LogTabs]) => {
|
||||
setActive(active);
|
||||
};
|
||||
const handlePaginationChange = (page: number, pageSize: number) => {
|
||||
console.log('Pagination changed:', { page, pageSize });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-5 min-w-[880px] border-border border rounded-lg mr-5">
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-3 md:grid-cols-3 gap-4 mb-6">
|
||||
<StatCard title="Total Files" value={2827} icon={<FileChartLine />}>
|
||||
<div>+7% from last week</div>
|
||||
</StatCard>
|
||||
<StatCard title="Downloading" value={28} icon={<HardDriveDownload />}>
|
||||
<CardFooterProcess
|
||||
total={100}
|
||||
success={8}
|
||||
failed={2}
|
||||
completed={15}
|
||||
/>
|
||||
</StatCard>
|
||||
<StatCard title="Processing" value={156} icon={<Cpu />}>
|
||||
<CardFooterProcess total={20} success={8} failed={2} completed={15} />
|
||||
</StatCard>
|
||||
</div>
|
||||
|
||||
{/* Tabs & Search */}
|
||||
<DatasetFilter active={active} setActive={changeActiveLogs} />
|
||||
|
||||
{/* Table */}
|
||||
<FileLogsTable
|
||||
data={mockData}
|
||||
pagination={pagination}
|
||||
setPagination={handlePaginationChange}
|
||||
pageCount={10}
|
||||
active={active}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FileLogsPage;
|
||||
384
web/src/pages/dataset/dataset-overview/overview-table.tsx
Normal file
384
web/src/pages/dataset/dataset-overview/overview-table.tsx
Normal file
@ -0,0 +1,384 @@
|
||||
import FileStatusBadge from '@/components/file-status-badge';
|
||||
import { FileIcon } from '@/components/icon-font';
|
||||
import { RAGFlowAvatar } from '@/components/ragflow-avatar';
|
||||
import SvgIcon from '@/components/svg-icon';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
|
||||
import ProcessLogModal from '@/pages/datasets/process-log-modal';
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
SortingState,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from '@tanstack/react-table';
|
||||
import { TFunction } from 'i18next';
|
||||
import { ClipboardList, Eye } from 'lucide-react';
|
||||
import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react';
|
||||
import { LogTabs, processingType } from './dataset-common';
|
||||
|
||||
interface DocumentLog {
|
||||
id: string;
|
||||
fileName: string;
|
||||
source: string;
|
||||
pipeline: string;
|
||||
startDate: string;
|
||||
task: string;
|
||||
status: 'Success' | 'Failed' | 'Running' | 'Pending';
|
||||
}
|
||||
|
||||
interface FileLogsTableProps {
|
||||
data: DocumentLog[];
|
||||
pageCount: number;
|
||||
pagination: {
|
||||
current: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
};
|
||||
setPagination: (pagination: { page: number; pageSize: number }) => void;
|
||||
loading?: boolean;
|
||||
active: (typeof LogTabs)[keyof typeof LogTabs];
|
||||
}
|
||||
|
||||
export const getFileLogsTableColumns = (
|
||||
t: TFunction<'translation', string>,
|
||||
setIsModalVisible: Dispatch<SetStateAction<boolean>>,
|
||||
navigateToDataflowResult: (
|
||||
id: string,
|
||||
knowledgeId?: string | undefined,
|
||||
) => () => void,
|
||||
) => {
|
||||
// const { t } = useTranslate('knowledgeDetails');
|
||||
const columns: ColumnDef<DocumentLog>[] = [
|
||||
{
|
||||
id: 'select',
|
||||
header: ({ table }) => (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={table.getIsAllRowsSelected()}
|
||||
onChange={table.getToggleAllRowsSelectedHandler()}
|
||||
className="rounded bg-gray-900 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={row.getIsSelected()}
|
||||
onChange={row.getToggleSelectedHandler()}
|
||||
className="rounded border-gray-600 bg-gray-900 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'id',
|
||||
header: 'ID',
|
||||
cell: ({ row }) => (
|
||||
<div className="text-text-primary">{row.original.id}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'fileName',
|
||||
header: t('fileName'),
|
||||
cell: ({ row }) => (
|
||||
<div
|
||||
className="flex items-center gap-2 text-text-primary"
|
||||
onClick={navigateToDataflowResult(
|
||||
row.original.id,
|
||||
row.original.kb_id,
|
||||
)}
|
||||
>
|
||||
<FileIcon name={row.original.fileName}></FileIcon>
|
||||
{row.original.fileName}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'source',
|
||||
header: t('source'),
|
||||
cell: ({ row }) => (
|
||||
<div className="text-text-primary">{row.original.source}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'pipeline',
|
||||
header: t('dataPipeline'),
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2 text-text-primary">
|
||||
<RAGFlowAvatar
|
||||
avatar={null}
|
||||
name={row.original.pipeline}
|
||||
className="size-4"
|
||||
/>
|
||||
{row.original.pipeline}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'startDate',
|
||||
header: t('startDate'),
|
||||
cell: ({ row }) => (
|
||||
<div className="text-text-primary">{row.original.startDate}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'task',
|
||||
header: t('task'),
|
||||
cell: ({ row }) => (
|
||||
<div className="text-text-primary">{row.original.task}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'status',
|
||||
header: t('status'),
|
||||
cell: ({ row }) => <FileStatusBadge status={row.original.status} />,
|
||||
},
|
||||
{
|
||||
id: 'operations',
|
||||
header: t('operations'),
|
||||
cell: ({ row }) => (
|
||||
<div className="flex justify-start space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="p-1"
|
||||
onClick={() => {
|
||||
setIsModalVisible(true);
|
||||
}}
|
||||
>
|
||||
<Eye />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="p-1"
|
||||
onClick={navigateToDataflowResult(row.original.id)}
|
||||
>
|
||||
<ClipboardList />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return columns;
|
||||
};
|
||||
|
||||
export const getDatasetLogsTableColumns = (
|
||||
t: TFunction<'translation', string>,
|
||||
setIsModalVisible: Dispatch<SetStateAction<boolean>>,
|
||||
) => {
|
||||
// const { t } = useTranslate('knowledgeDetails');
|
||||
const columns: ColumnDef<DocumentLog>[] = [
|
||||
{
|
||||
id: 'select',
|
||||
header: ({ table }) => (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={table.getIsAllRowsSelected()}
|
||||
onChange={table.getToggleAllRowsSelectedHandler()}
|
||||
className="rounded bg-gray-900 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={row.getIsSelected()}
|
||||
onChange={row.getToggleSelectedHandler()}
|
||||
className="rounded border-gray-600 bg-gray-900 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'id',
|
||||
header: 'ID',
|
||||
cell: ({ row }) => (
|
||||
<div className="text-text-primary">{row.original.id}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'startDate',
|
||||
header: t('startDate'),
|
||||
cell: ({ row }) => (
|
||||
<div className="text-text-primary">{row.original.startDate}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'processingType',
|
||||
header: t('processingType'),
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2 text-text-primary">
|
||||
{processingType.knowledgeGraph === row.original.processingType && (
|
||||
<SvgIcon name={`data-flow/knowledgegraph`} width={24}></SvgIcon>
|
||||
)}
|
||||
{processingType.raptor === row.original.processingType && (
|
||||
<SvgIcon name={`data-flow/raptor`} width={24}></SvgIcon>
|
||||
)}
|
||||
{row.original.processingType}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'status',
|
||||
header: t('status'),
|
||||
cell: ({ row }) => <FileStatusBadge status={row.original.status} />,
|
||||
},
|
||||
{
|
||||
id: 'operations',
|
||||
header: t('operations'),
|
||||
cell: ({ row }) => (
|
||||
<div className="flex justify-start space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="p-1"
|
||||
onClick={() => {
|
||||
setIsModalVisible(true);
|
||||
}}
|
||||
>
|
||||
<Eye />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return columns;
|
||||
};
|
||||
|
||||
const FileLogsTable: FC<FileLogsTableProps> = ({
|
||||
data,
|
||||
pagination,
|
||||
setPagination,
|
||||
loading,
|
||||
active = LogTabs.FILE_LOGS,
|
||||
}) => {
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
||||
const [rowSelection, setRowSelection] = useState({});
|
||||
const { t } = useTranslate('knowledgeDetails');
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const { navigateToDataflowResult } = useNavigatePage();
|
||||
const columns = useMemo(() => {
|
||||
console.log('columns', active);
|
||||
return active === LogTabs.FILE_LOGS
|
||||
? getFileLogsTableColumns(t, setIsModalVisible, navigateToDataflowResult)
|
||||
: getDatasetLogsTableColumns(t, setIsModalVisible);
|
||||
}, [active, t]);
|
||||
|
||||
const currentPagination = useMemo(
|
||||
() => ({
|
||||
pageIndex: (pagination.current || 1) - 1,
|
||||
pageSize: pagination.pageSize || 10,
|
||||
}),
|
||||
[pagination],
|
||||
);
|
||||
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
manualPagination: true,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
onSortingChange: setSorting,
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
onRowSelectionChange: setRowSelection,
|
||||
state: {
|
||||
sorting,
|
||||
columnFilters,
|
||||
rowSelection,
|
||||
pagination: currentPagination,
|
||||
},
|
||||
pageCount: pagination.total
|
||||
? Math.ceil(pagination.total / pagination.pageSize)
|
||||
: 0,
|
||||
});
|
||||
const taskInfo = {
|
||||
taskId: '#9527',
|
||||
fileName: 'PRD for DealBees 1.2 (1).text',
|
||||
fileSize: '2.4G',
|
||||
source: 'Github',
|
||||
task: 'Parse',
|
||||
state: 'Running',
|
||||
startTime: '14/03/2025 14:53:39',
|
||||
duration: '800',
|
||||
details: 'PRD for DealBees 1.2 (1).text',
|
||||
};
|
||||
return (
|
||||
<div className="w-full h-[calc(100vh-350px)]">
|
||||
<Table rootClassName="max-h-[calc(100vh-380px)]">
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead key={header.id}>
|
||||
{flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody className="relative">
|
||||
{table.getRowModel().rows.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && 'selected'}
|
||||
className="group"
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell
|
||||
key={cell.id}
|
||||
className={cell.column.columnDef.meta?.cellClassName}
|
||||
>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
No results.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div className="flex items-center justify-end py-4 absolute bottom-3 right-12">
|
||||
<div className="space-x-2">
|
||||
<RAGFlowPagination
|
||||
{...{ current: pagination.current, pageSize: pagination.pageSize }}
|
||||
total={pagination.total}
|
||||
onChange={(page, pageSize) => setPagination({ page, pageSize })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ProcessLogModal
|
||||
visible={isModalVisible}
|
||||
onCancel={() => setIsModalVisible(false)}
|
||||
taskInfo={taskInfo}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FileLogsTable;
|
||||
Reference in New Issue
Block a user