diff options
Diffstat (limited to 'ui-react')
-rw-r--r-- | ui-react/src/LoopUI.js | 6 | ||||
-rw-r--r-- | ui-react/src/api/LoopCache.js | 4 | ||||
-rw-r--r-- | ui-react/src/components/loop_viewer/logs/LoopLogs.js | 30 | ||||
-rw-r--r-- | ui-react/src/components/loop_viewer/status/LoopStatus.js | 104 | ||||
-rw-r--r-- | ui-react/src/components/loop_viewer/svg/LoopSvg.js | 7 | ||||
-rw-r--r-- | ui-react/src/theme/globalStyle.js | 19 |
6 files changed, 114 insertions, 56 deletions
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index 1f79d39eb..40ae1379c 100644 --- a/ui-react/src/LoopUI.js +++ b/ui-react/src/LoopUI.js @@ -46,7 +46,7 @@ const ProjectNameStyled = styled.a` ` const LoopViewDivStyled = styled.div` - height: 90vh; + height: 100%; overflow: hidden; margin-left: 10px; margin-right: 10px; @@ -138,7 +138,7 @@ export default class LoopUI extends React.Component { renderLoopViewHeader() { return ( <LoopViewHeaderDivStyled> - Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled> + Loop Viewer - {this.state.loopName} </LoopViewHeaderDivStyled> ); } @@ -147,8 +147,8 @@ export default class LoopUI extends React.Component { return ( <LoopViewBodyDivStyled> <LoopSvg loopCache={this.state.loopCache} /> + <LoopStatus loopCache={this.state.loopCache}/> <LoopLogs loopCache={this.state.loopCache} /> - <LoopStatus /> </LoopViewBodyDivStyled> ); } diff --git a/ui-react/src/api/LoopCache.js b/ui-react/src/api/LoopCache.js index b854c7c13..3ee5acc68 100644 --- a/ui-react/src/api/LoopCache.js +++ b/ui-react/src/api/LoopCache.js @@ -106,6 +106,10 @@ export default class LoopCache { return this.loopJsonCache.loopLogs; } + getComputedState() { + return this.loopJsonCache.lastComputedState; + } + getComponentStates() { return this.loopJsonCache.components; } diff --git a/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/ui-react/src/components/loop_viewer/logs/LoopLogs.js index d7d983d6f..b6a777a40 100644 --- a/ui-react/src/components/loop_viewer/logs/LoopLogs.js +++ b/ui-react/src/components/loop_viewer/logs/LoopLogs.js @@ -25,6 +25,15 @@ import Table from 'react-bootstrap/Table'; import LoopCache from '../../../api/LoopCache'; import styled from 'styled-components'; +const LoopLogsHeaderDivStyled = styled.div` + background-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; + padding: 10px 10px; + color: ${props => props.theme.loopViewerHeaderFontColor}; +` +const TableStyled = styled(Table)` + + overflow: auto; +` const TableRow = ({ logRow }) => ( <tr> <td>{logRow.logInstant}</td> @@ -35,13 +44,6 @@ const TableRow = ({ logRow }) => ( ) -const LoopLogsHeaderDivStyled = styled.div` - background-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; - padding: 10px 10px; - color: ${props => props.theme.loopViewerHeaderFontColor}; - overflow: auto; -` - export default class LoopLogs extends React.Component { state = { @@ -50,7 +52,7 @@ export default class LoopLogs extends React.Component { constructor(props) { super(props); this.renderLogs = this.renderLogs.bind(this); - this.state.loopCache=props.loopCache; + this.state.loopCache = props.loopCache; } shouldComponentUpdate(nextProps, nextState) { @@ -65,17 +67,17 @@ export default class LoopLogs extends React.Component { renderLogs() { if (this.state.loopCache.getLoopLogsArray() != null) { - return ( - this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />) - ) - } + return ( + this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />) + ) + } } render() { return ( <LoopLogsHeaderDivStyled> <label>Loop Logs</label> - <Table striped hover bordeless variant responsive> + <TableStyled striped hover variant responsive> <thead> <tr> <th><span align="left">Date</span></th> @@ -87,7 +89,7 @@ export default class LoopLogs extends React.Component { <tbody> {this.renderLogs()} </tbody> - </Table> + </TableStyled> </LoopLogsHeaderDivStyled> ); diff --git a/ui-react/src/components/loop_viewer/status/LoopStatus.js b/ui-react/src/components/loop_viewer/status/LoopStatus.js index f904d6740..141a41f51 100644 --- a/ui-react/src/components/loop_viewer/status/LoopStatus.js +++ b/ui-react/src/components/loop_viewer/status/LoopStatus.js @@ -22,34 +22,84 @@ */ import React from 'react'; import Table from 'react-bootstrap/Table'; -import './LoopStatus.css'; +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}; +` + +const TableStyled = styled(Table)` + overflow: auto; +` + +const TableRow = ({ statusRow }) => ( + <tr> + <td>{statusRow.componentName}</td> + <td>{statusRow.stateName}</td> + <td>{statusRow.description}</td> + </tr> + +) export default class LoopStatus extends React.Component { - render() { - return ( - <div> - <span id="status_clds" className="status_title">Status: - <span className="status"> TestStatus </span> - </span> - - <div className="status_table"> - <Table striped hover> - <thead> - <tr> - <th><span align="left" className="text">ComponentState</span></th> - <th><span align="left" className="text">Description</span></th> - </tr> - </thead> - <tbody> - <tr> - <td className="row_30_per">long test State</td> - <td className="row_70_per">test description very very very long description</td> - </tr> - </tbody> - </Table> - </div> - </div> - ); - } + state = { + loopCache: new LoopCache({}), + } + + constructor(props) { + super(props); + this.renderStatus = this.renderStatus.bind(this); + this.state.loopCache = props.loopCache; + } + + + renderStatus() { + if (this.state.loopCache.getComponentStates() != null) { + return Object.keys(this.state.loopCache.getComponentStates()).map((key) => { + console.debug("Adding status for: ",key); + var res={} + res[key]=this.state.loopCache.getComponentStates()[key]; + return (<TableRow 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; + } + + componentWillReceiveProps(newProps) { + this.setState({ + loopCache: newProps.loopCache, + }); + } + + 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> + ); + } } diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js index 91d74e4f0..3ac2f31fd 100644 --- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js +++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js @@ -32,7 +32,10 @@ const LoopViewSvgDivStyled = styled.div` background-color: ${props => (props.theme.loopViewerBackgroundColor)}; border: 1px solid; border-color: ${props => (props.theme.loopViewerHeaderColor)}; - height: 50%; + margin-left: auto; + margin-right:auto; + text-align: center; + ` class LoopViewSvg extends React.Component { @@ -88,7 +91,7 @@ class LoopViewSvg extends React.Component { render() { return ( - <LoopViewSvgDivStyled id="loop_svg" dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}> + <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}> </LoopViewSvgDivStyled> ); diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js index 1630c5074..08630cbd9 100644 --- a/ui-react/src/theme/globalStyle.js +++ b/ui-react/src/theme/globalStyle.js @@ -56,13 +56,12 @@ export const GlobalClampStyle = createGlobalStyle` font-size: ${props => props.theme.fontSize}; border-radius: 4px; color: ${props => props.theme.fontNormal}; - background-color: ${props => (props.theme.backgroundColor)}; + background-color: ${props => (props.theme.backgroundColor)}; + margin-top: 1px; } - + svg { - padding: 10px; overflow: hidden; - background-color: ${props => (props.theme.loopViewerBackgroundColor)}; width: 100%; height: 100%; } @@ -75,13 +74,13 @@ export const DefaultClampTheme = { fontDark: '#888888', fontHighlight: '#ffff00', fontNormal: 'black', - + backgroundColor: '#eeeeee', fontFamily: 'Arial, Sans-serif', fontSize: '15px', - - loopViewerBackgroundColor: 'white', - loopViewerFontColor: 'yellow', - loopViewerHeaderBackgroundColor: '#337ab7', - loopViewerHeaderFontColor: 'white', + + loopViewerBackgroundColor: 'white', + loopViewerFontColor: 'yellow', + loopViewerHeaderBackgroundColor: '#337ab7', + loopViewerHeaderFontColor: 'white', }; |