Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] Migrates Anomaly Explorer Swimlanes to React #22641

Merged
merged 3 commits into from
Sep 4, 2018

Conversation

walterra
Copy link
Contributor

@walterra walterra commented Sep 4, 2018

This PR migrates the Anomaly Explorer Swimlanes from angularjs to React.

The approach is similar to the one from #22622: Try to refactor as little of the actual logic as possible, just make sure everything works inside the React component lifecycle. So as a guide for the review: No actual code within all the functions/methods changed, only the bits and pieces which needed to be tied into the React component lifecycle.

The remaining wrapping angular directive is now only listening for data changes and passes its scope and other necessary data on as props to the React component.

@elasticmachine
Copy link
Contributor

Pinging @elastic/ml-ui

Copy link
Member

@jgowdyelastic jgowdyelastic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM


// Listen for dragSelect events
const that = this;
this.dragSelectListener = function ({ action, elements = [] }) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if these were converted to arrow functions you should mean the assignment of that could be removed.
cellClick could also be made a method and an arrow function.
probably not for this PR, but maybe a future refactor

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks, took a note in #22642

@@ -443,7 +72,6 @@ module.directive('mlExplorerSwimlane', function ($compile, Private, mlExplorerDa
chartWidth: '=',
appState: '='
},
link: link,
template: template
link: link
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit, could be just link

Copy link
Contributor

@peteharverson peteharverson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM - just some comments about comments, and a suggestion for the follow-up PR.

* React component for rendering Explorer dashboard swimlanes.
*/

//import PropTypes from 'prop-types';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this commented out line be removed?

// Listen for dragSelect events
const that = this;
this.dragSelectListener = function ({ action, elements = [] }) {
if (action === 'newSelection' && elements.length > 0) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These action 'types' could be moved into constants - either at the top of the file or a separate file

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, took a note in the follow-up issue: #22642

class: 'lane',
});

//$lane.on('mouseover', cellMouseover);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can these commented out lines be removed?

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@walterra walterra merged commit dcb65ba into elastic:master Sep 4, 2018
@walterra walterra deleted the ml-explorer-swimlane-react branch September 4, 2018 11:51
walterra added a commit to walterra/kibana that referenced this pull request Sep 4, 2018
- This PR migrates the Anomaly Explorer Swimlanes from angularjs to React.
- The approach is similar to the one from elastic#22622: Try to refactor as little of the actual logic as possible, just make sure everything works inside the React component lifecycle. So as a guide for the review: No actual code within all the functions/methods changed, only the bits and pieces which needed to be tied into the React component lifecycle.
- The remaining wrapping angular directive is now only listening for data changes and passes its scope and other necessary data on as props to the React component.
walterra added a commit that referenced this pull request Sep 4, 2018
- This PR migrates the Anomaly Explorer Swimlanes from angularjs to React.
- The approach is similar to the one from #22622: Try to refactor as little of the actual logic as possible, just make sure everything works inside the React component lifecycle. So as a guide for the review: No actual code within all the functions/methods changed, only the bits and pieces which needed to be tied into the React component lifecycle.
- The remaining wrapping angular directive is now only listening for data changes and passes its scope and other necessary data on as props to the React component.
@lcawl lcawl added the enhancement New value added to drive a business result label Oct 29, 2018
@sophiec20 sophiec20 added the Feature:Anomaly Detection ML anomaly detection label Jun 19, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New value added to drive a business result Feature:Anomaly Detection ML anomaly detection Feature:ml-results legacy - do not use :ml v6.5.0 v7.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants