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

5 files changed, 79 insertions, 74 deletions

diff --git a/ui-react/src/api/LoopCache.js b/ui-react/src/api/LoopCache.js
index c8ecca2ff..5eaa79a64 100644
--- a/ui-react/src/api/LoopCache.js
+++ b/ui-react/src/api/LoopCache.js
@@ -126,12 +126,14 @@ export default class LoopCache {
 		return null;
 	}
 
-	getOperationalPolicySupportedPdpgroup(name) {
+	getOperationalPolicySupportedPdpGroup(name) {
 		var opConfig=this.getOperationalPolicyForName(name);
 		if (opConfig !== null) {
-			return opConfig["policyModel"]["policyPdpGroup"]["supportedPdpGroups"];
+		    if (opConfig["policyModel"]["policyPdpGroup"] !== undefined && opConfig["policyModel"]["policyPdpGroup"]["supportedPdpGroups"] !== undefined) {
+			    return opConfig["policyModel"]["policyPdpGroup"]["supportedPdpGroups"];
+			}
 		}
-		return null;
+		return [];
 	}
 
 	getOperationalPolicyPdpGroup(name) {
@@ -150,12 +152,14 @@ export default class LoopCache {
 		return null;
 	}
 
-	getMicroServiceSupportedPdpgroup(name) {
+	getMicroServiceSupportedPdpGroup(name) {
 		var microService=this.getMicroServiceForName(name);
 		if (microService !== null) {
-			return microService["policyModel"]["policyPdpGroup"]["supportedPdpGroups"];
+		    if (microService["policyModel"]["policyPdpGroup"] !== undefined && microService["policyModel"]["policyPdpGroup"]["supportedPdpGroups"] !== undefined) {
+			    return microService["policyModel"]["policyPdpGroup"]["supportedPdpGroups"];
+			}
 		}
-		return null;
+		return [];
 	}
 
 	getMicroServicePdpGroup(name) {
diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
index 3fa0c0ca2..da65ac9f1 100644
--- a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
+++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
@@ -85,19 +85,20 @@ export default class ConfigurationPolicyModal extends React.Component {
 		}
 		var editorData = this.state.loopCache.getMicroServicePropertiesForName(this.state.policyName);
 
-		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';
-
 		this.setState({
 			jsonEditor: new JSONEditor(document.getElementById("editor"),
-				{ schema: toscaModel.schema, startval: editorData })
+				{
+				    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,
+                    show_errors: 'always'
+				 })
 		})
 	}
 
diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.test.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.test.js
index 4d527b71c..a19c18c96 100644
--- a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.test.js
+++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.test.js
@@ -25,7 +25,6 @@ import { mount } from 'enzyme';
 import ConfigurationPolicyModal from './ConfigurationPolicyModal';
 import LoopCache from '../../../api/LoopCache';
 
-
 describe('Verify ConfigurationPolicyModal', () => {
     beforeEach(() => {
         fetch.resetMocks();
diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
index dc7c0a489..7ed8ba6f1 100644
--- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
+++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
@@ -94,20 +94,8 @@ export default class OperationalPolicyModal extends React.Component {
 				return liel;
 			}
 		});
-		JSONEditor.defaults.options.theme = 'myBootstrap4';
-		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.array_controls_top=true;
-		JSONEditor.defaults.options.show_errors = 'always';
-		JSONEditor.defaults.options.keep_oneof_values=false;
-		JSONEditor.defaults.options.collapsed=true;
-		//JSONEditor.defaults.options.template = 'default';
 	}
-	
+
 	renderJsonEditor() {
 		console.debug("Rendering OperationalPolicyModal");
 		var schema_json = this.state.loopCache.getOperationalPolicyJsonSchema();
@@ -120,7 +108,21 @@ export default class OperationalPolicyModal extends React.Component {
 
 		this.setState({
 				jsonEditor: new JSONEditor(document.getElementById("editor"),
-					{ schema: schema_json.schema, startval: operationalPoliciesData })
+					{
+					    schema: schema_json.schema,
+					    startval: operationalPoliciesData,
+					    theme: 'myBootstrap4',
+                        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,
+                        array_controls_top: true,
+                        show_errors: 'always',
+                        keep_oneof_values: false,
+                        collapsed:true
+					})
 			})
 	}
 
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" />