diff --git a/frontend/src/container/GantChart/GantChart.styles.scss b/frontend/src/container/GantChart/GantChart.styles.scss new file mode 100644 index 0000000000..cc1e828842 --- /dev/null +++ b/frontend/src/container/GantChart/GantChart.styles.scss @@ -0,0 +1,16 @@ +.span-container { + .spanDetails { + position: absolute; + height: 50px; + padding: 8px; + min-width: 150px; + background: lightcyan; + color: black; + bottom: 24px; + left: 0; + + display: flex; + justify-content: center; + align-items: center; + } +} diff --git a/frontend/src/container/GantChart/Span/index.tsx b/frontend/src/container/GantChart/Span/index.tsx new file mode 100644 index 0000000000..23fc000ac3 --- /dev/null +++ b/frontend/src/container/GantChart/Span/index.tsx @@ -0,0 +1,96 @@ +import '../GantChart.styles.scss'; + +import { Popover, Typography } from 'antd'; +import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils'; +import dayjs from 'dayjs'; +import { useIsDarkMode } from 'hooks/useDarkMode'; +import { useEffect } from 'react'; +import { toFixed } from 'utils/toFixed'; + +import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles'; + +interface SpanLengthProps { + globalStart: number; + startTime: number; + name: string; + width: string; + leftOffset: string; + bgColor: string; + inMsCount: number; +} + +function Span(props: SpanLengthProps): JSX.Element { + const { + width, + leftOffset, + bgColor, + inMsCount, + startTime, + name, + globalStart, + } = props; + const isDarkMode = useIsDarkMode(); + const { time, timeUnitName } = convertTimeToRelevantUnit(inMsCount); + + useEffect(() => { + document.documentElement.scrollTop = document.documentElement.clientHeight; + document.documentElement.scrollLeft = document.documentElement.clientWidth; + }, []); + + const getContent = (): JSX.Element => { + const timeStamp = dayjs(startTime).format('h:mm:ss:SSS A'); + const startTimeInMs = startTime - globalStart; + return ( +
+ + {' '} + Duration : {inMsCount} + +
+ + Start Time: {startTimeInMs}ms [{timeStamp}]{' '} + +
+ ); + }; + + return ( + + + +
+ + + +
+ + {`${toFixed( + time, + 2, + )} ${timeUnitName}`} + + ); +} + +export default Span; diff --git a/frontend/src/container/GantChart/SpanLength/styles.ts b/frontend/src/container/GantChart/Span/styles.ts similarity index 100% rename from frontend/src/container/GantChart/SpanLength/styles.ts rename to frontend/src/container/GantChart/Span/styles.ts diff --git a/frontend/src/container/GantChart/SpanLength/index.tsx b/frontend/src/container/GantChart/SpanLength/index.tsx deleted file mode 100644 index 9e3611bb01..0000000000 --- a/frontend/src/container/GantChart/SpanLength/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils'; -import { useIsDarkMode } from 'hooks/useDarkMode'; -import { toFixed } from 'utils/toFixed'; - -import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles'; - -interface SpanLengthProps { - width: string; - leftOffset: string; - bgColor: string; - inMsCount: number; -} - -function SpanLength(props: SpanLengthProps): JSX.Element { - const { width, leftOffset, bgColor, inMsCount } = props; - const isDarkMode = useIsDarkMode(); - const { time, timeUnitName } = convertTimeToRelevantUnit(inMsCount); - return ( - - - - {`${toFixed( - time, - 2, - )} ${timeUnitName}`} - - ); -} - -export default SpanLength; diff --git a/frontend/src/container/GantChart/Trace/index.tsx b/frontend/src/container/GantChart/Trace/index.tsx index d38e3594ae..05a19a8268 100644 --- a/frontend/src/container/GantChart/Trace/index.tsx +++ b/frontend/src/container/GantChart/Trace/index.tsx @@ -16,7 +16,7 @@ import { import { ITraceTree } from 'types/api/trace/getTraceItem'; import { ITraceMetaData } from '..'; -import SpanLength from '../SpanLength'; +import Span from '../Span'; import SpanName from '../SpanName'; import { getMetaDataFromSpanTree, getTopLeftFromBody } from '../utils'; import { @@ -169,7 +169,10 @@ function Trace(props: TraceProps): JSX.Element { - - {isExpandAll ? : } + {isExpandAll ? ( + + ) : ( + + )} tree?.name, [tree?.name]); - const OverLayComponentServiceName = useMemo(() => tree?.serviceName, [ - tree?.serviceName, - ]); - const [isOpen, setIsOpen] = useState(false); const [text, setText] = useState({ @@ -102,20 +91,27 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element { styledclass={[styles.selectedSpanDetailsContainer, styles.overflow]} direction="vertical" > - Details for selected Span + + {' '} + Details for selected Span{' '} + + + Service - Service + {tree.serviceName} - - {tree.serviceName} - + Operation - Operation - - {tree.name} - + {tree.name} - + - + ); } diff --git a/frontend/src/container/TraceDetail/TraceDetails.styles.scss b/frontend/src/container/TraceDetail/TraceDetails.styles.scss new file mode 100644 index 0000000000..676160aecc --- /dev/null +++ b/frontend/src/container/TraceDetail/TraceDetails.styles.scss @@ -0,0 +1,13 @@ +.span-details-sider { + &.dark { + .ant-layout-sider-trigger { + background-color: black !important; + } + } + + &.light { + .ant-layout-sider-trigger { + background-color: white !important; + } + } +} diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx index 658b1a4abe..bdf857bec7 100644 --- a/frontend/src/container/TraceDetail/index.tsx +++ b/frontend/src/container/TraceDetail/index.tsx @@ -1,5 +1,9 @@ +import './TraceDetails.styles.scss'; + import { FilterOutlined } from '@ant-design/icons'; import { Button, Col, Typography } from 'antd'; +import Sider from 'antd/es/layout/Sider'; +import cx from 'classnames'; import { StyledCol, StyledDiv, @@ -14,6 +18,7 @@ import { getNodeById } from 'container/GantChart/utils'; import Timeline from 'container/Timeline'; import TraceFlameGraph from 'container/TraceFlameGraph'; import dayjs from 'dayjs'; +import { useIsDarkMode } from 'hooks/useDarkMode'; import useUrlQuery from 'hooks/useUrlQuery'; import { spanServiceNameToColorMapping } from 'lib/getRandomColor'; import history from 'lib/history'; @@ -100,11 +105,6 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element { [activeSelectedId, treesData], ); - // const onSearchHandler = (value: string) => { - // setSearchSpanString(value); - // setTreeData(spanToTreeUtil(response[0].events)); - // }; - const onFocusSelectedSpanHandler = (): void => { const treeNode = getNodeById(activeSelectedId, tree); @@ -126,6 +126,9 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element { ); const isGlobalTimeVisible = tree && traceMetaData.globalStart; + const [collapsed, setCollapsed] = useState(false); + + const isDarkMode = useIsDarkMode(); return ( @@ -234,22 +237,38 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element { + - - tree)} - /> - + + setCollapsed(value)} + > + {!collapsed && ( + + tree)} + /> + + )} + ); } diff --git a/frontend/src/container/TraceDetail/styles.ts b/frontend/src/container/TraceDetail/styles.ts index 83dd9864e1..85a74f90b0 100644 --- a/frontend/src/container/TraceDetail/styles.ts +++ b/frontend/src/container/TraceDetail/styles.ts @@ -17,7 +17,7 @@ export const leftContainer = [ */ export const flameAndTimelineContainer = [ css` - margin: 0 1rem 0 0; + margin: 1rem 1rem 0 0; `, ]; @@ -44,7 +44,7 @@ export const timelineContainer = css` margin: 0 1rem 0 0; `; export const ganttChartContainer = css` - margin: 1.5rem 1rem 0.5rem; + margin: 0 1rem 0.5rem; display: flex; flex-direction: column; position: relative; @@ -54,6 +54,7 @@ export const ganttChartContainer = css` `; export const selectedSpanDetailContainer = css` + width: 100%; height: 100%; position: relative; display: flex;