From: sebdet Date: Thu, 18 Jul 2019 13:23:13 +0000 (+0200) Subject: Add generic svg selection X-Git-Tag: 4.1.0~8^2 X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=5f6c178c3eaea6fffe7d46ca3c75dcb0ffa92755;p=clamp.git 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 --- diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index 4271f103..dd4923e3 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()} ()} /> - ()} /> + ()} /> ()} /> ()} /> diff --git a/ui-react/src/OnapClamp.js b/ui-react/src/OnapClamp.js index a8cc2154..506f6e09 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 ( {super.render()} diff --git a/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js index f3bdeb68..0bf71580 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 { - + 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..b737f3e1 --- /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 fa028c0d..91d74e4f 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 = "No LOOP (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() {