[ML][UX]: Updates to ML embeddable 'Add to' action #184109
Assignees
Labels
enhancement
New value added to drive a business result
Feature:Anomaly Detection
ML anomaly detection
:ml
v8.18.0
Comments
|
Pinging @elastic/ml-ui (:ml) |
|
Note that we also use the same UX for adding to dashboard / case from the Anomaly Explorer and the ML AIOps Labs Change Point Detection views, so we should extend any changes to those two views too. |
peteharverson
changed the title
peteharverson
changed the title
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]>
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this issue
Jan 13, 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]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Follow up from #183423
The overflow button currently (8.14) in the Single Metric Viewer is hard to notice and feels out of place with the alignment of the visualization.
Some proposals for improving the visibility of this action:
EuiButtonrather thanEuiButtonEmptywith color 'text'.shareorexportor simply giving this button the label 'Add to' with the a down arrow on the right.The following screenshots show these two options:
Option 1
Option 2
As part of this, can we update the toast action that follows:
Include the default button in the toast.
Optionally update the copy so it's mentioned that the visualization was added to the case. (Particularly when creating a new case, it's not immediately clear that the case was created and this was added to it.
The text was updated successfully, but these errors were encountered: