[ML] Anomaly Explorer swim lane pagination #70063

darnautov · 2020-06-26T12:44:10Z

Summary

Resolves #68360 and fixes #70420

Adds pagination support for the Anomaly swim lane on the Anomaly Explorer page and the Anomaly swim lane embeddable.

Anomaly Explorer page

Dashboard with anomaly swim lane embeddables

You may notice that there is no "Limit" control anymore. The actual size of the request is limited by the field cardinality or by a hard limit of 1000 unique terms to avoid extremely heavy aggregations. The paging is achieved by removing the limit as a size value with cardinality and applying bucket_score aggregation to truncate buckets based on the page size.

Some changes related to the Anomaly explorer page:

Some legacy utils have been removed. AnomalyTimelineService is used both on the Anomaly Explorer page and the embeddable.
Container width of the swim lane always come from the state, there is no imperative check using document selector anymore
Fixed immediate re-render on the initial page load

Embeddable input also lacking the "limit" control during setup. When the dashboard is in edit mode, the "Row per page" values persist in the embeddable configuration.

Some other highlights:

There is no global loading indicator for the Anomaly Explorer page anymore because it was blocking the initial render of the Anomaly Timeline panel. Each panel on the page has it's own loading state, e.g. "Top influencer" now using loading content indicator.
Added empty state for overall in case there is no data
Added empty states for the embeddable

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility, including a check against IE11

elasticmachine · 2020-06-30T09:45:04Z

Pinging @elastic/ml-ui (:ml)

…-pagination

mdefazio · 2020-07-01T15:58:49Z

Specific to the pagination this time :D

Let's set the pagination in the Anomaly timeline to use the xSmall button for rows per page so it's consistent with the Anomalies and Annotations pagination rows per page buttons.
It looks like there is some extra padding or margins below the pagination. Best I could find was on .ml-explorer.mlExplorerSwimlane which has bottom-margin: 8px. I know this adds margins below the swimlanes above the pagination, but I think we're using spacers in there anyway so we shouldn't need it.

darnautov · 2020-07-01T16:23:07Z

Specific to the pagination this time :D

Let's set the pagination in the Anomaly timeline to use the xSmall button for rows per page so it's consistent with the Anomalies and Annotations pagination rows per page buttons.

It looks like there is some extra padding or margins below the pagination. Best I could find was on .ml-explorer.mlExplorerSwimlane which has bottom-margin: 8px. I know this adds margins below the swimlanes above the pagination, but I think we're using spacers in there anyway so we shouldn't need it.

thanks for spotting it @mdefazio , just pushed changes cda437d

qn895 · 2020-07-01T16:43:16Z

The swim lane doesn't seem to pick up the removal of a filter in the KQL query bar:

Fixed in d1919b3

When we remove a filter, should we expect it to show it resets? E.g. after removing the filter should it show 5/10/20 of the rows before the filter was applied.

x-pack/plugins/ml/public/application/app.tsx

x-pack/plugins/ml/public/application/explorer/_explorer.scss

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

walterra · 2020-07-02T07:50:56Z

Not sure if related to this PR, but when I view a job without influencers, the "View by" label and its dropdown overlap:

…-pagination

darnautov · 2020-07-02T10:02:12Z

Suggest to use the black&white loading indicators. From EUI docs:

The colored versions should be used sparingly, only when a single large visualization is loaded. When loading smaller groups of panels, the smaller, mono versions should be used.

@walterra changed in f8af4b0

darnautov · 2020-07-02T10:02:55Z

If I change the time range from one which doesn't cover the full range of the job, to the full time range (by opening the job selector, ensuring 'Apply time range' is enabled) and applying, the swim lanes don't re-render for the full time range:

@peteharverson fixed in e6fd3af

walterra

Latest Code LGTM

peteharverson · 2020-07-02T11:59:23Z

@qn895 regarding #70063 (comment), testing the removal of a filter, the swim lane rerenders with the page size setting back to where it was before the filter was applied for me. This is what I expect. Did you see something different?

peteharverson

Tested latest edits and LGTM. Great job!

mdefazio

Pagination part looks good. I think there are a few other items we can address but is more suited for #70198

kibanamachine · 2020-07-02T14:29:43Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 90336a1

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
ml	356	-1	357

History

💔 Build #58198 failed b66ebb2
💔 Build #57939 failed cda437d
💔 Build #57903 failed 98526c4
💔 Build #57886 failed ba3b363
💔 Build #57843 failed d1919b3

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

* [ML] use explorer service * [ML] WIP pagination * [ML] add to dashboard without the limit * [ML] WIP * [ML] loading states * [ML] viewBySwimlaneDataLoading on field change * [ML] fix dashboard control * [ML] universal swim lane container, embeddable pagination * [ML] fix css issue * [ML] rename anomalyTimelineService * [ML] rename callback * [ML] rename container component * [ML] empty state, increase pagination margin * [ML] check for loading * [ML] fix i18n * [ML] fix unit test * [ML] improve selected cells * [ML] fix overall selection with changing job selection * [ML] required props for pagination component * [ML] move RESIZE_IGNORED_DIFF_PX * [ML] jest tests * [ML] add test subject * [ML] SWIM_LANE_DEFAULT_PAGE_SIZE * [ML] change empty state styling * [ML] fix agg size for influencer filters * [ML] remove debounce * [ML] SCSS variables, rename swim lane class * [ML] job selector using context * [ML] set padding for embeddable panel * [ML] adjust pagination styles * [ML] replace custom time range subject with timefilter * [ML] change loading indicator to mono * [ML] use swim lane type constant * [ML] change context naming * [ML] update jest snapshot * [ML] fix tests

* master: Update known-plugins.asciidoc (elastic#69370) [ML] Anomaly Explorer swim lane pagination (elastic#70063) [Ingest Manager] Update asset paths to use _ instead of - (elastic#70320) Fix discover, tsvb and Lens chart theming issues (elastic#69695) Allow Saved Object type mappings to set a field's `doc_values` property (elastic#70433) [S&R] Support data streams (elastic#68078) [Maps] Add styling and tooltip support to mapbox mvt vector tile sources (elastic#64488) redirect to default app if hash can not be forwarded (elastic#70417) [APM] Don't fetch dynamic index pattern in setupRequest (elastic#70308) [Security_Solution][Endpoint] Leveraging msearch and ancestry array for resolver (elastic#70134) Update docs for api authentication usage (elastic#66819) chore(NA): disable alerts_detection_rules cypress suites (elastic#70577) add getVisibleTypes API to SO type registry (elastic#70559)

* [ML] use explorer service * [ML] WIP pagination * [ML] add to dashboard without the limit * [ML] WIP * [ML] loading states * [ML] viewBySwimlaneDataLoading on field change * [ML] fix dashboard control * [ML] universal swim lane container, embeddable pagination * [ML] fix css issue * [ML] rename anomalyTimelineService * [ML] rename callback * [ML] rename container component * [ML] empty state, increase pagination margin * [ML] check for loading * [ML] fix i18n * [ML] fix unit test * [ML] improve selected cells * [ML] fix overall selection with changing job selection * [ML] required props for pagination component * [ML] move RESIZE_IGNORED_DIFF_PX * [ML] jest tests * [ML] add test subject * [ML] SWIM_LANE_DEFAULT_PAGE_SIZE * [ML] change empty state styling * [ML] fix agg size for influencer filters * [ML] remove debounce * [ML] SCSS variables, rename swim lane class * [ML] job selector using context * [ML] set padding for embeddable panel * [ML] adjust pagination styles * [ML] replace custom time range subject with timefilter * [ML] change loading indicator to mono * [ML] use swim lane type constant * [ML] change context naming * [ML] update jest snapshot * [ML] fix tests

darnautov self-assigned this Jun 26, 2020

darnautov added 4 commits June 28, 2020 16:53

[ML] use explorer service

8fa8bd1

[ML] WIP pagination

2ac4e94

[ML] add to dashboard without the limit

96ebfb0

[ML] WIP

483ee8a

darnautov force-pushed the ML-68360-swimlane-pagination branch from a24cb41 to 483ee8a Compare June 28, 2020 14:53

darnautov added 4 commits June 29, 2020 12:12

[ML] loading states

9865ece

[ML] viewBySwimlaneDataLoading on field change

e5c6b4e

[ML] fix dashboard control

1750bf1

[ML] universal swim lane container, embeddable pagination

408c5d0

darnautov added :ml Feature:Anomaly Detection ML anomaly detection Feature:Embedding Embedding content via iFrame release_note:enhancement v7.9.0 v8.0.0 labels Jun 29, 2020

darnautov added 5 commits June 29, 2020 18:25

[ML] fix css issue

b54eb99

[ML] rename anomalyTimelineService

d1307bd

[ML] rename callback

a6f7511

[ML] rename container component

5014202

[ML] empty state, increase pagination margin

5d11936

darnautov requested review from peteharverson and walterra June 30, 2020 09:44

darnautov marked this pull request as ready for review June 30, 2020 09:45

darnautov requested review from a team as code owners June 30, 2020 09:45

darnautov added 3 commits June 30, 2020 11:59

[ML] check for loading

6870fdc

Merge remote-tracking branch 'upstream/master' into ML-68360-swimlane…

6128253

…-pagination

[ML] fix i18n

0d77650

[ML] adjust pagination styles

cda437d

This comment has been minimized.

Sign in to view

walterra reviewed Jul 2, 2020

View reviewed changes

x-pack/plugins/ml/public/application/app.tsx Outdated Show resolved Hide resolved

x-pack/plugins/ml/public/application/explorer/_explorer.scss Show resolved Hide resolved

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

darnautov added 5 commits July 2, 2020 10:54

Merge remote-tracking branch 'upstream/master' into ML-68360-swimlane…

a44f125

…-pagination

[ML] replace custom time range subject with timefilter

e6fd3af

[ML] change loading indicator to mono

f8af4b0

[ML] use swim lane type constant

1370083

[ML] change context naming

fd9e7d0

darnautov requested a review from walterra July 2, 2020 10:08

[ML] update jest snapshot

b66ebb2

walterra approved these changes Jul 2, 2020

View reviewed changes

peteharverson approved these changes Jul 2, 2020

View reviewed changes

[ML] fix tests

90336a1

mdefazio approved these changes Jul 2, 2020

View reviewed changes

darnautov merged commit 854e7a5 into elastic:master Jul 2, 2020

darnautov deleted the ML-68360-swimlane-pagination branch July 2, 2020 14:30

darnautov mentioned this pull request Jul 2, 2020

[7.x] [ML] Anomaly Explorer swim lane pagination (#70063) #70605

Merged

darnautov mentioned this pull request Jul 20, 2020

[ML] Fix the Anomaly Explorer column layout for charts #72389

Merged

2 tasks

darnautov mentioned this pull request Sep 7, 2020

[ML] Swim lane pagination for viewing by job id #76847

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Anomaly Explorer swim lane pagination #70063

[ML] Anomaly Explorer swim lane pagination #70063

darnautov commented Jun 26, 2020 •

edited

Loading

elasticmachine commented Jun 30, 2020

mdefazio commented Jul 1, 2020

darnautov commented Jul 1, 2020

qn895 commented Jul 1, 2020

This comment has been minimized.

walterra commented Jul 2, 2020

darnautov commented Jul 2, 2020

darnautov commented Jul 2, 2020

walterra left a comment

peteharverson commented Jul 2, 2020

peteharverson left a comment

mdefazio left a comment

kibanamachine commented Jul 2, 2020

[ML] Anomaly Explorer swim lane pagination #70063

[ML] Anomaly Explorer swim lane pagination #70063

Conversation

darnautov commented Jun 26, 2020 • edited Loading

Summary

Checklist

elasticmachine commented Jun 30, 2020

mdefazio commented Jul 1, 2020

darnautov commented Jul 1, 2020

qn895 commented Jul 1, 2020

This comment has been minimized.

walterra commented Jul 2, 2020

darnautov commented Jul 2, 2020

darnautov commented Jul 2, 2020

walterra left a comment

Choose a reason for hiding this comment

peteharverson commented Jul 2, 2020

peteharverson left a comment

Choose a reason for hiding this comment

mdefazio left a comment

Choose a reason for hiding this comment

kibanamachine commented Jul 2, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

History

darnautov commented Jun 26, 2020 •

edited

Loading