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

[APM] Remove react-syntax-highlighter from stack traces #100192

Open
smith opened this issue May 16, 2021 · 6 comments
Open

[APM] Remove react-syntax-highlighter from stack traces #100192

smith opened this issue May 16, 2021 · 6 comments
Labels
apm:errors-page Team:APM All issues that need APM UI Team support technical debt Improvement of the software architecture and operational architecture

Comments

@smith
Copy link
Contributor

smith commented May 16, 2021

highlight.js has been removed from EUI, and our stack trace code blocks are one of the only places in kibana where it's still being used (through react-syntax-highlighter)

We had wanted to switch over to EuiCodeBlocks for these, but EUI does not yet support line numbers here. The line numbers are valuable for context in these views, so we do not want to get rid of them.

Remove react-syntax-highlighter and use the capabilities from EUI and prism.js to provide syntax highlighting in these views.

Add line number capabilities to our own components or to EuiCodeBlock.

@smith smith added Team:APM All issues that need APM UI Team support technical debt Improvement of the software architecture and operational architecture labels May 16, 2021
@elasticmachine
Copy link
Contributor

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

@smith
Copy link
Contributor Author

smith commented Jun 7, 2021

See also #76849 for the DB statements.

elastic/eui#3140 exists to add the ability to show line numbers in EuiCodeBlock.

@sorenlouv
Copy link
Member

I couldn't find any usages of highlight.js. Was this already fixed?
Feel free to open if this is still an issue

@smith smith changed the title [APM] Remove highlight.js from stack traces [APM] Remove react-syntax-highlighter from stack traces Sep 2, 2021
@smith
Copy link
Contributor Author

smith commented Sep 2, 2021

@sqren We use react-syntax-highlighter which uses highlight.js. Updating the title and description and reopening.

@thompsongl
Copy link
Contributor

Line numbers in EuiCodeBlock will be available after the next release: elastic/eui#4993

@thompsongl
Copy link
Contributor

Line numbers now available in Kibana: https://elastic.github.io/eui/#/editors-syntax/code#line-numbers
(Visual line highlighting coming soon to Kibana)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
apm:errors-page Team:APM All issues that need APM UI Team support technical debt Improvement of the software architecture and operational architecture
Projects
None yet
Development

No branches or pull requests

5 participants