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

fix display of stacktrace with EuiCodeBlocks #149911

Merged
merged 5 commits into from Jan 31, 2023
Merged

fix display of stacktrace with EuiCodeBlocks #149911

merged 5 commits into from Jan 31, 2023

Conversation

achyutjhunjhunwala
Copy link
Contributor

@achyutjhunjhunwala achyutjhunjhunwala commented Jan 31, 2023 •
edited

Summary

This PR introduced the feedback provided during the demo of for #149400 and #149122

  • It introduces EuiCodeBlock wrapper for wrapping Stacktrace messages to make them look visually better, copyable and adds a Horizontal scrollbar
  • The component EuiCodeBlock exposes a language property, but it doesn't seems to add any visual changes so i have skipped that property.
  • The Copy feature only copies content at top most level. This means for stacktraces with multiple accordions on same level (like Ruby, Go, and PHP), it will only copy the accordion titles and not the code inside. This is the behaviour of the EUI component.

cc @boriskirov

Java (Before)

image

Java (After)

image

C# (Before)

image

C# (After)

image

PHP (Before)

image

PHP (After)

image

Javascript (Before)

image

Javascript (After)

image

Ruby (Before)

image

Ruby (After)

image

Go (Before)

image

Go (After)

image

Python (Before)

image

Python (After)

image

@achyutjhunjhunwala achyutjhunjhunwala self-assigned this Jan 31, 2023
@achyutjhunjhunwala achyutjhunjhunwala added the backport:skip This commit does not require backporting label Jan 31, 2023
@achyutjhunjhunwala achyutjhunjhunwala marked this pull request as ready for review January 31, 2023 09:45
@achyutjhunjhunwala achyutjhunjhunwala requested a review from a team as a code owner January 31, 2023 09:45
@botelastic botelastic bot added the Team:APM All issues that need APM UI Team support label Jan 31, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/apm-ui (Team:APM)

boriskirov
boriskirov approved these changes Jan 31, 2023
View reviewed changes
Copy link
Contributor

@boriskirov boriskirov left a comment

Choose a reason for hiding this comment

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

A very on-point improvement of the stack trace area!
LGTM! 🚀

@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Async chunks

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

id before after diff
apm 3.3MB 3.3MB +67.0B

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @achyutjhunjhunwala

@achyutjhunjhunwala achyutjhunjhunwala merged commit 8773220 into main Jan 31, 2023
@achyutjhunjhunwala achyutjhunjhunwala deleted the fixing_ux_for_stacktrace_messages branch January 31, 2023 13:59
kqualters-elastic pushed a commit to kqualters-elastic/kibana that referenced this pull request Feb 6, 2023
@achyutjhunjhunwala @kibanamachine @kqualters-elastic
fix display of stacktrace with EuiCodeBlocks (elastic#149911)
609e4e1 
## Summary

This PR introduced the feedback provided during the demo of for
elastic#149400 and
elastic#149122

- It introduces `EuiCodeBlock` wrapper for wrapping Stacktrace messages
to make them look visually better, copyable and adds a Horizontal
scrollbar
- The component `EuiCodeBlock` exposes a language property, but it
doesn't seems to add any visual changes so i have skipped that property.
- The `Copy` feature only copies content at top most level. This means
for stacktraces with multiple accordions on same level (like `Ruby, Go,
and PHP`), it will only copy the accordion titles and not the code
inside. This is the behaviour of the EUI component.

cc @boriskirov 

## Java (Before)

<img width="1192" alt="image"
src="https://user-images.githubusercontent.com/7416358/215712147-dea1bf12-e818-4e41-9fd4-cd964b260844.png">

## Java (After)

<img width="1204" alt="image"
src="https://user-images.githubusercontent.com/7416358/215717833-6d6c2bb8-924e-4beb-9a1a-f39214b91abd.png">

## C# (Before)

<img width="1193" alt="image"
src="https://user-images.githubusercontent.com/7416358/215714318-b0772191-9617-4623-9264-b976f8b3115e.png">

## C# (After)

<img width="1190" alt="image"
src="https://user-images.githubusercontent.com/7416358/215718329-3bf213cc-1dee-46f7-9cfc-7b8de53ff90c.png">

## PHP (Before)

<img width="1264" alt="image"
src="https://user-images.githubusercontent.com/7416358/215717275-1483c810-01fd-4a94-99ab-b22060dbddf0.png">

## PHP (After)

<img width="1284" alt="image"
src="https://user-images.githubusercontent.com/7416358/215716120-8fb60648-18df-4d6a-b515-6bf5f848043e.png">

## Javascript (Before)

<img width="1224" alt="image"
src="https://user-images.githubusercontent.com/7416358/215718766-1bc5b672-83d3-4e6a-81ff-5b19d224bb7d.png">

## Javascript (After)

<img width="1219" alt="image"
src="https://user-images.githubusercontent.com/7416358/215718812-d45adca5-6239-4904-a7b8-0c5fe3c86c65.png">

## Ruby (Before)

<img width="1208" alt="image"
src="https://user-images.githubusercontent.com/7416358/215719647-53d30e45-9349-4dcb-a7a4-a390ae99507b.png">

## Ruby (After)

<img width="1219" alt="image"
src="https://user-images.githubusercontent.com/7416358/215719736-b6c5931b-2fc8-4607-9abf-c0ce7b447157.png">

## Go (Before)

<img width="1203" alt="image"
src="https://user-images.githubusercontent.com/7416358/215720396-460baa8c-83cd-4e0c-98ec-27ac7367b052.png">

## Go (After)

<img width="1190" alt="image"
src="https://user-images.githubusercontent.com/7416358/215720481-89057010-e22a-4d6b-9caf-ee43f17d4b67.png">

## Python (Before)

<img width="1228" alt="image"
src="https://user-images.githubusercontent.com/7416358/215720760-a5991ddc-6901-44f2-a294-8adb616c0678.png">

## Python (After)

<img width="1221" alt="image"
src="https://user-images.githubusercontent.com/7416358/215720807-3f77f14c-9a12-4dbf-bb07-9614c6f150f0.png">

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
darnautov pushed a commit to darnautov/kibana that referenced this pull request Feb 7, 2023
@achyutjhunjhunwala @kibanamachine @darnautov
fix display of stacktrace with EuiCodeBlocks (elastic#149911)
5a27890 
## Summary

This PR introduced the feedback provided during the demo of for
elastic#149400 and
elastic#149122

- It introduces `EuiCodeBlock` wrapper for wrapping Stacktrace messages
to make them look visually better, copyable and adds a Horizontal
scrollbar
- The component `EuiCodeBlock` exposes a language property, but it
doesn't seems to add any visual changes so i have skipped that property.
- The `Copy` feature only copies content at top most level. This means
for stacktraces with multiple accordions on same level (like `Ruby, Go,
and PHP`), it will only copy the accordion titles and not the code
inside. This is the behaviour of the EUI component.

cc @boriskirov 

## Java (Before)

<img width="1192" alt="image"
src="https://user-images.githubusercontent.com/7416358/215712147-dea1bf12-e818-4e41-9fd4-cd964b260844.png">

## Java (After)

<img width="1204" alt="image"
src="https://user-images.githubusercontent.com/7416358/215717833-6d6c2bb8-924e-4beb-9a1a-f39214b91abd.png">

## C# (Before)

<img width="1193" alt="image"
src="https://user-images.githubusercontent.com/7416358/215714318-b0772191-9617-4623-9264-b976f8b3115e.png">

## C# (After)

<img width="1190" alt="image"
src="https://user-images.githubusercontent.com/7416358/215718329-3bf213cc-1dee-46f7-9cfc-7b8de53ff90c.png">

## PHP (Before)

<img width="1264" alt="image"
src="https://user-images.githubusercontent.com/7416358/215717275-1483c810-01fd-4a94-99ab-b22060dbddf0.png">

## PHP (After)

<img width="1284" alt="image"
src="https://user-images.githubusercontent.com/7416358/215716120-8fb60648-18df-4d6a-b515-6bf5f848043e.png">

## Javascript (Before)

<img width="1224" alt="image"
src="https://user-images.githubusercontent.com/7416358/215718766-1bc5b672-83d3-4e6a-81ff-5b19d224bb7d.png">

## Javascript (After)

<img width="1219" alt="image"
src="https://user-images.githubusercontent.com/7416358/215718812-d45adca5-6239-4904-a7b8-0c5fe3c86c65.png">

## Ruby (Before)

<img width="1208" alt="image"
src="https://user-images.githubusercontent.com/7416358/215719647-53d30e45-9349-4dcb-a7a4-a390ae99507b.png">

## Ruby (After)

<img width="1219" alt="image"
src="https://user-images.githubusercontent.com/7416358/215719736-b6c5931b-2fc8-4607-9abf-c0ce7b447157.png">

## Go (Before)

<img width="1203" alt="image"
src="https://user-images.githubusercontent.com/7416358/215720396-460baa8c-83cd-4e0c-98ec-27ac7367b052.png">

## Go (After)

<img width="1190" alt="image"
src="https://user-images.githubusercontent.com/7416358/215720481-89057010-e22a-4d6b-9caf-ee43f17d4b67.png">

## Python (Before)

<img width="1228" alt="image"
src="https://user-images.githubusercontent.com/7416358/215720760-a5991ddc-6901-44f2-a294-8adb616c0678.png">

## Python (After)

<img width="1221" alt="image"
src="https://user-images.githubusercontent.com/7416358/215720807-3f77f14c-9a12-4dbf-bb07-9614c6f150f0.png">

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
@achyutjhunjhunwala achyutjhunjhunwala mentioned this pull request Feb 20, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@yngrdyn yngrdyn yngrdyn approved these changes

@boriskirov boriskirov boriskirov approved these changes

Assignees

@achyutjhunjhunwala achyutjhunjhunwala

Labels
backport:skip This commit does not require backporting release_note:fix Team:APM All issues that need APM UI Team support v8.7.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
6 participants
@achyutjhunjhunwala @elasticmachine @kibana-ci @yngrdyn @boriskirov @kibanamachine