X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=ui-react%2Fsrc%2Fcomponents%2Fdialogs%2FPolicy%2FPolicyModal.js;h=8b49d9150d8c9cc9507ac4544901b5ce65c30970;hb=fdbbb38dfbc907fb0ecbfe69ee53b3e58f04a323;hp=caae70ef070f603dab28ebef6c03f5567a9711ed;hpb=635445a5f262464c88287e5b5ceace4abf9cc4bc;p=clamp.git diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js index caae70ef..8b49d915 100644 --- a/ui-react/src/components/dialogs/Policy/PolicyModal.js +++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js @@ -30,7 +30,9 @@ import Select from 'react-select'; import Modal from 'react-bootstrap/Modal'; import styled from 'styled-components'; import LoopService from '../../../api/LoopService'; +import LoopCache from '../../../api/LoopCache'; import JSONEditor from '@json-editor/json-editor'; +import Alert from 'react-bootstrap/Alert'; const ModalStyled = styled(Modal)` background-color: transparent; @@ -49,7 +51,9 @@ export default class PolicyModal extends React.Component { pdpGroupList: [], pdpSubgroupList: [], chosenPdpGroup: '', - chosenPdpSubgroup: '' + chosenPdpSubgroup: '', + showSucAlert: false, + showFailAlert: false }; constructor(props, context) { @@ -59,6 +63,9 @@ 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); + this.handleRefresh = this.handleRefresh.bind(this); + this.disableAlert = this.disableAlert.bind(this); } handleSave() { @@ -67,13 +74,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 +87,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 +107,43 @@ export default class PolicyModal extends React.Component { this.renderJsonEditor(); } + createJsonEditor(toscaModel, editorData) { + JSONEditor.defaults.themes.myBootstrap4 = JSONEditor.defaults.themes.bootstrap4.extend({ + getTab: function(text,tabId) { + var liel = document.createElement('li'); + liel.classList.add('nav-item'); + var ael = document.createElement("a"); + ael.classList.add("nav-link"); + ael.setAttribute("style",'padding:10px;max-width:160px;'); + ael.setAttribute("href", "#" + tabId); + ael.setAttribute('data-toggle', 'tab'); + text.setAttribute("style",'word-wrap:break-word;'); + ael.appendChild(text); + liel.appendChild(ael); + return liel; + } + }); + return new JSONEditor(document.getElementById("editor"), + { schema: toscaModel, + startval: editorData, + theme: 'myBootstrap4', + object_layout: 'grid', + disable_properties: false, + disable_edit_json: false, + disable_array_reorder: true, + disable_array_delete_last_row: true, + disable_array_delete_all_rows: false, + array_controls_top: true, + keep_oneof_values: false, + collapsed:true, + show_errors: 'always', + display_required_only: false, + show_opt_in: false, + prompt_before_delete: true, + required_by_default: false + }) + } + renderJsonEditor() { console.debug("Rendering PolicyModal ", this.state.policyName); var toscaModel = {}; @@ -110,13 +153,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 +168,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 @@ -179,12 +201,67 @@ export default class PolicyModal extends React.Component { this.setState({ chosenPdpSubgroup: e.value }); } + handleRefresh() { + var newLoopCache, toscaModel, editorData; + if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') { + LoopService.refreshMicroServicePolicyJson(this.state.loopCache.getLoopName(),this.state.policyName).then(data => { + newLoopCache = new LoopCache(data); + toscaModel = newLoopCache.getMicroServiceJsonRepresentationForName(this.state.policyName); + editorData = newLoopCache.getMicroServicePropertiesForName(this.state.policyName); + document.getElementById("editor").innerHTML = ""; + this.setState({ + loopCache: newLoopCache, + jsonEditor: this.createJsonEditor(toscaModel,editorData), + showSucAlert: true, + showMessage: "Successfully refreshed" + }); + }) + .catch(error => { + console.error("Error while refreshing the Operational Policy Json Representation"); + this.setState({ + showFailAlert: true, + showMessage: "Refreshing of UI failed" + }); + }); + } else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') { + LoopService.refreshOperationalPolicyJson(this.state.loopCache.getLoopName(),this.state.policyName).then(data => { + var newLoopCache = new LoopCache(data); + toscaModel = newLoopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName); + editorData = newLoopCache.getOperationalPolicyPropertiesForName(this.state.policyName); + document.getElementById("editor").innerHTML = ""; + this.setState({ + loopCache: newLoopCache, + jsonEditor: this.createJsonEditor(toscaModel,editorData), + showSucAlert: true, + showMessage: "Successfully refreshed" + }); + }) + .catch(error => { + console.error("Error while refreshing the Operational Policy Json Representation"); + this.setState({ + showFailAlert: true, + showMessage: "Refreshing of UI failed" + }); + }); + } + } + + disableAlert() { + this.setState ({ showSucAlert: false, showFailAlert: false }); + } + render() { return ( - Configuration policies + Edit the policy + + {this.state.showMessage} + + + {this.state.showMessage} +
@@ -204,6 +281,9 @@ export default class PolicyModal extends React.Component { +