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>

6 files changed, 114 insertions, 56 deletions

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 1f79d39e..40ae1379 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 b854c7c1..3ee5acc6 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 d7d983d6..b6a777a4 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 f904d674..141a41f5 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 91d74e4f..3ac2f31f 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 1630c507..08630cbd 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',
 };