[Refactor]: added tag for data type and type of logs (#3554)

frontend/src/container/LogDetailedView/FieldRenderer.tsx

@@ -0,0 +1,25 @@
+import { blue } from '@ant-design/colors';
+import { Tag } from 'antd';
+
+import { FieldRendererProps } from './LogDetailedView.types';
+import { getFieldAttributes } from './utils';
+
+function FieldRenderer({ field }: FieldRendererProps): JSX.Element {
+	const { dataType, newField, logType } = getFieldAttributes(field);
+
+	return (
+		<span>
+			{dataType && newField && logType ? (
+				<>
+					<span style={{ color: blue[4] }}>{newField} </span>
+					<Tag>Type: {logType}</Tag>
+					<Tag>Data type: {dataType}</Tag>
+				</>
+			) : (
+				<span style={{ color: blue[4] }}>{field}</span>
+			)}
+		</span>
+	);
+}
+
+export default FieldRenderer;

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

@@ -0,0 +1,11 @@
+import { MetricsType } from 'container/MetricsApplication/constant';
+
+export interface FieldRendererProps {
+	field: string;
+}
+
+export interface IFieldAttributes {
+	dataType?: string;
+	newField?: string;
+	logType?: MetricsType;
+}

frontend/src/container/LogDetailedView/TableView.tsx

@@ -1,4 +1,4 @@
-import { blue, orange } from '@ant-design/colors';
+import { orange } from '@ant-design/colors';
 import { LinkOutlined } from '@ant-design/icons';
 import { Input, Space, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/es/table';
@@ -21,6 +21,7 @@ import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
 import { ILog } from 'types/api/logs/log';
 
 import ActionItem, { ActionItemProps } from './ActionItem';
+import FieldRenderer from './FieldRenderer';
 import { flattenObject, recursiveParseJSON } from './utils';
 
 // Fields which should be restricted from adding it to query
@@ -91,7 +92,7 @@ function TableView({
 	const columns: ColumnsType<DataType> = [
 		{
 			title: 'Action',
-			width: 30,
+			width: 11,
 			render: (fieldData: Record<string, string>): JSX.Element | null => {
 				const fieldKey = fieldData.field.split('.').slice(-1);
 				if (!RESTRICTED_FIELDS.includes(fieldKey[0])) {
@@ -110,12 +111,12 @@ function TableView({
 			title: 'Field',
 			dataIndex: 'field',
 			key: 'field',
-			width: 30,
+			width: 50,
 			align: 'left',
 			ellipsis: true,
 			render: (field: string, record): JSX.Element => {
 				const fieldKey = field.split('.').slice(-1);
-				const renderedField = <span style={{ color: blue[4] }}>{field}</span>;
+				const renderedField = <FieldRenderer field={field} />;
 
 				if (record.field === 'trace_id') {
 					const traceId = flattenLogData[record.field];
@@ -161,7 +162,7 @@ function TableView({
 			title: 'Value',
 			dataIndex: 'value',
 			key: 'value',
-			width: 80,
+			width: 70,
 			ellipsis: false,
 			render: (field, record): JSX.Element => {
 				if (record.field === 'body') {

frontend/src/container/LogDetailedView/utils.ts

@@ -1,3 +1,7 @@
+import { MetricsType } from 'container/MetricsApplication/constant';
+
+import { IFieldAttributes } from './LogDetailedView.types';
+
 export const recursiveParseJSON = (obj: string): Record<string, unknown> => {
 	try {
 		const value = JSON.parse(obj);
@@ -32,3 +36,23 @@ export function flattenObject(obj: AnyObject, prefix = ''): AnyObject {
 		return acc;
 	}, {});
 }
+
+export const getFieldAttributes = (field: string): IFieldAttributes => {
+	let dataType;
+	let newField;
+	let logType;
+
+	if (field.startsWith('attributes_')) {
+		logType = MetricsType.Tag;
+		const stringWithoutPrefix = field.slice('attributes_'.length);
+		const parts = stringWithoutPrefix.split('.');
+		[dataType, newField] = parts;
+	} else if (field.startsWith('resources_')) {
+		logType = MetricsType.Resource;
+		const stringWithoutPrefix = field.slice('resources_'.length);
+		const parts = stringWithoutPrefix.split('.');
+		[dataType, newField] = parts;
+	}
+
+	return { dataType, newField, logType };
+};