summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ui-react/src/LoopUI.js2
-rw-r--r--ui-react/src/OnapClamp.js2
-rw-r--r--ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js2
-rw-r--r--ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js18
-rw-r--r--ui-react/src/components/loop_viewer/svg/LoopSvg.js47
5 files changed, 46 insertions, 25 deletions
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 4271f1037..dd4923e3e 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 a8cc2154a..506f6e09d 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 f3bdeb683..0bf71580a 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 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() {