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],