Rework the status
Add status data when we load a loop + rework the look and feel of status
DIV
Issue-ID: CLAMP-429
Change-Id: Ibeb58e2653d603f29a0b71023d8afd49cf89aba1
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 1f79d39..40ae137 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -46,7 +46,7 @@
`
const LoopViewDivStyled = styled.div`
- height: 90vh;
+ height: 100%;
overflow: hidden;
margin-left: 10px;
margin-right: 10px;
@@ -138,7 +138,7 @@
renderLoopViewHeader() {
return (
<LoopViewHeaderDivStyled>
- Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled>
+ Loop Viewer - {this.state.loopName}
</LoopViewHeaderDivStyled>
);
}
@@ -147,8 +147,8 @@
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 b854c7c..3ee5acc 100644
--- a/ui-react/src/api/LoopCache.js
+++ b/ui-react/src/api/LoopCache.js
@@ -106,6 +106,10 @@
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 d7d983d..b6a777a 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 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 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 @@
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 @@
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 @@
<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 f904d67..141a41f 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>
+ state = {
+ loopCache: new LoopCache({}),
+ }
- <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>
- );
- }
+ 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 91d74e4..3ac2f31 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 @@
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 @@
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 1630c50..08630cb 100644
--- a/ui-react/src/theme/globalStyle.js
+++ b/ui-react/src/theme/globalStyle.js
@@ -56,13 +56,12 @@
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 @@
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',
};