fix: table columns adding (#3058)

add configurable order for appending table columns

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
This commit is contained in:
Yevhen Shevchenko 2023-07-06 18:56:29 +03:00 committed by GitHub
parent 1d00ac9ded
commit eb2a955323
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 13 deletions

View File

@ -1,4 +1,4 @@
import { ColumnType } from 'antd/es/table';
import { ColumnsType, ColumnType } from 'antd/es/table';
import { IField } from 'types/api/logs/fields';
import { ILog } from 'types/api/logs/log';
@ -12,3 +12,12 @@ export type LogsTableViewProps = {
linesPerRow: number;
onClickExpand: (log: ILog) => void;
};
export type UseTableViewResult = {
columns: ColumnsType<Record<string, unknown>>;
dataSource: Record<string, string>[];
};
export type UseTableViewProps = {
appendTo?: 'center' | 'end';
} & LogsTableViewProps;

View File

@ -11,17 +11,22 @@ import { ILog } from 'types/api/logs/log';
import { ExpandIconWrapper } from '../RawLogView/styles';
import { defaultCellStyle, defaultTableStyle } from './config';
import { TableBodyContent } from './styles';
import { ColumnTypeRender, LogsTableViewProps } from './types';
export type UseTableViewResult = {
columns: ColumnsType<Record<string, unknown>>;
dataSource: Record<string, string>[];
};
import {
ColumnTypeRender,
UseTableViewProps,
UseTableViewResult,
} from './types';
const convert = new Convert();
export const useTableView = (props: LogsTableViewProps): UseTableViewResult => {
const { logs, fields, linesPerRow, onClickExpand } = props;
export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
const {
logs,
fields,
linesPerRow,
onClickExpand,
appendTo = 'center',
} = props;
const flattenLogData = useMemo(() => logs.map((log) => FlatLogData(log)), [
logs,
@ -82,7 +87,7 @@ export const useTableView = (props: LogsTableViewProps): UseTableViewResult => {
};
},
},
...fieldColumns,
...(appendTo === 'center' ? fieldColumns : []),
{
title: 'body',
dataIndex: 'body',
@ -101,8 +106,9 @@ export const useTableView = (props: LogsTableViewProps): UseTableViewResult => {
),
}),
},
...(appendTo === 'end' ? fieldColumns : []),
];
}, [fields, linesPerRow, onClickExpand]);
}, [fields, linesPerRow, appendTo, onClickExpand]);
return { columns, dataSource: flattenLogData };
};

View File

@ -1,7 +1,7 @@
import { LogsTableViewProps } from 'components/Logs/TableView/types';
import { UseTableViewProps } from 'components/Logs/TableView/types';
export type InfinityTableProps = {
tableViewProps: LogsTableViewProps;
tableViewProps: UseTableViewProps;
infitiyTableProps: {
onEndReached: (index: number) => void;
};

View File

@ -104,6 +104,7 @@ function LogsExplorerList({
fields: selectedFields,
linesPerRow: options.maxLines,
onClickExpand: onExpand,
appendTo: 'end',
}}
infitiyTableProps={{ onEndReached }}
/>