Create SVG in UI
Remove the SVG generation from the backend and put it in the UI
Issue-ID: CLAMP-854
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: Icfa9e107d83bb244ac3d87300d013555bfa0b037
diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js
index 5930386..d3b4273 100644
--- a/ui-react/src/components/dialogs/Policy/PolicyModal.js
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js
@@ -33,6 +33,7 @@
import LoopCache from '../../../api/LoopCache';
import JSONEditor from '@json-editor/json-editor';
import Alert from 'react-bootstrap/Alert';
+import OnapConstant from '../../../utils/OnapConstants';
const ModalStyled = styled(Modal)`
background-color: transparent;
@@ -66,6 +67,9 @@
this.createJsonEditor = this.createJsonEditor.bind(this);
this.handleRefresh = this.handleRefresh.bind(this);
this.disableAlert = this.disableAlert.bind(this);
+ this.renderPdpGroupDropDown = this.renderPdpGroupDropDown.bind(this);
+ this.renderOpenLoopMessage = this.renderOpenLoopMessage.bind(this);
+ this.renderModalTitle = this.renderModalTitle.bind(this);
}
handleSave() {
@@ -82,7 +86,7 @@
}
else {
console.info("NO validation errors found in policy data");
- if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') {
+ if (this.state.policyInstanceType === OnapConstant.microServiceType) {
this.state.loopCache.updateMicroServiceProperties(this.state.policyName, editorData);
this.state.loopCache.updateMicroServicePdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup);
LoopService.setMicroServiceProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getMicroServiceForName(this.state.policyName)).then(resp => {
@@ -90,7 +94,7 @@
this.props.history.push('/');
this.props.loadLoopFunction(this.state.loopCache.getLoopName());
});
- } else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') {
+ } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
this.state.loopCache.updateOperationalPolicyProperties(this.state.policyName, editorData);
this.state.loopCache.updateOperationalPolicyPdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup);
LoopService.setOperationalPolicyProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getOperationalPolicies()).then(resp => {
@@ -154,13 +158,13 @@
var editorData = {};
var pdpGroupValues = {};
var chosenPdpGroupValue, chosenPdpSubgroupValue;
- if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') {
+ if (this.state.policyInstanceType === OnapConstant.microServiceType) {
toscaModel = this.state.loopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
editorData = this.state.loopCache.getMicroServicePropertiesForName(this.state.policyName);
pdpGroupValues = this.state.loopCache.getMicroServiceSupportedPdpGroup(this.state.policyName);
chosenPdpGroupValue = this.state.loopCache.getMicroServicePdpGroup(this.state.policyName);
chosenPdpSubgroupValue = this.state.loopCache.getMicroServicePdpSubgroup(this.state.policyName);
- } else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') {
+ } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
toscaModel = this.state.loopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
editorData = this.state.loopCache.getOperationalPolicyPropertiesForName(this.state.policyName);
pdpGroupValues = this.state.loopCache.getOperationalPolicySupportedPdpGroup(this.state.policyName);
@@ -207,7 +211,7 @@
handleRefresh() {
var newLoopCache, toscaModel, editorData;
- if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') {
+ if (this.state.policyInstanceType === OnapConstant.microServiceType) {
LoopService.refreshMicroServicePolicyJson(this.state.loopCache.getLoopName(),this.state.policyName).then(data => {
newLoopCache = new LoopCache(data);
toscaModel = newLoopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
@@ -227,7 +231,7 @@
showMessage: "Refreshing of UI failed"
});
});
- } else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') {
+ } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
LoopService.refreshOperationalPolicyJson(this.state.loopCache.getLoopName(),this.state.policyName).then(data => {
var newLoopCache = new LoopCache(data);
toscaModel = newLoopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
@@ -254,11 +258,60 @@
this.setState ({ showSucAlert: false, showFailAlert: false });
}
+ renderPdpGroupDropDown() {
+ if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
+ return (
+ <Form.Group as={Row} controlId="formPlaintextEmail">
+ <Form.Label column sm="2">Pdp Group Info</Form.Label>
+ <Col sm="3">
+ <Select value={{ label: this.state.chosenPdpGroup, value: this.state.chosenPdpGroup }} onChange={this.handlePdpGroupChange} options={this.state.pdpGroupList} />
+ </Col>
+ <Col sm="3">
+ <Select value={{ label: this.state.chosenPdpSubgroup, value: this.state.chosenPdpSubgroup }} onChange={this.handlePdpSubgroupChange} options={this.state.pdpSubgroupList} />
+ </Col>
+ </Form.Group>
+ );
+ }
+ }
+
+ renderOpenLoopMessage() {
+ if(this.state.policyInstanceType === OnapConstant.operationalPolicyType && this.state.loopCache.isOpenLoopTemplate()) {
+ return (
+ "Operational Policy cannot be configured as only Open Loop is supported for this Template!"
+ );
+ }
+ }
+
+ renderModalTitle() {
+ return (
+ <Modal.Title>Edit the policy</Modal.Title>
+ );
+ }
+
+ renderButton() {
+ var allElement = [(<Button variant="secondary" onClick={this.handleClose}>
+ Close
+ </Button>)];
+ if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
+ allElement.push((
+ <Button variant="primary" disabled={this.readOnly} onClick={this.handleSave}>
+ Save Changes
+ </Button>
+ ));
+ allElement.push((
+ <Button variant="primary" disabled={this.readOnly} onClick={this.handleRefresh}>
+ Refresh
+ </Button>
+ ));
+ }
+ return allElement;
+ }
+
render() {
return (
- <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose } backdrop="static">
+ <ModalStyled size="xl" backdrop="static" keyboard={false} show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
- <Modal.Title>Edit the policy</Modal.Title>
+ {this.renderModalTitle()}
</Modal.Header>
<Alert variant="success" show={this.state.showSucAlert} onClose={this.disableAlert} dismissible>
{this.state.showMessage}
@@ -267,30 +320,14 @@
{this.state.showMessage}
</Alert>
<Modal.Body>
+ {this.renderOpenLoopMessage()}
<div id="editor" />
- <Form.Group as={Row} controlId="formPlaintextEmail">
- <Form.Label column sm="2">Pdp Group Info</Form.Label>
- <Col sm="3">
- <Select value={{ label: this.state.chosenPdpGroup, value: this.state.chosenPdpGroup }} onChange={this.handlePdpGroupChange} options={this.state.pdpGroupList} />
- </Col>
- <Col sm="3">
- <Select value={{ label: this.state.chosenPdpSubgroup, value: this.state.chosenPdpSubgroup }} onChange={this.handlePdpSubgroupChange} options={this.state.pdpSubgroupList} />
- </Col>
- </Form.Group>
+ {this.renderPdpGroupDropDown()}
</Modal.Body>
<Modal.Footer>
- <Button variant="secondary" onClick={this.handleClose}>
- Close
- </Button>
- <Button variant="primary" onClick={this.handleSave}>
- Save Changes
- </Button>
- <Button variant="primary" onClick={this.handleRefresh}>
- Refresh
- </Button>
+ {this.renderButton()}
</Modal.Footer>
</ModalStyled>
-
);
}
}
\ No newline at end of file