Skip to content

[ML] Anomaly Explorer: Migrate Explorer from SCSS to Emotion#215196

Merged
rbrtj merged 3 commits intoelastic:mainfrom
rbrtj:ml-replace-scss-overwrites-explorer
Mar 20, 2025
Merged

[ML] Anomaly Explorer: Migrate Explorer from SCSS to Emotion#215196
rbrtj merged 3 commits intoelastic:mainfrom
rbrtj:ml-replace-scss-overwrites-explorer

Conversation

@rbrtj
Copy link
Contributor

@rbrtj rbrtj commented Mar 19, 2025

Migrate remaining Anomaly Explorer styles from SCSS to Emotion:

Before After
Anomaly Swimlane Anomaly Swimlane
image Pasted Graphic 1
Swimlane embeddable Swimlane embeddable
image Create visualization
Anomalies charts tooltip and label Anomalies charts tooltip and label
image Pasted Graphic 3

@rbrtj rbrtj self-assigned this Mar 19, 2025
@rbrtj rbrtj added chore :ml release_note:skip Skip the PR/issue when compiling release notes Team:ML Team label for ML (also use :ml) t// backport:version Backport to applied version labels v9.1.0 v8.19.0 labels Mar 19, 2025
@rbrtj rbrtj requested review from peteharverson and qn895 March 19, 2025 15:44
@rbrtj rbrtj marked this pull request as ready for review March 19, 2025 15:44
@rbrtj rbrtj requested review from a team as code owners March 19, 2025 15:44
@elasticmachine
Copy link
Contributor

Pinging @elastic/ml-ui (:ml)

Copy link
Contributor

@ryankeairns ryankeairns left a comment

Choose a reason for hiding this comment

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

SCSS deleted

Copy link
Member

@qn895 qn895 left a comment

Choose a reason for hiding this comment

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

Code LGTM 🎉

Copy link
Contributor

@peteharverson peteharverson left a comment

Choose a reason for hiding this comment

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

Tested and LGTM

@elasticmachine
Copy link
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #112 / Package policies Package Policy - upgrade when package version is not installed "after each" hook for "should respond with an error"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
ml 2420 2401 -19

Async chunks

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

id before after diff
ml 5.4MB 5.4MB -9.7KB

History

cc @rbrtj

@rbrtj rbrtj merged commit 14c6204 into elastic:main Mar 20, 2025
9 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/13972288825

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 20, 2025
…#215196)

Migrate remaining Anomaly Explorer styles from SCSS to Emotion:

| Before  | After |
| ------------- | ------------- |
| Anomaly Swimlane | Anomaly Swimlane |
| <img width="983" alt="image"
src="https://github.com/user-attachments/assets/d654bf74-f04a-4f57-8891-af0c0a0d3b85"
/> | <img width="824" alt="Pasted Graphic 1"
src="https://github.com/user-attachments/assets/38e00adf-dba1-43be-a6da-6141221dc82b"
/> |
| Swimlane embeddable | Swimlane embeddable |
| <img width="573" alt="image"
src="https://github.com/user-attachments/assets/304d0073-a194-41cd-a379-5fc1fbb734a6"
/> | <img width="580" alt="Create visualization"
src="https://github.com/user-attachments/assets/28982191-16c1-437d-9955-77ca73fbe4f0"
/> |
| Anomalies charts tooltip and label | Anomalies charts tooltip and
label |
| <img width="970" alt="image"
src="https://github.com/user-attachments/assets/f6cb53f3-b79e-4eac-84c2-18d1d0a53cc0"
/> | <img width="974" alt="Pasted Graphic 3"
src="https://github.com/user-attachments/assets/2f553118-8c4f-4678-809d-f7f25816fb1c"
/> |

(cherry picked from commit 14c6204)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Mar 20, 2025
…215196) (#215350)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Anomaly Explorer: Migrate Explorer from SCSS to Emotion
(#215196)](#215196)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Robert
Jaszczurek","email":"92210485+rbrtj@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-03-20T14:50:45Z","message":"[ML]
Anomaly Explorer: Migrate Explorer from SCSS to Emotion
(#215196)\n\nMigrate remaining Anomaly Explorer styles from SCSS to
Emotion:\n\n| Before | After |\n| ------------- | ------------- |\n|
Anomaly Swimlane | Anomaly Swimlane | \n| <img width=\"983\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/d654bf74-f04a-4f57-8891-af0c0a0d3b85\"\n/>
| <img width=\"824\" alt=\"Pasted Graphic
1\"\nsrc=\"https://github.com/user-attachments/assets/38e00adf-dba1-43be-a6da-6141221dc82b\"\n/>
|\n| Swimlane embeddable | Swimlane embeddable |\n| <img width=\"573\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/304d0073-a194-41cd-a379-5fc1fbb734a6\"\n/>
| <img width=\"580\" alt=\"Create
visualization\"\nsrc=\"https://github.com/user-attachments/assets/28982191-16c1-437d-9955-77ca73fbe4f0\"\n/>
|\n| Anomalies charts tooltip and label | Anomalies charts tooltip
and\nlabel |\n| <img width=\"970\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/f6cb53f3-b79e-4eac-84c2-18d1d0a53cc0\"\n/>
| <img width=\"974\" alt=\"Pasted Graphic
3\"\nsrc=\"https://github.com/user-attachments/assets/2f553118-8c4f-4678-809d-f7f25816fb1c\"\n/>
|","sha":"14c6204dca2499a9c45ba0a319c45f40ff531c4e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["chore",":ml","release_note:skip","Team:ML","backport:version","v9.1.0","v8.19.0"],"title":"[ML]
Anomaly Explorer: Migrate Explorer from SCSS to
Emotion","number":215196,"url":"https://github.com/elastic/kibana/pull/215196","mergeCommit":{"message":"[ML]
Anomaly Explorer: Migrate Explorer from SCSS to Emotion
(#215196)\n\nMigrate remaining Anomaly Explorer styles from SCSS to
Emotion:\n\n| Before | After |\n| ------------- | ------------- |\n|
Anomaly Swimlane | Anomaly Swimlane | \n| <img width=\"983\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/d654bf74-f04a-4f57-8891-af0c0a0d3b85\"\n/>
| <img width=\"824\" alt=\"Pasted Graphic
1\"\nsrc=\"https://github.com/user-attachments/assets/38e00adf-dba1-43be-a6da-6141221dc82b\"\n/>
|\n| Swimlane embeddable | Swimlane embeddable |\n| <img width=\"573\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/304d0073-a194-41cd-a379-5fc1fbb734a6\"\n/>
| <img width=\"580\" alt=\"Create
visualization\"\nsrc=\"https://github.com/user-attachments/assets/28982191-16c1-437d-9955-77ca73fbe4f0\"\n/>
|\n| Anomalies charts tooltip and label | Anomalies charts tooltip
and\nlabel |\n| <img width=\"970\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/f6cb53f3-b79e-4eac-84c2-18d1d0a53cc0\"\n/>
| <img width=\"974\" alt=\"Pasted Graphic
3\"\nsrc=\"https://github.com/user-attachments/assets/2f553118-8c4f-4678-809d-f7f25816fb1c\"\n/>
|","sha":"14c6204dca2499a9c45ba0a319c45f40ff531c4e"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/215196","number":215196,"mergeCommit":{"message":"[ML]
Anomaly Explorer: Migrate Explorer from SCSS to Emotion
(#215196)\n\nMigrate remaining Anomaly Explorer styles from SCSS to
Emotion:\n\n| Before | After |\n| ------------- | ------------- |\n|
Anomaly Swimlane | Anomaly Swimlane | \n| <img width=\"983\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/d654bf74-f04a-4f57-8891-af0c0a0d3b85\"\n/>
| <img width=\"824\" alt=\"Pasted Graphic
1\"\nsrc=\"https://github.com/user-attachments/assets/38e00adf-dba1-43be-a6da-6141221dc82b\"\n/>
|\n| Swimlane embeddable | Swimlane embeddable |\n| <img width=\"573\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/304d0073-a194-41cd-a379-5fc1fbb734a6\"\n/>
| <img width=\"580\" alt=\"Create
visualization\"\nsrc=\"https://github.com/user-attachments/assets/28982191-16c1-437d-9955-77ca73fbe4f0\"\n/>
|\n| Anomalies charts tooltip and label | Anomalies charts tooltip
and\nlabel |\n| <img width=\"970\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/f6cb53f3-b79e-4eac-84c2-18d1d0a53cc0\"\n/>
| <img width=\"974\" alt=\"Pasted Graphic
3\"\nsrc=\"https://github.com/user-attachments/assets/2f553118-8c4f-4678-809d-f7f25816fb1c\"\n/>
|","sha":"14c6204dca2499a9c45ba0a319c45f40ff531c4e"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com>
clintandrewhall pushed a commit to clintandrewhall/kibana that referenced this pull request Mar 20, 2025
…#215196)

Migrate remaining Anomaly Explorer styles from SCSS to Emotion:

| Before  | After |
| ------------- | ------------- |
| Anomaly Swimlane | Anomaly Swimlane | 
| <img width="983" alt="image"
src="https://github.com/user-attachments/assets/d654bf74-f04a-4f57-8891-af0c0a0d3b85"
/> | <img width="824" alt="Pasted Graphic 1"
src="https://github.com/user-attachments/assets/38e00adf-dba1-43be-a6da-6141221dc82b"
/> |
| Swimlane embeddable | Swimlane embeddable |
| <img width="573" alt="image"
src="https://github.com/user-attachments/assets/304d0073-a194-41cd-a379-5fc1fbb734a6"
/> | <img width="580" alt="Create visualization"
src="https://github.com/user-attachments/assets/28982191-16c1-437d-9955-77ca73fbe4f0"
/> |
| Anomalies charts tooltip and label | Anomalies charts tooltip and
label |
| <img width="970" alt="image"
src="https://github.com/user-attachments/assets/f6cb53f3-b79e-4eac-84c2-18d1d0a53cc0"
/> | <img width="974" alt="Pasted Graphic 3"
src="https://github.com/user-attachments/assets/2f553118-8c4f-4678-809d-f7f25816fb1c"
/> |
JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this pull request Mar 24, 2025
…#215196)

Migrate remaining Anomaly Explorer styles from SCSS to Emotion:

| Before  | After |
| ------------- | ------------- |
| Anomaly Swimlane | Anomaly Swimlane | 
| <img width="983" alt="image"
src="https://github.com/user-attachments/assets/d654bf74-f04a-4f57-8891-af0c0a0d3b85"
/> | <img width="824" alt="Pasted Graphic 1"
src="https://github.com/user-attachments/assets/38e00adf-dba1-43be-a6da-6141221dc82b"
/> |
| Swimlane embeddable | Swimlane embeddable |
| <img width="573" alt="image"
src="https://github.com/user-attachments/assets/304d0073-a194-41cd-a379-5fc1fbb734a6"
/> | <img width="580" alt="Create visualization"
src="https://github.com/user-attachments/assets/28982191-16c1-437d-9955-77ca73fbe4f0"
/> |
| Anomalies charts tooltip and label | Anomalies charts tooltip and
label |
| <img width="970" alt="image"
src="https://github.com/user-attachments/assets/f6cb53f3-b79e-4eac-84c2-18d1d0a53cc0"
/> | <img width="974" alt="Pasted Graphic 3"
src="https://github.com/user-attachments/assets/2f553118-8c4f-4678-809d-f7f25816fb1c"
/> |
cqliu1 pushed a commit to cqliu1/kibana that referenced this pull request Mar 31, 2025
…#215196)

Migrate remaining Anomaly Explorer styles from SCSS to Emotion:

| Before  | After |
| ------------- | ------------- |
| Anomaly Swimlane | Anomaly Swimlane | 
| <img width="983" alt="image"
src="https://github.com/user-attachments/assets/d654bf74-f04a-4f57-8891-af0c0a0d3b85"
/> | <img width="824" alt="Pasted Graphic 1"
src="https://github.com/user-attachments/assets/38e00adf-dba1-43be-a6da-6141221dc82b"
/> |
| Swimlane embeddable | Swimlane embeddable |
| <img width="573" alt="image"
src="https://github.com/user-attachments/assets/304d0073-a194-41cd-a379-5fc1fbb734a6"
/> | <img width="580" alt="Create visualization"
src="https://github.com/user-attachments/assets/28982191-16c1-437d-9955-77ca73fbe4f0"
/> |
| Anomalies charts tooltip and label | Anomalies charts tooltip and
label |
| <img width="970" alt="image"
src="https://github.com/user-attachments/assets/f6cb53f3-b79e-4eac-84c2-18d1d0a53cc0"
/> | <img width="974" alt="Pasted Graphic 3"
src="https://github.com/user-attachments/assets/2f553118-8c4f-4678-809d-f7f25816fb1c"
/> |
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:version Backport to applied version labels chore :ml release_note:skip Skip the PR/issue when compiling release notes scss-removal Team:ML Team label for ML (also use :ml) t// v8.19.0 v9.1.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants