[ObsUX] [APM] Migrate APM from styled-components to @emotion #204222

MiriamAparicio · 2024-12-13T14:33:24Z

Closes #202765

Summary

While working on the visual refresh for the new EUI theme Borealis we figured that was a good time to do the recommended migration from styled-components to @emotion

What has been done

Migrate apm plugin from styled-components to @emotion
Eui Visual Refresh for Borealis new theme
All usage of color palette tokens and functions now pull from the theme, and correctly update to use new colors when the theme changes from Borealis to Amsterdam and vice versa
All references to renamed tokens have been updated to use the new token name
Remove usage of deprecated useEuiBackgroundColor
All usages of "success" colors have been updated to accentSecondary and textAccentSecondary as needed

Not this time

There are some color values on the server side, and the values are static they would not update properly as dynamic tokens do. Eui guidance right now is to keep these as they are for now (meaning to keep using the JSON tokens).

How to test

Running Kibana with the Borealis theme

In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true
Run Kibana with the following environment variable set: KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start
This will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle between Amsterdam and Borealis.

elasticmachine · 2024-12-17T14:15:29Z

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

x-pack/plugins/observability_solution/apm/emotion.d.ts

github-actions · 2024-12-17T14:27:10Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

...lity_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx

...ability_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx

weronikaolejniczak

LGTM 👌🏻 I just have 3 suggestions

x-pack/plugins/observability_solution/apm/common/service_health_status.ts

...lity_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx

...ability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_summary.tsx

...ck/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts

...saction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx

...lugins/observability_solution/apm/public/components/shared/charts/timeline/timeline_axis.tsx

x-pack/plugins/observability_solution/apm/public/components/shared/ml_callout/index.tsx

crespocarlos · 2024-12-18T10:56:25Z

x-pack/plugins/observability_solution/apm/public/components/app/transaction_link/index.tsx

+        iconType="apmTrace"
+        title={
+          <h2>
+            {i18n.translate('xpack.apm.transactionLink.h2.fetchingTransactionLabel', {


crespocarlos

code LGTM.

edit: I tested it in dark and light mode and couldn't find anything wrong. disclaimer: my eyes are not trained to find problems with the new theme

iblancof

Thanks for all the small changes, it's a huge effort! 👏🏻
After reviewing the code, I left some comments.

I’m going to test locally now!
If I notice anything, I’ll leave another comment, otherwise, I won’t.

.../observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx

...m/public/components/routing/app_root/apm_header_action_menu/anomaly_detection_setup_link.tsx

...lugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js

x-pack/plugins/observability_solution/apm/public/utils/test_helpers.tsx

miloszmarcinkowski

Good job! LGTM with only one suggestion 🚀

x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx

x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx

elasticmachine · 2024-12-18T14:07:49Z

💚 Build Succeeded

Buildkite Build
Commit: ceaf0a3
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-204222-ceaf0a3b1881

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`apm`	1923	1928	+5

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	5.7MB	⚠️ +2.3MB
`infra`	1.7MB	1.7MB	+84.0B
total			⚠️ +2.3MB

Page load bundle

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

id	before	after	diff
`apm`	38.7KB	38.5KB	-173.0B
`observabilityShared`	93.9KB	93.9KB	+51.0B
total			-122.0B

Unknown metric groups

async chunk count

id	before	after	diff
`apm`	56	60	+4

ESLint disabled line counts

id	before	after	diff
`infra`	43	42	-1

Total ESLint disabled count

id	before	after	diff
`infra`	52	51	-1

History

💚 Build #261754 succeeded 9a42d79
💔 Build #261486 failed 3094308
💔 Build #261461 failed 65f36c4
💔 Build #261422 failed 5b4630b

kdelemme · 2024-12-18T15:02:28Z

packages/kbn-babel-preset/styled_components_files.js

-    /x-pack[\/\\]plugins[\/\\](observability_solution\/apm|beats_management|fleet|observability_solution\/observability|observability_solution\/observability_shared|observability_solution\/exploratory_view|security_solution|timelines|observability_solution\/synthetics|observability_solution\/ux|observability_solution\/uptime)[\/\\]/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\](observability_solution\/apm|beats_management|fleet|observability_solution\/infra|lists|observability_solution\/observability|observability_solution\/observability_shared|observability_solution\/exploratory_view|security_solution|timelines|observability_solution\/synthetics|observability_solution\/ux|observability_solution\/uptime)[\/\\]/,
+    /x-pack[\/\\]plugins[\/\\](beats_management|fleet|observability_solution\/observability|observability_solution\/observability_shared|observability_solution\/exploratory_view|security_solution|timelines|observability_solution\/synthetics|observability_solution\/ux|observability_solution\/uptime)[\/\\]/,
+    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\](beats_management|fleet|lists|observability_solution\/observability|observability_solution\/observability_shared|observability_solution\/exploratory_view|security_solution|timelines|observability_solution\/synthetics|observability_solution\/ux|observability_solution\/uptime)[\/\\]/,


I think this line has been messed up with the recent platform migration. I don't think there are observability plugins within security solutions.

This file has been a source of conflicts since the start of the relocation of modules.
I've just created #204785 to cleanup / simplify the file and hopefully avoid more headaches.

rmyz

LGTM

MiriamAparicio · 2024-12-18T15:48:43Z

/oblt-deploy

yngrdyn

Logs changes LGMT 👏🏼

…#204222) Closes elastic#202765 ### Summary While working on the visual refresh for the new EUI theme Borealis we figured that was a good time to do the recommended migration from `styled-components` to `@emotion` ### What has been done - Migrate apm plugin from `styled-components` to `@emotion` - Eui Visual Refresh for Borealis new theme - All usage of color palette tokens and functions now pull from the theme, and correctly update to use new colors when the theme changes from Borealis to Amsterdam and vice versa - All references to renamed tokens have been updated to use the new token name - Remove usage of deprecated `useEuiBackgroundColor` - All usages of "success" colors have been updated to `accentSecondary` and `textAccentSecondary` as needed ### Not this time There are some color values on the server side, and the values are static they would not update properly as dynamic tokens do. Eui guidance right now is to keep these as they are for now (meaning to keep using the JSON tokens). ### How to test #### Running Kibana with the Borealis theme In order to run Kibana with Borealis, you'll need to do the following: - Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true - Run Kibana with the following environment variable set: KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start - This will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle between Amsterdam and Borealis.

MiriamAparicio added 2 commits December 13, 2024 15:41

wip

4d26785

apm migration to emotion

145d376

MiriamAparicio force-pushed the 202765-apm-emotion-migration branch from 6168cfd to 145d376 Compare December 16, 2024 13:09

MiriamAparicio added 4 commits December 16, 2024 16:29

wip

0aac56f

fixed some jest tests

22acebf

fix remaining tests

e8fc25a

fix conflict

5b4630b

MiriamAparicio added backport:skip This commit does not require backporting v9.0.0 Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team EUI Visual Refresh labels Dec 17, 2024

MiriamAparicio marked this pull request as ready for review December 17, 2024 14:15

MiriamAparicio requested review from a team as code owners December 17, 2024 14:15

weronikaolejniczak reviewed Dec 17, 2024

View reviewed changes

x-pack/plugins/observability_solution/apm/emotion.d.ts Outdated Show resolved Hide resolved

botelastic bot added the ci:project-deploy-observability Create an Observability project label Dec 17, 2024

MiriamAparicio added the release_note:skip Skip the PR/issue when compiling release notes label Dec 17, 2024

weronikaolejniczak reviewed Dec 17, 2024

View reviewed changes

...lity_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx Outdated Show resolved Hide resolved

weronikaolejniczak reviewed Dec 17, 2024

View reviewed changes

...ability_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx Outdated Show resolved Hide resolved

weronikaolejniczak approved these changes Dec 17, 2024

View reviewed changes

MiriamAparicio added 2 commits December 17, 2024 15:44

fix ts errors

65f36c4

remove emotion typing file

9a42d79

MiriamAparicio requested a review from a team as a code owner December 17, 2024 16:14

mgadewoll reviewed Dec 17, 2024

View reviewed changes

Ikuni17 approved these changes Dec 17, 2024

View reviewed changes

crespocarlos self-requested a review December 18, 2024 10:05

crespocarlos reviewed Dec 18, 2024

View reviewed changes

MiriamAparicio force-pushed the 202765-apm-emotion-migration branch from 3094308 to 9a42d79 Compare December 18, 2024 11:05

crespocarlos approved these changes Dec 18, 2024

View reviewed changes

iblancof reviewed Dec 18, 2024

View reviewed changes

miloszmarcinkowski approved these changes Dec 18, 2024

View reviewed changes

x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx Outdated Show resolved Hide resolved

fkanout reviewed Dec 18, 2024

View reviewed changes

x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx Outdated Show resolved Hide resolved

x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx Outdated Show resolved Hide resolved

MiriamAparicio added 2 commits December 18, 2024 12:32

fix conflict

b204b08

eui&team review changes

ceaf0a3

iblancof approved these changes Dec 18, 2024

View reviewed changes

kdelemme reviewed Dec 18, 2024

View reviewed changes

rmyz approved these changes Dec 18, 2024

View reviewed changes

yngrdyn approved these changes Dec 18, 2024

View reviewed changes

MiriamAparicio merged commit fb0cb57 into elastic:main Dec 18, 2024
8 checks passed

MiriamAparicio deleted the 202765-apm-emotion-migration branch December 18, 2024 17:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ObsUX] [APM] Migrate APM from styled-components to @emotion #204222

[ObsUX] [APM] Migrate APM from styled-components to @emotion #204222

MiriamAparicio commented Dec 13, 2024 •

edited

Loading

elasticmachine commented Dec 17, 2024

github-actions bot commented Dec 17, 2024

weronikaolejniczak left a comment

crespocarlos Dec 18, 2024

crespocarlos left a comment •

edited

Loading

iblancof left a comment

miloszmarcinkowski left a comment

elasticmachine commented Dec 18, 2024 •

edited

Loading

async chunk count

ESLint disabled line counts

Total ESLint disabled count

kdelemme Dec 18, 2024

gsoldevila Dec 18, 2024

rmyz left a comment

MiriamAparicio commented Dec 18, 2024

yngrdyn left a comment

[ObsUX] [APM] Migrate APM from styled-components to @emotion #204222

[ObsUX] [APM] Migrate APM from styled-components to @emotion #204222

Conversation

MiriamAparicio commented Dec 13, 2024 • edited Loading

Summary

What has been done

Not this time

How to test

Running Kibana with the Borealis theme

elasticmachine commented Dec 17, 2024

github-actions bot commented Dec 17, 2024

🤖 GitHub comments

weronikaolejniczak left a comment

Choose a reason for hiding this comment

crespocarlos Dec 18, 2024

Choose a reason for hiding this comment

crespocarlos left a comment • edited Loading

Choose a reason for hiding this comment

iblancof left a comment

Choose a reason for hiding this comment

miloszmarcinkowski left a comment

Choose a reason for hiding this comment

elasticmachine commented Dec 18, 2024 • edited Loading

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

async chunk count

ESLint disabled line counts

Total ESLint disabled count

History

kdelemme Dec 18, 2024

Choose a reason for hiding this comment

gsoldevila Dec 18, 2024

Choose a reason for hiding this comment

rmyz left a comment

Choose a reason for hiding this comment

MiriamAparicio commented Dec 18, 2024

yngrdyn left a comment

Choose a reason for hiding this comment

MiriamAparicio commented Dec 13, 2024 •

edited

Loading

crespocarlos left a comment •

edited

Loading

elasticmachine commented Dec 18, 2024 •

edited

Loading