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>

2 files changed, 43 insertions, 22 deletions

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() {