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

ETS details view #82

Merged
merged 15 commits into from
Aug 24, 2017
Merged

ETS details view #82

merged 15 commits into from
Aug 24, 2017

Conversation

mkacper
Copy link
Contributor

@mkacper mkacper commented Aug 14, 2017

This PR introduces new ETS details view.

Make mechanism which allows for passing and storing additional
information for ETS tracing works properly.
  - Add necessary functions to the epl_ets_metric module in order
    to transform and process ETS traffic counters
  - Extend the epl_ets_viz_map module by the functions which allows
    for creating the ETS traffic setction in the Vizceral map
  - Modify the epl_ets module to make it possible to send ETS
    traffic data to the web UI
  - Improve code style
Display an ETS table identifier. Make it display by default instead
of table name.
  - modify way of enabling/disabling ETS tracing through
    a websocket
  - improve Vizceral map's ETS traffic section to properly display
    ETS traffic graph
  - make ETS traffic graph display when click on a particular row
    in ETS table view
  - enable/disable ETS table tracing using a reference as a table
    identifier
  - modify binarify/1 and namify/1 functions from the epl_viz_map
    module in order to handle a reference as a table indentifier
  - modify the epl-ets UI plugin to handle above changes
@@ -22,7 +22,11 @@ class ETS extends Component {
graph: boolean,
showTab: boolean,
clickedNode: any,
vizStyle: object
view: any,
Copy link
Contributor

Choose a reason for hiding this comment

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

view: Array<string>

@@ -22,7 +22,11 @@ class ETS extends Component {
graph: boolean,
showTab: boolean,
clickedNode: any,
vizStyle: object
view: any,
tabTraceId: any,
Copy link
Contributor

Choose a reason for hiding this comment

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

tabTraceId: boolean

tabTraceId: any,
definitions: object,
vizStyle: object,
loader: object
Copy link
Contributor

Choose a reason for hiding this comment

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

loader: boolean

@@ -121,6 +227,9 @@ class ETS extends Component {
tabs: this.props.data.etsNodeTabs,
node: this.state.clickedNode
}}
tableClicked={tabIds => {
Copy link
Contributor

Choose a reason for hiding this comment

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

You can just pass function you're calling at the end:
tableClicked={this.handleTabClick}

@@ -111,9 +115,12 @@ class TableView extends React.Component {
...callStatsInsert,
...callStatsLookup
};
return { ...a, ...info, ...callStatsObj };
return {
...{ tab_id: tab_id, tab_trace_id: tab_trace_id },
Copy link
Contributor

Choose a reason for hiding this comment

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

You can just use create object shorthand.

return {
  tab_id,
  tab_trace_id,
  ...info,
  ...callStatsObj
}

}

handleTabClick = ({ tabId, tabTraceId }) => {
this.setState({
Copy link
Contributor

Choose a reason for hiding this comment

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

React setState is not guaranteed to be sync and can be sometimes scheduled in different ways. It doesn't happen often right now but with new versions of React it will be more common.
In general every time you're updating state based on previous state use setState function syntax instead of this.state syntax because this syntax is binding value and state can be applied later. With function syntax you're always guaranteed to have recent state.

this.setState(state => ({
  view: [state.clickedNode, tabId],
  tabTraceId: tabTraceId
}));

@baransu
Copy link
Contributor

baransu commented Aug 14, 2017

Please add

[ignore]
.*/node_modules/styled-components/.*

to .flowconfig because of styled-components internal flowtype errors our CI is failing.

@michalslaski michalslaski merged commit 0fbf53c into erlanglab:master Aug 24, 2017
@michalslaski michalslaski deleted the ets-detail-view branch August 24, 2017 08:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants