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>

5 files changed, 205 insertions, 200 deletions

diff --git a/gui-clamp/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/gui-clamp/ui-react/src/components/loop_viewer/logs/LoopLogs.js
index b03b740..3435ba3 100644
--- a/gui-clamp/ui-react/src/components/loop_viewer/logs/LoopLogs.js
+++ b/gui-clamp/ui-react/src/components/loop_viewer/logs/LoopLogs.js
@@ -67,10 +67,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/gui-clamp/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap b/gui-clamp/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
index 75b817b..996c674 100644
--- a/gui-clamp/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
+++ b/gui-clamp/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/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",
diff --git a/gui-clamp/ui-react/src/components/loop_viewer/svg/SvgGenerator.js b/gui-clamp/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
index f5f5047..2692aef 100644
--- a/gui-clamp/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
+++ b/gui-clamp/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
@@ -27,220 +27,222 @@ import LoopCache from '../../../api/LoopCache';
 import OnapConstant from '../../../utils/OnapConstants';
 
 const DivStyled = styled.div`
-	overflow-x: scroll;
-	  display: flex;
-    width: 100%;
-    height: 100%;
+  overflow-x: scroll;
+  display: flex;
+  width: 100%;
+  height: 100%;
 `
 
-const emptySvg = (<svg> <text x="60" y="40">No LOOP (SVG)</text> </svg>);
+const emptySvg = (<svg>
+  <text x="60" y="40">No LOOP (SVG)</text>
+</svg>);
 
 class SvgGenerator extends React.Component {
-    boxWidth = 200;
-    boxHeight = 100;
-    boxSpace = 50;
-
-    static GENERATED_FROM_INSTANCE = "INSTANCE";
-    static GENERATED_FROM_TEMPLATE = "TEMPLATE";
-
-	state = {
-		loopCache: new LoopCache({}),
-		clickable: false,
-		generatedFrom: SvgGenerator.GENERATED_FROM_INSTANCE, // INSTANCE / TEMPLATE
-	}
-
-	constructor(props) {
-		super(props);
-		this.state.loopCache = props.loopCache;
-		this.state.clickable = props.clickable;
-		this.state.generatedFrom = props.generatedFrom;
-		this.handleSvgClick = this.handleSvgClick.bind(this);
-		this.renderSvg = this.renderSvg.bind(this);
-	}
-
-	shouldComponentUpdate(nextProps, nextState) {
-		return this.state.loopCache !== nextState.loopCache;
-	}
-
-	componentWillReceiveProps(newProps) {
-		if (this.state.loopCache !== newProps.loopCache) {
-			this.setState({
-				loopCache: newProps.loopCache,
-			});
-		}
-	}
-
-	handleSvgClick(event) {
-		console.debug("svg click event received");
-		if (this.state.clickable) {
-			var elementName = event.target.parentNode.getAttribute('policyId');
-			console.info("SVG element clicked", elementName);
-			// Only allow movement to policy editing IF there busyLoadingCOunt is 0,
-			// meaning we are not waiting for refreshStatus to complete, for example
-			if (elementName !== null && !this.props.isBusyLoading()) {
-				this.props.history.push("/policyModal/"+event.target.parentNode.getAttribute('policyType')+"/"+elementName);
-			}
-		}
-	}
-
-    createVesBox (xPos) {
-        return this.createOneBox(xPos,null,null,'VES Collector','VES',null);
+  boxWidth = 200;
+  boxHeight = 100;
+  boxSpace = 50;
+
+  static GENERATED_FROM_INSTANCE = "INSTANCE";
+  static GENERATED_FROM_TEMPLATE = "TEMPLATE";
+
+  state = {
+    loopCache: new LoopCache({}),
+    clickable: false,
+    generatedFrom: SvgGenerator.GENERATED_FROM_INSTANCE, // INSTANCE / TEMPLATE
+  }
+
+  constructor(props) {
+    super(props);
+    this.state.loopCache = props.loopCache;
+    this.state.clickable = props.clickable;
+    this.state.generatedFrom = props.generatedFrom;
+    this.handleSvgClick = this.handleSvgClick.bind(this);
+    this.renderSvg = this.renderSvg.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.state.loopCache !== nextProps.loopCache;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.loopCache !== this.props.loopCache) {
+      this.setState({
+        loopCache: this.props.loopCache,
+      });
     }
-
-    createOneArrow(xPos) {
-        return (
-         <svg width={this.boxSpace} height={this.boxHeight} x={xPos}>
-           <defs>
-            		<marker viewBox="0 0 20 20" markerWidth="20" markerHeight="20" orient="auto" refX="8.5" refY="5" id="arrow">
-            			<path d="m 1 5 l 0 -3 l 7 3 l -7 3 z"
-            				stroke-width= "1" stroke-linecap= "butt" stroke-dasharray= "10000, 1"
-            				fill="#000000" stroke="#000000" />
-            		</marker>
-           </defs>
-           <line x1="0" y1="50%" x2="100%" y2="50%" stroke-width="2" color="black" stroke="black" marker-end="url(#arrow)"/>
-         </svg>
-        );
-    }
-
-    createBeginCircle(xPos, text) {
-            return (
-            <svg width={this.boxWidth} height={this.boxHeight} x={xPos}>
-                <circle cx={this.boxWidth-30} cy="50%" r="30" stroke-width="1" color="black" stroke="black" fill="#27ae60"/>
-                <text x={this.boxWidth-30} y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs" >{text}</text>
-            </svg>
-            );
+  }
+
+  handleSvgClick(event) {
+    console.debug("svg click event received");
+    if (this.state.clickable) {
+      var elementName = event.target.parentNode.getAttribute('policyId');
+      console.info("SVG element clicked", elementName);
+      // Only allow movement to policy editing IF there busyLoadingCOunt is 0,
+      // meaning we are not waiting for refreshStatus to complete, for example
+      if (elementName !== null && !this.props.isBusyLoading()) {
+        this.props.history.push("/policyModal/" + event.target.parentNode.getAttribute('policyType') + "/" + elementName);
+      }
     }
-
-    createEndCircle(xPos, text) {
-            return (
-            <svg width={this.boxWidth} height={this.boxHeight} x={xPos}>
-                <circle cx={30} cy="50%" r="30" stroke-width="2" color="black" stroke="black" fill="#27ae60"/>
-                <text x={30} y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs" >{text}</text>
-            </svg>
-            );
+  }
+
+  createVesBox(xPos) {
+    return this.createOneBox(xPos, null, null, 'VES Collector', 'VES', null);
+  }
+
+  createOneArrow(xPos) {
+    return (
+      <svg width={ this.boxSpace } height={ this.boxHeight } x={ xPos }>
+        <defs>
+          <marker viewBox="0 0 20 20" markerWidth="20" markerHeight="20" orient="auto" refX="8.5" refY="5" id="arrow">
+            <path d="m 1 5 l 0 -3 l 7 3 l -7 3 z"
+                  stroke-width="1" stroke-linecap="butt" stroke-dasharray="10000, 1"
+                  fill="#000000" stroke="#000000"/>
+          </marker>
+        </defs>
+        <line x1="0" y1="50%" x2="100%" y2="50%" stroke-width="2" color="black" stroke="black" marker-end="url(#arrow)"/>
+      </svg>
+    );
+  }
+
+  createBeginCircle(xPos, text) {
+    return (
+      <svg width={ this.boxWidth } height={ this.boxHeight } x={ xPos }>
+        <circle cx={ this.boxWidth - 30 } cy="50%" r="30" stroke-width="1" color="black" stroke="black" fill="#27ae60"/>
+        <text x={ this.boxWidth - 30 } y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs">{ text }</text>
+      </svg>
+    );
+  }
+
+  createEndCircle(xPos, text) {
+    return (
+      <svg width={ this.boxWidth } height={ this.boxHeight } x={ xPos }>
+        <circle cx={ 30 } cy="50%" r="30" stroke-width="2" color="black" stroke="black" fill="#27ae60"/>
+        <text x={ 30 } y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs">{ text }</text>
+      </svg>
+    );
+  }
+
+  createOneBox(xPos, policyId, loopElementModelId, name, title, policyType) {
+    return (
+      <svg width={ this.boxWidth } height={ this.boxHeight } x={ xPos } title="test">
+        <g policyId={ policyId } loopElementModelId={ loopElementModelId } policyType={ policyType }>
+          <rect width="100%" height="100%" stroke-width="2" color="black" stroke="black" fill="#1abc9c"/>
+          <text x="50%" y="15%" color="white" fill="white" dominant-baseline="middle" text-anchor="middle" textLength="50%" lengthAdjust="spacingAndGlyphs">{ title }</text>
+          <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" textLength="80%" lengthAdjust="spacingAndGlyphs">{ name }</text>
+          <text x="50%" y="80%" text-anchor="middle" dominant-baseline="middle" textLength="110%" lengthAdjust="spacingAndGlyphs">{ policyId }</text>
+        </g>
+      </svg>
+    );
+  }
+
+  createSvgFromTemplate() {
+    const allElements = [];
+    var xPos = 0;
+
+    allElements.push(this.createBeginCircle(xPos, "Start"))
+    xPos += (this.boxWidth + this.boxSpace);
+
+    allElements.push(this.createOneArrow(xPos - this.boxSpace));
+
+    allElements.push(this.createVesBox(xPos));
+    xPos += (this.boxWidth + this.boxSpace);
+
+    allElements.push(this.createOneArrow(xPos - this.boxSpace));
+    //createOneBox(xPos, policyId, loopElementModelId , name, title, policyType)
+    for (var loopElement of this.state.loopCache.getAllLoopElementModels()) {
+
+      allElements.push(this.createOneBox(xPos,
+        loopElement['name'],
+        loopElement['name'],
+        loopElement['shortName'],
+        loopElement['loopElementType'],
+        loopElement['loopElementType']))
+      xPos += (this.boxWidth + this.boxSpace);
+      allElements.push(this.createOneArrow(xPos - this.boxSpace));
     }
 
-    createOneBox(xPos, policyId, loopElementModelId , name, title, policyType) {
-        return (
-        <svg width={this.boxWidth} height={this.boxHeight} x={xPos} title="test">
-            <g policyId={policyId} loopElementModelId={loopElementModelId} policyType={policyType}>
-                <rect width="100%" height="100%" stroke-width="2" color="black" stroke="black" fill="#1abc9c"/>
-                <text x="50%" y="15%" color="white" fill="white" dominant-baseline="middle" text-anchor="middle" textLength="50%" lengthAdjust="spacingAndGlyphs">{title}</text>
-                <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" textLength="80%" lengthAdjust="spacingAndGlyphs" >{name}</text>
-                <text x="50%" y="80%" text-anchor="middle" dominant-baseline="middle" textLength="110%" lengthAdjust="spacingAndGlyphs" >{policyId}</text>
-            </g>
-        </svg>
-        );
-    }
+    allElements.push(this.createEndCircle(xPos, "End"))
+    xPos += (this.boxWidth + this.boxSpace);
 
-    createSvgFromTemplate() {
-        const allElements = [];
-        var xPos = 0;
+    return allElements;
+  }
 
-        allElements.push(this.createBeginCircle(xPos,"Start"))
-        xPos+=(this.boxWidth+this.boxSpace);
+  createSvgFromInstance() {
+    const allElements = [];
+    var xPos = 0;
 
-        allElements.push(this.createOneArrow(xPos-this.boxSpace));
+    allElements.push(this.createBeginCircle(xPos, "Start"))
+    xPos += (this.boxWidth + this.boxSpace);
 
-        allElements.push(this.createVesBox(xPos));
-        xPos+=(this.boxWidth+this.boxSpace);
+    allElements.push(this.createOneArrow(xPos - this.boxSpace));
 
-        allElements.push(this.createOneArrow(xPos-this.boxSpace));
-        //createOneBox(xPos, policyId, loopElementModelId , name, title, policyType)
-        for (var loopElement of this.state.loopCache.getAllLoopElementModels()) {
+    allElements.push(this.createVesBox(xPos));
+    xPos += (this.boxWidth + this.boxSpace);
 
-            allElements.push(this.createOneBox(xPos,
-                loopElement['name'],
-                loopElement['name'],
-                loopElement['shortName'],
-                loopElement['loopElementType'],
-                loopElement['loopElementType']))
-            xPos+=(this.boxWidth+this.boxSpace);
-            allElements.push(this.createOneArrow(xPos-this.boxSpace));
-        }
+    allElements.push(this.createOneArrow(xPos - this.boxSpace));
 
-        allElements.push(this.createEndCircle(xPos, "End"))
-        xPos+=(this.boxWidth+this.boxSpace);
-
-        return allElements;
+    for (var msPolicy in this.state.loopCache.getMicroServicePolicies()) {
+      var loopElementModelName = this.state.loopCache.getMicroServicePolicies()[msPolicy]['loopElementModel'];
+      if (loopElementModelName !== undefined) {
+        loopElementModelName = loopElementModelName['name'];
+      }
+      allElements.push(this.createOneBox(xPos,
+        this.state.loopCache.getMicroServicePolicies()[msPolicy]['name'],
+        loopElementModelName,
+        this.state.loopCache.getMicroServicePolicies()[msPolicy]['policyModel']['policyAcronym'],
+        'microservice',
+        OnapConstant.microServiceType))
+      xPos += (this.boxWidth + this.boxSpace);
+      allElements.push(this.createOneArrow(xPos - this.boxSpace));
     }
 
-    createSvgFromInstance() {
-        const allElements = [];
-        var xPos = 0;
-
-        allElements.push(this.createBeginCircle(xPos,"Start"))
-        xPos+=(this.boxWidth+this.boxSpace);
-
-        allElements.push(this.createOneArrow(xPos-this.boxSpace));
-
-        allElements.push(this.createVesBox(xPos));
-        xPos+=(this.boxWidth+this.boxSpace);
-
-        allElements.push(this.createOneArrow(xPos-this.boxSpace));
-
-        for (var msPolicy in this.state.loopCache.getMicroServicePolicies()) {
-            var loopElementModelName =  this.state.loopCache.getMicroServicePolicies()[msPolicy]['loopElementModel'];
-            if (loopElementModelName !== undefined) {
-                loopElementModelName = loopElementModelName['name'];
-            }
-            allElements.push(this.createOneBox(xPos,
-                this.state.loopCache.getMicroServicePolicies()[msPolicy]['name'],
-                loopElementModelName,
-                this.state.loopCache.getMicroServicePolicies()[msPolicy]['policyModel']['policyAcronym'],
-                'microservice',
-                OnapConstant.microServiceType))
-            xPos+=(this.boxWidth+this.boxSpace);
-            allElements.push(this.createOneArrow(xPos-this.boxSpace));
-        }
-
-        for (var opPolicy in this.state.loopCache.getOperationalPolicies()) {
-            loopElementModelName =  this.state.loopCache.getOperationalPolicies()[opPolicy]['loopElementModel'];
-            if (loopElementModelName !== undefined) {
-                loopElementModelName = loopElementModelName['name'];
-            }
-            allElements.push(this.createOneBox(xPos,
-                this.state.loopCache.getOperationalPolicies()[opPolicy]['name'],
-                loopElementModelName,
-                this.state.loopCache.getOperationalPolicies()[opPolicy]['policyModel']['policyAcronym'],
-                'operational',
-                OnapConstant.operationalPolicyType))
-            xPos+=(this.boxWidth+this.boxSpace);
-            allElements.push(this.createOneArrow(xPos-this.boxSpace));
-        }
-
-        allElements.push(this.createEndCircle(xPos, "End"))
-        xPos+=(this.boxWidth+this.boxSpace);
-
-        return allElements;
+    for (var opPolicy in this.state.loopCache.getOperationalPolicies()) {
+      loopElementModelName = this.state.loopCache.getOperationalPolicies()[opPolicy]['loopElementModel'];
+      if (loopElementModelName !== undefined) {
+        loopElementModelName = loopElementModelName['name'];
+      }
+      allElements.push(this.createOneBox(xPos,
+        this.state.loopCache.getOperationalPolicies()[opPolicy]['name'],
+        loopElementModelName,
+        this.state.loopCache.getOperationalPolicies()[opPolicy]['policyModel']['policyAcronym'],
+        'operational',
+        OnapConstant.operationalPolicyType))
+      xPos += (this.boxWidth + this.boxSpace);
+      allElements.push(this.createOneArrow(xPos - this.boxSpace));
     }
 
-    renderSvg() {
-        if (this.state.loopCache.getLoopName() === undefined) {
-            return [emptySvg];
-        }
-        if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_INSTANCE) {
-            return this.createSvgFromInstance();
-        } else if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_TEMPLATE) {
-            return this.createSvgFromTemplate();
-        }
-    }
+    allElements.push(this.createEndCircle(xPos, "End"))
+    xPos += (this.boxWidth + this.boxSpace);
+
+    return allElements;
+  }
 
-    render() {
-        var allTheElements = this.renderSvg();
-        var svgWidth = this.boxWidth*allTheElements.length;
-        var svgHeight = this.boxHeight+50;
-        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>
-            </DivStyled>
-        );
+  renderSvg() {
+    if (this.state.loopCache.getLoopName() === undefined) {
+      return [emptySvg];
     }
+    if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_INSTANCE) {
+      return this.createSvgFromInstance();
+    } else if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_TEMPLATE) {
+      return this.createSvgFromTemplate();
+    }
+  }
+
+  render() {
+    var allTheElements = this.renderSvg();
+    var svgWidth = this.boxWidth * allTheElements.length;
+    var svgHeight = this.boxHeight + 50;
+    return (
+
+      <DivStyled onClick={ this.handleSvgClick }>
+        <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>
+    );
+  }
 }
 
 export default withRouter(SvgGenerator);