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>

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 4271f10..dd4923e 100644 (file)
--- 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 a8cc215..506f6e0 100644 (file)
--- 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 f3bdeb6..0bf7158 100644 (file)
--- 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 (file)
index 0000000..b737f3e
--- /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 fa028c0..91d74e4 100644 (file)
--- 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() {