signoz/frontend/src/components/LogDetail/index.tsx

import { Drawer, Tabs } from 'antd';
import JSONView from 'container/LogDetailedView/JsonView';
import TableView from 'container/LogDetailedView/TableView';

import { LogDetailProps } from './LogDetail.interfaces';

function LogDetail({
	log,
	onClose,
	onAddToQuery,
}: LogDetailProps): JSX.Element {
	const onDrawerClose = (): void => {
		onClose();
	};

	const items = [
		{
			label: 'Table',
			key: '1',
			children: log && <TableView logData={log} onAddToQuery={onAddToQuery} />,
		},
		{
			label: 'JSON',
			key: '2',
			children: log && <JSONView logData={log} />,
		},
	];

	return (
		<Drawer
			width="60%"
			title="Log Details"
			placement="right"
			closable
			onClose={onDrawerClose}
			open={log !== null}
			style={{ overscrollBehavior: 'contain' }}
			destroyOnClose
		>
			<Tabs defaultActiveKey="1" items={items} />
		</Drawer>
	);
}

export default LogDetail;