Add generic svg selection

Add a converter that maps each component to a dialog type, so that each
component in the SVG can be mapped to a dialog if needed

Issue-ID: CLAMP-423
Change-Id: I2dc2517048ffd911f70c64b07216aa988bcb4fe0
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

5 files changed, 46 insertions, 25 deletions

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 4271f1037..dd4923e3e 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -175,7 +175,7 @@ export default class LoopUI extends React.Component {
 				{this.renderLoopViewer()}
 				<Route path="/operationalPolicyModal"
 					render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
-				<Route path="/configurationPolicyModal" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
+				<Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
 				<Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} updateLoopCacheFunction={this.updateLoopCache} />)} />
 				<Route path="/closeLoop" render={(routeProps) => (<Redirect to='/'/>)} />
 			</div>
diff --git a/ui-react/src/OnapClamp.js b/ui-react/src/OnapClamp.js
index a8cc2154a..506f6e09d 100644
--- a/ui-react/src/OnapClamp.js
+++ b/ui-react/src/OnapClamp.js
@@ -29,7 +29,7 @@ import { DefaultClampTheme } from './theme/globalStyle.js';
 export default class OnapClamp extends LoopUI {
 	
 	render() {
-		console.log("Onap Clamp UI starting");
+		console.info("Onap Clamp UI starting");
 		return (
 		<ThemeProvider theme={DefaultClampTheme}>
 			{super.render()}
diff --git a/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
index f3bdeb683..0bf71580a 100644
--- a/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
@@ -110,7 +110,7 @@ export default class OpenLoopModal extends React.Component {
 				</Modal.Body>
 				<Modal.Footer>
 					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
-					<Button variant="primary" type="submit" onClick={this.handleOpen}>OK</Button>
+					<Button variant="primary" type="submit" onClick={this.handleOpen}>Open</Button>
 				</Modal.Footer>
 			</ModalStyled>
 
diff --git a/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js b/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js
new file mode 100644
index 000000000..b737f3e19
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js
@@ -0,0 +1,18 @@
+export default class LoopComponentConverter {
+
+	static buildMapOfComponents(loopCache) {
+		var componentsMap = new Map([]);
+		if (typeof (loopCache.getMicroServicePolicies()) !== "undefined") {
+			loopCache.getMicroServicePolicies().map(ms => {
+				componentsMap.set(ms.name, "/configurationPolicyModal/"+ms.name);
+			})
+		}
+		if (typeof (loopCache.getOperationalPolicies()) !== "undefined") {
+			loopCache.getOperationalPolicies().map(op => {
+				componentsMap.set(op.name, "/operationalPolicyModal");
+			})
+		}
+		componentsMap.set("OperationalPolicy","/operationalPolicyModal");
+		return componentsMap;
+	}
+}
\ No newline at end of file
diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
index fa028c0de..91d74e4f0 100644
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js
+++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
@@ -22,8 +22,10 @@
  */
 import React from 'react';
 import styled from 'styled-components';
+import LoopCache from '../../../api/LoopCache';
 import { withRouter } from "react-router";
-import LoopService from '../../../api/LoopService'
+import LoopService from '../../../api/LoopService';
+import LoopComponentConverter from './LoopComponentConverter';
 
 const LoopViewSvgDivStyled = styled.div`
 	overflow: hidden;
@@ -36,19 +38,20 @@ const LoopViewSvgDivStyled = styled.div`
 class LoopViewSvg extends React.Component {
 
 	static emptySvg = "<svg><text x=\"20\" y=\"40\">No LOOP (SVG)</text></svg>";
-	static operationalPolicyDataElementId = "OperationalPolicy";
-
 
 	state = {
 		svgContent: LoopViewSvg.emptySvg,
-		loopCache: this.props.loopCache,
+		loopCache: new LoopCache({}),
+		componentModalMapping: new Map([]),
 	}
 
 	constructor(props) {
 		super(props);
-		this.state.loopCache = props.loopCache;
 		this.handleSvgClick = this.handleSvgClick.bind(this);
 		this.getSvg = this.getSvg.bind(this);
+		this.state.loopCache = props.loopCache;
+		this.state.componentModalMapping = LoopComponentConverter.buildMapOfComponents(props.loopCache);
+		this.getSvg(props.loopCache.getLoopName());
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {
@@ -56,31 +59,31 @@ class LoopViewSvg extends React.Component {
 	}
 
 	componentWillReceiveProps(newProps) {
-		this.setState({ loopCache: newProps.loopCache });
-		this.getSvg();
-	}
+		this.setState({
+			loopCache: newProps.loopCache,
+			componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache),
 
-	getSvg() {
-		LoopService.getSvg(this.state.loopCache.getLoopName()).then(svgXml => {
-			if (svgXml.length !== 0) {
-				this.setState({ svgContent: svgXml })
-			} else {
-				this.setState({ svgContent: LoopViewSvg.emptySvg })
-			}
 		});
+		this.getSvg(newProps.loopCache.getLoopName());
+	}
+
+	getSvg(loopName) {
+		if (typeof loopName !== "undefined") {
+			LoopService.getSvg(loopName).then(svgXml => {
+				if (svgXml.length !== 0) {
+					this.setState({ svgContent: svgXml })
+				} else {
+					this.setState({ svgContent: LoopViewSvg.emptySvg })
+				}
+			});
+		}
 	}
 
 	handleSvgClick(event) {
 		console.debug("svg click event received");
 		var elementName = event.target.parentNode.parentNode.parentNode.getAttribute('data-element-id');
 		console.info("SVG element clicked", elementName);
-		if (typeof elementName === "undefined" || elementName === "VES") {
-			return;
-		} else if (elementName === LoopViewSvg.operationalPolicyDataElementId) {
-			this.props.history.push('/operationalPolicyModal');
-		} else {
-			this.props.history.push('/configurationPolicyModal');
-		}
+		this.props.history.push(this.state.componentModalMapping.get(elementName));
 	}
 
 	render() {