[ML] Migrate Anomaly Explorer to React (except job selector) #28234

walterra · 2019-01-08T09:44:25Z

Summary

Migrates most parts of Anomaly Explorer to React.

explorer.html is mostly eliminated. It now only contains the job selector and filter bar (which is not in use). Instead of the previous angular code, the template now includes <ml-explorer-react-wrapper />.
<ml-explorer-react-wrapper /> is a directive that inherits the scope of explorer_controller.js. Once all of explorer.html is migrated, this directive can go away again. The directive listens for scope changes in explorer_controller.js and passes on the required scope attributes as props to <Explorer /> (explorer.js).
Some parts have been more "properly" converted than others. For example, messages for no existing jobs or data have been converted using EuiEmptyPrompt, angular code which used plain EUI classes now uses EUI component like EuiFlexGroup etc. This was done for parts which were straight-forward to migrate without touching too much application logic and risk of breaking things.
Some layout is still backed by bootstrap classes, esp. the main layout of the influencers and main column. This will be done in a follow-up.
Some middle-man directives which were wrappers for React components only are finally gone (e.g. influencers_list_directive.js). Some of these included logic to transform scope to props which is now part of explorer.js.
This PR cleans up and simplifies some application logic (esp. gets rid of some event listener/services), but there's room for more improvements in follow ups. The main aim of this PR is to get rid of most of the angularjs template explorer.html.
Some jquery is still used related to tooltips and to determine the width for explorer charts. This was already part of the previously migrated React components and has been a bit refactored in this PR to make it still work with the <Explorer /> component. We should soon get rid of this completely.

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
~~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
~~This was checked for keyboard-only and screenreader accessibility~~

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

Part of #18374.

elasticmachine · 2019-01-08T09:44:27Z

Pinging @elastic/ml-ui

elasticmachine · 2019-01-08T10:17:37Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

cchaos

Changes to SASS are approved ;)

elasticmachine · 2019-01-09T10:44:04Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-09T13:49:36Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

…mponent.

x-pack/plugins/ml/public/components/controls/select_interval/select_interval.js

…ctor instead of jQuery.

elasticmachine · 2019-01-10T11:55:07Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-10T12:24:20Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

walterra · 2019-01-10T12:25:49Z

retest

elasticmachine · 2019-01-10T12:56:36Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-10T14:01:22Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-10T15:17:16Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

peteharverson

A couple of comments, but otherwise LGTM,

x-pack/plugins/ml/public/explorer/explorer.js

x-pack/plugins/ml/public/explorer/explorer_charts/legacy_utils.js

alvarezmelissa87

LGTM ⚡️

elasticmachine · 2019-01-10T16:37:26Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-10T17:32:24Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-11T09:25:42Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…#28234) * [ML] Move Anomaly Explorer Loading indicator to React. * [ML] Move no-jobs message to React/Eui. * [ML] Move no-results message to React/Eui. * [ML] Refactored explorer.js to return earlier. * [ML] Refactored influencers column to react. * [ML] Refactored Overall Swimlane and view-by dropdown to react/eui. * [ML] Refactored limit dropdown to react/eui. * [ML] Refactored view-by swimlanes to React/Eui. * [ML] Refactored annotations table to React/Eui. * [ML] Refactored table controls to React/Eui. * [ML] Refactored explorer charts to use React/Eui. * [ML] Refactored anomalies table to React/Eui. * [ML] Move explorer charts data listener to ExplorerChartsContainer component. * [ML] Make AppState dependent services importable by React components. * [ML] Removes deprecated code. * [ML] Simplify state handling for anomaly charts. * [ML] Simplify swimlaneCellClick(). * [ML] Review feedback: Fix file structure, add propTypes. * [ML] Review feedback: Avoid anonymous inline functions. * [ML] Fixes tests to reflect code changes. * [ML] Fixes InfluencerList DOM position. * [ML] Show a loading indicator when the view-by swimlane updates. * [ML] Review feedback: Import only relevant lodash bits. Use querySelector instead of jQuery. * [ML] Adds snapshot tests for new smallish components. * [ML] Fix test stub. * [ML] More resilient getChartContainerWidth(). * [ML] Review feedback: Comment on legacy utils and dropdown widths.

elasticmachine · 2019-01-11T10:44:19Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…#28558) * [ML] Move Anomaly Explorer Loading indicator to React. * [ML] Move no-jobs message to React/Eui. * [ML] Move no-results message to React/Eui. * [ML] Refactored explorer.js to return earlier. * [ML] Refactored influencers column to react. * [ML] Refactored Overall Swimlane and view-by dropdown to react/eui. * [ML] Refactored limit dropdown to react/eui. * [ML] Refactored view-by swimlanes to React/Eui. * [ML] Refactored annotations table to React/Eui. * [ML] Refactored table controls to React/Eui. * [ML] Refactored explorer charts to use React/Eui. * [ML] Refactored anomalies table to React/Eui. * [ML] Move explorer charts data listener to ExplorerChartsContainer component. * [ML] Make AppState dependent services importable by React components. * [ML] Removes deprecated code. * [ML] Simplify state handling for anomaly charts. * [ML] Simplify swimlaneCellClick(). * [ML] Review feedback: Fix file structure, add propTypes. * [ML] Review feedback: Avoid anonymous inline functions. * [ML] Fixes tests to reflect code changes. * [ML] Fixes InfluencerList DOM position. * [ML] Show a loading indicator when the view-by swimlane updates. * [ML] Review feedback: Import only relevant lodash bits. Use querySelector instead of jQuery. * [ML] Adds snapshot tests for new smallish components. * [ML] Fix test stub. * [ML] More resilient getChartContainerWidth(). * [ML] Review feedback: Comment on legacy utils and dropdown widths.

walterra added non-issue Indicates to automation that a pull request should not appear in the release notes v7.0.0 :ml refactoring Feature:ml-results legacy - do not use v6.7.0 labels Jan 8, 2019

walterra self-assigned this Jan 8, 2019

walterra requested a review from a team as a code owner January 8, 2019 09:44

walterra added the WIP Work in progress label Jan 8, 2019

walterra changed the title ~~[WIP] [ML] Migrate Anomaly Explorer to React (expect job selector)~~ [WIP] [ML] Migrate Anomaly Explorer to React (except job selector) Jan 8, 2019

cchaos approved these changes Jan 8, 2019

View reviewed changes

walterra force-pushed the ml-explorer-react branch 2 times, most recently from 098a1ee to f0fff26 Compare January 9, 2019 10:06

walterra added 13 commits January 9, 2019 14:56

[ML] Move Anomaly Explorer Loading indicator to React.

9f50d47

[ML] Move no-jobs message to React/Eui.

ff547dc

[ML] Move no-results message to React/Eui.

582157c

[ML] Refactored explorer.js to return earlier.

e1db49c

[ML] Refactored influencers column to react.

fee296b

[ML] Refactored Overall Swimlane and view-by dropdown to react/eui.

0b9e5e9

[ML] Refactored limit dropdown to react/eui.

ca113d5

[ML] Refactored view-by swimlanes to React/Eui.

1954eda

[ML] Refactored annotations table to React/Eui.

0a77c7d

[ML] Refactored table controls to React/Eui.

c41d806

[ML] Refactored explorer charts to use React/Eui.

beba5b7

[ML] Refactored anomalies table to React/Eui.

35e2740

[ML] Move explorer charts data listener to ExplorerChartsContainer co…

33eeef5

…mponent.

jgowdyelastic reviewed Jan 10, 2019

View reviewed changes

x-pack/plugins/ml/public/components/controls/select_interval/select_interval.js Show resolved Hide resolved

[ML] Review feedback: Import only relevant lodash bits. Use querySele…

85d1567

…ctor instead of jQuery.

[ML] Adds snapshot tests for new smallish components.

97d15f1

[ML] Fix test stub.

705ceac

walterra force-pushed the ml-explorer-react branch from d85e63d to 705ceac Compare January 10, 2019 14:44

[ML] More resilient getChartContainerWidth().

f6e08bc

peteharverson approved these changes Jan 10, 2019

View reviewed changes

x-pack/plugins/ml/public/explorer/explorer.js Show resolved Hide resolved

x-pack/plugins/ml/public/explorer/explorer_charts/legacy_utils.js Show resolved Hide resolved

alvarezmelissa87 reviewed Jan 10, 2019

View reviewed changes

walterra added 2 commits January 10, 2019 17:53

[ML] Review feedback: Comment on legacy utils and dropdown widths.

17e2f4b

Merge remote-tracking branch 'upstream/master' into ml-explorer-react

bf3314a

Merge remote-tracking branch 'upstream/master' into ml-explorer-react

7567f3c

walterra merged commit c58c357 into elastic:master Jan 11, 2019

walterra deleted the ml-explorer-react branch January 11, 2019 09:35

walterra mentioned this pull request Jan 11, 2019

[6.x] [ML] Migrate Anomaly Explorer to React (except job selector) (#28234) #28558

Merged

elasticmachine mentioned this pull request Jan 11, 2019

[ML] Migrate Angular-based components to React #18374

Closed

88 tasks

walterra mentioned this pull request Jan 11, 2019

[ML] Remove deprecated angularjs directives. #28564

Merged

walterra mentioned this pull request Jan 30, 2019

[ML] Fixes dragSelect regression. #29577

Merged

1 task

sophiec20 added the Feature:Anomaly Detection ML anomaly detection label Jun 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Migrate Anomaly Explorer to React (except job selector) #28234

[ML] Migrate Anomaly Explorer to React (except job selector) #28234

walterra commented Jan 8, 2019 •

edited

Loading

elasticmachine commented Jan 8, 2019

elasticmachine commented Jan 8, 2019

cchaos left a comment

elasticmachine commented Jan 9, 2019

elasticmachine commented Jan 9, 2019

elasticmachine commented Jan 10, 2019

elasticmachine commented Jan 10, 2019

walterra commented Jan 10, 2019

elasticmachine commented Jan 10, 2019

elasticmachine commented Jan 10, 2019

elasticmachine commented Jan 10, 2019

peteharverson left a comment

alvarezmelissa87 left a comment

elasticmachine commented Jan 10, 2019

elasticmachine commented Jan 10, 2019

elasticmachine commented Jan 11, 2019

elasticmachine commented Jan 11, 2019

[ML] Migrate Anomaly Explorer to React (except job selector) #28234

[ML] Migrate Anomaly Explorer to React (except job selector) #28234

Conversation

walterra commented Jan 8, 2019 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Jan 8, 2019

elasticmachine commented Jan 8, 2019

💔 Build Failed

cchaos left a comment

Choose a reason for hiding this comment

elasticmachine commented Jan 9, 2019

💔 Build Failed

elasticmachine commented Jan 9, 2019

💔 Build Failed

elasticmachine commented Jan 10, 2019

💔 Build Failed

elasticmachine commented Jan 10, 2019

💔 Build Failed

walterra commented Jan 10, 2019

elasticmachine commented Jan 10, 2019

💔 Build Failed

elasticmachine commented Jan 10, 2019

💔 Build Failed

elasticmachine commented Jan 10, 2019

💔 Build Failed

peteharverson left a comment

Choose a reason for hiding this comment

alvarezmelissa87 left a comment

Choose a reason for hiding this comment

elasticmachine commented Jan 10, 2019

💔 Build Failed

elasticmachine commented Jan 10, 2019

💔 Build Failed

elasticmachine commented Jan 11, 2019

💚 Build Succeeded

elasticmachine commented Jan 11, 2019

💚 Build Succeeded

walterra commented Jan 8, 2019 •

edited

Loading