diff --git a/frontend/package.json b/frontend/package.json index 48c33a04fc..458341f1cb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,8 +7,8 @@ "dev": "cross-env NODE_ENV=development webpack serve --progress", "build": "webpack --config=webpack.config.prod.js --progress", "prettify": "prettier --write .", - "lint": "eslint . --debug", - "lint:fix": "eslint . --fix --debug", + "lint": "eslint .", + "lint:fix": "eslint . --fix", "cypress:open": "cypress open", "cypress:run": "cypress run", "jest": "jest", diff --git a/frontend/src/components/Styled/index.ts b/frontend/src/components/Styled/index.ts new file mode 100644 index 0000000000..f740b81bb9 --- /dev/null +++ b/frontend/src/components/Styled/index.ts @@ -0,0 +1,32 @@ +import { Col, ColProps, Row, RowProps } from 'antd'; +import React from 'react'; +import styled, { + css, + DefaultTheme, + FlattenSimpleInterpolation, + ThemedCssFunction, +} from 'styled-components'; + +import { IStyledClass } from './types'; + +const styledClass = (props: IStyledClass): FlattenSimpleInterpolation => + props.styledClass; + +interface IStyledCol extends ColProps, IStyledClass {} +const StyledCol = styled(Col)` + ${styledClass} +`; + +interface IStyledRow extends RowProps, IStyledClass {} +const StyledRow = styled(Row)` + ${styledClass} +`; + +interface IStyledDiv + extends React.HTMLAttributes, + IStyledClass {} +const StyledDiv = styled.div` + ${styledClass} +`; + +export { StyledCol, StyledDiv, StyledRow }; diff --git a/frontend/src/components/Styled/styles.ts b/frontend/src/components/Styled/styles.ts new file mode 100644 index 0000000000..153ef27a94 --- /dev/null +++ b/frontend/src/components/Styled/styles.ts @@ -0,0 +1,41 @@ +import { css, FlattenSimpleInterpolation } from 'styled-components'; + +const cssProprty = (key: string, value: any): 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)} +`; diff --git a/frontend/src/components/Styled/types.ts b/frontend/src/components/Styled/types.ts new file mode 100644 index 0000000000..5d9dbb9054 --- /dev/null +++ b/frontend/src/components/Styled/types.ts @@ -0,0 +1,5 @@ +import { FlattenSimpleInterpolation } from 'styled-components'; + +export interface IStyledClass { + styledClass: FlattenSimpleInterpolation[]; +} diff --git a/frontend/src/container/TraceDetail/TraceGraph.module.css b/frontend/src/container/TraceDetail/TraceGraph.module.css deleted file mode 100644 index 9127050c97..0000000000 --- a/frontend/src/container/TraceDetail/TraceGraph.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.trace-detail-content-spacing { - margin-right: 1rem; -} diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx index 99d693fc85..57b602003b 100644 --- a/frontend/src/container/TraceDetail/index.tsx +++ b/frontend/src/container/TraceDetail/index.tsx @@ -1,21 +1,24 @@ -import React, { useEffect, useMemo, useState } from 'react'; -import { Col, Divider, Row, Typography, Space, Button } from 'antd'; import { FilterOutlined } from '@ant-design/icons'; +import { Button, Col, Divider, Row, Space, Typography } from 'antd'; +import { StyledCol, StyledDiv, StyledRow } 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'; import TraceFlameGraph from 'container/TraceFlameGraph'; import dayjs from 'dayjs'; +import useUrlQuery from 'hooks/useUrlQuery'; import { spanServiceNameToColorMapping } from 'lib/getRandomColor'; -import { getSortedData } from './utils'; +import history from 'lib/history'; +import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants'; +import React, { useEffect, useMemo, useState } from 'react'; import { ITraceTree, PayloadProps } from 'types/api/trace/getTraceItem'; import { getSpanTreeMetadata } from 'utils/getSpanTreeMetadata'; import { spanToTreeUtil } from 'utils/spanToTree'; + import SelectedSpanDetails from './SelectedSpanDetails'; -import useUrlQuery from 'hooks/useUrlQuery'; -import styles from './TraceGraph.module.css'; -import history from 'lib/history'; -import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants'; +import * as styles from './styles'; +import { getSortedData } from './utils'; import { INTERVAL_UNITS } from './utils'; const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => { @@ -73,9 +76,21 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => { }; return ( - - - + + + { intervalUnit={intervalUnit} /> - + { > {dayjs(traceMetaData.globalStart / 1e6).format('hh:mm:ssa MM/DD')} - { intervalUnit={intervalUnit} setIntervalUnit={setIntervalUnit} /> - + - {/* { - -
+ { spanId={spanId || ''} intervalUnit={intervalUnit} /> -
- + + @@ -189,7 +221,7 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => { > - + ); }; diff --git a/frontend/src/container/TraceDetail/styles.ts b/frontend/src/container/TraceDetail/styles.ts new file mode 100644 index 0000000000..f4e99ed33d --- /dev/null +++ b/frontend/src/container/TraceDetail/styles.ts @@ -0,0 +1,5 @@ +import * as StyledStyles from 'components/Styled/styles'; + +export const traceDetailContentSpacing = StyledStyles.Spacing({ + margin: '0 1rem 0 0', +});