From 225dcb4d6f801d88094a9512d79c82c4189c07f6 Mon Sep 17 00:00:00 2001 From: liamfallon Date: Mon, 15 Nov 2021 15:22:57 +0000 Subject: Align ui-react file in policy-clamp and policy-gui When the ui-react code was transferred to policy-gui, the white space was cleaned up and reformatted. This makes it difficult to track the real functional changes if any between ui-react in policy-clamp and policy-gui. This review brings more white space changes into ui-react in policy-clamp to make file comparisons easier. Issue-ID: POLICY-3358 Change-Id: Ie65d5bb664e6f43fe2f8a4342cf679e34ced18b8 Signed-off-by: liamfallon --- .../src/components/dialogs/Policy/PolicyModal.js | 544 +++++++++++---------- 1 file changed, 274 insertions(+), 270 deletions(-) (limited to 'runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js') diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js index 4a883fffa..0c7637c44 100644 --- a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js +++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js @@ -31,315 +31,319 @@ 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/dist/jsoneditor.js'; +import { JSONEditor } from '@json-editor/json-editor/dist/jsoneditor.js'; import "@fortawesome/fontawesome-free/css/all.css" import Alert from 'react-bootstrap/Alert'; import OnapConstant from '../../../utils/OnapConstants'; import OnapUtils from '../../../utils/OnapUtils'; const ModalStyled = styled(Modal)` - background-color: transparent; + background-color: transparent; ` const DivWhiteSpaceStyled = styled.div` - white-space: pre; + white-space: pre; ` export default class PolicyModal extends React.Component { - state = { - show: true, - loopCache: this.props.loopCache, - jsonEditor: null, - policyName: this.props.match.params.policyName, - // This is to indicate whether it's an operational or config policy (in terms of loop instance) - policyInstanceType: this.props.match.params.policyInstanceType, - pdpGroup: null, - pdpGroupList: [], - pdpSubgroupList: [], - chosenPdpGroup: '', - chosenPdpSubgroup: '', - showSucAlert: false, - showFailAlert: false - }; - - constructor(props, context) { - super(props, context); - this.handleClose = this.handleClose.bind(this); - this.handleSave = this.handleSave.bind(this); - 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; - } + state = { + show: true, + loopCache: this.props.loopCache, + jsonEditor: null, + policyName: this.props.match.params.policyName, + // This is to indicate whether it's an operational or config policy (in terms of loop instance) + policyInstanceType: this.props.match.params.policyInstanceType, + pdpGroup: null, + pdpGroupList: [], + pdpSubgroupList: [], + chosenPdpGroup: '', + chosenPdpSubgroup: '', + showSucAlert: false, + showFailAlert: false + }; - handleSave() { - var editorData = this.state.jsonEditor.getValue(); - var errors = this.state.jsonEditor.validate(); - errors = errors.concat(this.customValidation(editorData, this.state.loopCache.getTemplateName())); + constructor(props, context) { + super(props, context); + this.handleClose = this.handleClose.bind(this); + this.handleSave = this.handleSave.bind(this); + 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; + } - if (errors.length !== 0) { - console.error("Errors detected during policy data validation ", errors); - 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 === 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.loadLoopFunction(this.state.loopCache.getLoopName()); - }); - } - } - } + handleSave() { + var editorData = this.state.jsonEditor.getValue(); + var errors = this.state.jsonEditor.validate(); + errors = errors.concat(this.customValidation(editorData, this.state.loopCache.getTemplateName())); - customValidation(editorData, templateName) { - // method for sub-classes to override with customized validation - return []; + if (errors.length !== 0) { + console.error("Errors detected during policy data validation ", errors); + 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 === 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.loadLoopFunction(this.state.loopCache.getLoopName()); + }); + } } + } - handleClose() { - this.setState({ show: false }); - this.props.history.push('/'); - } + customValidation(editorData, templateName) { + // method for sub-classes to override with customized validation + return []; + } - componentDidMount() { - this.renderJsonEditor(); - } + handleClose() { + this.setState({ show: false }); + this.props.history.push('/'); + } - componentDidUpdate() { - if (this.state.showSucAlert === true || this.state.showFailAlert === true) { - let modalElement = document.getElementById("policyModal") - if (modalElement) { - modalElement.scrollTo(0, 0); - } - } - } + componentDidMount() { + this.renderJsonEditor(); + } - createJsonEditor(toscaModel, editorData) { - return new JSONEditor(document.getElementById("editor"), - { schema: toscaModel, - startval: editorData, - theme: 'bootstrap4', - iconlib: 'fontawesome5', - 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 - }) + componentDidUpdate() { + if (this.state.showSucAlert === true || this.state.showFailAlert === true) { + let modalElement = document.getElementById("policyModal") + if (modalElement) { + modalElement.scrollTo(0, 0); + } } + } - renderJsonEditor() { - console.debug("Rendering PolicyModal ", this.state.policyName); - var toscaModel = {}; - var editorData = {}; - var pdpGroupValues = {}; - var chosenPdpGroupValue, chosenPdpSubgroupValue; - 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); - chosenPdpGroupValue = this.state.loopCache.getMicroServicePdpGroup(this.state.policyName); - chosenPdpSubgroupValue = this.state.loopCache.getMicroServicePdpSubgroup(this.state.policyName); - } 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); - chosenPdpGroupValue = this.state.loopCache.getOperationalPolicyPdpGroup(this.state.policyName); - chosenPdpSubgroupValue = this.state.loopCache.getOperationalPolicyPdpSubgroup(this.state.policyName); - } - - if (toscaModel == null) { - return; - } + createJsonEditor(toscaModel, editorData) { + return new JSONEditor(document.getElementById("editor"), + { + schema: toscaModel, + startval: editorData, + theme: 'bootstrap4', + iconlib: 'fontawesome5', + 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 + }) + } - var pdpSubgroupValues = []; - if (typeof(chosenPdpGroupValue) !== "undefined") { - var selectedPdpGroup = pdpGroupValues.filter(entry => (Object.keys(entry)[0] === chosenPdpGroupValue)); - 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 - }) + renderJsonEditor() { + console.debug("Rendering PolicyModal ", this.state.policyName); + var toscaModel = {}; + var editorData = {}; + var pdpGroupValues = {}; + var chosenPdpGroupValue, chosenPdpSubgroupValue; + 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); + chosenPdpGroupValue = this.state.loopCache.getMicroServicePdpGroup(this.state.policyName); + chosenPdpSubgroupValue = this.state.loopCache.getMicroServicePdpSubgroup(this.state.policyName); + } 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); + chosenPdpGroupValue = this.state.loopCache.getOperationalPolicyPdpGroup(this.state.policyName); + chosenPdpSubgroupValue = this.state.loopCache.getOperationalPolicyPdpSubgroup(this.state.policyName); } - 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({ - chosenPdpGroup: e.value, - chosenPdpSubgroup: '', - pdpSubgroupList: pdpSubgroupValues - }); - } + if (toscaModel == null) { + return; } - handlePdpSubgroupChange(e) { - this.setState({ chosenPdpSubgroup: e.value }); + var pdpSubgroupValues = []; + if (typeof (chosenPdpGroupValue) !== "undefined") { + var selectedPdpGroup = pdpGroupValues.filter(entry => (Object.keys(entry)[0] === chosenPdpGroupValue)); + 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 + }) + } - 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" - }); - }); - } + 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({ + chosenPdpGroup: e.value, + chosenPdpSubgroup: '', + pdpSubgroupList: pdpSubgroupValues + }); } + } - disableAlert() { - this.setState ({ showSucAlert: false, showFailAlert: false }); - } + handlePdpSubgroupChange(e) { + this.setState({ chosenPdpSubgroup: e.value }); + } - renderPdpGroupDropDown() { - if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) { - return ( - - Pdp Group Info - - - - - ); - } + 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" + }); + }); } + } - 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!" - ); - } - } + disableAlert() { + this.setState({ showSucAlert: false, showFailAlert: false }); + } - renderModalTitle() { - return ( - Edit the policy - ); + renderPdpGroupDropDown() { + if (this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) { + return ( + + Pdp Group Info + + + + + ); } + } - renderButton() { - var allElement = [()]; - if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) { - allElement.push(( - - )); - allElement.push(( - - )); - } - return allElement; + 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!" + ); } + } - render() { - return ( - - - {this.renderModalTitle()} - - - - {this.state.showMessage} - - - - - {this.state.showMessage} - - - - {this.renderOpenLoopMessage()} -
- {this.renderPdpGroupDropDown()} - - - {this.renderButton()} - - - ); + 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 ( + + + { this.renderModalTitle() } + + + + { this.state.showMessage } + + + + + { this.state.showMessage } + + + + { this.renderOpenLoopMessage() } +
+ { this.renderPdpGroupDropDown() } + + + { this.renderButton() } + + + ); + } } -- cgit 1.2.3-korg