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

[APM] Embeddable Trace Waterfall #216098

Merged
merged 8 commits into from
Mar 27, 2025
Merged

[APM] Embeddable Trace Waterfall #216098

merged 8 commits into from
Mar 27, 2025
+526 −124

Conversation

cauemarcondes
Copy link
Contributor

closes #215756

Using the new embeddable:

<ReactEmbeddableRenderer
        type="APM_TRACE_WATERFALL_EMBEDDABLE"
        getParentApi={() => ({
          getSerializedStateForChild: () => ({
            rawState: {
              serviceName: 'foo',
              traceId: 'e7b9d541fae0e25106291f7ac0947acd',
              entryTransactionId: '2d94d9d4fda31c18',
              rangeFrom: '2025-03-26T00:00:00.513Z',
              rangeTo: '2025-03-26T20:52:42.513Z',
              displayLimit: 5, //optional param when omitted it renders the entire waterfall
            },
          }),
        })}
        hidePanelChrome={true}
      />

This video is just an example, I did NOT add the embeddable to Discover in this PR

embeddable.sample.mov

@cauemarcondes cauemarcondes added backport:skip This commit does not require backporting release_note:feature Makes this part of the condensed release notes v9.0.1 labels Mar 26, 2025
@cauemarcondes cauemarcondes requested a review from a team as a code owner March 26, 2025 18:24
@botelastic botelastic bot added the Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team label Mar 26, 2025
@elasticmachine
Copy link
Contributor

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

@cauemarcondes
Merge branch 'main' into poc-embeddable-waterfall

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
Loading
Loading status checks…
d0e0505
@cauemarcondes
addressing pr comments
8c67b68
@cauemarcondes
Merge branch 'poc-embeddable-waterfall' of github.com:cauemarcondes/k…
Loading
Loading status checks…
5291119 
…ibana into poc-embeddable-waterfall
@cauemarcondes
removing unused imports
Loading
Loading status checks…
c8e0869
crespocarlos
crespocarlos approved these changes Mar 27, 2025
View reviewed changes
Copy link
Contributor

@crespocarlos crespocarlos left a comment

Choose a reason for hiding this comment

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

LGTM. just a couple nits.

.../transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx
Comment on lines +262 to +265
if (onClick) {
e.stopPropagation();
onClick(waterfallItemFlyoutTab);
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we call e.stopPropagation regardless of the onClick state?

Copy link
Contributor Author

@cauemarcondes cauemarcondes Mar 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

This is actually intended. For embeddable waterfall we don't want to open the flyout when clicking on a node, but it's nice to collapse it. But on APM we do open the flyout, and in this case we don't want to propagate the click so the node is not collapsed.

@cauemarcondes
testing legends component
Loading
Loading status checks…
c87ee40
@cauemarcondes
fix
Loading
Loading status checks…
7c38244
Bluefinger
Bluefinger approved these changes Mar 27, 2025
View reviewed changes
Copy link
Contributor

@Bluefinger Bluefinger left a comment

Choose a reason for hiding this comment

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

LGTM!

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
apm 1899 1902 +3

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
apm 2.5MB 2.5MB +33.7KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
apm 34.5KB 34.9KB +453.0B
Unknown metric groups

async chunk count

id before after diff
apm 67 70 +3

History

@cauemarcondes cauemarcondes merged commit 900e335 into elastic:main Mar 27, 2025
9 checks passed
@cauemarcondes cauemarcondes deleted the poc-embeddable-waterfall branch March 27, 2025 16:17
@cauemarcondes cauemarcondes mentioned this pull request Mar 28, 2025
Closed
cqliu1 pushed a commit to cqliu1/kibana that referenced this pull request Mar 31, 2025
@cauemarcondes @cqliu1
[APM] Embeddable Trace Waterfall (elastic#216098)
80644a6 
closes elastic#215756

Using the new embeddable:
```
<ReactEmbeddableRenderer
        type="APM_TRACE_WATERFALL_EMBEDDABLE"
        getParentApi={() => ({
          getSerializedStateForChild: () => ({
            rawState: {
              serviceName: 'foo',
              traceId: 'e7b9d541fae0e25106291f7ac0947acd',
              entryTransactionId: '2d94d9d4fda31c18',
              rangeFrom: '2025-03-26T00:00:00.513Z',
              rangeTo: '2025-03-26T20:52:42.513Z',
              displayLimit: 5, //optional param when omitted it renders the entire waterfall
            },
          }),
        })}
        hidePanelChrome={true}
      />
```

**This video is just an example, I did NOT add the embeddable to
Discover in this PR**


https://github.com/user-attachments/assets/c162d47e-a0bc-4327-8f9f-921d07a022fa
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@crespocarlos crespocarlos

@Bluefinger Bluefinger

Assignees
No one assigned
Labels
backport:skip This commit does not require backporting release_note:feature Makes this part of the condensed release notes Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team v9.1.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[APM] Embeddable Trace Waterfall
5 participants
@cauemarcondes @elasticmachine @crespocarlos @Bluefinger @kibanamachine