Skip to content
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

Merged
merged 2 commits into from
May 11, 2022

Conversation

xoscar
Copy link
Collaborator

@xoscar xoscar commented May 11, 2022

Note: this is the first pass for the test results drawer. We'll be waiting for the final designs to fully implement the changes.

This PR moves the test results from the span detail/tab section to the bottom drawer.

Changes

  • Connects the test results component with the resizable drawer.

Fixes

Checklist

  • tested locally
  • added new dependencies
  • updated the docs
  • added a test

https://www.loom.com/share/432e43f773d64935b8d7e67de18445fb

@xoscar xoscar added this to the MVProduct milestone May 11, 2022
@xoscar xoscar self-assigned this May 11, 2022
@xoscar xoscar linked an issue May 11, 2022 that may be closed by this pull request
@@ -21,7 +21,6 @@ describe('Show Trace', () => {
cy.get('[data-cy=span-details-attributes]').should('be.visible');
cy.get('[data-cy=empty-assertion-table]').should('be.visible');

cy.get('[id*=tab-test-results').click();
cy.get('[data-cy=test-results]').should('be.visible');
cy.get('[data-cy=test-results]').should('exist');
Copy link
Collaborator Author

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

@@ -24,12 +24,6 @@ body {
background: #fbfbff;
}

.ant-typography {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The 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 🥴

@@ -0,0 +1,94 @@
import {Badge, Typography} from 'antd';
import {useSelector} from 'react-redux';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving it to its own component folder

onSelectSpan={onSelectSpan}
selectedSpan={selectedSpan}
/>
<TraceDrawer visiblePortion={visiblePortion} testResultDetails={testResultDetails} onSelectSpan={onSelectSpan} />
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trace drawer is whatever we show at the bottom of the page

return (
<ResizableDrawer open min={visiblePortion} max={max}>
<TraceTimeline
<TestResults
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now we show the test results instead of the timeline chart.

Copy link
Collaborator

@kdhamric kdhamric left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks awesome! If we can, lets push all the way through to the demo site - it is looking good.

@xoscar xoscar merged commit 8e2ef6c into main May 11, 2022
@xoscar xoscar deleted the 461-new-ux-trace-view-3-test-results branch May 11, 2022 21:29
Copy link
Contributor

@cescoferraro cescoferraro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the current component of TraceResult expands bigger the actual screen.
We need to take a look at this @xoscar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[New UX] Trace View # 3 (Test Results)
3 participants