[ML] Notifications indicator

[darnautov]

Summary

Resolves #135417

Adds a notifications indicator to the side nav menu.

How it works

• When the user visits the Notifications page, the app stashes the timestamp of the latest notification visible on the screen in the local storage
• The app polling the .ml-notifications* index with an interval of 1 minute for new notifications that occurred after the stored timestamp
• If there are only notifications with an info level, displays the generic notification indicator

• If there are errors or warnings, it shows a counter in the side nav.

• When the user visits the page again, sets the time bounds based on the last checked notification.

How to test

• To trigger an info message, you can create any job or deploy model, start/stop datafeed, etc.
• To trigger an error, you can delete the source index of the anomaly detection job. Setting frequency for this job to something small should make it less time-consuming.

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]

Pinging @elastic/ml-ui (:ml)

[walterra]

Looks good overall! Left some comments with suggestions. Did some local testing and was able to trigger the notifications icon including errors.

[szabosteve]

One comment on something that Walter has already spotted but I added a suggestion anyway. Otherwise UI text LGTM!

[walterra]

Latest changes LGTM.

[peteharverson]

Would it be better to remember the last setting in the time picker rather than setting it to the time of the latest checked notification - for example I end up continually resetting to Last 24 hours when I switch back to the page?

[peteharverson]

Maybe we could add an extra column to the table (8.6+) which indicates if a notification is 'new'? At that point it might be worth changing the behavior to preserve the time picker setting from the last visit to the page. Till then, this current behavior is a good way of showing the unread notifications.

[darnautov]

Actually, I implemented it like this initially but then decided to change to behaviour here.
Because imagine you have a time picker set to some time in the past (this can easily happen when you open anomaly explorer). And when you click the Notification link in the side nav, it's going to preserve this time range and it might be confusing for the user.

[peteharverson]

Yes I wasn't thinking of using the time range from the global state, but stashing the last applied time range on the notifications page, where a common use case might be 'Last 1 hour' for example.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 03ccd88

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
ml	1618	1623	+5

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.3MB	3.3MB	+3.1KB

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
ml	574	577	+3

Total ESLint disabled count

id	before	after	diff
ml	577	580	+3

History

• 💚 Build #73442 succeeded 4b57251

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

cc @darnautov

[peteharverson]

Tested and LGTM.

Let's wait for more feedback on how the time range is set in the page. Some way of indicating unread notifications is a possible for a follow-up in 8.6+.