summaryrefslogtreecommitdiffstats
path: root/ui-react/src/components/loop_viewer
diff options
context:
space:
mode:
Diffstat (limited to 'ui-react/src/components/loop_viewer')
-rw-r--r--ui-react/src/components/loop_viewer/logs/LoopLogs.js30
-rw-r--r--ui-react/src/components/loop_viewer/status/LoopStatus.js104
-rw-r--r--ui-react/src/components/loop_viewer/svg/LoopSvg.js7
3 files changed, 98 insertions, 43 deletions
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">&nbsp;&nbsp;&nbsp;TestStatus&nbsp;&nbsp;&nbsp;</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>
);