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

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(() => {

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 {

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 (
-					<RawLogView key={log.id} data={log} linesPerRow={options.maxLines} />
+					<RawLogView
+						key={log.id}
+						data={log}
+						linesPerRow={options.maxLines}
+						selectedFields={selectedFields}
+					/>
 				);
 			}
 

frontend/src/container/LogsExplorerList/index.tsx

@@ -80,7 +80,12 @@ function LogsExplorerList({
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<RawLogView key={log.id} data={log} linesPerRow={options.maxLines} />
+					<RawLogView
+						key={log.id}
+						data={log}
+						linesPerRow={options.maxLines}
+						selectedFields={selectedFields}
+					/>
 				);
 			}
 

frontend/src/container/LogsTable/index.tsx

@@ -72,7 +72,14 @@ function LogsTable(props: LogsTableProps): JSX.Element {
 			const log = logs[index];
 
 			if (viewMode === 'raw') {
-				return <RawLogView key={log.id} data={log} linesPerRow={linesPerRow} />;
+				return (
+					<RawLogView
+						key={log.id}
+						data={log}
+						linesPerRow={linesPerRow}
+						selectedFields={selected}
+					/>
+				);
 			}
 
 			return (

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)`

frontend/src/container/OptionsMenu/index.tsx

@@ -31,9 +31,7 @@ function OptionsMenu({
 				{selectedOptionFormat === OptionFormatTypes.RAW && config?.maxLines && (
 					<MaxLinesField config={config.maxLines} />
 				)}
-				{(selectedOptionFormat === OptionFormatTypes.LIST ||
-					selectedOptionFormat === OptionFormatTypes.TABLE) &&
-					config?.addColumn && <AddColumnField config={config.addColumn} />}
+				{config?.addColumn && <AddColumnField config={config.addColumn} />}
 			</OptionsContentWrapper>
 		),
 		[config, selectedOptionFormat],