diff options
author | 2019-07-19 07:44:49 +0000 | |
---|---|---|
committer | 2019-07-19 07:44:49 +0000 | |
commit | 67ef5fd2c784523c33016810835375fa2182dd78 (patch) | |
tree | 97b8deb95f1654782c1c7602931ff198fe88fad2 /ui-react/src | |
parent | d8bed32cb3f84d9cfb18332b07742701f5d57379 (diff) | |
parent | 5f6c178c3eaea6fffe7d46ca3c75dcb0ffa92755 (diff) |
Merge "Add generic svg selection"
Diffstat (limited to 'ui-react/src')
-rw-r--r-- | ui-react/src/LoopUI.js | 2 | ||||
-rw-r--r-- | ui-react/src/OnapClamp.js | 2 | ||||
-rw-r--r-- | ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js | 2 | ||||
-rw-r--r-- | ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js | 18 | ||||
-rw-r--r-- | ui-react/src/components/loop_viewer/svg/LoopSvg.js | 47 |
5 files changed, 46 insertions, 25 deletions
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()} <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 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 ( <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 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 { </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 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 = "<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() { |