diff --git a/frontend/src/components/LogDetail/index.tsx b/frontend/src/components/LogDetail/index.tsx
index f8a320e8e9..8ea0709fbd 100644
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -1,6 +1,7 @@
import { Drawer, Tabs } from 'antd';
import JSONView from 'container/LogDetailedView/JsonView';
import TableView from 'container/LogDetailedView/TableView';
+import { useMemo } from 'react';
import { LogDetailProps } from './LogDetail.interfaces';
@@ -14,24 +15,27 @@ function LogDetail({
onClose();
};
- const items = [
- {
- label: 'Table',
- key: '1',
- children: log && (
-
- ),
- },
- {
- label: 'JSON',
- key: '2',
- children: log && ,
- },
- ];
+ const items = useMemo(
+ () => [
+ {
+ label: 'Table',
+ key: '1',
+ children: log && (
+
+ ),
+ },
+ {
+ label: 'JSON',
+ key: '2',
+ children: log && ,
+ },
+ ],
+ [log, onAddToQuery, onClickActionItem],
+ );
return (
{
dataIndex: 'id',
key: 'expand',
// https://github.com/ant-design/ant-design/discussions/36886
- render: (_, item): ColumnTypeRender> => ({
+ render: (_, item, index): ColumnTypeRender> => ({
props: {
style: defaultCellStyle,
},
children: (
{
- onClickExpand((item as unknown) as ILog);
+ onClickExpand(logs[index]);
}}
>
@@ -108,7 +107,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
},
...(appendTo === 'end' ? fieldColumns : []),
];
- }, [fields, linesPerRow, appendTo, onClickExpand]);
+ }, [fields, appendTo, linesPerRow, onClickExpand, logs]);
return { columns, dataSource: flattenLogData };
};