From 2dd4e997c1ccf5dab4dfb7665ce74c0fd1f13e49 Mon Sep 17 00:00:00 2001 From: sebdet Date: Wed, 4 Mar 2020 15:47:39 -0800 Subject: 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 Change-Id: Id15ddedc1910f6a40bf6e407b34e343e00135571 --- .../src/components/dialogs/Policy/PolicyModal.js | 83 +++++++++++----------- 1 file changed, 41 insertions(+), 42 deletions(-) (limited to 'ui-react/src/components/dialogs/Policy') 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 ( - Configuration policies + Edit the policy
-- cgit 1.2.3-korg