-
Notifications
You must be signed in to change notification settings - Fork 71
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
💅🏽 461 [New UX] Trace View # 3 (Test Results) #477
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -24,12 +24,6 @@ body { | |
background: #fbfbff; | ||
} | ||
|
||
.ant-typography { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This was a wrong move, it was overwriting the color for the whole app 🥴 |
||
&& { | ||
color: #031849; | ||
} | ||
} | ||
|
||
#root { | ||
display: flex; | ||
flex-direction: column; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
import {Badge, Typography} from 'antd'; | ||
import {useSelector} from 'react-redux'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Moving it to its own component folder |
||
import {format, parseISO} from 'date-fns'; | ||
import SkeletonTable from 'components/SkeletonTable'; | ||
import {FC, Dispatch, PointerEventHandler, useMemo, SetStateAction, useEffect} from 'react'; | ||
import * as S from './TestResults.styled'; | ||
import TestResultSelectors from '../../selectors/TestResult.selectors'; | ||
import TraceService from '../../services/Trace.service'; | ||
import TraceAssertionsResultTable from '../TraceAssertionsTable/TraceAssertionsTable'; | ||
import {useElementSize} from '../../hooks/useElementSize'; | ||
import {useDoubleClick} from '../../hooks/useDoubleClick'; | ||
import GuidedTourService, {GuidedTours} from '../../services/GuidedTour.service'; | ||
import {Steps} from '../GuidedTour/traceStepList'; | ||
import {ITestRunResult} from '../../types/TestRunResult.types'; | ||
|
||
type TTestResultsProps = { | ||
result: ITestRunResult; | ||
onPointerDown?: PointerEventHandler; | ||
visiblePortion: number; | ||
setMax: Dispatch<SetStateAction<number>>; | ||
max: number; | ||
height?: number; | ||
setHeight?: Dispatch<SetStateAction<number>>; | ||
onSpanSelected(spanId: string): void; | ||
}; | ||
|
||
const TestResults: FC<TTestResultsProps> = ({ | ||
result: {resultId, trace, createdAt}, | ||
onSpanSelected, | ||
setMax, | ||
setHeight, | ||
visiblePortion, | ||
onPointerDown, | ||
...props | ||
}) => { | ||
const [squareRef, {height}] = useElementSize(); | ||
useEffect(() => setMax(height), [height, setMax]); | ||
|
||
const traceResultList = useSelector(TestResultSelectors.selectTestResultList(resultId)); | ||
const totalSpanCount = trace?.spans.length; | ||
const totalAssertionCount = traceResultList.length || 0; | ||
|
||
const {totalPassedCount, totalFailedCount} = useMemo( | ||
() => TraceService.getTestResultCount(traceResultList), | ||
[traceResultList] | ||
); | ||
|
||
const startDate = format(parseISO(createdAt), "EEEE, do MMMM yyyy 'at' HH:mm:ss"); | ||
|
||
return ( | ||
<S.Container | ||
data-cy="test-results" | ||
ref={squareRef} | ||
onClick={useDoubleClick(() => setHeight?.(height === props.height ? visiblePortion : height))} | ||
> | ||
<S.Header | ||
onPointerDown={onPointerDown} | ||
visiblePortion={visiblePortion} | ||
data-tour={GuidedTourService.getStep(GuidedTours.Trace, Steps.Timeline)} | ||
style={{height: visiblePortion}} | ||
> | ||
<S.HeaderText strong>Trace Information</S.HeaderText> | ||
<S.StartDateText>Trace Start {startDate}</S.StartDateText> | ||
<S.HeaderText strong> | ||
{totalSpanCount} total spans • {totalAssertionCount} selectors • {totalPassedCount + totalFailedCount} checks | ||
• <Badge count="P" style={{backgroundColor: '#49AA19'}} /> <S.CountNumber>{totalPassedCount}</S.CountNumber> | ||
<Badge count="F" /> <S.CountNumber>{totalFailedCount}</S.CountNumber> | ||
</S.HeaderText> | ||
</S.Header> | ||
<S.Content> | ||
<SkeletonTable loading={!trace}> | ||
{traceResultList.length ? ( | ||
traceResultList.map(assertionResult => | ||
assertionResult.spanListAssertionResult.length ? ( | ||
<TraceAssertionsResultTable | ||
key={assertionResult.assertion.assertionId} | ||
assertionResult={assertionResult} | ||
onSpanSelected={onSpanSelected} | ||
/> | ||
) : null | ||
) | ||
) : ( | ||
<S.EmptyStateContainer> | ||
<S.EmptyStateIcon /> | ||
<Typography.Text disabled>No Data</Typography.Text> | ||
</S.EmptyStateContainer> | ||
)} | ||
</SkeletonTable> | ||
</S.Content> | ||
</S.Container> | ||
); | ||
}; | ||
|
||
export default TestResults; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
// eslint-disable-next-line no-restricted-exports | ||
export {default} from './TestResults'; |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,10 +5,10 @@ import {ITestRunResult} from 'types/TestRunResult.types'; | |
import {ITest} from 'types/Test.types'; | ||
import Diagram, {SupportedDiagrams} from 'components/Diagram/Diagram'; | ||
import SpanDetail from 'components/SpanDetail'; | ||
import {TimelineDrawer} from './TimelineDrawer'; | ||
import {useHandleOnSpanSelectedCallback} from './hooks/useHandleOnSpanSelectedCallback'; | ||
import * as S from './Trace.styled'; | ||
import DiagramSwitcher from '../DiagramSwitcher'; | ||
import TraceDrawer from './TraceDrawer'; | ||
|
||
interface IProps { | ||
displayError: boolean; | ||
|
@@ -45,12 +45,7 @@ const Trace = ({displayError, visiblePortion, minHeight, test, testResultDetails | |
<SpanDetail resultId={testResultDetails?.resultId} testId={test?.testId} span={selectedSpan} /> | ||
</S.DetailsSection> | ||
</S.Main> | ||
<TimelineDrawer | ||
visiblePortion={visiblePortion} | ||
testResultDetails={testResultDetails} | ||
onSelectSpan={onSelectSpan} | ||
selectedSpan={selectedSpan} | ||
/> | ||
<TraceDrawer visiblePortion={visiblePortion} testResultDetails={testResultDetails} onSelectSpan={onSelectSpan} /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Trace drawer is whatever we show at the bottom of the page |
||
</> | ||
) : null; | ||
}; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,28 @@ | ||
import {useState} from 'react'; | ||
import {ITestRunResult} from 'types/TestRunResult.types'; | ||
import ResizableDrawer from '../ResizableDrawer/ResizableDrawer'; | ||
import {TraceTimeline} from './TraceTimeline'; | ||
import {ISpan} from '../../types/Span.types'; | ||
import TestResults from '../TestResults'; | ||
|
||
interface IProps { | ||
visiblePortion: number; | ||
testResultDetails: ITestRunResult | undefined; | ||
testResultDetails?: ITestRunResult; | ||
onSelectSpan: (spanId: string) => void; | ||
selectedSpan?: ISpan; | ||
} | ||
|
||
export const TimelineDrawer = ({ | ||
visiblePortion, | ||
onSelectSpan, | ||
selectedSpan, | ||
testResultDetails, | ||
}: IProps): JSX.Element => { | ||
const TraceDrawer: React.FC<IProps> = ({visiblePortion, onSelectSpan, testResultDetails}) => { | ||
const [max, setMax] = useState(600); | ||
|
||
return ( | ||
<ResizableDrawer open min={visiblePortion} max={max}> | ||
<TraceTimeline | ||
<TestResults | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Now we show the test results instead of the timeline chart. |
||
max={max} | ||
result={testResultDetails!} | ||
setMax={setMax} | ||
visiblePortion={visiblePortion} | ||
trace={testResultDetails?.trace!} | ||
onSelectSpan={onSelectSpan} | ||
selectedSpan={selectedSpan} | ||
onSpanSelected={onSelectSpan} | ||
/> | ||
</ResizableDrawer> | ||
); | ||
}; | ||
|
||
export default TraceDrawer; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The test results its only partially displayed when the trace view loads