refactor: aggreated attributes and resources from json (#3558)

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 {
+import { JSONViewProps } from './LogDetailedView.types';
-	logData: ILog;
+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 (
 		<div>
 			<Row

frontend/src/container/LogDetailedView/LogDetailedView.types.ts

@@ -1,4 +1,5 @@
 import { MetricsType } from 'container/MetricsApplication/constant';
+import { ILog } from 'types/api/logs/log';
 
 export interface BodyTitleRendererProps {
 	title: string;
@@ -18,3 +19,7 @@ export interface IFieldAttributes {
 	newField?: string;
 	logType?: MetricsType;
 }
+
+export interface JSONViewProps {
+	logData: ILog;
+}

frontend/src/container/LogDetailedView/utils.tsx

@@ -1,6 +1,7 @@
 import { DataNode } from 'antd/es/tree';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import { uniqueId } from 'lodash-es';
+import { ILog, ILogAggregateAttributesResources } from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import BodyTitleRenderer from './BodyTitleRenderer';
@@ -12,6 +13,15 @@ export const recursiveParseJSON = (obj: string): Record<string, unknown> => {
 		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);
+};

frontend/src/types/api/logs/log.ts

@@ -14,3 +14,20 @@ export interface ILog {
 	attributesInt: Record<string, never>;
 	attributesFloat: Record<string, never>;
 }
+
+type OmitAttributesResources = Pick<
+	ILog,
+	Exclude<
+		keyof ILog,
+		| 'resources_string'
+		| 'attributesString'
+		| 'attributes_string'
+		| 'attributesInt'
+		| 'attributesFloat'
+	>
+>;
+
+export type ILogAggregateAttributesResources = OmitAttributesResources & {
+	attributes: Record<string, never>;
+	resources: Record<string, never>;
+};