[ML] Data visualizer: Page header layout breaks on smaller screens. #204393
Assignees
Comments
rbrtj
added
bug
rbrtj
added
:ml
Team:ML
|
Pinging @elastic/ml-ui (:ml) |
1 task
rbrtj
added a commit
that referenced
this issue
Dec 23, 2024
## Summary * Updated alignment for `Add to` action buttons across various ML pages - see: #184109 * Fixed the overflowing date picker on `Anomaly Detection` pages - see: [#204394](#204394) * Standardized gaps around items on pages to maintain consistent values of `8px` (`gutterSize = 's'`) * Fixed the header on the Data Visualizer page - see: [#204393](#204393) * Adjusted the layout for Change Point Detection * Updated toast messages & toast action button - see: #184109 * Added icons for attachments actions Exploration around new `Add to` actions buttons - the right column is the most recent one, see: #184109 : | Before | After (add_to button) | After (icon button) - current | | ------------- | ------------- | ------------- | |  |  |  | |  |  |  | |  |  |  | |  |  |  | |  |  |  | Toasts: | Before | After | | ------ | ------ | | <img width="376" alt="image" src="https://github.com/user-attachments/assets/c58000c2-30d4-4312-be53-0e3e9a6e3ae6" /> |  | Other changes: | Before | After | | ------ | ------ | |  |  | |  |  | |  |  | |  |  | |  |  | |  |  | | <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]>
rbrtj
added a commit
to rbrtj/kibana
that referenced
this issue
Dec 31, 2024
…#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 | | ------------- | ------------- | ------------- | |  |  |  | |  |  |  | |  |  |  | |  |  |  | |  |  |  | Toasts: | Before | After | | ------ | ------ | | <img width="376" alt="image" src="https://github.com/user-attachments/assets/c58000c2-30d4-4312-be53-0e3e9a6e3ae6" /> |  | Other changes: | Before | After | | ------ | ------ | |  |  | |  |  | |  |  | |  |  | |  |  | |  |  | | <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
stratoula
pushed a commit
to stratoula/kibana
that referenced
this issue
Jan 2, 2025
…#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 | | ------------- | ------------- | ------------- | |  |  |  | |  |  |  | |  |  |  | |  |  |  | |  |  |  | Toasts: | Before | After | | ------ | ------ | | <img width="376" alt="image" src="https://github.com/user-attachments/assets/c58000c2-30d4-4312-be53-0e3e9a6e3ae6" /> |  | Other changes: | Before | After | | ------ | ------ | |  |  | |  |  | |  |  | |  |  | |  |  | |  |  | | <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]>
benakansara
pushed a commit
to benakansara/kibana
that referenced
this issue
Jan 2, 2025
…#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 | | ------------- | ------------- | ------------- | |  |  |  | |  |  |  | |  |  |  | |  |  |  | |  |  |  | Toasts: | Before | After | | ------ | ------ | | <img width="376" alt="image" src="https://github.com/user-attachments/assets/c58000c2-30d4-4312-be53-0e3e9a6e3ae6" /> |  | Other changes: | Before | After | | ------ | ------ | |  |  | |  |  | |  |  | |  |  | |  |  | |  |  | | <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]>
rbrtj
added a commit
that referenced
this issue
Jan 2, 2025
…203813) (#205328) # Backport This will backport the following commits from `main` to `8.x`: - [[ML][UX]: Consistent Layout and UI Enhancements for ML Pages (#203813)](#203813) <!--- Backport version: 8.9.8 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Robert Jaszczurek","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-23T10:56:12Z","message":"[ML][UX]: Consistent Layout and UI Enhancements for ML Pages (#203813)\n\n## Summary\n\n* Updated alignment for `Add to` action buttons across various ML pages\n- see: #184109\n* Fixed the overflowing date picker on `Anomaly Detection` pages - see:\n[#204394](https://github.com/elastic/kibana/issues/204394)\n* Standardized gaps around items on pages to maintain consistent values\nof `8px` (`gutterSize = 's'`)\n* Fixed the header on the Data Visualizer page - see:\n[#204393](https://github.com/elastic/kibana/issues/204393)\n* Adjusted the layout for Change Point Detection\n* Updated toast messages & toast action button - see: #184109\n* Added icons for attachments actions\n\nExploration around new `Add to` actions buttons - the right column is\nthe most recent one, see: #184109 :\n\n| Before | After (add_to button) | After (icon button) - current |\n| ------------- | ------------- | ------------- |\n| \n| \n| \n|\n| \n| \n| \n|\n| \n| \n|\n\n|\n| \n| \n| \n|\n| \n| \n|\n\n|\n\nToasts:\n| Before | After |\n| ------ | ------ | \n| <img width=\"376\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c58000c2-30d4-4312-be53-0e3e9a6e3ae6\"\n/> |\n\n|\n\n\n\nOther changes:\n\n| Before | After |\n| ------ | ------ | \n| \n| \n|\n| \n| \n|\n| \n| \n|\n| \n| \n|\n| \n| \n|\n| \n| \n|\n| <img width=\"342\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/6529eebe-510e-4688-81e6-4cf3e880c610\"\n/> | <img width=\"323\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/6dada83e-252f-45d5-95d2-a03fa856d70a\"\n/> |\n\n- [ ] Any text added follows [EUI's writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\nsentence case text and includes [i18n\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"0cc887be92df434671ad37fe89cb4ebcc0d5af3d","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement",":ml","backport missing","v9.0.0","Team:ML","backport:version","v8.18.0"],"number":203813,"url":"https://github.com/elastic/kibana/pull/203813","mergeCommit":{"message":"[ML][UX]: Consistent Layout and UI Enhancements for ML Pages (#203813)\n\n## Summary\n\n* Updated alignment for `Add to` action buttons across various ML pages\n- see: #184109\n* Fixed the overflowing date picker on `Anomaly Detection` pages - see:\n[#204394](https://github.com/elastic/kibana/issues/204394)\n* Standardized gaps around items on pages to maintain consistent values\nof `8px` (`gutterSize = 's'`)\n* Fixed the header on the Data Visualizer page - see:\n[#204393](https://github.com/elastic/kibana/issues/204393)\n* Adjusted the layout for Change Point Detection\n* Updated toast messages & toast action button - see: #184109\n* Added icons for attachments actions\n\nExploration around new `Add to` actions buttons - the right column is\nthe most recent one, see: #184109 :\n\n| Before | After (add_to button) | After (icon button) - current |\n| ------------- | ------------- | ------------- |\n| \n| \n| \n|\n| \n| \n| \n|\n| \n| \n|\n\n|\n| \n| \n| \n|\n| \n| \n|\n\n|\n\nToasts:\n| Before | After |\n| ------ | ------ | \n| <img width=\"376\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c58000c2-30d4-4312-be53-0e3e9a6e3ae6\"\n/> |\n\n|\n\n\n\nOther changes:\n\n| Before | After |\n| ------ | ------ | \n| \n| \n|\n| \n| \n|\n| \n| \n|\n| \n| \n|\n| \n| \n|\n| \n| \n|\n| <img width=\"342\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/6529eebe-510e-4688-81e6-4cf3e880c610\"\n/> | <img width=\"323\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/6dada83e-252f-45d5-95d2-a03fa856d70a\"\n/> |\n\n- [ ] Any text added follows [EUI's writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\nsentence case text and includes [i18n\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"0cc887be92df434671ad37fe89cb4ebcc0d5af3d"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/203813","number":203813,"mergeCommit":{"message":"[ML][UX]: Consistent Layout and UI Enhancements for ML Pages (#203813)\n\n## Summary\n\n* Updated alignment for `Add to` action buttons across various ML pages\n- see: #184109\n* Fixed the overflowing date picker on `Anomaly Detection` pages - see:\n[#204394](https://github.com/elastic/kibana/issues/204394)\n* Standardized gaps around items on pages to maintain consistent values\nof `8px` (`gutterSize = 's'`)\n* Fixed the header on the Data Visualizer page - see:\n[#204393](https://github.com/elastic/kibana/issues/204393)\n* Adjusted the layout for Change Point Detection\n* Updated toast messages & toast action button - see: #184109\n* Added icons for attachments actions\n\nExploration around new `Add to` actions buttons - the right column is\nthe most recent one, see: #184109 :\n\n| Before | After (add_to button) | After (icon button) - current |\n| ------------- | ------------- | ------------- |\n| \n| \n| \n|\n| \n| \n| \n|\n| \n| \n|\n\n|\n| \n| \n| \n|\n| \n| \n|\n\n|\n\nToasts:\n| Before | After |\n| ------ | ------ | \n| <img width=\"376\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c58000c2-30d4-4312-be53-0e3e9a6e3ae6\"\n/> |\n\n|\n\n\n\nOther changes:\n\n| Before | After |\n| ------ | ------ | \n| \n| \n|\n| \n| \n|\n| \n| \n|\n| \n| \n|\n| \n| \n|\n| \n| \n|\n| <img width=\"342\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/6529eebe-510e-4688-81e6-4cf3e880c610\"\n/> | <img width=\"323\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/6dada83e-252f-45d5-95d2-a03fa856d70a\"\n/> |\n\n- [ ] Any text added follows [EUI's writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\nsentence case text and includes [i18n\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"0cc887be92df434671ad37fe89cb4ebcc0d5af3d"}},{"branch":"8.x","label":"v8.18.0","labelRegex":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> --------- Co-authored-by: kibanamachine <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The text was updated successfully, but these errors were encountered: