diff --git a/frontend/src/container/LogDetailedView/JsonView.tsx b/frontend/src/container/LogDetailedView/JsonView.tsx
index e510d46d10..c3ab659567 100644
--- a/frontend/src/container/LogDetailedView/JsonView.tsx
+++ b/frontend/src/container/LogDetailedView/JsonView.tsx
@@ -4,14 +4,17 @@ import { Button, Row } from 'antd';
import Editor from 'components/Editor';
import { useMemo } from 'react';
import { useCopyToClipboard } from 'react-use';
-import { ILog } from 'types/api/logs/log';
-interface JSONViewProps {
- logData: ILog;
-}
+import { JSONViewProps } from './LogDetailedView.types';
+import { aggregateAttributesResourcesToString } from './utils';
+
function JSONView({ logData }: JSONViewProps): JSX.Element {
const [, copyToClipboard] = useCopyToClipboard();
- const LogJsonData = useMemo(() => JSON.stringify(logData, null, 2), [logData]);
+
+ const LogJsonData = useMemo(
+ () => aggregateAttributesResourcesToString(logData),
+ [logData],
+ );
return (
=> {
if (typeof value === 'string') {
return recursiveParseJSON(value);
}
+ if (typeof value === 'object') {
+ Object.entries(value).forEach(([key, val]) => {
+ if (typeof val === 'string') {
+ value[key] = val.trim();
+ } else if (typeof val === 'object') {
+ value[key] = recursiveParseJSON(JSON.stringify(val));
+ }
+ });
+ }
return value;
} catch (e) {
return {};
@@ -174,3 +184,35 @@ export const getFieldAttributes = (field: string): IFieldAttributes => {
return { dataType, newField, logType };
};
+
+export const aggregateAttributesResourcesToString = (logData: ILog): string => {
+ const outputJson: ILogAggregateAttributesResources = {
+ body: logData.body,
+ date: logData.date,
+ id: logData.id,
+ severityNumber: logData.severityNumber,
+ severityText: logData.severityText,
+ spanId: logData.spanId,
+ timestamp: logData.timestamp,
+ traceFlags: logData.traceFlags,
+ traceId: logData.traceId,
+ attributes: {},
+ resources: {},
+ };
+
+ Object.keys(logData).forEach((key) => {
+ if (key.startsWith('attributes_')) {
+ outputJson.attributes = outputJson.attributes || {};
+ Object.assign(outputJson.attributes, logData[key as keyof ILog]);
+ } else if (key.startsWith('resources_')) {
+ outputJson.resources = outputJson.resources || {};
+ Object.assign(outputJson.resources, logData[key as keyof ILog]);
+ } else {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ outputJson[key] = logData[key as keyof ILog];
+ }
+ });
+
+ return JSON.stringify(outputJson, null, 2);
+};
diff --git a/frontend/src/types/api/logs/log.ts b/frontend/src/types/api/logs/log.ts
index 77b090a0d7..0b519936a6 100644
--- a/frontend/src/types/api/logs/log.ts
+++ b/frontend/src/types/api/logs/log.ts
@@ -14,3 +14,20 @@ export interface ILog {
attributesInt: Record;
attributesFloat: Record;
}
+
+type OmitAttributesResources = Pick<
+ ILog,
+ Exclude<
+ keyof ILog,
+ | 'resources_string'
+ | 'attributesString'
+ | 'attributes_string'
+ | 'attributesInt'
+ | 'attributesFloat'
+ >
+>;
+
+export type ILogAggregateAttributesResources = OmitAttributesResources & {
+ attributes: Record;
+ resources: Record;
+};