From 2022e5ce5a03788a6edc5761c495cfadc5ded485 Mon Sep 17 00:00:00 2001 From: liamfallon Date: Tue, 9 Nov 2021 15:22:22 +0000 Subject: 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 --- .../src/components/loop_viewer/logs/LoopLogs.js | 107 +++++++++--------- .../components/loop_viewer/logs/LoopLogs.test.js | 76 ++++++------- .../components/loop_viewer/status/LoopStatus.js | 120 +++++++++++---------- .../loop_viewer/status/LoopStatus.test.js | 92 ++++++++-------- 4 files changed, 200 insertions(+), 195 deletions(-) (limited to 'runtime/ui-react/src/components/loop_viewer') 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 }) => ( - - {logRow.logInstant} - {logRow.logType} - {logRow.logComponent} - {logRow.message} - + + { logRow.logInstant } + { logRow.logType } + { logRow.logComponent } + { logRow.message } + ) 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 => )); - } - } + renderLogs() { + let logsArray = this.state.loopCache.getLoopLogsArray(); + if (logsArray != null) { + return (logsArray.map(row => )); + } + } - render() { - return ( - - - - - - Date - Type - Component - Log - - - - {this.renderLogs()} - - - + render() { + return ( + + + + + + Date + Type + Component + Log + + + + { this.renderLogs() } + + + - ); - } + ); + } } 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() - expect(component).toMatchSnapshot(); + it('Test the render method', () => { + const component = shallow() + 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 }) => ( - - {statusRow.componentName} - {statusRow.stateName} - {statusRow.description} - + + { statusRow.componentName } + { statusRow.stateName } + { statusRow.description } + ) 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 () - }) + 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 () + }) - } - } + } + } - 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 ( - - + render() { + return ( + + -
- - - - Component Name - Component State - Description - - - - {this.renderStatus()} - - -
- - ); - } +
+ + + + Component Name + Component State + Description + + + + { this.renderStatus() } + + +
+ + ); + } } 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() + it('Test the render method', () => { + const component = shallow() - 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'); + }); +}); -- cgit