diff options
Diffstat (limited to 'runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js')
-rw-r--r-- | runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js | 120 |
1 files changed, 62 insertions, 58 deletions
diff --git a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js b/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js index 4b35b48e1..f539ad436 100644 --- a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js +++ b/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js @@ -26,81 +26,85 @@ import styled from 'styled-components'; import LoopCache from '../../../api/LoopCache'; const LoopStatusViewDivStyled = styled.div` - background-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; - padding: 10px 10px; - color: ${props => props.theme.loopViewerHeaderFontColor}; + background-color: ${ props => props.theme.loopViewerHeaderBackgroundColor }; + padding: 10px 10px; + color: ${ props => props.theme.loopViewerHeaderFontColor }; ` const TableStyled = styled(Table)` - overflow: auto; + overflow: auto; ` const TableRow = ({ statusRow }) => ( - <tr> - <td>{statusRow.componentName}</td> - <td>{statusRow.stateName}</td> - <td>{statusRow.description}</td> - </tr> + <tr> + <td>{ statusRow.componentName }</td> + <td>{ statusRow.stateName }</td> + <td>{ statusRow.description }</td> + </tr> ) export default class LoopStatus extends React.Component { - state = { - loopCache: new LoopCache({}) - } + state = { + loopCache: new LoopCache({}) + } - constructor(props) { - super(props); - this.renderStatus = this.renderStatus.bind(this); - this.state.loopCache = props.loopCache; - } + constructor(props) { + super(props); + this.renderStatus = this.renderStatus.bind(this); + this.state.loopCache = props.loopCache; + } - renderStatus() { - let componentStates = this.state.loopCache.getComponentStates(); - if (componentStates != null) { - return Object.keys(componentStates).map((key) => { - console.debug("Adding status for: ",key); - var res={} - res[key]=this.state.loopCache.getComponentStates()[key]; - return (<TableRow key={key} statusRow={{'componentName':key,'stateName':this.state.loopCache.getComponentStates()[key].componentState.stateName,'description':this.state.loopCache.getComponentStates()[key].componentState.description}} />) - }) + renderStatus() { + let componentStates = this.state.loopCache.getComponentStates(); + if (componentStates != null) { + return Object.keys(componentStates).map((key) => { + console.debug("Adding status for: ", key); + var res = {} + res[key] = this.state.loopCache.getComponentStates()[key]; + return (<TableRow key={ key } statusRow={ { + 'componentName': key, + 'stateName': this.state.loopCache.getComponentStates()[key].componentState.stateName, + 'description': this.state.loopCache.getComponentStates()[key].componentState.description + } }/>) + }) - } - } + } + } - shouldComponentUpdate(nextProps, nextState) { - return this.state.loopCache !== nextState.loopCache; - } + shouldComponentUpdate(nextProps, nextState) { + return this.state.loopCache !== nextState.loopCache; + } - componentWillReceiveProps(newProps) { - this.setState({ - loopCache: newProps.loopCache - }); - } + componentWillReceiveProps(newProps) { + this.setState({ + loopCache: newProps.loopCache + }); + } - render() { - return ( - <LoopStatusViewDivStyled> - <label>Loop Status: {this.state.loopCache.getComputedState()} - </label> + render() { + return ( + <LoopStatusViewDivStyled> + <label>Loop Status: { this.state.loopCache.getComputedState() } + </label> - <div > - <TableStyled striped hover variant responsive> - <thead> - <tr> - <th><span align="left">Component Name</span></th> - <th><span align="left">Component State</span></th> - <th><span align="right">Description</span></th> - </tr> - </thead> - <tbody> - {this.renderStatus()} - </tbody> - </TableStyled> - </div> - </LoopStatusViewDivStyled> - ); - } + <div> + <TableStyled striped hover variant responsive> + <thead> + <tr> + <th><span align="left">Component Name</span></th> + <th><span align="left">Component State</span></th> + <th><span align="right">Description</span></th> + </tr> + </thead> + <tbody> + { this.renderStatus() } + </tbody> + </TableStyled> + </div> + </LoopStatusViewDivStyled> + ); + } } |