Rework tosca converter

[clamp.git] / ui-react / src / components / dialogs / Policy / PolicyModal.js

diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js
index caae70e..634c5ac 100644 (file)
--- 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" />