Merge pull request #835 from pranshuchittora/pc/feat/shared-styles-for-styled-components

feat(FE): new trace detail page code cleanup and enhancements

frontend/src/components/Styled/index.ts

@@ -0,0 +1,74 @@
+import * as AntD from 'antd';
+import { TextProps } from 'antd/lib/typography/Text';
+import { TitleProps } from 'antd/lib/typography/Title';
+import React from 'react';
+import styled, {
+	FlattenSimpleInterpolation,
+} from 'styled-components';
+
+import { IStyledClass } from './types';
+
+const styledClass = (props: IStyledClass): FlattenSimpleInterpolation =>
+	props.styledclass;
+
+type TStyledCol = AntD.ColProps & IStyledClass;
+const StyledCol = styled(AntD.Col)<TStyledCol>`
+	${styledClass}
+`;
+
+type TStyledRow = AntD.RowProps & IStyledClass;
+const StyledRow = styled(AntD.Row)<TStyledRow>`
+	${styledClass}
+`;
+
+type TStyledDivider = AntD.DividerProps & IStyledClass;
+const StyledDivider = styled(AntD.Divider)<TStyledDivider>`
+	${styledClass}
+`;
+
+type TStyledSpace = AntD.SpaceProps & IStyledClass;
+const StyledSpace = styled(AntD.Space)<TStyledSpace>`
+	${styledClass}
+`;
+
+type TStyledTabs = AntD.TabsProps & IStyledClass;
+const StyledTabs = styled(AntD.Divider)<TStyledTabs>`
+	${styledClass}
+`;
+
+type TStyledButton = AntD.ButtonProps & IStyledClass;
+const StyledButton = styled(AntD.Button)<TStyledButton>`
+	${styledClass}
+`;
+
+const { Text } = AntD.Typography;
+type TStyledTypographyText = TextProps & IStyledClass;
+const StyledTypographyText = styled(Text)<TStyledTypographyText>`
+	${styledClass}
+`;
+
+const { Title } = AntD.Typography;
+type TStyledTypographyTitle = TitleProps & IStyledClass;
+const StyledTypographyTitle = styled(Title)<TStyledTypographyTitle>`
+	${styledClass}
+`;
+
+type TStyledDiv = React.HTMLAttributes<HTMLDivElement> & IStyledClass;
+const StyledDiv = styled.div<TStyledDiv>`
+	${styledClass}
+`;
+
+const StyledTypography = {
+	Text: StyledTypographyText,
+	Title: StyledTypographyTitle,
+};
+export {
+	StyledButton,
+	StyledCol,
+	StyledDiv,
+	StyledDivider,
+	StyledRow,
+	StyledSpace,
+	StyledTabs,
+	StyledTypography,
+};

frontend/src/components/Styled/styles.ts

@@ -0,0 +1,41 @@
+import { css, FlattenSimpleInterpolation } from 'styled-components';
+
+const cssProprty = (key: string, value): FlattenSimpleInterpolation =>
+	key &&
+	value &&
+	css`
+		${key}: ${value};
+	`;
+
+interface IFlexProps {
+	flexDirection?: string; // Need to replace this with exact css props. Not able to find any :(
+	flex?: number | string;
+}
+export const Flex = ({
+	flexDirection,
+	flex,
+}: IFlexProps): FlattenSimpleInterpolation => css`
+	${cssProprty('flex-direction', flexDirection)}
+	${cssProprty('flex', flex)}
+`;
+
+interface IDisplayProps {
+	display?: string;
+}
+export const Display = ({
+	display,
+}: IDisplayProps): FlattenSimpleInterpolation => css`
+	${cssProprty('display', display)}
+`;
+
+interface ISpacingProps {
+	margin?: string;
+	padding?: string;
+}
+export const Spacing = ({
+	margin,
+	padding,
+}: ISpacingProps): FlattenSimpleInterpolation => css`
+	${cssProprty('margin', margin)}
+	${cssProprty('padding', padding)}
+`;

frontend/src/components/Styled/types.ts

@@ -0,0 +1,5 @@
+import { FlattenSimpleInterpolation } from 'styled-components';
+
+export interface IStyledClass {
+	styledclass?: FlattenSimpleInterpolation[];
+}

frontend/src/container/GantChart/Trace/index.tsx

@@ -1,9 +1,7 @@
 import { CaretDownFilled, CaretRightFilled } from '@ant-design/icons';
-import { Col, Row } from 'antd';
+import { Col } from 'antd';
-import {
+import { StyledCol, StyledRow } from 'components/Styled';
-	IIntervalUnit,
+import { IIntervalUnit } from 'container/TraceDetail/utils';
-	resolveTimeFromInterval,
-} from 'container/TraceDetail/utils';
 import useThemeMode from 'hooks/useThemeMode';
 import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants';
 import React, { useEffect, useRef, useState } from 'react';
@@ -18,6 +16,7 @@ import {
 	CardContainer,
 	CaretContainer,
 	HoverCard,
+	styles,
 	Wrapper,
 } from './styles';
 
@@ -106,7 +105,7 @@ const Trace = (props: TraceProps): JSX.Element => {
 	const inMsCount = value;
 	const nodeLeftOffset = ((startTime - globalStart) * 1e2) / globalSpread;
 	const width = (value * 1e2) / (globalSpread * 1e6);
-	const panelWidth = SPAN_DETAILS_LEFT_COL_WIDTH - level * (16 + 1) - 16;
+	const panelWidth = SPAN_DETAILS_LEFT_COL_WIDTH - level * (16 + 1) - 48;
 
 	return (
 		<>
@@ -124,8 +123,8 @@ const Trace = (props: TraceProps): JSX.Element => {
 				/>
 
 				<CardContainer onClick={onClick}>
-					<Col flex={`${panelWidth}px`} style={{ overflow: 'hidden' }}>
+					<StyledCol flex={`${panelWidth}px`} styledclass={[styles.overFlowHidden]}>
-						<Row style={{ flexWrap: 'nowrap' }}>
+						<StyledRow styledclass={[styles.flexNoWrap]}>
 							<Col>
 								{totalSpans !== 1 && (
 									<CardComponent isDarkMode={isDarkMode} onClick={onClickTreeExpansion}>
@@ -139,8 +138,8 @@ const Trace = (props: TraceProps): JSX.Element => {
 							<Col>
 								<SpanName name={name} serviceName={serviceName} />
 							</Col>
-						</Row>
+						</StyledRow>
-					</Col>
+					</StyledCol>
 					<Col flex={'1'}>
 						<SpanLength
 							leftOffset={nodeLeftOffset.toString()}

frontend/src/container/GantChart/Trace/styles.ts

@@ -75,3 +75,16 @@ export const HoverCard = styled.div<HoverCardProps>`
 	height: 3rem;
 	opacity: 0.5;
 `;
+
+const flexNoWrap = css`
+	flex-wrap: nowrap;
+`;
+
+const overFlowHidden = css`
+	overflow: hidden;
+`;
+
+export const styles = {
+	flexNoWrap,
+	overFlowHidden,
+};

frontend/src/container/GantChart/index.tsx

@@ -41,7 +41,6 @@ const GanttChart = (props: GanttChartProps): JSX.Element => {
 				<CardContainer>
 					<CollapseButton
 						onClick={handleCollapse}
-						style={{ fontSize: '1.2rem' }}
 						title={isExpandAll ? 'Collapse All' : 'Expand All'}
 					>
 						{isExpandAll ? <MinusSquareOutlined /> : <PlusSquareOutlined />}

frontend/src/container/GantChart/styles.ts

@@ -44,4 +44,5 @@ export const CollapseButton = styled.div`
 	position: absolute;
 	top: 0;
 	left: 0;
+	font-size: 1.2rem;
 `;

frontend/src/container/Timeline/index.tsx

@@ -1,9 +1,10 @@
-import { INTERVAL_UNITS } from 'container/TraceDetail/utils';
+import { StyledDiv } from 'components/Styled';
+import { IIntervalUnit, INTERVAL_UNITS } from 'container/TraceDetail/utils';
 import useThemeMode from 'hooks/useThemeMode';
 import React, { useEffect, useState } from 'react';
 import { useMeasure } from 'react-use';
 
-import styles from './style.module.css';
+import { styles, Svg, TimelineInterval } from './styles';
 import { Interval } from './types';
 import { getIntervals, getIntervalSpread } from './utils';
 
@@ -14,7 +15,7 @@ const Timeline = ({
 	traceMetaData,
 	globalTraceMetadata,
 	setIntervalUnit,
-}: TimelineProps) => {
+}: TimelineProps): JSX.Element => {
 	const [ref, { width }] = useMeasure<HTMLDivElement>();
 	const { isDarkMode } = useThemeMode();
 
@@ -51,12 +52,10 @@ const Timeline = ({
 	}, []);
 
 	return (
-		<div ref={ref} style={{ flex: 1, overflow: 'inherit' }}>
+		<StyledDiv ref={ref} styledclass={[styles.timelineContainer]}>
-			<svg
+			<Svg
-				style={{ overflow: 'inherit' }}
 				viewBox={`0 0 ${width} ${Timeline_Height}`}
 				xmlns="http://www.w3.org/2000/svg"
-				className={styles['svg-container']}
 			>
 				<line
 					x1={Timeline_H_Spacing}
@@ -68,13 +67,11 @@ const Timeline = ({
 				/>
 				{intervals &&
 					intervals.map((interval, index) => (
-						<g
+						<TimelineInterval
-							transform={`translate(${
+							transform={`translate(${Timeline_H_Spacing +
-								Timeline_H_Spacing +
 								(interval.percentage * (width - 2 * Timeline_H_Spacing)) / 100
-							},0)`}
+								},0)`}
-							className={styles['timeline-tick']}
+							key={`${interval.label + interval.percentage + index}`}
-							key={interval.label + interval.percentage + index}
 						>
 							<text y={13} fill={isDarkMode ? 'white' : 'black'}>
 								{interval.label}
@@ -85,18 +82,18 @@ const Timeline = ({
 								stroke={isDarkMode ? 'white' : 'black'}
 								strokeWidth="1"
 							/>
-						</g>
+						</TimelineInterval>
 					))}
-			</svg>
+			</Svg>
-		</div>
+		</StyledDiv>
 	);
 };
 
 interface TimelineProps {
 	traceMetaData: object;
-	globalTraceMetadata: object;
+	globalTraceMetadata: Record<string, number>;
-	intervalUnit: object;
+	intervalUnit: IIntervalUnit;
-	setIntervalUnit: Function;
+	setIntervalUnit: VoidFunction;
 }
 
 export default Timeline;

frontend/src/container/Timeline/style.module.css

@@ -1,8 +0,0 @@
-.svg-container {
-	overflow: visible;
-	position: absolute;
-}
-.timeline-tick {
-	text-anchor: middle;
-	font-size: 0.6rem;
-}

frontend/src/container/Timeline/styles.ts

@@ -0,0 +1,19 @@
+import styled, { css } from 'styled-components';
+
+const timelineContainer = css`
+	flex: 1;
+	overflow: visible;
+`;
+
+export const styles = {
+	timelineContainer,
+};
+export const Svg = styled.svg`
+	overflow: visible !important;
+	position: absolute;
+`;
+
+export const TimelineInterval = styled.g`
+	text-anchor: middle;
+	font-size: 0.6rem;
+`;

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

@@ -1,16 +1,17 @@
-import { Button, Collapse, Modal } from 'antd';
+import { Collapse, Modal } from 'antd';
+import { StyledButton } from 'components/Styled';
 import useThemeMode from 'hooks/useThemeMode';
 import React, { useState } from 'react';
 import { ITraceTree } from 'types/api/trace/getTraceItem';
 
-import { CustomSubText, CustomSubTitle } from './styles';
+import { CustomSubText, CustomSubTitle, styles } from './styles';
+// import Editor from 'components/Editor';
 
 const { Panel } = Collapse;
 
 const ErrorTag = ({ event }: ErrorTagProps): JSX.Element => {
 	const [isOpen, setIsOpen] = useState(false);
 	const { isDarkMode } = useThemeMode();
-	// const useTextRef = useRef('');
 
 	const [text, setText] = useState({
 		text: '',
@@ -28,6 +29,7 @@ const ErrorTag = ({ event }: ErrorTagProps): JSX.Element => {
 
 				return (
 					<Collapse
+						key={`${name}${JSON.stringify(attributeMap)}`}
 						defaultActiveKey={[name || attributeMap.event]}
 						expandIconPosition="right"
 						key={name}
@@ -47,20 +49,19 @@ const ErrorTag = ({ event }: ErrorTagProps): JSX.Element => {
 											{value}
 											<br />
 											{isEllipsed && (
-												<Button
+												<StyledButton
-													style={{ padding: 0, margin: 0 }}
+													styledclass={[styles.removeMargin, styles.removePadding]}
 													onClick={(): void => {
 														onToggleHandler(true);
 														setText({
 															subText: value,
 															text: event,
 														});
-														// useTextRef.current = value;
 													}}
 													type="link"
 												>
 													View full log event message
-												</Button>
+												</StyledButton>
 											)}
 										</CustomSubText>
 									</>

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

@@ -1,4 +1,5 @@
 import { Space, Tabs, Typography } from 'antd';
+import { StyledSpace, StyledTabs } from 'components/Styled';
 import useThemeMode from 'hooks/useThemeMode';
 import React from 'react';
 import { ITraceTree } from 'types/api/trace/getTraceItem';
@@ -10,6 +11,7 @@ import {
 	CustomSubTitle,
 	CustomText,
 	CustomTitle,
+	styles,
 } from './styles';
 
 const { TabPane } = Tabs;
@@ -25,7 +27,11 @@ const SelectedSpanDetails = (props: SelectedSpanDetailsProps): JSX.Element => {
 
 	return (
 		<CardContainer>
-			<Space direction="vertical" style={{ marginLeft: '0.5rem' }}>
+			<StyledSpace
+				styledclass={[styles.selectedSpanDetailsContainer]}
+				direction="vertical"
+				style={{ marginLeft: '0.5rem' }}
+			>
 				<strong> Details for selected Span </strong>
 				<Space direction="vertical" size={2}>
 					<CustomTitle>Service</CustomTitle>
@@ -35,13 +41,16 @@ const SelectedSpanDetails = (props: SelectedSpanDetailsProps): JSX.Element => {
 					<CustomTitle>Operation</CustomTitle>
 					<CustomText>{name}</CustomText>
 				</Space>
-			</Space>
+			</StyledSpace>
-			<Tabs defaultActiveKey="1" style={{ marginTop: '1rem' }}>
+			<StyledTabs
+				styledclass={[styles.spanEventsTabsContainer]}
+				defaultActiveKey="1"
+			>
 				<TabPane tab="Tags" key="1">
 					{tags.length !== 0 ? (
 						tags.map((tags) => {
 							return (
-								<React.Fragment key={tags.key}>
+								<React.Fragment key={JSON.stringify(tags)}>
 									{tags.value && (
 										<>
 											<CustomSubTitle>{tags.key}</CustomSubTitle>
@@ -64,7 +73,7 @@ const SelectedSpanDetails = (props: SelectedSpanDetailsProps): JSX.Element => {
 						<Typography>No events data in selected span</Typography>
 					)}
 				</TabPane>
-			</Tabs>
+			</StyledTabs>
 		</CardContainer>
 	);
 };

frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts

@@ -1,5 +1,5 @@
 import { Typography } from 'antd';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 const { Text, Title, Paragraph } = Typography;
 
 export const CustomTitle = styled(Title)`
@@ -44,3 +44,24 @@ export const CardContainer = styled.div`
 	flex: 1;
 	overflow-y: auto;
 `;
+
+const removeMargin = css`
+	margin: 0;
+`;
+const removePadding = css`
+	padding: 0;
+`;
+
+const selectedSpanDetailsContainer = css`
+	margin-left: 0.5rem;
+`;
+
+const spanEventsTabsContainer = css`
+	margin-top: 1rem;
+`;
+export const styles = {
+	removeMargin,
+	removePadding,
+	selectedSpanDetailsContainer,
+	spanEventsTabsContainer,
+};

frontend/src/container/TraceDetail/TraceGraph.module.css

@@ -1,3 +0,0 @@
-.trace-detail-content-spacing {
-	margin-right: 1rem;
-}

frontend/src/container/TraceDetail/index.tsx

@@ -1,5 +1,14 @@
 import { FilterOutlined } from '@ant-design/icons';
-import { Button, Col, Divider, Row, Space, Typography } from 'antd';
+import { Button, Col } from 'antd';
+import {
+	StyledCol,
+	StyledDiv,
+	StyledDivider,
+	StyledRow,
+	StyledSpace,
+	StyledTypography,
+} from 'components/Styled';
+import * as StyledStyles from 'components/Styled/styles';
 import GanttChart from 'container/GantChart';
 import { getNodeById } from 'container/GantChart/utils';
 import Timeline from 'container/Timeline';
@@ -15,9 +24,8 @@ import { getSpanTreeMetadata } from 'utils/getSpanTreeMetadata';
 import { spanToTreeUtil } from 'utils/spanToTree';
 
 import SelectedSpanDetails from './SelectedSpanDetails';
-import styles from './TraceGraph.module.css';
+import * as styles from './styles';
-import { getSortedData } from './utils';
+import { getSortedData, IIntervalUnit, INTERVAL_UNITS } from './utils';
-import { INTERVAL_UNITS } from './utils';
 
 const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
 	const spanServiceColors = useMemo(
@@ -28,7 +36,9 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
 	const urlQuery = useUrlQuery();
 	const [spanId] = useState<string | null>(urlQuery.get('spanId'));
 
-	const [intervalUnit, setIntervalUnit] = useState(INTERVAL_UNITS[0]);
+	const [intervalUnit, setIntervalUnit] = useState<IIntervalUnit>(
+		INTERVAL_UNITS[0],
+	);
 	// const [searchSpanString, setSearchSpanString] = useState('');
 	const [activeHoverId, setActiveHoverId] = useState<string>('');
 	const [activeSelectedId, setActiveSelectedId] = useState<string>(spanId || '');
@@ -74,20 +84,20 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
 	};
 
 	return (
-		<Row style={{ flex: 1 }}>
+		<StyledRow styledclass={[StyledStyles.Flex({ flex: 1 })]}>
-			<Col flex={'auto'} style={{ display: 'flex', flexDirection: 'column' }}>
+			<StyledCol flex={'auto'} styledclass={styles.leftContainer}>
-				<Row className={styles['trace-detail-content-spacing']}>
+				<StyledRow styledclass={styles.flameAndTimelineContainer}>
-					<Col
+					<StyledCol
+						styledclass={styles.traceMetaDataContainer}
 						flex={`${SPAN_DETAILS_LEFT_COL_WIDTH}px`}
-						style={{ alignItems: 'center', display: 'flex', flexDirection: 'column' }}
 					>
-						<Typography.Title level={5} style={{ margin: 0 }}>
+						<StyledTypography.Title styledclass={[styles.removeMargin]} level={5}>
 							Trace Details
-						</Typography.Title>
+						</StyledTypography.Title>
-						<Typography.Text style={{ margin: 0 }}>
+						<StyledTypography.Text styledclass={[styles.removeMargin]}>
 							{traceMetaData.totalSpans} Span
-						</Typography.Text>
+						</StyledTypography.Text>
-					</Col>
+					</StyledCol>
 					<Col flex={'auto'}>
 						<TraceFlameGraph
 							treeData={tree}
@@ -99,9 +109,9 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
 							intervalUnit={intervalUnit}
 						/>
 					</Col>
-				</Row>
+				</StyledRow>
-				<Row style={{ marginTop: '2rem' }}>
+				<StyledRow styledclass={[styles.traceDateAndTimelineContainer]}>
-					<Col
+					<StyledCol
 						flex={`${SPAN_DETAILS_LEFT_COL_WIDTH}px`}
 						style={{
 							display: 'flex',
@@ -110,24 +120,24 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
 						}}
 					>
 						{dayjs(traceMetaData.globalStart / 1e6).format('hh:mm:ssa MM/DD')}
-					</Col>
+					</StyledCol>
-					<Col
+					<StyledCol flex="auto" styledclass={[styles.timelineContainer]}>
-						flex="auto"
-						style={{ overflow: 'visible' }}
-						className={styles['trace-detail-content-spacing']}
-					>
 						<Timeline
 							globalTraceMetadata={globalTraceMetadata}
 							traceMetaData={traceMetaData}
 							intervalUnit={intervalUnit}
 							setIntervalUnit={setIntervalUnit}
 						/>
-					</Col>
+					</StyledCol>
-					<Divider style={{ height: '100%', margin: '0' }} />
+					<StyledDivider styledclass={[styles.verticalSeparator]} />
-				</Row>
+				</StyledRow>
-				<Row
+				<StyledRow
-					className={styles['trace-detail-content-spacing']}
+					styledclass={[
-					style={{ margin: '1.5rem 1rem 0.5rem' }}
+						styles.traceDetailContentSpacing,
+						StyledStyles.Spacing({
+							margin: '1.5rem 1rem 0.5rem',
+						}),
+					]}
 				>
 					<Col flex={`${SPAN_DETAILS_LEFT_COL_WIDTH}px`}>
 						{/* <Search
@@ -138,31 +148,17 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
 						/> */}
 					</Col>
 					<Col flex={'auto'}>
-						<Space
+						<StyledSpace styledclass={[styles.floatRight]}>
-							style={{
-								float: 'right',
-							}}
-						>
 							<Button onClick={onFocusSelectedSpanHandler} icon={<FilterOutlined />}>
 								Focus on selected span
 							</Button>
 							<Button type="default" onClick={onResetHandler}>
 								Reset Focus
 							</Button>
-						</Space>
+						</StyledSpace>
 					</Col>
-				</Row>
+				</StyledRow>
-				<div
+				<StyledDiv styledclass={[styles.ganttChartContainer]}>
-					className={styles['trace-detail-content-spacing']}
-					style={{
-						display: 'flex',
-						flexDirection: 'column',
-						position: 'relative',
-						flex: 1,
-						overflowY: 'auto',
-						overflowX: 'hidden',
-					}}
-				>
 					<GanttChart
 						traceMetaData={traceMetaData}
 						data={tree}
@@ -173,24 +169,15 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
 						spanId={spanId || ''}
 						intervalUnit={intervalUnit}
 					/>
-				</div>
+				</StyledDiv>
-			</Col>
+			</StyledCol>
 			<Col>
-				<Divider style={{ height: '100%', margin: '0' }} type="vertical" />
+				<StyledDivider styledclass={[styles.verticalSeparator]} type="vertical" />
 			</Col>
-			<Col
+			<StyledCol md={5} sm={5} styledclass={[styles.selectedSpanDetailContainer]}>
-				md={5}
-				sm={5}
-				style={{
-					height: '100%',
-					position: 'relative',
-					display: 'flex',
-					flexDirection: 'column',
-				}}
-			>
 				<SelectedSpanDetails tree={getSelectedNode} />
-			</Col>
+			</StyledCol>
-		</Row>
+		</StyledRow>
 	);
 };
 

frontend/src/container/TraceDetail/styles.ts

@@ -0,0 +1,79 @@
+import { css } from 'styled-components';
+
+/**
+ * Styles for the left container. Containers flamegraph, timeline and gantt chart
+ */
+export const leftContainer = [
+	css`
+		display: flex;
+		flex-direction: column;
+	`,
+];
+
+/**
+ * Styles for the top container. Contains TotalSpans, FlameGraph and Timeline.
+ */
+export const flameAndTimelineContainer = [
+	css`
+		margin: 0 1rem 0 0;
+	`,
+];
+
+export const traceMetaDataContainer = [
+	css`
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	`,
+];
+
+export const traceDateAndTimelineContainer = css`
+	margin-top: 2rem;
+`;
+
+export const traceDateTimeContainer = css`
+	display: flex;
+	aligh-items: center;
+	justify-content: center;
+`;
+export const timelineContainer = css`
+	overflow: visible;
+	margin: 0 1rem 0 0;
+`;
+export const ganttChartContainer = css`
+	margin: 1.5rem 1rem 0.5rem;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+`;
+
+export const selectedSpanDetailContainer = css`
+	height: 100%;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+`;
+
+
+/**
+ * Generic / Common styles
+ */
+
+export const verticalSeparator = css`
+	height: 100%;
+	margin: 0;
+`;
+
+export const traceDetailContentSpacing = css`
+	margin: 0 1rem 0 0;
+`;
+
+export const floatRight = css`
+	float: right;
+`;
+export const removeMargin = css`
+	margin: 0;
+`;

frontend/src/container/TraceFlameGraph/index.tsx

@@ -1,5 +1,4 @@
 import Color from 'color';
-import { ITraceMetaData } from 'container/GantChart';
 import {
 	IIntervalUnit,
 	resolveTimeFromInterval,

frontend/src/store/actions/index.ts

@@ -4,5 +4,6 @@ export * from './global';
 export * from './metrics';
 export * from './MetricsActions';
 export * from './serviceMap';
+export * from './traces';
 export * from './types';
 export * from './usage';