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

[8.x] [ML][UX]: Consistent Layout and UI Enhancements for ML Pages (#203813) #205328

Merged
merged 3 commits into from
Jan 2, 2025

Conversation

rbrtj
Copy link
Contributor

@rbrtj rbrtj commented Dec 31, 2024

Backport

This will backport the following commits from main to 8.x:

Questions ?

Please refer to the Backport tool documentation

…#203813)

## Summary

* Updated alignment for `Add to` action buttons across various ML pages
- see: elastic#184109
* Fixed the overflowing date picker on `Anomaly Detection` pages - see:
[elastic#204394](elastic#204394)
* Standardized gaps around items on pages to maintain consistent values
of `8px` (`gutterSize = 's'`)
* Fixed the header on the Data Visualizer page - see:
[elastic#204393](elastic#204393)
* Adjusted the layout for Change Point Detection
* Updated toast messages & toast action button - see: elastic#184109
* Added icons for attachments actions

Exploration around new `Add to` actions buttons - the right column is
the most recent one, see: elastic#184109 :

| Before  | After (add_to button) | After (icon button) - current |
| ------------- | ------------- | ------------- |
| ![Screenshot 2024-12-12 at 11 45
14](https://github.com/user-attachments/assets/08dc0be5-0b98-481d-9906-d3434f03f634)
| ![Screenshot 2024-12-12 at 11 37
38](https://github.com/user-attachments/assets/0b2cbdcd-cad0-49aa-842f-123eebec1716)
| ![Screenshot 2024-12-12 at 12 42
58](https://github.com/user-attachments/assets/c0a0c732-bbc0-4007-998e-df413fae612b)
|
| ![Screenshot 2024-12-12 at 11 45
49](https://github.com/user-attachments/assets/9ff45cf8-1c24-4ef4-ab59-2b54f1569c6e)
| ![Screenshot 2024-12-12 at 11 39
34](https://github.com/user-attachments/assets/293255eb-eba5-4d90-a10b-0f41de0cc195)
| ![Screenshot 2024-12-12 at 12 44
58](https://github.com/user-attachments/assets/740da2fb-ceed-4e6a-add6-9a8d695776a6)
|
| ![Screenshot 2024-12-12 at 11 46
30](https://github.com/user-attachments/assets/71cea9f4-7658-4776-865d-0f7c5682e67a)
| ![Screenshot 2024-12-12 at 11 40
18](https://github.com/user-attachments/assets/b03e8a75-68d3-4c26-942c-1d41072a62ee)
|
![image](https://github.com/user-attachments/assets/6a259924-7081-426c-8bd2-346e4f0ae152)
|
| ![Screenshot 2024-12-12 at 11 48
07](https://github.com/user-attachments/assets/2b340d38-26a5-45bc-851e-8b1956503500)
| ![Screenshot 2024-12-12 at 11 42
03](https://github.com/user-attachments/assets/ecef0b37-a43c-42a3-911f-31d4acf9ac7b)
| ![Screenshot 2024-12-12 at 12 46
14](https://github.com/user-attachments/assets/f9dddfe0-7296-4394-bb2f-94d702361f49)
|
| ![Screenshot 2024-12-12 at 11 49
05](https://github.com/user-attachments/assets/d670ad40-58d4-40fb-a88d-7ac5e6c1fbbd)
| ![Screenshot 2024-12-12 at 11 43
40](https://github.com/user-attachments/assets/856f9476-c6ff-4405-8865-fb8784f3d818)
|
![image](https://github.com/user-attachments/assets/b18f624b-e648-403f-9595-442b2723bdde)
|

Toasts:
| Before | After |
| ------ | ------ |
| <img width="376" alt="image"
src="https://github.com/user-attachments/assets/c58000c2-30d4-4312-be53-0e3e9a6e3ae6"
/> |
![image](https://github.com/user-attachments/assets/36955456-026a-4abe-b872-c72c115a2dbe)
|

Other changes:

| Before | After |
| ------ | ------ |
| ![Screenshot 2024-12-13 at 17 57
36](https://github.com/user-attachments/assets/263940ea-9396-4f82-b14e-c9086c6d36e8)
| ![Screenshot 2024-12-13 at 18 00
26](https://github.com/user-attachments/assets/49430be4-356b-4902-b855-7fc1b252fbdb)
|
| ![Screenshot 2024-12-13 at 18 06
59](https://github.com/user-attachments/assets/67ad0faf-42f7-44e1-9290-857e28a9d5e4)
| ![Screenshot 2024-12-13 at 18 02
04](https://github.com/user-attachments/assets/357d7296-7b5f-4df5-b664-8bd99c93205b)
|
| ![Screenshot 2024-12-13 at 18 08
20](https://github.com/user-attachments/assets/819a7c33-9c7a-4423-be1b-cbec30dd8a97)
| ![Screenshot 2024-12-13 at 18 09
30](https://github.com/user-attachments/assets/c4b3cb40-f572-4828-888b-4cfff6b565b9)
|
| ![Screenshot 2024-12-13 at 18 11
52](https://github.com/user-attachments/assets/c63ccdf3-aeaa-4047-a3b5-f67c11690020)
| ![Screenshot 2024-12-13 at 18 10
34](https://github.com/user-attachments/assets/6a6343d5-a7f7-45da-bf40-46b14b257e41)
|
| ![Screenshot 2024-12-13 at 18 30
32](https://github.com/user-attachments/assets/7aa13ad8-ba6f-4801-b0fe-ff90dd9038c1)
| ![Screenshot 2024-12-13 at 18 32
59](https://github.com/user-attachments/assets/17774c78-003d-46fd-b7bb-d21cdee7df47)
|
| ![Screenshot 2024-12-13 at 18 35
56](https://github.com/user-attachments/assets/b7b003c6-11a6-4a1d-97c2-c1b920c0fd1a)
| ![Screenshot 2024-12-13 at 18 34
25](https://github.com/user-attachments/assets/5af49323-cb9c-433d-aa6f-91af21dfa5bf)
|
| <img width="342" alt="image"
src="https://github.com/user-attachments/assets/6529eebe-510e-4688-81e6-4cf3e880c610"
/> | <img width="323" alt="image"
src="https://github.com/user-attachments/assets/6dada83e-252f-45d5-95d2-a03fa856d70a"
/> |

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)

---------

Co-authored-by: kibanamachine <[email protected]>
(cherry picked from commit 0cc887b)

# Conflicts:
#	x-pack/platform/plugins/private/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
aiops 611 612 +1
ml 2113 2114 +1
total +2

Async chunks

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

id before after diff
aiops 611.9KB 613.8KB +2.0KB
dataVisualizer 598.5KB 598.1KB -418.0B
ml 4.6MB 4.6MB -3.3KB
transform 471.9KB 471.9KB -8.0B
total -1.7KB

Page load bundle

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

id before after diff
cases 161.6KB 161.7KB +88.0B
Unknown metric groups

async chunk count

id before after diff
ml 110 111 +1

ESLint disabled line counts

id before after diff
aiops 40 39 -1
ml 557 556 -1
total -2

Total ESLint disabled count

id before after diff
aiops 40 39 -1
ml 560 559 -1
total -2

History

@rbrtj rbrtj merged commit 7b091cc into elastic:8.x Jan 2, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants