diff options
Diffstat (limited to 'runtime/ui-react/src/components/loop_viewer')
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'); + }); +}); |