1 files changed, 62 insertions, 58 deletions
diff --git a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js b/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js
index 4b35b48e1..f539ad436 100644
--- a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js
+++ b/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js
@@ -26,81 +26,85 @@ 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};
+  background-color: ${ props => props.theme.loopViewerHeaderBackgroundColor };
+  padding: 10px 10px;
+  color: ${ props => props.theme.loopViewerHeaderFontColor };
 `
 
 const TableStyled = styled(Table)`
-    overflow: auto;
+  overflow: auto;
 `
 
 const TableRow = ({ statusRow }) => (
-	<tr>
-		<td>{statusRow.componentName}</td>
-		<td>{statusRow.stateName}</td>
-		<td>{statusRow.description}</td>
-	</tr>
+  <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({})
-	}
+  state = {
+    loopCache: new LoopCache({})
+  }
 
-	constructor(props) {
-		super(props);
-		this.renderStatus = this.renderStatus.bind(this);
-		this.state.loopCache = props.loopCache;
-	}
+  constructor(props) {
+    super(props);
+    this.renderStatus = this.renderStatus.bind(this);
+    this.state.loopCache = props.loopCache;
+  }
 
 
-	renderStatus() {
-	    let componentStates = this.state.loopCache.getComponentStates();
-		if (componentStates != null) {
-			return Object.keys(componentStates).map((key) => {
-				console.debug("Adding status for: ",key);
-				var res={}
-				res[key]=this.state.loopCache.getComponentStates()[key];
-				return (<TableRow key={key} statusRow={{'componentName':key,'stateName':this.state.loopCache.getComponentStates()[key].componentState.stateName,'description':this.state.loopCache.getComponentStates()[key].componentState.description}} />)
-			})
+  renderStatus() {
+    let componentStates = this.state.loopCache.getComponentStates();
+    if (componentStates != null) {
+      return Object.keys(componentStates).map((key) => {
+        console.debug("Adding status for: ", key);
+        var res = {}
+        res[key] = this.state.loopCache.getComponentStates()[key];
+        return (<TableRow key={ key } 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;
-	}
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.state.loopCache !== nextState.loopCache;
+  }
 
-	componentWillReceiveProps(newProps) {
-		this.setState({
-			loopCache: newProps.loopCache
-		});
-	}
+  componentWillReceiveProps(newProps) {
+    this.setState({
+      loopCache: newProps.loopCache
+    });
+  }
 
-	render() {
-		return (
-			<LoopStatusViewDivStyled>
-				<label>Loop Status: {this.state.loopCache.getComputedState()}
-				</label>
+  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>
-		);
-	}
+        <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>
+    );
+  }
 }