Align ui-react file in policy-clamp and policy-gui

When the ui-react code was transferred to policy-gui, the white space
was cleaned up and reformatted. This makes it difficult to track the
real functional changes if any between ui-react in policy-clamp and
policy-gui.

This review brings the white space changes into ui-react in policy-clamp
to make file comparisons easier.

Issue-ID: POLICY-3358
Change-Id: Ic303e71b341e5c0f7ca0de0ed4c4962ebf2f988a
Signed-off-by: liamfallon <liam.fallon@est.tech>

4 files changed, 200 insertions, 195 deletions

diff --git a/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js
index e3d9f601f..3435ba3bc 100644
--- a/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js
+++ b/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js
@@ -26,71 +26,72 @@ import LoopCache from '../../../api/LoopCache';
 import styled from 'styled-components';
 
 const LoopLogsHeaderDivStyled = styled.div`
-	background-color: ${props => props.theme.loopLogsHeaderBackgroundColor};
-	padding: 10px 10px;
-	color: ${props => props.theme.loopLogsHeaderFontColor};
+  background-color: ${ props => props.theme.loopLogsHeaderBackgroundColor };
+  padding: 10px 10px;
+  color: ${ props => props.theme.loopLogsHeaderFontColor };
 `
 const TableStyled = styled(Table)`
-    
-    overflow: auto;
+
+  overflow: auto;
 `
 const TableRow = ({ logRow }) => (
-	<tr>
-		<td>{logRow.logInstant}</td>
-		<td>{logRow.logType}</td>
-		<td>{logRow.logComponent}</td>
-		<td>{logRow.message}</td>
-	</tr>
+  <tr>
+    <td>{ logRow.logInstant }</td>
+    <td>{ logRow.logType }</td>
+    <td>{ logRow.logComponent }</td>
+    <td>{ logRow.message }</td>
+  </tr>
 
 )
 
 export default class LoopLogs extends React.Component {
 
-	state = {
-		loopCache: new LoopCache({})
-	}
-	constructor(props) {
-		super(props);
-		this.renderLogs = this.renderLogs.bind(this);
-		this.state.loopCache = props.loopCache;
-	}
+  state = {
+    loopCache: new LoopCache({})
+  }
+
+  constructor(props) {
+    super(props);
+    this.renderLogs = this.renderLogs.bind(this);
+    this.state.loopCache = props.loopCache;
+  }
 
-	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
+    });
+  }
 
-	renderLogs() {
-	    let logsArray = this.state.loopCache.getLoopLogsArray();
-		if (logsArray != null) {
-			return (logsArray.map(row => <TableRow key={row.id} logRow={row} />));
-		}
-	}
+  renderLogs() {
+    let logsArray = this.state.loopCache.getLoopLogsArray();
+    if (logsArray != null) {
+      return (logsArray.map(row => <TableRow key={ row.id } logRow={ row }/>));
+    }
+  }
 
-	render() {
-		return (
-			<LoopLogsHeaderDivStyled>
-				<label>Loop Logs</label>
-				<TableStyled striped hover variant responsive>
-					<thead>
-						<tr>
-							<th><span align="left">Date</span></th>
-							<th><span align="left">Type</span></th>
-							<th><span align="left">Component</span></th>
-							<th><span align="right">Log</span></th>
-						</tr>
-					</thead>
-					<tbody>
-						{this.renderLogs()}
-					</tbody>
-				</TableStyled>
-			</LoopLogsHeaderDivStyled>
+  render() {
+    return (
+      <LoopLogsHeaderDivStyled>
+        <label>Loop Logs</label>
+        <TableStyled striped hover variant responsive>
+          <thead>
+          <tr>
+            <th><span align="left">Date</span></th>
+            <th><span align="left">Type</span></th>
+            <th><span align="left">Component</span></th>
+            <th><span align="right">Log</span></th>
+          </tr>
+          </thead>
+          <tbody>
+          { this.renderLogs() }
+          </tbody>
+        </TableStyled>
+      </LoopLogsHeaderDivStyled>
 
-		);
-	}
+    );
+  }
 }
diff --git a/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js b/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js
index 3b7fd413a..d3a21d80d 100644
--- a/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js
+++ b/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js
@@ -27,44 +27,44 @@ import LoopCache from '../../../api/LoopCache';
 
 describe('Verify LoopLogs', () => {
 
-	const loopCache = new LoopCache({
-		"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-			"loopLogs": [
-			{
-				"id": 1,
-				"logType": "INFO",
-				"logComponent": "CLAMP",
-				"message": "Operational policies UPDATED",
-				"logInstant": "2019-07-08T09:44:37Z"
-			}
-		]
-	});
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "loopLogs": [
+      {
+        "id": 1,
+        "logType": "INFO",
+        "logComponent": "CLAMP",
+        "message": "Operational policies UPDATED",
+        "logInstant": "2019-07-08T09:44:37Z"
+      }
+    ]
+  });
 
-	it('Test the render method', () => {
-		const component = shallow(<LoopLogs loopCache={loopCache}/>)
-		expect(component).toMatchSnapshot();
+  it('Test the render method', () => {
+    const component = shallow(<LoopLogs loopCache={ loopCache }/>)
+    expect(component).toMatchSnapshot();
 
-		const loopCacheUpdated = new LoopCache({
-		"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-			"loopLogs": [
-			{
-				"id": 1,
-				"logType": "INFO",
-				"logComponent": "CLAMP",
-				"message": "Operational policies UPDATED",
-				"logInstant": "2019-07-08T09:44:37Z"
-			},
-			{
-				"id": 2,
-				"logType": "INFO",
-				"logComponent": "CLAMP",
-				"message": "Operational policies UPDATED",
-				"logInstant": "2019-07-08T09:44:50Z"
-			}
-			]
-		});
+    const loopCacheUpdated = new LoopCache({
+      "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+      "loopLogs": [
+        {
+          "id": 1,
+          "logType": "INFO",
+          "logComponent": "CLAMP",
+          "message": "Operational policies UPDATED",
+          "logInstant": "2019-07-08T09:44:37Z"
+        },
+        {
+          "id": 2,
+          "logType": "INFO",
+          "logComponent": "CLAMP",
+          "message": "Operational policies UPDATED",
+          "logInstant": "2019-07-08T09:44:50Z"
+        }
+      ]
+    });
 
-		component.setProps({ loopCache: loopCacheUpdated });
-		expect(component.find('TableRow').length).toEqual(2);
-	});
-});
\ No newline at end of file
+    component.setProps({ loopCache: loopCacheUpdated });
+    expect(component.find('TableRow').length).toEqual(2);
+  });
+});
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>
+    );
+  }
 }
 
diff --git a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js b/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js
index 8d0448796..b84067e18 100644
--- a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js
+++ b/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js
@@ -27,52 +27,52 @@ import LoopCache from '../../../api/LoopCache';
 
 describe('Verify LoopStatus', () => {
 
-	const loopCache = new LoopCache({
-		"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-		"lastComputedState": "DESIGN",
-		"components": {
-			"POLICY": {
-				"componentState": {
-					"stateName": "NOT_SENT",
-					"description": "The policies defined have NOT yet been created on the policy engine"
-				}
-			},
-			"DCAE": {
-				"componentState": {
-					"stateName": "BLUEPRINT_DEPLOYED",
-					"description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
-				}
-			}
-		}
-	});
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "lastComputedState": "DESIGN",
+    "components": {
+      "POLICY": {
+        "componentState": {
+          "stateName": "NOT_SENT",
+          "description": "The policies defined have NOT yet been created on the policy engine"
+        }
+      },
+      "DCAE": {
+        "componentState": {
+          "stateName": "BLUEPRINT_DEPLOYED",
+          "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
+        }
+      }
+    }
+  });
 
-	it('Test the render method', () => {
-		const component = shallow(<LoopStatus loopCache={loopCache}/>)
+  it('Test the render method', () => {
+    const component = shallow(<LoopStatus loopCache={ loopCache }/>)
 
-		expect(component).toMatchSnapshot();
-		
-		const loopCacheUpdated = new LoopCache({
-			"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-			"lastComputedState": "SUBMIT",
-			"components": {
-				"POLICY": {
-					"componentState": {
-						"stateName": "SENT",
-						"description": "The policies defined have NOT yet been created on the policy engine"
-					}
-				},
-				"DCAE": {
-					"componentState": {
-						"stateName": "BLUEPRINT_DEPLOYED",
-						"description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
-					}
-				}
-			}
-		});
-		component.setProps({ loopCache: loopCacheUpdated });
+    expect(component).toMatchSnapshot();
 
-		const forms = component.find('TableRow');
-		expect(forms.get(0).props.statusRow.stateName).toEqual("SENT");
-		expect(component.find('label').text()).toContain('SUBMIT');
-	});
-});
\ No newline at end of file
+    const loopCacheUpdated = new LoopCache({
+      "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+      "lastComputedState": "SUBMIT",
+      "components": {
+        "POLICY": {
+          "componentState": {
+            "stateName": "SENT",
+            "description": "The policies defined have NOT yet been created on the policy engine"
+          }
+        },
+        "DCAE": {
+          "componentState": {
+            "stateName": "BLUEPRINT_DEPLOYED",
+            "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
+          }
+        }
+      }
+    });
+    component.setProps({ loopCache: loopCacheUpdated });
+
+    const forms = component.find('TableRow');
+    expect(forms.get(0).props.statusRow.stateName).toEqual("SENT");
+    expect(component.find('label').text()).toContain('SUBMIT');
+  });
+});