diff options
Diffstat (limited to 'ui-react/src/components/loop_viewer')
5 files changed, 22 insertions, 19 deletions
diff --git a/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/ui-react/src/components/loop_viewer/logs/LoopLogs.js index b3f052626..e3d9f601f 100644 --- a/ui-react/src/components/loop_viewer/logs/LoopLogs.js +++ b/ui-react/src/components/loop_viewer/logs/LoopLogs.js @@ -66,10 +66,9 @@ export default class LoopLogs extends React.Component { } renderLogs() { - if (this.state.loopCache.getLoopLogsArray() != null) { - return ( - this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />) - ) + let logsArray = this.state.loopCache.getLoopLogsArray(); + if (logsArray != null) { + return (logsArray.map(row => <TableRow key={row.id} logRow={row} />)); } } diff --git a/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap b/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap index 75b817bab..996c67457 100644 --- a/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap +++ b/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap @@ -45,6 +45,7 @@ exports[`Verify LoopLogs Test the render method 1`] = ` </thead> <tbody> <TableRow + key="1" logRow={ Object { "id": 1, diff --git a/ui-react/src/components/loop_viewer/status/LoopStatus.js b/ui-react/src/components/loop_viewer/status/LoopStatus.js index d960c31e6..4b35b48e1 100644 --- a/ui-react/src/components/loop_viewer/status/LoopStatus.js +++ b/ui-react/src/components/loop_viewer/status/LoopStatus.js @@ -57,12 +57,13 @@ export default class LoopStatus extends React.Component { renderStatus() { - if (this.state.loopCache.getComponentStates() != null) { - return Object.keys(this.state.loopCache.getComponentStates()).map((key) => { + 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 statusRow={{'componentName':key,'stateName':this.state.loopCache.getComponentStates()[key].componentState.stateName,'description':this.state.loopCache.getComponentStates()[key].componentState.description}} />) + return (<TableRow key={key} statusRow={{'componentName':key,'stateName':this.state.loopCache.getComponentStates()[key].componentState.stateName,'description':this.state.loopCache.getComponentStates()[key].componentState.description}} />) }) } diff --git a/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap b/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap index 73da5fff1..24d879de9 100644 --- a/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap +++ b/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap @@ -40,6 +40,7 @@ exports[`Verify LoopStatus Test the render method 1`] = ` </thead> <tbody> <TableRow + key="POLICY" statusRow={ Object { "componentName": "POLICY", @@ -49,6 +50,7 @@ exports[`Verify LoopStatus Test the render method 1`] = ` } /> <TableRow + key="DCAE" statusRow={ Object { "componentName": "DCAE", diff --git a/ui-react/src/components/loop_viewer/svg/SvgGenerator.js b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js index f5f5047ba..6d3cd7a21 100644 --- a/ui-react/src/components/loop_viewer/svg/SvgGenerator.js +++ b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js @@ -59,16 +59,16 @@ class SvgGenerator extends React.Component { } shouldComponentUpdate(nextProps, nextState) { - return this.state.loopCache !== nextState.loopCache; + return this.state.loopCache !== nextProps.loopCache; } - componentWillReceiveProps(newProps) { - if (this.state.loopCache !== newProps.loopCache) { - this.setState({ - loopCache: newProps.loopCache, - }); - } - } + componentDidUpdate(prevProps) { + if (prevProps.loopCache !== this.props.loopCache) { + this.setState({ + loopCache: this.props.loopCache, + }); + } + } handleSvgClick(event) { console.debug("svg click event received"); @@ -233,10 +233,10 @@ class SvgGenerator extends React.Component { return ( <DivStyled onClick={this.handleSvgClick} > - <svg height={svgHeight} width={svgWidth} viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none"> - <svg x="-50" y="25"> - {allTheElements} - </svg> + <svg key="main" height={svgHeight} width={svgWidth} viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none"> + <svg key="content" x="-50" y="25"> + {allTheElements} + </svg> </svg> </DivStyled> ); |