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.

Sign up for GitHub

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

Jump to bottom

ref(trace) create issues waterfall component #80738

Draft
wants to merge 3 commits into
base: jb/issues/trace-view
Choose a base branch
from
Draft

ref(trace) create issues waterfall component #80738

wants to merge 3 commits into from
+704 −278

Conversation

JonasBa
Copy link
Member

@JonasBa JonasBa commented Nov 14, 2024 •
edited
Loading

Drop all the unnecessary stuff we dont need in this view and assemble a new trace view for the issues use-case. Wip right now as I'll further reduce the amount of code we are duplicating.

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Nov 14, 2024
@codecov Codecov
Copy link

codecov bot commented Nov 14, 2024 •
edited
Loading

Bundle Report

Changes will increase total bundle size by 43.64kB (0.14%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
app-webpack-bundle-array-push 31.89MB 43.64kB (0.14%) ⬆️

@codecov Codecov
Copy link

codecov bot commented Nov 14, 2024 •
edited
Loading

❌ 22 Tests Failed:

Tests completed Failed Passed Skipped
8224 22 8202 0
View the top 3 failed tests by shortest run time 
trace view search triggers search on load but does not steal focus from node param
Stack Traces | 0.912s run time 
Error: expect(element).toHaveFocus()

Expected element with focus:
  <div class="TraceRow   " style="position: absolute; transform: translate(0px, 24px);" tabindex="0"><div class="TraceLeftColumn"><div class="TraceLeftColumnInner" style="padding-left: 22px; transform: translateX(0px);"><div class="TraceChildrenCountWrapper"><span class="TraceVerticalConnector Orphaned" style="left: 0px;" /><button class="TraceChildrenCount"><div class="TraceChildrenCountContent" /><div class="TraceChildrenCountAction">+</div></button></div><img height="20" src="[object Object]" style="border-radius: 3px;" width="20" /><span class="TraceOperation">transaction-op-0</span><strong class="TraceEmDash"> — </strong><span class="TraceDescription">transaction-name-0</span></div></div><div class="TraceRightColumn Odd"><div class="TraceBar" style="transform: matrix(1,0,0,1,0,0; --inverse-span-scale: 1; background-color: rgb(82, 74, 126);" /><div class="TraceBarDuration" style="color: white; transform: translateX(492px);">1.00s</div><button class="TraceArrow"><svg style="transform: rotate(-90deg);" viewBox="0 0 16 16"><path d="M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z" /></svg></button></div></div>
Received element with focus:
  <body><div><div class="css-18uu46s-TraceExternalLayout eez7g981"><header class="css-6v9tyg-Header e1hxddla7"><div class="css-1syqweg-HeaderContent e1hxddla6"><nav … /></div><div class="css-18hmlrw-HeaderActions e1hxddla5"><div … /></div></header><div class="css-1q4m53n-TraceInnerLayout eez7g980"><div class="css-1ojm1q2-TraceToolbar e1ul5u5x1"><div … /><button … /><button … /><div … /></div><div class="css-1j23fgp-TraceGrid e1ul5u5x0" style="grid-template-columns: 1fr minmax(0px, NaN%); grid-template-rows: 1fr auto;"><div … /><div … /></div></div></div></div></body>
    at Object.<anonymous> (.../performance/newTraceDetails/trace.spec.tsx:1253:23)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at processTimers (node:internal/timers:514:7)
trace view pageload scrolls to event id query param
Stack Traces | 1.47s run time 
Error: expect(element).toHaveFocus()

Expected element with focus:
  <div class="TraceRow   " style="position: absolute; transform: translate(0px, 48px);" tabindex="0"><div class="TraceLeftColumn"><div class="TraceLeftColumnInner" style="padding-left: 44px; transform: translateX(0px);"><div class="TraceChildrenCountWrapper"><span class="TraceVerticalConnector Orphaned" style="left: -22px;" /><span class="TraceVerticalLastChildConnector" /><button class="TraceChildrenCount"><div class="TraceChildrenCountContent" /><div class="TraceChildrenCountAction">+</div></button></div><img height="20" src="[object Object]" style="border-radius: 3px;" width="20" /><span class="TraceOperation">transaction-op-1</span><strong class="TraceEmDash"> — </strong><span class="TraceDescription">transaction-name-1</span></div></div><div class="TraceRightColumn"><div class="TraceBar" style="transform: matrix(1,0,0,1,0,0; --inverse-span-scale: 1; background-color: rgb(82, 74, 126);" /><div class="TraceBarDuration" style="color: white; transform: translateX(492px);">2.00s</div><button class="TraceArrow"><svg style="transform: rotate(-90deg);" viewBox="0 0 16 16"><path d="M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z" /></svg></button></div></div>
Received element with focus:
  <body><div><div class="css-18uu46s-TraceExternalLayout eez7g981"><header class="css-6v9tyg-Header e1hxddla7"><div class="css-1syqweg-HeaderContent e1hxddla6"><nav … /></div><div class="css-18hmlrw-HeaderActions e1hxddla5"><div … /></div></header><div class="css-1q4m53n-TraceInnerLayout eez7g980"><div class="css-1ojm1q2-TraceToolbar e1ul5u5x1"><div … /><button … /><button … /><div … /></div><div class="css-1j23fgp-TraceGrid e1ul5u5x0" style="grid-template-columns: 1fr minmax(0px, NaN%); grid-template-rows: 1fr auto;"><div … /><div … /></div></div></div></div></body>

Ignored nodes: comments, script, style
...
    at .../performance/newTraceDetails/trace.spec.tsx:916:25
    at runWithExpensiveErrorDiagnosticsDisabled (.../sentry/sentry/node_modules/@.../dom/dist/config.js:47:12)
    at checkCallback (.../sentry/sentry/node_modules/@.../dom/dist/wait-for.js:124:77)
    at checkRealTimersCallback (.../sentry/sentry/node_modules/@.../dom/dist/wait-for.js:118:16)
    at Timeout.task [as _onTimeout] (.../sentry/sentry/node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)
    at listOnTimeout (node:internal/timers:573:17)
    at processTimers (node:internal/timers:514:7)
trace view pageload supports expanded node path
Stack Traces | 1.5s run time 
Error: expect(element).toHaveFocus()

Expected element with focus:
  <div class="TraceRow   " style="position: absolute; transform: translate(0px, 72px);" tabindex="0"><div class="TraceLeftColumn"><div class="TraceLeftColumnInner" style="padding-left: 66px; transform: translateX(0px);"><div class="TraceChildrenCountWrapper"><span class="TraceVerticalConnector Orphaned" style="left: -44px;" /><span class="TraceExpandedVerticalConnector" /><span class="TraceVerticalLastChildConnector" /><button class="TraceChildrenCount"><div class="TraceChildrenCountContent">5</div><div class="TraceChildrenCountAction"><svg style="transform: rotate(0deg);" viewBox="0 0 16 16"><path d="M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z" /></svg></div></button></div><span class="TraceOperation">http</span><strong class="TraceEmDash"> — </strong><span class="TraceDescription" title="request">request</span></div></div><div class="TraceRightColumn Odd"><div class="TraceBar" style="transform: matrix(0.04999995231628418,0,0,1,0,0; --inverse-span-scale: 20; background-color: rgb(232, 96, 112);" /><div class="TraceBarDuration" style="transform: translateX(28px);">100.00ms</div><button class="TraceArrow"><svg style="transform: rotate(-90deg);" viewBox="0 0 16 16"><path d="M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z" /></svg></button></div></div>
Received element with focus:
  <body><div><div class="css-18uu46s-TraceExternalLayout eez7g981"><header class="css-6v9tyg-Header e1hxddla7"><div class="css-1syqweg-HeaderContent e1hxddla6"><nav … /></div><div class="css-18hmlrw-HeaderActions e1hxddla5"><div … /></div></header><div class="css-1q4m53n-TraceInnerLayout eez7g980"><div class="css-1ojm1q2-TraceToolbar e1ul5u5x1"><div … /><button … /><button … /><div … /></div><div class="css-1j23fgp-TraceGrid e1ul5u5x0" style="grid-template-columns: 1fr minmax(0px, NaN%); grid-template-rows: 1fr auto;"><div … /><div … /></div></div></div></div></body>

Ignored nodes: comments, script, style
...
    at .../performance/newTraceDetails/trace.spec.tsx:927:25
    at runWithExpensiveErrorDiagnosticsDisabled (.../sentry/sentry/node_modules/@.../dom/dist/config.js:47:12)
    at checkCallback (.../sentry/sentry/node_modules/@.../dom/dist/wait-for.js:124:77)
    at checkRealTimersCallback (.../sentry/sentry/node_modules/@.../dom/dist/wait-for.js:118:16)
    at Timeout.task [as _onTimeout] (.../sentry/sentry/node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)
    at listOnTimeout (node:internal/timers:573:17)
    at processTimers (node:internal/timers:514:7)

To view more test analytics, go to the Test Analytics Dashboard
Got feedback? Let us know on Github

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@JonasBa