MERGE Clamp UI-React repo to Policy Gui Repo

According to a Diff differences from one repo to the other, there was some missing changes from the original clamp repo to the policy gui repo.

Issue-ID: POLICY-3267
Change-Id: I9a71841732dc5c3d9623bca9c1384866f4c826a6
Signed-off-by: brunomilitzer <bruno.militzer@est.tech>

2 files changed, 6 insertions, 3 deletions

diff --git a/gui-clamp/ui-react/src/components/loop_viewer/status/LoopStatus.js b/gui-clamp/ui-react/src/components/loop_viewer/status/LoopStatus.js
index 2994c84..f539ad4 100644
--- a/gui-clamp/ui-react/src/components/loop_viewer/status/LoopStatus.js
+++ b/gui-clamp/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={ {
+        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/gui-clamp/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap b/gui-clamp/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
index 73da5ff..24d879d 100644
--- a/gui-clamp/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
+++ b/gui-clamp/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",