From 0626081eeec2726a261944e4d7973d33f1a0aeba Mon Sep 17 00:00:00 2001 From: Vikrant Gupta Date: Wed, 24 Jan 2024 11:32:48 +0530 Subject: [PATCH] feat: added log attributes in the raw view old designs (#4423) * feat: added log attributes in the raw view old designs * feat: support it in old explorer page --- .../src/components/Logs/RawLogView/index.tsx | 30 +++++++++++++++++-- .../src/components/Logs/RawLogView/types.ts | 2 ++ .../container/LiveLogs/LiveLogsList/index.tsx | 7 ++++- .../src/container/LogsExplorerList/index.tsx | 7 ++++- frontend/src/container/LogsTable/index.tsx | 9 +++++- .../OptionsMenu/MaxLinesField/styles.ts | 1 + frontend/src/container/OptionsMenu/index.tsx | 4 +-- 7 files changed, 51 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx index f5ea5b674e..bdf623daf4 100644 --- a/frontend/src/components/Logs/RawLogView/index.tsx +++ b/frontend/src/components/Logs/RawLogView/index.tsx @@ -13,6 +13,8 @@ import { useActiveLog } from 'hooks/logs/useActiveLog'; import { useCopyLogLink } from 'hooks/logs/useCopyLogLink'; // hooks import { useIsDarkMode } from 'hooks/useDarkMode'; +import { FlatLogData } from 'lib/logs/flatLogData'; +import { isEmpty, isUndefined } from 'lodash-es'; import { KeyboardEvent, MouseEvent, @@ -39,10 +41,13 @@ function RawLogView({ data, linesPerRow, isTextOverflowEllipsisDisabled, + selectedFields = [], }: RawLogViewProps): JSX.Element { const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink( data.id, ); + const flattenLogData = useMemo(() => FlatLogData(data), [data]); + const { activeLog: activeContextLog, onSetActiveLog: handleSetActiveContextLog, @@ -62,12 +67,31 @@ function RawLogView({ const severityText = data.severity_text ? `${data.severity_text} |` : ''; + const updatedSelecedFields = useMemo( + () => selectedFields.filter((e) => e.name !== 'id'), + [selectedFields], + ); + + const attributesValues = updatedSelecedFields + .map((field) => flattenLogData[field.name]) + .filter((attribute) => !isUndefined(attribute) && !isEmpty(attribute)); + + let attributesText = attributesValues.join(' | '); + + if (attributesText.length > 0) { + attributesText += ' | '; + } + const text = useMemo( () => typeof data.timestamp === 'string' - ? `${dayjs(data.timestamp).format()} | ${severityText} ${data.body}` - : `${dayjs(data.timestamp / 1e6).format()} | ${severityText} ${data.body}`, - [data.timestamp, data.body, severityText], + ? `${dayjs(data.timestamp).format()} | ${attributesText} ${severityText} ${ + data.body + }` + : `${dayjs( + data.timestamp / 1e6, + ).format()} | ${attributesText} ${severityText} ${data.body}`, + [data.timestamp, data.body, severityText, attributesText], ); const handleClickExpand = useCallback(() => { diff --git a/frontend/src/components/Logs/RawLogView/types.ts b/frontend/src/components/Logs/RawLogView/types.ts index 2c70c0ddb2..7c16de7a12 100644 --- a/frontend/src/components/Logs/RawLogView/types.ts +++ b/frontend/src/components/Logs/RawLogView/types.ts @@ -1,3 +1,4 @@ +import { IField } from 'types/api/logs/fields'; import { ILog } from 'types/api/logs/log'; export interface RawLogViewProps { @@ -6,6 +7,7 @@ export interface RawLogViewProps { isTextOverflowEllipsisDisabled?: boolean; data: ILog; linesPerRow: number; + selectedFields?: IField[]; } export interface RawLogContentProps { diff --git a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx index be3ec95657..39fd297bea 100644 --- a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx +++ b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx @@ -70,7 +70,12 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element { (_: number, log: ILog): JSX.Element => { if (options.format === 'raw') { return ( - + ); } diff --git a/frontend/src/container/LogsExplorerList/index.tsx b/frontend/src/container/LogsExplorerList/index.tsx index 7a2e273736..361f3a49b6 100644 --- a/frontend/src/container/LogsExplorerList/index.tsx +++ b/frontend/src/container/LogsExplorerList/index.tsx @@ -80,7 +80,12 @@ function LogsExplorerList({ (_: number, log: ILog): JSX.Element => { if (options.format === 'raw') { return ( - + ); } diff --git a/frontend/src/container/LogsTable/index.tsx b/frontend/src/container/LogsTable/index.tsx index 19680662c7..73ad2c7eb9 100644 --- a/frontend/src/container/LogsTable/index.tsx +++ b/frontend/src/container/LogsTable/index.tsx @@ -72,7 +72,14 @@ function LogsTable(props: LogsTableProps): JSX.Element { const log = logs[index]; if (viewMode === 'raw') { - return ; + return ( + + ); } return ( diff --git a/frontend/src/container/OptionsMenu/MaxLinesField/styles.ts b/frontend/src/container/OptionsMenu/MaxLinesField/styles.ts index 6c177ff5a4..207da256a2 100644 --- a/frontend/src/container/OptionsMenu/MaxLinesField/styles.ts +++ b/frontend/src/container/OptionsMenu/MaxLinesField/styles.ts @@ -5,6 +5,7 @@ export const MaxLinesFieldWrapper = styled.div` display: flex; justify-content: space-between; align-items: center; + margin-bottom: 1.125rem; `; export const MaxLinesInput = styled(InputNumber)` diff --git a/frontend/src/container/OptionsMenu/index.tsx b/frontend/src/container/OptionsMenu/index.tsx index 66eeb4eb57..b097a9553a 100644 --- a/frontend/src/container/OptionsMenu/index.tsx +++ b/frontend/src/container/OptionsMenu/index.tsx @@ -31,9 +31,7 @@ function OptionsMenu({ {selectedOptionFormat === OptionFormatTypes.RAW && config?.maxLines && ( )} - {(selectedOptionFormat === OptionFormatTypes.LIST || - selectedOptionFormat === OptionFormatTypes.TABLE) && - config?.addColumn && } + {config?.addColumn && } ), [config, selectedOptionFormat],