From 7730f7612862df00e0f36713f6cff97bbcb2d831 Mon Sep 17 00:00:00 2001 From: Shaheer Kochai Date: Tue, 21 Jan 2025 19:33:03 +0430 Subject: [PATCH] =?UTF-8?q?Revert=20"feat:=20show/hide=20timestamp=20and?= =?UTF-8?q?=20body=20fields=20in=20logs=20explorer=20(raw,=20defa=E2=80=A6?= =?UTF-8?q?"=20(#6868)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit b465f74e4acad45e0b01ae68d4a2e33feb2b3067. --- .../src/components/Logs/ListLogView/index.tsx | 50 ++++---- .../src/components/Logs/RawLogView/index.tsx | 40 ++----- .../Logs/TableView/useTableView.tsx | 108 ++++++++---------- .../InfinityTableView/index.tsx | 34 +++--- .../InfinityTableView/styles.ts | 2 +- .../src/container/OptionsMenu/constants.ts | 21 +--- .../container/OptionsMenu/useOptionsMenu.ts | 22 +--- 7 files changed, 101 insertions(+), 176 deletions(-) diff --git a/frontend/src/components/Logs/ListLogView/index.tsx b/frontend/src/components/Logs/ListLogView/index.tsx index 4141148165..1fdd7414dd 100644 --- a/frontend/src/components/Logs/ListLogView/index.tsx +++ b/frontend/src/components/Logs/ListLogView/index.tsx @@ -219,14 +219,12 @@ function ListLogView({
- {updatedSelecedFields.some((field) => field.name === 'body') && ( - - )} + {flattenLogData.stream && ( )} - {updatedSelecedFields.some((field) => field.name === 'timestamp') && ( - - )} + - {updatedSelecedFields - .filter((field) => !['timestamp', 'body'].includes(field.name)) - .map((field) => - isValidLogField(flattenLogData[field.name] as never) ? ( - - ) : null, - )} + {updatedSelecedFields.map((field) => + isValidLogField(flattenLogData[field.name] as never) ? ( + + ) : null, + )}
diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx index d738a61a43..222931ee6d 100644 --- a/frontend/src/components/Logs/RawLogView/index.tsx +++ b/frontend/src/components/Logs/RawLogView/index.tsx @@ -73,7 +73,6 @@ function RawLogView({ ); const attributesValues = updatedSelecedFields - .filter((field) => !['timestamp', 'body'].includes(field.name)) .map((field) => flattenLogData[field.name]) .filter((attribute) => { // loadash isEmpty doesnot work with numbers @@ -93,40 +92,19 @@ function RawLogView({ const { formatTimezoneAdjustedTimestamp } = useTimezone(); const text = useMemo(() => { - const parts = []; + const date = + typeof data.timestamp === 'string' + ? formatTimezoneAdjustedTimestamp(data.timestamp, 'YYYY-MM-DD HH:mm:ss.SSS') + : formatTimezoneAdjustedTimestamp( + data.timestamp / 1e6, + 'YYYY-MM-DD HH:mm:ss.SSS', + ); - // Check if timestamp is selected - const showTimestamp = selectedFields.some( - (field) => field.name === 'timestamp', - ); - if (showTimestamp) { - const date = - typeof data.timestamp === 'string' - ? formatTimezoneAdjustedTimestamp( - data.timestamp, - 'YYYY-MM-DD HH:mm:ss.SSS', - ) - : formatTimezoneAdjustedTimestamp( - data.timestamp / 1e6, - 'YYYY-MM-DD HH:mm:ss.SSS', - ); - parts.push(date); - } - - // Check if body is selected - const showBody = selectedFields.some((field) => field.name === 'body'); - if (showBody) { - parts.push(`${attributesText} ${data.body}`); - } else { - parts.push(attributesText); - } - - return parts.join(' | '); + return `${date} | ${attributesText} ${data.body}`; }, [ - selectedFields, - attributesText, data.timestamp, data.body, + attributesText, formatTimezoneAdjustedTimestamp, ]); diff --git a/frontend/src/components/Logs/TableView/useTableView.tsx b/frontend/src/components/Logs/TableView/useTableView.tsx index 8dbc0c2755..d38e10ce4c 100644 --- a/frontend/src/components/Logs/TableView/useTableView.tsx +++ b/frontend/src/components/Logs/TableView/useTableView.tsx @@ -48,7 +48,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => { const columns: ColumnsType> = useMemo(() => { const fieldColumns: ColumnsType> = fields - .filter((e) => !['id', 'body', 'timestamp'].includes(e.name)) + .filter((e) => e.name !== 'id') .map(({ name }) => ({ title: name, dataIndex: name, @@ -91,67 +91,55 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => { ), }), }, - ...(fields.some((field) => field.name === 'timestamp') - ? [ - { - title: 'timestamp', - dataIndex: 'timestamp', - key: 'timestamp', - // https://github.com/ant-design/ant-design/discussions/36886 - render: ( - field: string | number, - ): ColumnTypeRender> => { - const date = - typeof field === 'string' - ? formatTimezoneAdjustedTimestamp(field, 'YYYY-MM-DD HH:mm:ss.SSS') - : formatTimezoneAdjustedTimestamp( - field / 1e6, - 'YYYY-MM-DD HH:mm:ss.SSS', - ); - return { - children: ( -
- - {date} - -
- ), - }; - }, - }, - ] - : []), + { + title: 'timestamp', + dataIndex: 'timestamp', + key: 'timestamp', + // https://github.com/ant-design/ant-design/discussions/36886 + render: (field): ColumnTypeRender> => { + const date = + typeof field === 'string' + ? formatTimezoneAdjustedTimestamp(field, 'YYYY-MM-DD HH:mm:ss.SSS') + : formatTimezoneAdjustedTimestamp( + field / 1e6, + 'YYYY-MM-DD HH:mm:ss.SSS', + ); + return { + children: ( +
+ + {date} + +
+ ), + }; + }, + }, ...(appendTo === 'center' ? fieldColumns : []), - ...(fields.some((field) => field.name === 'body') - ? [ - { - title: 'body', - dataIndex: 'body', - key: 'body', - render: ( - field: string | number, - ): ColumnTypeRender> => ({ - props: { - style: defaultTableStyle, - }, - children: ( - + { + title: 'body', + dataIndex: 'body', + key: 'body', + render: (field): ColumnTypeRender> => ({ + props: { + style: defaultTableStyle, + }, + children: ( + + ), + }), + }, ...(appendTo === 'end' ? fieldColumns : []), ]; }, [ diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx index 9aa982abe7..eec6cc032a 100644 --- a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx +++ b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx @@ -121,25 +121,23 @@ const InfinityTable = forwardRef( const tableHeader = useCallback( () => ( - {tableColumns - .filter((column) => column.key) - .map((column) => { - const isDragColumn = column.key !== 'expand'; + {tableColumns.map((column) => { + const isDragColumn = column.key !== 'expand'; - return ( - - {(column.title as string).replace(/^\w/, (c) => c.toUpperCase())} - - ); - })} + return ( + + {(column.title as string).replace(/^\w/, (c) => c.toUpperCase())} + + ); + })} ), [tableColumns, isDarkMode, tableViewProps?.fontSize], diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts b/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts index a22e7a4cc0..9de75e6642 100644 --- a/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts +++ b/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts @@ -29,7 +29,7 @@ export const TableCellStyled = styled.td` props.$isDarkMode ? 'inherit' : themeColors.whiteCream}; ${({ $isLogIndicator }): string => - $isLogIndicator ? 'padding: 0 0 0 8px;width: 15px;' : ''} + $isLogIndicator ? 'padding: 0 0 0 8px;' : ''} color: ${(props): string => props.$isDarkMode ? themeColors.white : themeColors.bckgGrey}; `; diff --git a/frontend/src/container/OptionsMenu/constants.ts b/frontend/src/container/OptionsMenu/constants.ts index 7bf6a007d1..153981f3c6 100644 --- a/frontend/src/container/OptionsMenu/constants.ts +++ b/frontend/src/container/OptionsMenu/constants.ts @@ -5,26 +5,7 @@ import { FontSize, OptionsQuery } from './types'; export const URL_OPTIONS = 'options'; export const defaultOptionsQuery: OptionsQuery = { - selectColumns: [ - { - key: 'timestamp', - dataType: DataTypes.String, - type: 'tag', - isColumn: true, - isJSON: false, - id: 'timestamp--string--tag--true', - isIndexed: false, - }, - { - key: 'body', - dataType: DataTypes.String, - type: 'tag', - isColumn: true, - isJSON: false, - id: 'body--string--tag--true', - isIndexed: false, - }, - ], + selectColumns: [], maxLines: 2, format: 'raw', fontSize: FontSize.SMALL, diff --git a/frontend/src/container/OptionsMenu/useOptionsMenu.ts b/frontend/src/container/OptionsMenu/useOptionsMenu.ts index e81fca43aa..a4a91d82f4 100644 --- a/frontend/src/container/OptionsMenu/useOptionsMenu.ts +++ b/frontend/src/container/OptionsMenu/useOptionsMenu.ts @@ -169,15 +169,6 @@ const useOptionsMenu = ({ const searchedAttributeKeys = useMemo(() => { if (searchedAttributesData?.payload?.attributeKeys?.length) { - if (dataSource === DataSource.LOGS) { - // add timestamp and body to the list of attributes - return [ - ...defaultOptionsQuery.selectColumns, - ...searchedAttributesData.payload.attributeKeys.filter( - (attribute) => attribute.key !== 'body', - ), - ]; - } return searchedAttributesData.payload.attributeKeys; } if (dataSource === DataSource.TRACES) { @@ -207,17 +198,12 @@ const useOptionsMenu = ({ ); const optionsFromAttributeKeys = useMemo(() => { - const filteredAttributeKeys = searchedAttributeKeys.filter((item) => { - // For other data sources, only filter out 'body' if it exists - if (dataSource !== DataSource.LOGS) { - return item.key !== 'body'; - } - // For LOGS, keep all keys - return true; - }); + const filteredAttributeKeys = searchedAttributeKeys.filter( + (item) => item.key !== 'body', + ); return getOptionsFromKeys(filteredAttributeKeys, selectedColumnKeys); - }, [dataSource, searchedAttributeKeys, selectedColumnKeys]); + }, [searchedAttributeKeys, selectedColumnKeys]); const handleRedirectWithOptionsData = useCallback( (newQueryData: OptionsQuery) => {