1 files changed, 105 insertions, 0 deletions
diff --git a/ui-react/src/components/loop_viewer/status/LoopStatus.js b/ui-react/src/components/loop_viewer/status/LoopStatus.js
new file mode 100644
index 000000000..d960c31e6
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/status/LoopStatus.js
@@ -0,0 +1,105 @@
+/*-
+* ============LICENSE_START=======================================================
+* ONAP CLAMP
+* ================================================================================
+* Copyright (C) 2019 AT&T Intellectual Property. All rights
+*                             reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END============================================
+* ===================================================================
+*
+*/
+import React from 'react';
+import Table from 'react-bootstrap/Table';
+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 {
+	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>
+		);
+	}
+}
+