[ML][UX]: Consistent Layout and UI Enhancements for ML Pages #203813

rbrtj · 2024-12-11T14:52:52Z

Summary

Updated alignment for Add to action buttons across various ML pages - see: [ML][UX]: Updates to ML embeddable 'Add to' action #184109
Fixed the overflowing date picker on Anomaly Detection pages - see: #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
Adjusted the layout for Change Point Detection
Updated toast messages & toast action button - see: [ML][UX]: Updates to ML embeddable 'Add to' action #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

Other changes:

Before	After

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support

…mpling menu

…-update

…-fix'

adcoelho

response-ops changes ok

elasticmachine · 2024-12-17T10:35:55Z

Pinging @elastic/ml-ui (:ml)

peteharverson · 2024-12-17T12:22:24Z

x-pack/platform/plugins/shared/aiops/public/cases/constants.ts

+ * Titles for the cases toast messages
+ */
+export const TITLES = {
+  CHANGE_POINT_DETECTION: 'Change point detection',


Should these be internationalized?

Change point chart might be better here. Change point chart added to case

Done in: #7f408c6

Sorry I'd forgotten that it's possible to multi-select charts to add to a case - can a plural condition be added for Change point chart / Change point charts?

Added plural for Change point charts.
Also Change point table message when the table view is selected in: #847d00e

peteharverson · 2024-12-17T12:22:43Z

...n/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx

+          pageTitle={
+            <>
+              {currentDataView.getName()}
+              {/* TODO: This management section shouldn't live inside the header */}


Are you planning on doing this in this PR?

I think we can tackle it, but it would be nice to find a different place for this menu to reside.
Otherwise, it's being wrapped within an <h1> tag, which doesn't seem right.
If @joana-cps suggests a better location for the button, we can definitely move it outside the header.

I agree that we need to find a different place for this menu. We can do this in a separate issue.

x-pack/platform/plugins/shared/ml/public/cases/constants.ts

x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx

x-pack/platform/plugins/shared/ml/public/cases/constants.ts

peteharverson · 2024-12-17T17:08:02Z

...ared/ml/public/application/timeseriesexplorer/components/series_controls/series_controls.tsx

@@ -321,7 +321,7 @@ export const SeriesControls: FC<PropsWithChildren<SeriesControlsProps>> = ({

  return (
    <div data-test-subj="mlSingleMetricViewerSeriesControls">
-      <EuiFlexGroup direction={direction}>
+      <EuiFlexGroup direction={direction} gutterSize="s">


Can the detector dropdown be given a minimum width? Also is there any easy way to preserve the vertical alignment of the model bounds, annotations and forecast controls as the width is reduced?

Updated the detector dropdown to have a min width in: #cd56f03

To preserve vertical alignment, I propose wrapping controls as the width decreases. I don't see any way to keep everything in a single row while maintaining good alignment.

WDYT?

Screen.Recording.2024-12-19.at.11.19.43.mov

This looks good, I think it is a good solution.

Agree with @joana-cps - this is working well.

…hart

joana-cps

Tested and visually LGTM. Thanks Robert for these improvements!

…-update

walterra

Code LGTM, just added some minor suggestions.

walterra · 2024-12-19T10:54:25Z

x-pack/platform/packages/private/ml/date_picker/src/components/date_picker_wrapper.tsx

@@ -90,10 +90,6 @@ interface DatePickerWrapperProps {
  /**
   * Boolean flag to set use of flex group wrapper
   */
-  flexGroup?: boolean;
-  /**


Looks like you accidentaly removed the comment for the next prop and not flexGroup.

Good catch, done in: #d73ab5d

walterra · 2024-12-19T10:56:54Z

x-pack/platform/plugins/shared/aiops/public/cases/constants.ts

+/**
+ * Titles for the cases toast messages
+ */
+export const TITLES = {


Suggest to make this a bit more specific like CASES_TOAST_MESSAGES_TITLES.

Agree, done in: #7f47fad

walterra · 2024-12-19T11:00:10Z

x-pack/platform/plugins/shared/ml/public/cases/constants.ts

+/**
+ * Titles for the cases toast messages
+ */
+export const TITLES = {


Again, suggest to make this const more specific like CASES_TOAST_MESSAGES_TITLES.

Done in: #7f47fad

peteharverson

Tested latest changes and LGTM.
Just left one suggestion about a plural case for the change point charts. Would be good to get that in too.

…ral message

elasticmachine · 2024-12-23T09:30:41Z

💚 Build Succeeded

Buildkite Build
Commit: f54f968

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`aiops`	630	631	+1
`ml`	2141	2142	+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`	621.4KB	623.3KB	+2.0KB
`dataVisualizer`	615.4KB	614.9KB	-436.0B
`ml`	4.7MB	4.7MB	-3.3KB
`transform`	476.4KB	476.4KB	-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`	160.3KB	160.4KB	+88.0B
`ml`	77.8KB	77.8KB	+1.0B
total			+89.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

cc @rbrtj

kibanamachine · 2024-12-23T10:56:29Z

Starting backport for target branches: 8.x

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

kibanamachine · 2024-12-23T11:01:24Z

💔 All backports failed

Status	Branch	Result
❌	8.x	Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 203813

Questions ?

Please refer to the Backport tool documentation

kibanamachine · 2024-12-25T11:48:39Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 203813 locally

kibanamachine · 2024-12-26T11:48:43Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 203813 locally

kibanamachine · 2024-12-27T11:48:56Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 203813 locally

rbrtj added 7 commits December 11, 2024 15:33

anomaly timeline use eui button for add to actions popover

6a0d029

timeseries explorer controls layout update

28d27b0

log rate analysis use eui button for add to actions popover

924c396

log rate analysis use eui button for add to actions popover & auto sa…

a3b2030

…mpling menu

remove unused import

02aa1f3

change point detection use eui button for add to actions popover

3ae73e8

update button colors to text

0e0f1de

rbrtj requested a review from joana-cps December 12, 2024 10:49

rbrtj added 8 commits December 12, 2024 11:58

single metric viewer embeddable color

9960e5c

update buttons to button icon with boxes horizontal icon

a0bb316

use size s as default size for add to button

18fe658

keep consistent spaces between controls around ml pages

9142f10

fix overflowing date picker inside various ml pages

a0bea28

fix data visualizer layout

9aa70f6

update toasts

63c3193

Merge remote-tracking branch 'upstream/main' into ml-add-to-action-ui…

4db66c5

…-update

rbrtj marked this pull request as ready for review December 17, 2024 09:35

rbrtj requested review from a team as code owners December 17, 2024 09:35

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

24eaf3d

…-fix'

adcoelho approved these changes Dec 17, 2024

View reviewed changes

rbrtj self-assigned this Dec 17, 2024

rbrtj added :ml v9.0.0 Team:ML Team label for ML (also use :ml) backport:version Backport to applied version labels v8.18.0 labels Dec 17, 2024

rbrtj changed the title ~~[ML][UX]: Updates to ML embeddable 'Add to' action~~ [ML][UX]: Consistent Layout and UI Enhancements for ML Pages Dec 17, 2024

rbrtj added the release_note:enhancement label Dec 17, 2024

peteharverson reviewed Dec 17, 2024

View reviewed changes

x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx Show resolved Hide resolved

peteharverson reviewed Dec 17, 2024

View reviewed changes

x-pack/platform/plugins/shared/ml/public/cases/constants.ts Outdated Show resolved Hide resolved

update anomaly panel menu button

e9108d6

peteharverson reviewed Dec 17, 2024

View reviewed changes

rbrtj added 3 commits December 18, 2024 15:28

add icons for attachements actions

4c193b7

internationalization for cases toast messages && plural for anomaly c…

7f408c6

…hart

timeseriesexplorer detector dropdown min width && wrap controls

cd56f03

joana-cps approved these changes Dec 19, 2024

View reviewed changes

Merge remote-tracking branch 'upstream/main' into ml-add-to-action-ui…

dfd2494

…-update

rbrtj requested review from peteharverson and walterra December 19, 2024 10:39

walterra approved these changes Dec 19, 2024

View reviewed changes

peteharverson approved these changes Dec 19, 2024

View reviewed changes

rbrtj and others added 7 commits December 19, 2024 13:42

different message for change point table and chart attachments && plu…

847d00e

…ral message

revert accidentaly removed comment

d73ab5d

rename titles variable to cases_toast_messages_titles

7f47fad

data visualizer view revert time range selector id

e679f8e

update cases functional tests to respect new toast title

c9bf590

update more tests to respect new toast title

1368a37

Merge branch 'main' into ml-add-to-action-ui-update

f54f968

rbrtj merged commit 0cc887b into elastic:main Dec 23, 2024
8 checks passed

kibanamachine mentioned this pull request Dec 24, 2024

[Security Solution] Unskip tests for the prebuilt rules bootstrap endpoint #205106

Merged

2 tasks

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Dec 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML][UX]: Consistent Layout and UI Enhancements for ML Pages #203813

[ML][UX]: Consistent Layout and UI Enhancements for ML Pages #203813

rbrtj commented Dec 11, 2024 •

edited by kibanamachine

Loading

adcoelho left a comment

elasticmachine commented Dec 17, 2024

peteharverson Dec 17, 2024

peteharverson Dec 17, 2024

rbrtj Dec 19, 2024

peteharverson Dec 19, 2024

rbrtj Dec 19, 2024

peteharverson Dec 17, 2024

rbrtj Dec 17, 2024

joana-cps Dec 18, 2024

peteharverson Dec 17, 2024

rbrtj Dec 19, 2024

joana-cps Dec 19, 2024

peteharverson Dec 19, 2024

joana-cps left a comment

walterra left a comment

walterra Dec 19, 2024

rbrtj Dec 19, 2024

walterra Dec 19, 2024

rbrtj Dec 19, 2024

walterra Dec 19, 2024

rbrtj Dec 19, 2024

peteharverson left a comment

elasticmachine commented Dec 23, 2024

async chunk count

ESLint disabled line counts

Total ESLint disabled count

kibanamachine commented Dec 23, 2024

kibanamachine commented Dec 23, 2024

kibanamachine commented Dec 25, 2024

kibanamachine commented Dec 26, 2024

kibanamachine commented Dec 27, 2024

[ML][UX]: Consistent Layout and UI Enhancements for ML Pages #203813

[ML][UX]: Consistent Layout and UI Enhancements for ML Pages #203813

Conversation

rbrtj commented Dec 11, 2024 • edited by kibanamachine Loading

Summary

adcoelho left a comment

Choose a reason for hiding this comment

elasticmachine commented Dec 17, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joana-cps left a comment

Choose a reason for hiding this comment

walterra left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

peteharverson left a comment

Choose a reason for hiding this comment

elasticmachine commented Dec 23, 2024

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

async chunk count

ESLint disabled line counts

Total ESLint disabled count

History

kibanamachine commented Dec 23, 2024

kibanamachine commented Dec 23, 2024

💔 All backports failed

Manual backport

Questions ?

kibanamachine commented Dec 25, 2024

kibanamachine commented Dec 26, 2024

kibanamachine commented Dec 27, 2024

rbrtj commented Dec 11, 2024 •

edited by kibanamachine

Loading