From 42fa9f46d63968458cae9b2c72e7c4d0daca394b Mon Sep 17 00:00:00 2001 From: sebdet Date: Fri, 26 Mar 2021 18:31:08 +0100 Subject: Modify the PolicyDeploymentEditor to support checkboxes Add code to the PolicyDeploymentEditor so that checkboxes are rendered. Issue-ID: POLICY-2931 Signed-off-by: sebdet Change-Id: I3c933272419770595b706f6950f821220a76f789 --- ui-react/src/api/PoliciesListCache.js | 34 ----- ui-react/src/api/PolicyService.js | 28 ++++- .../dialogs/Policy/PolicyDeploymentEditor.js | 137 ++++++++++++++++++--- .../src/components/dialogs/Policy/PolicyEditor.js | 26 +--- .../src/components/dialogs/Policy/ToscaViewer.js | 7 +- .../components/dialogs/Policy/ViewAllPolicies.js | 15 ++- 6 files changed, 164 insertions(+), 83 deletions(-) delete mode 100644 ui-react/src/api/PoliciesListCache.js (limited to 'ui-react') diff --git a/ui-react/src/api/PoliciesListCache.js b/ui-react/src/api/PoliciesListCache.js deleted file mode 100644 index 30c9348d0..000000000 --- a/ui-react/src/api/PoliciesListCache.js +++ /dev/null @@ -1,34 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2021 AT&T Intellectual Property. All rights - * reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END============================================ - * =================================================================== - * - */ - -export default class PoliciesListCache { - policiesJsonCache; - - constructor(policiesJson) { - this.policiesJsonCache=policiesJson; - } - - getAllPolicies() { - return this.policiesJsonCache["policies"]; - } -} diff --git a/ui-react/src/api/PolicyService.js b/ui-react/src/api/PolicyService.js index 855d44167..54110f39c 100644 --- a/ui-react/src/api/PolicyService.js +++ b/ui-react/src/api/PolicyService.js @@ -41,7 +41,7 @@ export default class PolicyService { console.error("getPoliciesList error occurred ", error); alert("getPoliciesList error occurred " + error); return undefined; - }) + }); } static createNewPolicy(policyModelType, policyModelVersion, policyName, policyVersion, policyJson) { return fetch(window.location.pathname + 'restservices/clds/v2/policies/' + policyModelType + '/' @@ -93,4 +93,30 @@ export default class PolicyService { return undefined; }); } + static updatePdpDeployment(pdpOperationsList) { + return fetch(window.location.pathname + 'restservices/clds/v2/policies/pdpDeployment', { + method: 'PUT', + credentials: 'same-origin', + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(pdpOperationsList) + }) + .then(function (response) { + console.debug("updatePdpDeployment response received: ", response.status); + if (response.ok) { + console.info("updatePdpDeployment query successful"); + return response.text(); + } else { + return response.text().then(responseBody => { + throw new Error("HTTP " + response.status + "," + responseBody); + }) + } + }) + .catch(function (error) { + console.error("updatePdpDeployment error occurred ", error); + alert ("updatePdpDeployment error occurred " + error); + return undefined; + }); + } } diff --git a/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js b/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js index da695ee96..d15c73930 100644 --- a/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js +++ b/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js @@ -25,25 +25,41 @@ import React, { forwardRef } from 'react'; import Modal from 'react-bootstrap/Modal'; import styled from 'styled-components'; import Button from 'react-bootstrap/Button'; +import Alert from 'react-bootstrap/Alert'; +import PolicyService from '../../../api/PolicyService'; +import FormGroup from '@material-ui/core/FormGroup'; +import Checkbox from '@material-ui/core/Checkbox'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; -const ModalStyled = styled(Modal)` - @media (min-width: 500px) { - .modal-xl { - max-width: 50%; - } - } - background-color: transparent; +const DivWhiteSpaceStyled = styled.div` + white-space: pre; +` + +const PanelDiv = styled.div` + text-align: justify; + font-size: ${props => props.theme.policyEditorFontSize}; + background-color: ${props => props.theme.loopViewerBackgroundColor}; ` export default class PolicyDeploymentEditor extends React.Component { state = { policyData: this.props.policyData, + showSuccessAlert: false, + showFailAlert: false, + checkboxesState: this.createPdpStructure(this.props.policyData), + checkboxesInitialState: this.createPdpStructure(this.props.policyData), }; constructor(props, context) { super(props, context); this.handleClose = this.handleClose.bind(this); + this.handleUpdatePdpDeployment = this.handleUpdatePdpDeployment.bind(this); + this.disableAlert = this.disableAlert.bind(this); + this.renderPdpDeploymentCheckboxes = this.renderPdpDeploymentCheckboxes.bind(this); + this.createPdpStructure = this.createPdpStructure.bind(this); + this.handleCheckboxChange = this.handleCheckboxChange.bind(this); + this.createPdpGroupOperations = this.createPdpGroupOperations.bind(this); } handleClose() { @@ -51,16 +67,107 @@ export default class PolicyDeploymentEditor extends React.Component { } + disableAlert() { + this.setState ({ showSuccessAlert: false, showFailAlert: false }); + } + + createPdpGroupOperations(initialStates, newStates) { + let commandsArray = []; + initialStates.forEach(initElem => { + let newStateFound = newStates.find(newElement => newElement.name === initElem.name); + if (initElem.value !== newStateFound.value && initElem.value) { + let newPdpGroupsArray = newStateFound.name.split("/"); + commandsArray.push("DELETE/"+newPdpGroupsArray[0] + "/"+newPdpGroupsArray[1] + "/"+this.state.policyData.name + + "/" + this.state.policyData.version); + } + }); + return commandsArray.length > 0 ? {"PdpActions":commandsArray} : undefined; + } + + handleUpdatePdpDeployment() { + let operationsList = this.createPdpGroupOperations(this.state.checkboxesInitialState, + this.state.checkboxesState); + if (typeof(operationsList) !== "undefined") { + PolicyService.updatePdpDeployment(operationsList).then(respPdpDeploymentUpdate => { + if (typeof(respPdpDeploymentUpdate) === "undefined") { + //it indicates a failure + this.setState({ + showFailAlert: true, + showMessage: 'Pdp Deployment update Failure' + }); + } else { + this.setState({ + showSuccessAlert: true, + showMessage: 'Pdp Deployment Update successful' + }); + this.props.policiesTableUpdateFunction(); + } + this.props.policiesTableUpdateFunction() + }) + } else { + this.setState({ + showSuccessAlert: true, + showMessage: 'Pdp Deployment: Nothing to change' + }); + } + } + + createPdpStructure(policyData) { + // Create map with data for all group/subgroup where the policy is deployed + let infoPdpMap = new Map(); + if (typeof policyData.pdpGroupInfo !== "undefined") { + policyData["pdpGroupInfo"].forEach(pdpGroupElem => { + let pdpGroupName = Object.keys(pdpGroupElem)[0]; + pdpGroupElem[pdpGroupName]["pdpSubgroups"].forEach(pdpSubGroupElem => { + infoPdpMap.set(pdpGroupName + "/" + pdpSubGroupElem["pdpType"], true); + }); + }); + } + // Create the possible values for pdpgroup/subgroup and tick the ones where policy is deployed + let pdpStates = []; + if (typeof policyData.supportedPdpGroups !== "undefined") { + for (const pdpGroup of policyData["supportedPdpGroups"]) { + let pdpGroupName = Object.keys(pdpGroup)[0]; + for (const pdpSubGroup of Object.values(pdpGroup)[0]) { + let fullName = pdpGroupName + "/" + pdpSubGroup; + pdpStates.push({name: fullName, + value: infoPdpMap.get(fullName) !== undefined}); + } + } + } + return pdpStates; + } + + handleCheckboxChange(event) { + const checkboxesArray = this.state.checkboxesState; + checkboxesArray.find(element => element.name === event.target.name).value = event.target.checked; + this.setState({checkboxesState:checkboxesArray}); + } + + renderPdpDeploymentCheckboxes() { + return this.state.checkboxesState.map(item => { + return } label={item.name} />; + }); + } + render() { return ( - - - - - - - - + + + + {this.state.showMessage} + + + + + {this.state.showMessage} + + + + {this.renderPdpDeploymentCheckboxes()} + ); } } \ No newline at end of file diff --git a/ui-react/src/components/dialogs/Policy/PolicyEditor.js b/ui-react/src/components/dialogs/Policy/PolicyEditor.js index f20650e26..8ee48535f 100644 --- a/ui-react/src/components/dialogs/Policy/PolicyEditor.js +++ b/ui-react/src/components/dialogs/Policy/PolicyEditor.js @@ -33,7 +33,6 @@ import PolicyService from '../../../api/PolicyService'; import OnapUtils from '../../../utils/OnapUtils'; import uuid from 'react-uuid'; -//const JSONEditor = require("@json-editor/json-editor").JSONEditor; const DivWhiteSpaceStyled = styled.div` white-space: pre; ` @@ -46,7 +45,6 @@ const JsonEditorDiv = styled.div` border: 1px solid #C0C0C0; ` const PanelDiv = styled.div` - margin-top: 20px; text-align: justify; font-size: ${props => props.theme.policyEditorFontSize}; background-color: ${props => props.theme.loopViewerBackgroundColor}; @@ -112,17 +110,12 @@ export default class PolicyEditor extends React.Component { showSuccessAlert: true, showMessage: 'Policy '+ this.state.policyName + '/' + this.state.policyVersion + ' created successfully' }); - this.props.policyUpdateFunction(); + this.props.policiesTableUpdateFunction(); } }) } } - bumpVersion(versionToBump) { - let semVer = versionToBump.split("."); - return parseInt(semVer[0])+1 + "." + semVer[1] + "." + semVer[2]; - } - getToscaModelForPolicy() { PolicyToscaService.getToscaPolicyModel(this.state.policyModelType, this.state.policyModelTypeVersion).then(respJsonPolicyTosca => { if (respJsonPolicyTosca !== {}) { @@ -139,27 +132,10 @@ export default class PolicyEditor extends React.Component { } 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(this.state.jsonEditorDivId), { schema: toscaModel, startval: editorData, - //theme: 'myBootstrap4', theme: 'bootstrap4', iconlib: 'fontawesome5', object_layout: 'grid', diff --git a/ui-react/src/components/dialogs/Policy/ToscaViewer.js b/ui-react/src/components/dialogs/Policy/ToscaViewer.js index 06e83164d..d150e39db 100644 --- a/ui-react/src/components/dialogs/Policy/ToscaViewer.js +++ b/ui-react/src/components/dialogs/Policy/ToscaViewer.js @@ -26,8 +26,7 @@ import PolicyToscaService from '../../../api/PolicyToscaService'; import styled from 'styled-components'; import Button from 'react-bootstrap/Button'; -const JsonEditorDiv = styled.div` - margin-top: 20px; +const ToscaDiv = styled.div` background-color: ${props => props.theme.toscaTextareaBackgroundColor}; text-align: justify; font-size: ${props => props.theme.toscaTextareaFontSize}; @@ -57,11 +56,11 @@ export default class ToscaViewer extends React.Component { render() { return ( - + 
{this.state.yamlPolicyTosca}
- + ); } } \ No newline at end of file diff --git a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js index 48d52a14c..f986dff29 100644 --- a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js +++ b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js @@ -75,7 +75,8 @@ const DetailedRow = styled.div` font-size: ${props => props.theme.policyEditorFontSize}; width: 97%; margin-left: auto; - margin-right: 0; + margin-right: auto; + margin-top: 20px; ` @@ -291,13 +292,14 @@ export default class ViewAllPolicies extends React.Component { render: rowData => { return ( - + ) }, }, { icon: DehazeIcon, + openIcon: DehazeIcon, tooltip: 'Show Raw Data', render: rowData => { return ( @@ -309,10 +311,13 @@ export default class ViewAllPolicies extends React.Component { }, { icon: PublishIcon, + openIcon: PublishIcon, tooltip: 'PDP Group Deployment', render: rowData => { return ( - + + + ) }, } @@ -367,6 +372,7 @@ export default class ViewAllPolicies extends React.Component { }, { icon: DehazeIcon, + openIcon: DehazeIcon, tooltip: 'Show Raw Data', render: rowData => { return ( @@ -378,11 +384,12 @@ export default class ViewAllPolicies extends React.Component { }, { icon: AddIcon, + openIcon: AddIcon, tooltip: 'Create a policy from this model', render: rowData => { return ( - + ) }, -- cgit 1.2.3-korg