signoz/frontend/src/modules/Traces/SelectedSpanDetails.tsx

import { Card, Space, Tabs, Typography } from 'antd';
import React from 'react';
import { pushDStree } from 'store/actions';
import styled from 'styled-components';

const { TabPane } = Tabs;

const { Text, Title, Paragraph } = Typography;

interface SelectedSpanDetailsProps {
	data: pushDStree;
}

// Check this discussion for antd with styled components
// https://gist.github.com/newswim/fa916c66477ddd5952f7d6548e6a0605

const CustomTitle = styled(Title)`
	&&& {
		color: #f2f2f2;
		font-size: 14px;
	}
`;

const CustomText = styled(Text)`
	&&& {
		color: #2d9cdb;
		font-size: 14px;
	}
`;

const CustomSubTitle = styled(Title)`
	&&& {
		color: #bdbdbd;
		font-size: 14px;
		margin-bottom: 8px;
	}
`;

const CustomSubText = styled(Paragraph)`
	&&& {
		background: #4f4f4f;
		color: #2d9cdb;
		font-size: 12px;
		padding: 6px 8px;
		word-break: break-all;
		margin-bottom: 16px;
	}
`;

const CardContainer = styled(Card)`
	.ant-card-body {
		max-height: 90vh;
		overflow-y: auto;
	}
`;

const SelectedSpanDetails = (props: SelectedSpanDetailsProps): JSX.Element => {
	const spanTags = props.data?.tags;
	const service = props.data?.name?.split(':')[0];
	const operation = props.data?.name?.split(':')[1];

	return (
		<CardContainer>
			<Space direction="vertical">
				<strong> Details for selected Span </strong>
				<Space direction="vertical" size={2}>
					<CustomTitle style={{ marginTop: '18px' }}>Service</CustomTitle>
					<CustomText>{service}</CustomText>
				</Space>
				<Space direction="vertical" size={2}>
					<CustomTitle>Operation</CustomTitle>
					<CustomText>{operation}</CustomText>
				</Space>
			</Space>
			<Tabs defaultActiveKey="1">
				<TabPane tab="Tags" key="1">
					{spanTags &&
						spanTags.map((tags) => {
							return (
								<>
									{tags.value && (
										<>
											<CustomSubTitle>{tags.key}</CustomSubTitle>
											<CustomSubText>
												{tags.key === 'error' ? 'true' : tags.value}
											</CustomSubText>
										</>
									)}
								</>
							);
						})}
				</TabPane>
				<TabPane tab="Errors" key="2">
					{spanTags &&
						spanTags
							.filter((tags) => tags.key === 'error')
							.map((error) => (
								<>
									<CustomSubTitle>{error.key}</CustomSubTitle>
									<CustomSubText>true</CustomSubText>
								</>
							))}
				</TabPane>
			</Tabs>
		</CardContainer>
	);
};

export default SelectedSpanDetails;