GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 17:48:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Palash Gupta 2023-01-23 10:40:27 +05:30 committed by GitHub
parent 5f3ca045df
commit f75e688b32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 55 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/container/TraceDetail/Missingtrace.tsx
View File

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

5
frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
View File

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

107
frontend/src/container/TraceDetail/index.tsx
View File

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

7
frontend/src/container/TraceDetail/styles.ts
View File

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