[ML] Update the Overview page #159609

darnautov · 2023-06-13T16:44:37Z

Summary

Resolves #154294 and updates the UI of the Overview page

Updates panels layout
Stores expand/collapsed state of the panels in the local storage
Update empty states text and layout

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

elasticmachine · 2023-06-13T16:44:41Z

Pinging @elastic/ml-ui (:ml)

darnautov · 2023-06-13T16:56:00Z

x-pack/plugins/ml/public/application/ml_nodes_check/check_ml_nodes.ts

@@ -43,3 +43,7 @@ export function lazyMlNodesAvailable() {
 export function permissionToViewMlNodeCount() {
  return userHasPermissionToViewMlNodeCount;
 }
+
+export function getMlNodesCount(): number {


Ideally, we should create a service to retrieve and store ML nodes data, but it'd be too much for this PR

qn895 · 2023-06-13T19:42:06Z

x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/utils.ts

@@ -158,5 +164,14 @@ export function getStatsBarData(jobsList: any) {

  jobStats.activeNodes.value = Object.keys(mlNodes).length;

+  if (jobStats.total.value === 0) {
+    for (const statKey in jobStats) {


Can we use Object.entries here instead?

for (const [statKey, val] of Object.entries(jobStats)) { if (statKey !== 'total') { val.show = false; } }

updated in 0380da1

qn895 · 2023-06-13T20:15:12Z

Probably not related to this PR, but noticed 'Updating' status stays for a while (sometimes close to a minute) when navigating from the search bar at the top. Refreshing the page or using the button is pretty speedy.

Screen.Recording.2023-06-13.at.15.11.10.mov

Also out of scope of this PR, but I think it would be nice to match the stats bar in the AD/DFA pages:

darnautov · 2023-06-14T06:12:01Z

Probably not related to this PR, but noticed 'Updating' status stays for a while (sometimes close to a minute) when navigating from the search bar at the top. Refreshing the page or using the button is pretty speedy.

Screen.Recording.2023-06-13.at.15.11.10.mov
Also out of scope of this PR, but I think it would be nice to match the stats bar in the AD/DFA pages:

@qn895 I didn't manage to reproduce, unfortunately. Could it be some issues with the dev server? Otherwise can you please provide step-by-step instructions?

jgowdyelastic · 2023-06-14T06:11:15Z

x-pack/plugins/ml/public/application/overview/components/analytics_panel/analytics_panel.tsx

  const getAnalytics = getAnalyticsFactory(
    setAnalytics,
-    setAnalyticsStats,
+    // @ts-ignore


Could this be fixed? If not can it have a comment.
We should probably use ts-expect-error too, so it's obvious when the issue it fixed.

refactored in 4d2ded2

jgowdyelastic · 2023-06-14T07:21:52Z

x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/utils.ts

+  if (jobStats.total.value === 0) {
+    for (const statKey in jobStats) {
+      if (statKey !== 'total') {
+        // @ts-ignore


same with this @ts-ignore

this one was removed in 0380da1

jgowdyelastic · 2023-06-14T07:49:20Z

x-pack/plugins/ml/public/application/components/collapsible_panel/collapsible_panel.tsx

+  const { euiTheme } = useCurrentThemeVars();
+
+  return (
+    <EuiSplitPanel.Outer grow hasShadow={false} hasBorder={isOpen}>


nit, if you expand and collapse these sections they resize by 1px because of the lack of border.
Adding a border when they are collapsed looks a bit nicer and is less flickery.
Something like this, euiColorLightestShade is the closest shade I could find.

css={isOpen ? {} : { border: `1px solid ${euiTheme.euiColorLightestShade}` }}

Fixed in f846d55

I'm being very nitty now :D
The problem with using transparent rather than matching the color of the background means that the panels are all 1px smaller all the way around when collapsed. This is obvious to me when using a low res screen.
But normal people might not care.

szabosteve

I left some suggestions for the UI text.

...ion/data_frame_analytics/pages/analytics_management/components/empty_prompt/empty_prompt.tsx

...on/jobs/jobs_list/components/anomaly_detection_empty_state/anomaly_detection_empty_state.tsx

...ion/data_frame_analytics/pages/analytics_management/components/empty_prompt/empty_prompt.tsx

…s/analytics_management/components/empty_prompt/empty_prompt.tsx Co-authored-by: István Zoltán Szabó <[email protected]>

…-154294-overview-page

szabosteve

UI text with the latest changes LGTM! Thank you!

jgowdyelastic

LGTM
Please ignore my comment about the panel sizes, it's something that we can tweak alter if we need to.

qn895 · 2023-06-14T14:24:51Z

LGTM 🎉

peteharverson

With the changes to the links in the empty states, please could you unskip the ml and transform accessibility tests in https://github.com/elastic/kibana/blob/main/x-pack/test/accessibility/config.ts#L38 and check if they are now passing.

@bhavyarm can you remember why the transform plugin accessibility tests were skipped in #144940? The two PRs referenced in that PR don't seem to be related to the transforms page.

bhavyarm · 2023-06-15T13:03:09Z

@bhavyarm can you remember why the transform plugin accessibility tests were skipped in #144940? The two PRs referenced in that PR don't seem to be related to the transforms page.

@peteharverson transforms failed in the ci run at one point. But yes they were passing in the local.

Once a11y tests are unskipped - is it possible to run this PR in flaky test runner 100 times? Thanks very much!

peteharverson

LGTM - hoping the accessibility tests pass now! If not keep them skipped and we'll look at in a follow up.

darnautov · 2023-06-20T09:23:40Z

Flaky tests runner for accessibility tests https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2412

Update: several failures in a11y tests are not related to this PR, e.g., anomaly detection create advanced job validation step and transform tests. I'll keep them disabled in this PR.

This reverts commit 1d15f22.

darnautov · 2023-06-20T10:20:17Z

@elasticmachine merge upstream

kibana-ci · 2023-06-20T11:17:24Z

💚 Build Succeeded

Buildkite Build
Commit: 6486ff9

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`ml`	1741	1751	+10

Async chunks

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

id	before	after	diff
`ml`	3.4MB	3.4MB	+8.3KB

Page load bundle

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

id	before	after	diff
`ml`	73.9KB	73.9KB	+56.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`enterpriseSearch`	13	15	+2
`securitySolution`	411	415	+4
total			+6

Total ESLint disabled count

id	before	after	diff
`enterpriseSearch`	14	16	+2
`securitySolution`	494	498	+4
total			+6

History

💔 Build #136392 failed 1d15f22
💚 Build #135078 succeeded f846d55
💚 Build #135040 succeeded 9ca5a6e
💔 Build #134909 failed 5241992

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @darnautov

This reverts commit 6ac52fb.

mistic · 2023-06-20T13:48:58Z

I had the need to revert this PR as it was failing the on merge ci https://buildkite.com/elastic/kibana-on-merge/builds/31675

## Summary Resolves elastic#154294 and updates the UI of the Overview page - Updates panels layout - Stores expand/collapsed state of the panels in the local storage - Update empty states text and layout <img width="1341" alt="image" src="https://github.com/elastic/kibana/assets/5236598/8833fa2a-b574-44ee-bacb-e974186dd35f"> ### Checklist - [ ] 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) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) (cherry picked from commit 6ac52fb)

## Summary [Cherry-pick](36c9a0c) of the original PR #159609 with the [fixed](d444ca4) `css` import.

darnautov added 8 commits June 13, 2023 16:47

collapsible_panel.tsx, store state in the local storage

5cfa6a8

group actions

b29f998

analytics_panel

aac5aac

hide keys when total is 0

f0f3572

DFA empty prompt

869774d

AD empty prompt

e95c488

dfa panel title, fix i18n

150d8a5

Nodes panel

bacdda5

darnautov added release_note:enhancement :ml Team:ML Team label for ML (also use :ml) v8.9.0 labels Jun 13, 2023

darnautov requested review from alvarezmelissa87, peteharverson and jgowdyelastic June 13, 2023 16:44

darnautov self-assigned this Jun 13, 2023

darnautov requested a review from a team as a code owner June 13, 2023 16:44

darnautov requested a review from szabosteve June 13, 2023 16:45

panel border

5241992

darnautov commented Jun 13, 2023

View reviewed changes

qn895 reviewed Jun 13, 2023

View reviewed changes

darnautov added 3 commits June 14, 2023 07:56

refactor

0380da1

update jest tests

8851411

mlTotalNodesCount test

9ca5a6e

jgowdyelastic reviewed Jun 14, 2023

View reviewed changes

szabosteve reviewed Jun 14, 2023

View reviewed changes

Update x-pack/plugins/ml/public/application/data_frame_analytics/page…

3e95834

…s/analytics_management/components/empty_prompt/empty_prompt.tsx Co-authored-by: István Zoltán Szabó <[email protected]>

darnautov and others added 4 commits June 14, 2023 10:13

Update x-pack/plugins/ml/public/application/data_frame_analytics/page…

b644503

…s/analytics_management/components/empty_prompt/empty_prompt.tsx Co-authored-by: István Zoltán Szabó <[email protected]>

refactor, remove ts-ignore

4d2ded2

Merge remote-tracking branch 'origin/ml-154294-overview-page' into ml…

5049b99

…-154294-overview-page

css panel border

f846d55

darnautov requested review from szabosteve, qn895 and jgowdyelastic June 14, 2023 08:26

szabosteve approved these changes Jun 14, 2023

View reviewed changes

jgowdyelastic approved these changes Jun 14, 2023

View reviewed changes

qn895 approved these changes Jun 14, 2023

View reviewed changes

peteharverson reviewed Jun 15, 2023

View reviewed changes

darnautov added 2 commits June 20, 2023 10:05

Merge remote-tracking branch 'origin/main' into ml-154294-overview-page

06ef28a

enable accessibility tests

1d15f22

peteharverson approved these changes Jun 20, 2023

View reviewed changes

Revert "enable accessibility tests"

ab49032

This reverts commit 1d15f22.

Merge branch 'main' into ml-154294-overview-page

6486ff9

darnautov merged commit 6ac52fb into elastic:main Jun 20, 2023

kibanamachine added the backport:skip This commit does not require backporting label Jun 20, 2023

darnautov deleted the ml-154294-overview-page branch June 20, 2023 11:56

mistic added a commit that referenced this pull request Jun 20, 2023

Revert "[ML] Update the Overview page (#159609)"

bd38b48

This reverts commit 6ac52fb.

mistic added the reverted label Jun 20, 2023

darnautov mentioned this pull request Jun 20, 2023

[ML] Update the Overview page #160032

Merged

darnautov added a commit that referenced this pull request Jun 20, 2023

[ML] Update the Overview page (#160032)

e4b8f0f

## Summary [Cherry-pick](36c9a0c) of the original PR #159609 with the [fixed](d444ca4) `css` import.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Update the Overview page #159609

[ML] Update the Overview page #159609

darnautov commented Jun 13, 2023 •

edited

Loading

elasticmachine commented Jun 13, 2023

darnautov Jun 13, 2023

qn895 Jun 13, 2023

darnautov Jun 14, 2023

qn895 commented Jun 13, 2023 •

edited

Loading

darnautov commented Jun 14, 2023

jgowdyelastic Jun 14, 2023

darnautov Jun 14, 2023

jgowdyelastic Jun 14, 2023

darnautov Jun 14, 2023

jgowdyelastic Jun 14, 2023

darnautov Jun 14, 2023

jgowdyelastic Jun 14, 2023

szabosteve left a comment

szabosteve left a comment

jgowdyelastic left a comment

qn895 commented Jun 14, 2023

peteharverson left a comment

bhavyarm commented Jun 15, 2023

peteharverson left a comment

darnautov commented Jun 20, 2023 •

edited

Loading

darnautov commented Jun 20, 2023

kibana-ci commented Jun 20, 2023

ESLint disabled line counts

Total ESLint disabled count

mistic commented Jun 20, 2023

[ML] Update the Overview page #159609

[ML] Update the Overview page #159609

Conversation

darnautov commented Jun 13, 2023 • edited Loading

Summary

Checklist

elasticmachine commented Jun 13, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qn895 commented Jun 13, 2023 • edited Loading

darnautov commented Jun 14, 2023

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

szabosteve left a comment

Choose a reason for hiding this comment

szabosteve left a comment

Choose a reason for hiding this comment

jgowdyelastic left a comment

Choose a reason for hiding this comment

qn895 commented Jun 14, 2023

peteharverson left a comment

Choose a reason for hiding this comment

bhavyarm commented Jun 15, 2023

peteharverson left a comment

Choose a reason for hiding this comment

darnautov commented Jun 20, 2023 • edited Loading

darnautov commented Jun 20, 2023

kibana-ci commented Jun 20, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

ESLint disabled line counts

Total ESLint disabled count

History

mistic commented Jun 20, 2023

darnautov commented Jun 13, 2023 •

edited

Loading

qn895 commented Jun 13, 2023 •

edited

Loading

darnautov commented Jun 20, 2023 •

edited

Loading