X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=ui-react%2Fsrc%2Fcomponents%2Fdialogs%2FPolicy%2FPolicyModal.js;h=6b1ebe17821eaa4ba4f7410ae3b4a95a701863fa;hb=9dfd03bce65a903c3379e1e07b3c972f208c8fdb;hp=caae70ef070f603dab28ebef6c03f5567a9711ed;hpb=f0e00e7c9ea8dd15a4aacdd880aa648539caf087;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..6b1ebe17 100644 --- a/ui-react/src/components/dialogs/Policy/PolicyModal.js +++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js @@ -30,12 +30,20 @@ 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'; +import OnapConstant from '../../../utils/OnapConstants'; +import OnapUtils from '../../../utils/OnapUtils'; const ModalStyled = styled(Modal)` background-color: transparent; ` +const DivWhiteSpaceStyled = styled.div` + white-space: pre; +` + export default class PolicyModal extends React.Component { state = { @@ -49,7 +57,9 @@ export default class PolicyModal extends React.Component { pdpGroupList: [], pdpSubgroupList: [], chosenPdpGroup: '', - chosenPdpSubgroup: '' + chosenPdpSubgroup: '', + showSucAlert: false, + showFailAlert: false }; constructor(props, context) { @@ -59,39 +69,55 @@ 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); + this.renderPdpGroupDropDown = this.renderPdpGroupDropDown.bind(this); + this.renderOpenLoopMessage = this.renderOpenLoopMessage.bind(this); + this.renderModalTitle = this.renderModalTitle.bind(this); + this.readOnly = props.readOnly !== undefined ? props.readOnly : false; } handleSave() { - var errors = this.state.jsonEditor.validate(); var editorData = this.state.jsonEditor.getValue(); + var errors = this.state.jsonEditor.validate(); + errors = errors.concat(this.customValidation(editorData, this.state.loopCache.getTemplateName())); if (errors.length !== 0) { console.error("Errors detected during policy data validation ", errors); - this.setState({ show: false }); - this.props.history.push('/'); + this.setState({ + showFailAlert: true, + showMessage: 'Errors detected during policy data validation:\n' + OnapUtils.jsonEditorErrorFormatter(errors) + }); + 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.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 }); - this.props.history.push('/'); - this.props.loadLoopFunction(this.state.loopCache.getLoopName()); - }); - } else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') { - this.state.loopCache.updateOperationalPolicyProperties(this.state.policyName, editorData[0]); + if (this.state.policyInstanceType === OnapConstant.microServiceType) { + 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 }); + this.props.history.push('/'); + this.props.loadLoopFunction(this.state.loopCache.getLoopName()); + }); + } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) { + 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 }); - this.props.history.push('/'); + this.props.history.push('/'); this.props.loadLoopFunction(this.state.loopCache.getLoopName()); }); } } } + customValidation(editorData, templateName) { + // method for sub-classes to override with customized validation + return []; + } + handleClose() { this.setState({ show: false }); this.props.history.push('/'); @@ -101,22 +127,68 @@ export default class PolicyModal extends React.Component { this.renderJsonEditor(); } + componentDidUpdate() { + if (this.state.showSucAlert === true || this.state.showFailAlert === true) { + let modalElement = document.getElementById("policyModal") + if (modalElement) { + modalElement.scrollTo(0, 0); + } + } + } + + 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 = {}; var editorData = {}; var pdpGroupValues = {}; var chosenPdpGroupValue, chosenPdpSubgroupValue; - if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') { + if (this.state.policyInstanceType === OnapConstant.microServiceType) { 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') { + } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) { 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 +197,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,34 +230,129 @@ export default class PolicyModal extends React.Component { this.setState({ chosenPdpSubgroup: e.value }); } + handleRefresh() { + var newLoopCache, toscaModel, editorData; + if (this.state.policyInstanceType === OnapConstant.microServiceType) { + 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 === OnapConstant.operationalPolicyType) { + 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 }); + } + + renderPdpGroupDropDown() { + if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) { + return ( + + Pdp Group Info + + + + + ); + } + } + + renderOpenLoopMessage() { + if(this.state.policyInstanceType === OnapConstant.operationalPolicyType && this.state.loopCache.isOpenLoopTemplate()) { + return ( + "Operational Policy cannot be configured as only Open Loop is supported for this Template!" + ); + } + } + + renderModalTitle() { + return ( + Edit the policy + ); + } + + renderButton() { + var allElement = [()]; + if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) { + allElement.push(( + + )); + allElement.push(( + + )); + } + return allElement; + } + render() { return ( - + - Configuration policies + {this.renderModalTitle()} + + + {this.state.showMessage} + + + + + {this.state.showMessage} + + + {this.renderOpenLoopMessage()}
- - Pdp Group Info - - - - + {this.renderPdpGroupDropDown()} - - + {this.renderButton()} - ); } -} \ No newline at end of file +}