[ML] Embeddable Anomaly Swimlane #64056

darnautov · 2020-04-21T10:56:55Z

Summary

Adds support of ML Anomaly Swimlane embedding on the Dashboard.

At the moment Swimlane Embeddabale supports the following:

Select multiple jobs
"Overall" or "View By" types of swimlanes
Custom time range per swimlane embeddable instance
Update swimlane data based on the panel size
Filters and query support (requires any visualization of the original index to be added to the dashboard)
Edit of the swimlane embeddable input with "Edit swimlane" action

Some highlights of the implementation:

ExplorerService is responsible for fetching data for swimlanes. Logic has been moved out of explorer utils that depends on the dependency cache. We should avoid such dependencies and use DI to instantiate services.
Chart tooltip service and component were rewritten because they cased page freezing
HttpService. I'm going to replace the currently used http and http$ functions in a follow-up.
MlAnomalyDetectorService for fetching selected jobs by id and extracting influencers' values. I know we currently have a job service, but it relies on fetching all the data upfront and cache it which is not optimal and adds a lot of overhead to the usage in a lightweight widget on the dashboard. Ideally, we should move the logic from the legacy jobs service and optimize the data fetching.
JobSelectorFlyout has been extracted from the job_selector.tsx to be used for providing embeddable's input.
Refactor several components to TS

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-04-23T08:53:47Z

Pinging @elastic/ml-ui (:ml)

stacey-gammon · 2020-04-30T18:36:51Z

@darnautov - I'm pretty sure trying to do what @AlonaNadler is asking is not going to be doable by FF (but by all means, you can try if you disagree). We talked in a meeting earlier, I think it must have been right after her comment above. No problem merging as it is, under the "create new" button, and we are going to rethink the entire add panel for 7.9.

walterra

Latest changes LGTM

darnautov · 2020-05-04T07:42:21Z

@elasticmachine merge upstream

darnautov · 2020-05-04T09:18:26Z

@elasticmachine merge upstream

jgowdyelastic

LGTM

darnautov · 2020-05-04T11:29:13Z

@elasticmachine merge upstream

streamich

I've mostly looked at embeddable specific changes, which LGTM. I like how in AnomalySwimlaneEmbeddable you only use that embeddable to render a React component and give it reload$ observable, without any other fluff. 👍

BTW, we are planning to improve that, it should be way simpler to use a React component as your embeddable in the future.

streamich · 2020-05-04T12:25:54Z

x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx

+  }
+
+  public render(node: HTMLElement) {
+    this.node = node;


nit, please add

super.render(node)

…swimlane-embeddable

peteharverson

Tested edit functionality and LGTM

kibanamachine · 2020-05-04T16:39:29Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 980e6cf

History

💚 Build #44988 succeeded ac463aa
💚 Build #44935 succeeded 280c324
💔 Build #44890 failed 99c273f
💔 Build #44852 failed 87182b6
💚 Build #44414 succeeded 57c3532

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

* [ML] embeddables setup * [ML] fix initialization * [ML] ts refactoring * [ML] refactor time_buckets.js * [ML] async services * [ML] extract job_selector_flyout.tsx * [ML] fetch overall swimlane data * [ML] import explorer styles * [ML] revert package_globs.ts * [ML] refactor with container, services with DI * [ML] resize throttle, fetch based on chart width * [ML] swimlane embeddable setup * [ML] explorer service * [ML] chart_tooltip_service * [ML] fix types * [ML] overall type for single job with no influencers * [ML] improve anomaly_swimlane_initializer ux * [ML] fix services initialization, unsubscribe on destroy * [ML] support custom time range * [ML] add tooltip * [ML] rollback initGetSwimlaneBucketInterval * [ML] new tooltip service * [ML] MlTooltipComponent with render props, fix warning * [ML] fix typo in the filename * [ML] remove redundant time range output * [ML] fix time_buckets.test.js jest tests * [ML] fix explorer chart tests * [ML] swimlane tests * [ML] store job ids instead of complete job objects * [ML] swimlane limit input * [ML] memo tooltip component, loading indicator * [ML] scrollable content * [ML] support query and filters * [ML] handle query syntax errors * [ML] rename anomaly_swimlane_service * [ML] introduce constants * [ML] edit panel title during setup * [ML] withTimeRangeSelector * [ML] rename explorer_service * [ML] getJobs$ method with one API call * [ML] fix groups selection * [ML] swimlane input resolver hook * [ML] useSwimlaneInputResolver tests * [ML] factory test * [ML] container test * [ML] set wrapper * [ML] tooltip tests * [ML] fix displayScore * [ML] label colors * [ML] support edit mode * [ML] call super render Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

This reverts commit f62df99.

spalger · 2020-05-04T20:05:02Z

Had to revert this PR because it caused typecheck errors once merged into master. https://kibana-ci.elastic.co/job/elastic+kibana+master/4912/execution/node/142/log/

Please resubmit with fixes and backport the fix instead 😄

* [ML] embeddables setup * [ML] fix initialization * [ML] ts refactoring * [ML] refactor time_buckets.js * [ML] async services * [ML] extract job_selector_flyout.tsx * [ML] fetch overall swimlane data * [ML] import explorer styles * [ML] revert package_globs.ts * [ML] refactor with container, services with DI * [ML] resize throttle, fetch based on chart width * [ML] swimlane embeddable setup * [ML] explorer service * [ML] chart_tooltip_service * [ML] fix types * [ML] overall type for single job with no influencers * [ML] improve anomaly_swimlane_initializer ux * [ML] fix services initialization, unsubscribe on destroy * [ML] support custom time range * [ML] add tooltip * [ML] rollback initGetSwimlaneBucketInterval * [ML] new tooltip service * [ML] MlTooltipComponent with render props, fix warning * [ML] fix typo in the filename * [ML] remove redundant time range output * [ML] fix time_buckets.test.js jest tests * [ML] fix explorer chart tests * [ML] swimlane tests * [ML] store job ids instead of complete job objects * [ML] swimlane limit input * [ML] memo tooltip component, loading indicator * [ML] scrollable content * [ML] support query and filters * [ML] handle query syntax errors * [ML] rename anomaly_swimlane_service * [ML] introduce constants * [ML] edit panel title during setup * [ML] withTimeRangeSelector * [ML] rename explorer_service * [ML] getJobs$ method with one API call * [ML] fix groups selection * [ML] swimlane input resolver hook * [ML] useSwimlaneInputResolver tests * [ML] factory test * [ML] container test * [ML] set wrapper * [ML] tooltip tests * [ML] fix displayScore * [ML] label colors * [ML] support edit mode * [ML] call super render Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit f62df99)

* [ML] Embeddable Anomaly Swimlane (#64056) * [ML] embeddables setup * [ML] fix initialization * [ML] ts refactoring * [ML] refactor time_buckets.js * [ML] async services * [ML] extract job_selector_flyout.tsx * [ML] fetch overall swimlane data * [ML] import explorer styles * [ML] revert package_globs.ts * [ML] refactor with container, services with DI * [ML] resize throttle, fetch based on chart width * [ML] swimlane embeddable setup * [ML] explorer service * [ML] chart_tooltip_service * [ML] fix types * [ML] overall type for single job with no influencers * [ML] improve anomaly_swimlane_initializer ux * [ML] fix services initialization, unsubscribe on destroy * [ML] support custom time range * [ML] add tooltip * [ML] rollback initGetSwimlaneBucketInterval * [ML] new tooltip service * [ML] MlTooltipComponent with render props, fix warning * [ML] fix typo in the filename * [ML] remove redundant time range output * [ML] fix time_buckets.test.js jest tests * [ML] fix explorer chart tests * [ML] swimlane tests * [ML] store job ids instead of complete job objects * [ML] swimlane limit input * [ML] memo tooltip component, loading indicator * [ML] scrollable content * [ML] support query and filters * [ML] handle query syntax errors * [ML] rename anomaly_swimlane_service * [ML] introduce constants * [ML] edit panel title during setup * [ML] withTimeRangeSelector * [ML] rename explorer_service * [ML] getJobs$ method with one API call * [ML] fix groups selection * [ML] swimlane input resolver hook * [ML] useSwimlaneInputResolver tests * [ML] factory test * [ML] container test * [ML] set wrapper * [ML] tooltip tests * [ML] fix displayScore * [ML] label colors * [ML] support edit mode * [ML] call super render Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit f62df99) * [ML] fix typing issues

* [ML] Embeddable Anomaly Swimlane (elastic#64056) * [ML] embeddables setup * [ML] fix initialization * [ML] ts refactoring * [ML] refactor time_buckets.js * [ML] async services * [ML] extract job_selector_flyout.tsx * [ML] fetch overall swimlane data * [ML] import explorer styles * [ML] revert package_globs.ts * [ML] refactor with container, services with DI * [ML] resize throttle, fetch based on chart width * [ML] swimlane embeddable setup * [ML] explorer service * [ML] chart_tooltip_service * [ML] fix types * [ML] overall type for single job with no influencers * [ML] improve anomaly_swimlane_initializer ux * [ML] fix services initialization, unsubscribe on destroy * [ML] support custom time range * [ML] add tooltip * [ML] rollback initGetSwimlaneBucketInterval * [ML] new tooltip service * [ML] MlTooltipComponent with render props, fix warning * [ML] fix typo in the filename * [ML] remove redundant time range output * [ML] fix time_buckets.test.js jest tests * [ML] fix explorer chart tests * [ML] swimlane tests * [ML] store job ids instead of complete job objects * [ML] swimlane limit input * [ML] memo tooltip component, loading indicator * [ML] scrollable content * [ML] support query and filters * [ML] handle query syntax errors * [ML] rename anomaly_swimlane_service * [ML] introduce constants * [ML] edit panel title during setup * [ML] withTimeRangeSelector * [ML] rename explorer_service * [ML] getJobs$ method with one API call * [ML] fix groups selection * [ML] swimlane input resolver hook * [ML] useSwimlaneInputResolver tests * [ML] factory test * [ML] container test * [ML] set wrapper * [ML] tooltip tests * [ML] fix displayScore * [ML] label colors * [ML] support edit mode * [ML] call super render Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit f62df99) * [ML] fix typing issues

* [ML] Embeddable Anomaly Swimlane (#64056) * [ML] embeddables setup * [ML] fix initialization * [ML] ts refactoring * [ML] refactor time_buckets.js * [ML] async services * [ML] extract job_selector_flyout.tsx * [ML] fetch overall swimlane data * [ML] import explorer styles * [ML] revert package_globs.ts * [ML] refactor with container, services with DI * [ML] resize throttle, fetch based on chart width * [ML] swimlane embeddable setup * [ML] explorer service * [ML] chart_tooltip_service * [ML] fix types * [ML] overall type for single job with no influencers * [ML] improve anomaly_swimlane_initializer ux * [ML] fix services initialization, unsubscribe on destroy * [ML] support custom time range * [ML] add tooltip * [ML] rollback initGetSwimlaneBucketInterval * [ML] new tooltip service * [ML] MlTooltipComponent with render props, fix warning * [ML] fix typo in the filename * [ML] remove redundant time range output * [ML] fix time_buckets.test.js jest tests * [ML] fix explorer chart tests * [ML] swimlane tests * [ML] store job ids instead of complete job objects * [ML] swimlane limit input * [ML] memo tooltip component, loading indicator * [ML] scrollable content * [ML] support query and filters * [ML] handle query syntax errors * [ML] rename anomaly_swimlane_service * [ML] introduce constants * [ML] edit panel title during setup * [ML] withTimeRangeSelector * [ML] rename explorer_service * [ML] getJobs$ method with one API call * [ML] fix groups selection * [ML] swimlane input resolver hook * [ML] useSwimlaneInputResolver tests * [ML] factory test * [ML] container test * [ML] set wrapper * [ML] tooltip tests * [ML] fix displayScore * [ML] label colors * [ML] support edit mode * [ML] call super render Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit f62df99) * [ML] fix typing issues Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

darnautov force-pushed the ML-swimlane-embeddable branch 2 times, most recently from 016b79c to 9f5715c Compare April 23, 2020 08:35

darnautov self-assigned this Apr 23, 2020

darnautov added :ml Feature:Anomaly Detection ML anomaly detection Feature:Embedding Embedding content via iFrame labels Apr 23, 2020

darnautov added 18 commits April 23, 2020 12:31

[ML] embeddables setup

ea0da2b

[ML] fix initialization

9017723

[ML] ts refactoring

088a888

[ML] refactor time_buckets.js

b32602e

[ML] async services

c735a25

[ML] extract job_selector_flyout.tsx

1d8c743

[ML] fetch overall swimlane data

c934869

[ML] import explorer styles

96463a6

[ML] revert package_globs.ts

c808dda

[ML] refactor with container, services with DI

84f7f9c

[ML] resize throttle, fetch based on chart width

f5e40fc

[ML] swimlane embeddable setup

2284c98

[ML] explorer service

46907aa

[ML] chart_tooltip_service

2aefe0b

[ML] fix types

91cf91f

[ML] overall type for single job with no influencers

59f0a0e

[ML] improve anomaly_swimlane_initializer ux

49d0f79

[ML] fix services initialization, unsubscribe on destroy

8b8f713

darnautov force-pushed the ML-swimlane-embeddable branch from 9f5715c to 8b8f713 Compare April 23, 2020 10:31

elastic deleted a comment from kibanamachine Apr 23, 2020

darnautov added 2 commits April 23, 2020 14:41

[ML] support custom time range

4d6d713

[ML] add tooltip

9cb2bf0

darnautov added the v7.8 label Apr 23, 2020

walterra approved these changes May 4, 2020

View reviewed changes

Merge branch 'master' into ML-swimlane-embeddable

87182b6

Merge branch 'master' into ML-swimlane-embeddable

99c273f

jgowdyelastic approved these changes May 4, 2020

View reviewed changes

Merge branch 'master' into ML-swimlane-embeddable

280c324

streamich approved these changes May 4, 2020

View reviewed changes

darnautov added 3 commits May 4, 2020 15:43

[ML] support edit mode

cef8862

Merge remote-tracking branch 'origin/ML-swimlane-embeddable' into ML-…

ac463aa

…swimlane-embeddable

[ML] call super render

980e6cf

peteharverson approved these changes May 4, 2020

View reviewed changes

darnautov merged commit f62df99 into elastic:master May 4, 2020

darnautov deleted the ML-swimlane-embeddable branch May 4, 2020 17:10

darnautov mentioned this pull request May 4, 2020

[7.x] [ML] Embeddable Anomaly Swimlane (#64056) #65118

Closed

spalger added a commit that referenced this pull request May 4, 2020

Revert "[ML] Embeddable Anomaly Swimlane (#64056)"

dccb1dc

This reverts commit f62df99.

spalger added the reverted label May 4, 2020

jasonrhodes mentioned this pull request May 4, 2020

Determine which Swimlane visualization meets our needs #65174

Closed

darnautov mentioned this pull request May 4, 2020

[ML] Embeddable Anomaly Swimlane #65180

Merged

darnautov mentioned this pull request May 14, 2020

[ML] Embeddables enhancements #66553

Open

10 tasks

peteharverson mentioned this pull request Jun 5, 2020

[ML] ML job panel as an embeddable in dashboard/canvas #44195

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Embeddable Anomaly Swimlane #64056

[ML] Embeddable Anomaly Swimlane #64056

darnautov commented Apr 21, 2020 •

edited

Loading

elasticmachine commented Apr 23, 2020

stacey-gammon commented Apr 30, 2020

walterra left a comment

darnautov commented May 4, 2020

darnautov commented May 4, 2020

jgowdyelastic left a comment

darnautov commented May 4, 2020

streamich left a comment

streamich May 4, 2020

peteharverson left a comment

kibanamachine commented May 4, 2020

spalger commented May 4, 2020

[ML] Embeddable Anomaly Swimlane #64056

[ML] Embeddable Anomaly Swimlane #64056

Conversation

darnautov commented Apr 21, 2020 • edited Loading

Summary

Checklist

elasticmachine commented Apr 23, 2020

stacey-gammon commented Apr 30, 2020

walterra left a comment

Choose a reason for hiding this comment

darnautov commented May 4, 2020

darnautov commented May 4, 2020

jgowdyelastic left a comment

Choose a reason for hiding this comment

darnautov commented May 4, 2020

streamich left a comment

Choose a reason for hiding this comment

streamich May 4, 2020

Choose a reason for hiding this comment

peteharverson left a comment

Choose a reason for hiding this comment

kibanamachine commented May 4, 2020

💚 Build Succeeded

History

spalger commented May 4, 2020

darnautov commented Apr 21, 2020 •

edited

Loading