Rework tosca converter

New code to convert the Policy Tosca Yaml to Json Schema for the Clamp
UI

Issue-ID: CLAMP-647
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: Id15ddedc1910f6a40bf6e407b34e343e00135571

1 files changed, 41 insertions, 42 deletions

diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js
index caae70ef0..634c5ac57 100644
--- a/ui-react/src/components/dialogs/Policy/PolicyModal.js
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js
@@ -59,6 +59,7 @@ export default class PolicyModal extends React.Component {
 		this.renderJsonEditor = this.renderJsonEditor.bind(this);
 		this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this);
 		this.handlePdpSubgroupChange = this.handlePdpSubgroupChange.bind(this);
+		this.createJsonEditor = this.createJsonEditor.bind(this);
 	}
 
 	handleSave() {
@@ -67,13 +68,12 @@ export default class PolicyModal extends React.Component {
 
 		if (errors.length !== 0) {
 			console.error("Errors detected during policy data validation ", errors);
-			this.setState({ show: false });
-			this.props.history.push('/');
+			return;
 		}
 		else {
 			console.info("NO validation errors found in policy data");
 			if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') {
-                this.state.loopCache.updateMicroServiceProperties(this.state.policyName, editorData[0]);
+                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 => {
                     this.setState({ show: false });
@@ -81,7 +81,7 @@ export default class PolicyModal extends React.Component {
                     this.props.loadLoopFunction(this.state.loopCache.getLoopName());
                 });
 			} else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') {
-				this.state.loopCache.updateOperationalPolicyProperties(this.state.policyName, editorData[0]);
+				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 => {
 					this.setState({ show: false });
@@ -101,6 +101,26 @@ export default class PolicyModal extends React.Component {
 		this.renderJsonEditor();
 	}
 
+    createJsonEditor(toscaModel, editorData) {
+        return new JSONEditor(document.getElementById("editor"),
+        {   schema: toscaModel,
+              startval: editorData,
+              theme: 'bootstrap4',
+              object_layout: 'grid',
+              disable_properties: true,
+              disable_edit_json: false,
+              disable_array_reorder: true,
+              disable_array_delete_last_row: true,
+              disable_array_delete_all_rows: false,
+              no_additional_properties: true,
+              show_errors: 'always',
+              display_required_only: false,
+              show_opt_in: true,
+              prompt_before_delete: true,
+              required_by_default: true
+        })
+    }
+
 	renderJsonEditor() {
 		console.debug("Rendering PolicyModal ", this.state.policyName);
 		var toscaModel = {};
@@ -110,13 +130,13 @@ export default class PolicyModal extends React.Component {
 		if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') {
 			toscaModel = this.state.loopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
 			editorData = this.state.loopCache.getMicroServicePropertiesForName(this.state.policyName);
-			pdpGroupValues = this.state.loopCache.getMicroServiceSupportedPdpgroup(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') {
 			toscaModel = this.state.loopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
 			editorData = this.state.loopCache.getOperationalPolicyPropertiesForName(this.state.policyName);
-			pdpGroupValues = this.state.loopCache.getOperationalPolicySupportedPdpgroup(this.state.policyName);
+			pdpGroupValues = this.state.loopCache.getOperationalPolicySupportedPdpGroup(this.state.policyName);
 			chosenPdpGroupValue = this.state.loopCache.getOperationalPolicyPdpGroup(this.state.policyName);
 			chosenPdpSubgroupValue = this.state.loopCache.getOperationalPolicyPdpSubgroup(this.state.policyName);
 		}
@@ -125,49 +145,28 @@ export default class PolicyModal extends React.Component {
 			return;
 		}
 
-		JSONEditor.defaults.options.theme = 'bootstrap4';
-		//JSONEditor.defaults.options.iconlib = 'bootstrap2';
-		JSONEditor.defaults.options.object_layout = 'grid';
-		JSONEditor.defaults.options.disable_properties = true;
-		JSONEditor.defaults.options.disable_edit_json = false;
-		JSONEditor.defaults.options.disable_array_reorder = true;
-		JSONEditor.defaults.options.disable_array_delete_last_row = true;
-		JSONEditor.defaults.options.disable_array_delete_all_rows = false;
-		JSONEditor.defaults.options.show_errors = 'always';
-
-		var pdpGroupListValues = pdpGroupValues.map(entry => {
-				return { label: Object.keys(entry)[0], value: Object.keys(entry)[0] };
-		});
-
-		if (typeof(chosenPdpGroupValue) === "undefined") {
-			this.setState({
-				jsonEditor: new JSONEditor(document.getElementById("editor"),
-					{ schema: toscaModel.schema, startval: editorData }),
-				pdpGroup: pdpGroupValues,
-				pdpGroupList: pdpGroupListValues,
-				chosenPdpGroup: chosenPdpGroupValue,
-				chosenPdpSubgroup: chosenPdpSubgroupValue
-			})
-		} else {
+        var pdpSubgroupValues = [];
+		if (typeof(chosenPdpGroupValue) !== "undefined") {
 			var selectedPdpGroup =	pdpGroupValues.filter(entry => (Object.keys(entry)[0] === chosenPdpGroupValue));
-			const pdpSubgroupValues = selectedPdpGroup[0][chosenPdpGroupValue].map((pdpSubgroup) => { return { label: pdpSubgroup, value: pdpSubgroup } });
-			this.setState({
-				jsonEditor: new JSONEditor(document.getElementById("editor"),
-					{ schema: toscaModel.schema, startval: editorData }),
-				pdpGroup: pdpGroupValues,
-				pdpGroupList: pdpGroupListValues,
-				pdpSubgroupList: pdpSubgroupValues,
-				chosenPdpGroup: chosenPdpGroupValue,
-				chosenPdpSubgroup: chosenPdpSubgroupValue
-			})
+			pdpSubgroupValues = selectedPdpGroup[0][chosenPdpGroupValue].map((pdpSubgroup) => { return { label: pdpSubgroup, value: pdpSubgroup } });
 		}
+		this.setState({
+        				jsonEditor: this.createJsonEditor(toscaModel,editorData),
+        				pdpGroup: pdpGroupValues,
+        				pdpGroupList: pdpGroupValues.map(entry => {
+                                      				return { label: Object.keys(entry)[0], value: Object.keys(entry)[0] };
+                                      		}),
+        				pdpSubgroupList: pdpSubgroupValues,
+        				chosenPdpGroup: chosenPdpGroupValue,
+        				chosenPdpSubgroup: chosenPdpSubgroupValue
+        			})
 	}
 
 	handlePdpGroupChange(e) {
 		var selectedPdpGroup =	this.state.pdpGroup.filter(entry => (Object.keys(entry)[0] === e.value));
 		const pdpSubgroupValues = selectedPdpGroup[0][e.value].map((pdpSubgroup) => { return { label: pdpSubgroup, value: pdpSubgroup } });
 		if (this.state.chosenPdpGroup !== e.value) {
-			this.setState({ 
+			this.setState({
 				chosenPdpGroup: e.value,
 				chosenPdpSubgroup: '',
 				pdpSubgroupList: pdpSubgroupValues
@@ -183,7 +182,7 @@ export default class PolicyModal extends React.Component {
 		return (
 			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
 				<Modal.Header closeButton>
-					<Modal.Title>Configuration policies</Modal.Title>
+					<Modal.Title>Edit the policy</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
 					<div id="editor" />