2 files changed, 47 insertions, 28 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 00000000..a409d2cd
--- /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().forEach(ms => {
+				componentsMap.set(ms.name, "/configurationPolicyModal/"+ms.name);
+			})
+		}
+		if (typeof (loopCache.getOperationalPolicies()) !== "undefined") {
+			loopCache.getOperationalPolicies().forEach(op => {
+				componentsMap.set(op.name, "/operationalPolicyModal");
+			})
+		}
+		componentsMap.set("OperationalPolicy","/operationalPolicyModal");
+		return componentsMap;
+	}
+}
diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
index 2858ccd8..3ac2f31f 100644
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js
+++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
@@ -22,34 +22,39 @@
  */
 import React from 'react';
 import styled from 'styled-components';
+import LoopCache from '../../../api/LoopCache';
 import { withRouter } from "react-router";
-import LoopCache from '../../../api/LoopCache'
-import LoopService from '../../../api/LoopService'
+import LoopService from '../../../api/LoopService';
+import LoopComponentConverter from './LoopComponentConverter';
 
 const LoopViewSvgDivStyled = styled.div`
 	overflow: hidden;
 	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
 	border: 1px solid;
 	border-color: ${props => (props.theme.loopViewerHeaderColor)};
-	height: 50%;
+	margin-left: auto;
+	margin-right:auto;
+	text-align: center;
+
 `
 
 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) {
@@ -57,40 +62,36 @@ class LoopViewSvg extends React.Component {
 	}
 
 	componentWillReceiveProps(newProps) {
-		this.state.loopCache = newProps.loopCache;
-		this.getSvg();
-	}
+		this.setState({
+			loopCache: newProps.loopCache,
+			componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache),
 
-	componentDidMount() {
-		this.getSvg();
+		});
+		this.getSvg(newProps.loopCache.getLoopName());
 	}
 
-	getSvg() {
-		LoopService.getSvg(this.state.loopCache.getLoopName()).then(svgXml => {
-			if (svgXml.length != 0) {
-				this.setState({ svgContent: svgXml })
-			} else {
-				this.setState({ svgContent: LoopViewSvg.emptySvg })
-			}
-		});
+	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() {
 		return (
-			<LoopViewSvgDivStyled id="loop_svg" dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
+			<LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
 
 			</LoopViewSvgDivStyled>
 		);