Modify the PolicyDeploymentEditor to support checkboxes

Add code to the PolicyDeploymentEditor so that checkboxes are rendered.

Issue-ID: POLICY-2931
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: I3c933272419770595b706f6950f821220a76f789

4 files changed, 137 insertions, 48 deletions

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 <FormControlLabel control={<Checkbox checked={item.value} onChange={this.handleCheckboxChange}
+                name={item.name} />} label={item.name} />;
+        });
+    }
+
     render() {
      return (
-             <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}>
-                 <Modal.Header closeButton>
-                 </Modal.Header>
-
-                 <Modal.Footer>
-                     <Button variant="secondary" onClick={this.handleClose}>Close</Button>
-                </Modal.Footer>
-             </ModalStyled>
+        <PanelDiv>
+          <Alert variant="success" show={this.state.showSuccessAlert} onClose={this.disableAlert} dismissible>
+              <DivWhiteSpaceStyled>
+                  {this.state.showMessage}
+              </DivWhiteSpaceStyled>
+          </Alert>
+          <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
+              <DivWhiteSpaceStyled>
+                  {this.state.showMessage}
+              </DivWhiteSpaceStyled>
+          </Alert>
+          <Button variant="secondary" title="Update the policy to the specified PDP Groups/Subgroups"
+            onClick={this.handleUpdatePdpDeployment}>Update PDP</Button>
+          <FormGroup>{this.renderPdpDeploymentCheckboxes()}</FormGroup>
+        </PanelDiv>
        );
     }
  }
\ 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 (
-                    <JsonEditorDiv>
+                    <ToscaDiv>
                         <pre>{this.state.yamlPolicyTosca}</pre>
                         <Button variant="secondary" title="Create a new policy version from the defined parameters"
                             onClick={this.handleCreateNewVersion}>Create New Version</Button>
-                    </JsonEditorDiv>
+                    </ToscaDiv>
        );
    }
 }
\ 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 (
                                         <DetailedRow>
-                                            <PolicyEditor policyModelType={rowData["type"]} policyModelTypeVersion={rowData["type_version"]} policyName={rowData["name"]} policyVersion={rowData["version"]} policyProperties={rowData["properties"]} policyUpdateFunction={this.getAllPolicies} />
+                                            <PolicyEditor policyModelType={rowData["type"]} policyModelTypeVersion={rowData["type_version"]} policyName={rowData["name"]} policyVersion={rowData["version"]} policyProperties={rowData["properties"]} policiesTableUpdateFunction={this.getAllPolicies} />
                                         </DetailedRow>
                                     )
                                   },
                                 },
                                 {
                                   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 (
-                                        <PolicyDeploymentEditor policyData={rowData}/>
+                                        <DetailedRow>
+                                            <PolicyDeploymentEditor policyData={rowData} policiesTableUpdateFunction={this.getAllPolicies} />
+                                        </DetailedRow>
                                     )
                                   },
                                 }
@@ -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 (
                                         <DetailedRow>
-                                            <PolicyEditor policyModelType={rowData["policyModelType"]} policyModelTypeVersion={rowData["version"]} policyProperties={{}} policyUpdateFunction={this.getAllPolicies} />
+                                            <PolicyEditor policyModelType={rowData["policyModelType"]} policyModelTypeVersion={rowData["version"]} policyProperties={{}} policiesTableUpdateFunction={this.getAllPolicies} />
                                         </DetailedRow>
                                     )
                                   },