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

feat: PR review changes

Browse Source
This commit is contained in:
Pranshu Chittora 2022-03-16 16:05:21 +05:30
parent 9404768f9d
commit 7f3d9e2e35
No known key found for this signature in database
GPG Key ID: 3A9E57A016CC0626
5 changed files with 27 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/components/Styled/index.ts
View File

@ -3,10 +3,7 @@ import { TextProps } from 'antd/lib/typography/Text';
import { TitleProps } from 'antd/lib/typography/Title'; import { TitleProps } from 'antd/lib/typography/Title';
import React from 'react'; import React from 'react';
import styled, { import styled, {
css,
DefaultTheme,
FlattenSimpleInterpolation, FlattenSimpleInterpolation,
ThemedCssFunction,
} from 'styled-components'; } from 'styled-components';
import { IStyledClass } from './types'; import { IStyledClass } from './types';
@ -14,52 +11,50 @@ import { IStyledClass } from './types';
const styledClass = (props: IStyledClass): FlattenSimpleInterpolation => const styledClass = (props: IStyledClass): FlattenSimpleInterpolation =>
props.styledclass; props.styledclass;
interface IStyledCol extends AntD.ColProps, IStyledClass {} type TStyledCol = AntD.ColProps & IStyledClass;
const StyledCol = styled(AntD.Col)<IStyledCol>` const StyledCol = styled(AntD.Col)<TStyledCol>`
${styledClass} ${styledClass}
`; `;
interface IStyledRow extends AntD.RowProps, IStyledClass {} type TStyledRow = AntD.RowProps & IStyledClass;
const StyledRow = styled(AntD.Row)<IStyledRow>` const StyledRow = styled(AntD.Row)<TStyledRow>`
${styledClass} ${styledClass}
`; `;
interface IStyledDivider extends AntD.DividerProps, IStyledClass {} type TStyledDivider = AntD.DividerProps & IStyledClass;
const StyledDivider = styled(AntD.Divider)<IStyledDivider>` const StyledDivider = styled(AntD.Divider)<TStyledDivider>`
${styledClass} ${styledClass}
`; `;
interface IStyledSpace extends AntD.SpaceProps, IStyledClass {} type TStyledSpace = AntD.SpaceProps & IStyledClass;
const StyledSpace = styled(AntD.Space)<IStyledSpace>` const StyledSpace = styled(AntD.Space)<TStyledSpace>`
${styledClass} ${styledClass}
`; `;
interface IStyledTabs extends AntD.TabsProps, IStyledClass {} type TStyledTabs = AntD.TabsProps & IStyledClass;
const StyledTabs = styled(AntD.Divider)<IStyledTabs>` const StyledTabs = styled(AntD.Divider)<TStyledTabs>`
${styledClass} ${styledClass}
`; `;
interface IStyledButton extends AntD.ButtonProps, IStyledClass {} type TStyledButton = AntD.ButtonProps & IStyledClass;
const StyledButton = styled(AntD.Button)<IStyledButton>` const StyledButton = styled(AntD.Button)<TStyledButton>`
${styledClass} ${styledClass}
`; `;
const { Text } = AntD.Typography; const { Text } = AntD.Typography;
interface IStyledTypographyText extends TextProps, IStyledClass {} type TStyledTypographyText = TextProps & IStyledClass;
const StyledTypographyText = styled(Text)<IStyledTypographyText>` const StyledTypographyText = styled(Text)<TStyledTypographyText>`
${styledClass} ${styledClass}
`; `;
const { Title } = AntD.Typography; const { Title } = AntD.Typography;
interface IStyledTypographyTitle extends TitleProps, IStyledClass {} type TStyledTypographyTitle = TitleProps & IStyledClass;
const StyledTypographyTitle = styled(Title)<IStyledTypographyTitle>` const StyledTypographyTitle = styled(Title)<TStyledTypographyTitle>`
${styledClass} ${styledClass}
`; `;
interface IStyledDiv type TStyledDiv = React.HTMLAttributes<HTMLDivElement> & IStyledClass;
extends React.HTMLAttributes<HTMLDivElement>, const StyledDiv = styled.div<TStyledDiv>`
IStyledClass {}
const StyledDiv = styled.div<IStyledDiv>`
${styledClass} ${styledClass}
`; `;

2
frontend/src/components/Styled/styles.ts
View File

@ -1,6 +1,6 @@
import { css, FlattenSimpleInterpolation } from 'styled-components'; import { css, FlattenSimpleInterpolation } from 'styled-components';
const cssProprty = (key: string, value: any): FlattenSimpleInterpolation => const cssProprty = (key: string, value): FlattenSimpleInterpolation =>
key && key &&
value && value &&
css` css`

7
frontend/src/container/Timeline/index.tsx
View File

@ -1,5 +1,5 @@
import { StyledDiv } from 'components/Styled'; import { StyledDiv } from 'components/Styled';
import { INTERVAL_UNITS } from 'container/TraceDetail/utils'; import { IIntervalUnit, INTERVAL_UNITS } from 'container/TraceDetail/utils';
import useThemeMode from 'hooks/useThemeMode'; import useThemeMode from 'hooks/useThemeMode';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useMeasure } from 'react-use'; import { useMeasure } from 'react-use';
@ -68,8 +68,7 @@ const Timeline = ({
{intervals && {intervals &&
intervals.map((interval, index) => ( intervals.map((interval, index) => (
<TimelineInterval <TimelineInterval
transform={`translate(${ transform={`translate(${Timeline_H_Spacing +
Timeline_H_Spacing +
(interval.percentage * (width - 2 * Timeline_H_Spacing)) / 100 (interval.percentage * (width - 2 * Timeline_H_Spacing)) / 100
},0)`} },0)`}
key={`${interval.label + interval.percentage + index}`} key={`${interval.label + interval.percentage + index}`}
@ -93,7 +92,7 @@ const Timeline = ({
interface TimelineProps { interface TimelineProps {
traceMetaData: object; traceMetaData: object;
globalTraceMetadata: object; globalTraceMetadata: object;
intervalUnit: object; intervalUnit: IIntervalUnit;
setIntervalUnit: any; setIntervalUnit: any;
} }

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

@ -25,8 +25,7 @@ import { spanToTreeUtil } from 'utils/spanToTree';
import SelectedSpanDetails from './SelectedSpanDetails'; import SelectedSpanDetails from './SelectedSpanDetails';
import * as styles from './styles'; 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 TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
const spanServiceColors = useMemo( const spanServiceColors = useMemo(
@ -37,7 +36,9 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
const urlQuery = useUrlQuery(); const urlQuery = useUrlQuery();
const [spanId] = useState<string | null>(urlQuery.get('spanId')); 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 [searchSpanString, setSearchSpanString] = useState('');
const [activeHoverId, setActiveHoverId] = useState<string>(''); const [activeHoverId, setActiveHoverId] = useState<string>('');
const [activeSelectedId, setActiveSelectedId] = useState<string>(spanId || ''); const [activeSelectedId, setActiveSelectedId] = useState<string>(spanId || '');

1
frontend/src/container/TraceFlameGraph/index.tsx
View File

@ -5,7 +5,6 @@ import {
} from 'container/TraceDetail/utils'; } from 'container/TraceDetail/utils';
import useThemeMode from 'hooks/useThemeMode'; import useThemeMode from 'hooks/useThemeMode';
import React, { useLayoutEffect, useMemo, useState } from 'react'; import React, { useLayoutEffect, useMemo, useState } from 'react';
import { pushDStree } from 'store/actions';
import { ITraceTree } from 'types/api/trace/getTraceItem'; import { ITraceTree } from 'types/api/trace/getTraceItem';
import { toFixed } from 'utils/toFixed'; import { toFixed } from 'utils/toFixed';