feat: text is handled under light and dark mode (#2087)

frontend/src/container/TraceDetail/Missingtrace.tsx

@@ -1,6 +1,6 @@
 import { volcano } from '@ant-design/colors';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Popover } from 'antd';
+import { Popover, Typography } from 'antd';
 import React from 'react';
 
 function PopOverContent(): JSX.Element {
@@ -21,19 +21,10 @@ function PopOverContent(): JSX.Element {
 function MissingSpansMessage(): JSX.Element {
 	return (
 		<Popover content={PopOverContent} trigger="hover" placement="bottom">
-			<div
-				style={{
-					textAlign: 'center',
-					display: 'flex',
-					justifyContent: 'center',
-					alignItems: 'center',
-					margin: '1rem 0',
-					fontSize: '0.8rem',
-				}}
-			>
-				<InfoCircleOutlined style={{ color: volcano[6], marginRight: '0.3rem' }} />{' '}
+			<Typography>
+				<InfoCircleOutlined style={{ color: volcano[6], marginRight: '0.3rem' }} />
 				This trace has missing spans
-			</div>
+			</Typography>
 		</Popover>
 	);
 }

frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx

@@ -1,4 +1,4 @@
-import { Modal, Tabs, Tooltip } from 'antd';
+import { Modal, Tabs, Tooltip, Typography } from 'antd';
 import Editor from 'components/Editor';
 import { StyledSpace } from 'components/Styled';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -49,9 +49,8 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 			<StyledSpace
 				styledclass={[styles.selectedSpanDetailsContainer, styles.overflow]}
 				direction="vertical"
-				style={{ marginLeft: '0.5rem' }}
 			>
-				<strong> Details for selected Span </strong>
+				<Typography.Text strong> Details for selected Span </Typography.Text>
 
 				<CustomTitle>Service</CustomTitle>
 				<Tooltip overlay={OverLayComponentServiceName}>

frontend/src/container/TraceDetail/index.tsx

@@ -1,5 +1,5 @@
 import { FilterOutlined } from '@ant-design/icons';
-import { Button, Col } from 'antd';
+import { Button, Col, Typography } from 'antd';
 import {
 	StyledCol,
 	StyledDiv,
@@ -95,14 +95,10 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 		}
 	}, [activeSelectedId, levelDown, levelUp]);
 
-	const getSelectedNode = useMemo(() => {
-		return getNodeById(activeSelectedId, treesData);
-	}, [activeSelectedId, treesData]);
-
-	// const onSearchHandler = (value: string) => {
-	// 	setSearchSpanString(value);
-	// 	setTreeData(spanToTreeUtil(response[0].events));
-	// };
+	const getSelectedNode = useMemo(
+		() => getNodeById(activeSelectedId, treesData),
+		[activeSelectedId, treesData],
+	);
 
 	const onFocusSelectedSpanHandler = (): void => {
 		const treeNode = getNodeById(activeSelectedId, tree);
@@ -124,6 +120,8 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 		[tree],
 	);
 
+	const isGlobalTimeVisible = tree && traceMetaData.globalStart;
+
 	return (
 		<StyledRow styledclass={[StyledStyles.Flex({ flex: 1 })]}>
 			<StyledCol flex="auto" styledclass={styles.leftContainer}>
@@ -141,57 +139,49 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 						{hasMissingSpans && <MissingSpansMessage />}
 					</StyledCol>
 					<Col flex="auto">
-						{map(tree.spanTree, (tree) => {
-							return (
-								<TraceFlameGraph
-									key={tree as never}
-									treeData={tree}
-									traceMetaData={traceMetaData}
-									hoveredSpanId={activeHoverId}
-									selectedSpanId={activeSelectedId}
-									onSpanHover={setActiveHoverId}
-									onSpanSelect={setActiveSelectedId}
-									missingSpanTree={false}
-								/>
-							);
-						})}
+						{map(tree.spanTree, (tree) => (
+							<TraceFlameGraph
+								key={tree.id}
+								treeData={tree}
+								traceMetaData={traceMetaData}
+								hoveredSpanId={activeHoverId}
+								selectedSpanId={activeSelectedId}
+								onSpanHover={setActiveHoverId}
+								onSpanSelect={setActiveSelectedId}
+								missingSpanTree={false}
+							/>
+						))}
 
 						{hasMissingSpans && (
 							<FlameGraphMissingSpansContainer>
-								{map(tree.missingSpanTree, (tree) => {
-									return (
-										<TraceFlameGraph
-											key={tree as never}
-											treeData={tree}
-											traceMetaData={{
-												...traceMetaData,
-												levels: getTreeLevelsCount(tree),
-											}}
-											hoveredSpanId={activeHoverId}
-											selectedSpanId={activeSelectedId}
-											onSpanHover={setActiveHoverId}
-											onSpanSelect={setActiveSelectedId}
-											missingSpanTree
-										/>
-									);
-								})}
+								{map(tree.missingSpanTree, (tree) => (
+									<TraceFlameGraph
+										key={tree.id}
+										treeData={tree}
+										traceMetaData={{
+											...traceMetaData,
+											levels: getTreeLevelsCount(tree),
+										}}
+										hoveredSpanId={activeHoverId}
+										selectedSpanId={activeSelectedId}
+										onSpanHover={setActiveHoverId}
+										onSpanSelect={setActiveSelectedId}
+										missingSpanTree
+									/>
+								))}
 							</FlameGraphMissingSpansContainer>
 						)}
 					</Col>
 				</StyledRow>
 				<StyledRow styledclass={[styles.traceDateAndTimelineContainer]}>
-					<StyledCol
-						flex={`${SPAN_DETAILS_LEFT_COL_WIDTH}px`}
-						style={{
-							display: 'flex',
-							alignItems: 'center',
-							justifyContent: 'center',
-						}}
-					>
-						{tree &&
-							traceMetaData.globalStart &&
-							dayjs(traceMetaData.globalStart).format('hh:mm:ss a MM/DD')}
-					</StyledCol>
+					{isGlobalTimeVisible && (
+						<styles.TimeStampContainer flex={`${SPAN_DETAILS_LEFT_COL_WIDTH}px`}>
+							<Typography>
+								{dayjs(traceMetaData.globalStart).format('hh:mm:ss a MM/DD')}
+							</Typography>
+						</styles.TimeStampContainer>
+					)}
+
 					<StyledCol flex="auto" styledclass={[styles.timelineContainer]}>
 						<Timeline
 							globalTraceMetadata={globalTraceMetadata}
@@ -236,19 +226,6 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 								intervalUnit={intervalUnit}
 							/>
 						))}
-						{/* {map(tree.missingSpanTree, (tree) => (
-							<GanttChart
-								key={tree as never}
-								traceMetaData={traceMetaData}
-								data={tree}
-								activeSelectedId={activeSelectedId}
-								activeHoverId={activeHoverId}
-								setActiveHoverId={setActiveHoverId}
-								setActiveSelectedId={setActiveSelectedId}
-								spanId={spanId || ''}
-								intervalUnit={intervalUnit}
-							/>
-						))} */}
 					</GanttChartWrapper>
 				</StyledDiv>
 			</StyledCol>

frontend/src/container/TraceDetail/styles.ts

@@ -1,4 +1,5 @@
 import { volcano } from '@ant-design/colors';
+import { Col } from 'antd';
 import styled, { css } from 'styled-components';
 
 /**
@@ -113,3 +114,9 @@ export const FlameGraphMissingSpansContainer = styled.div`
 	margin-top: 1rem;
 	border-radius: 0.25rem;
 `;
+
+export const TimeStampContainer = styled(Col)`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`;