Rework the backend to support PDP updates

Add new mem structure so that we do not need to parse the same Json for each policy/type + rework the camel flows so that we use the same code for loop and policies related calls

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

2 files changed, 117 insertions, 51 deletions

diff --git a/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js b/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js
new file mode 100644
index 000000000..da695ee96
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js
@@ -0,0 +1,66 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-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============================================
+ * ===================================================================
+ *
+ */
+
+import React, { forwardRef } from 'react';
+import Modal from 'react-bootstrap/Modal';
+import styled from 'styled-components';
+import Button from 'react-bootstrap/Button';
+
+const ModalStyled = styled(Modal)`
+    @media (min-width: 500px) {
+        .modal-xl {
+            max-width: 50%;
+        }
+    }
+    background-color: transparent;
+`
+
+export default class PolicyDeploymentEditor extends React.Component {
+
+    state = {
+            policyData: this.props.policyData,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this.handleClose = this.handleClose.bind(this);
+    }
+
+    handleClose() {
+        this.setState({ show: false });
+
+    }
+
+    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>
+       );
+    }
+ }
\ 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 d699f781c..48d52a14c 100644
--- a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
+++ b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
@@ -43,24 +43,26 @@ import ViewColumn from '@material-ui/icons/ViewColumn';
 import DehazeIcon from '@material-ui/icons/Dehaze';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 import AddIcon from '@material-ui/icons/Add';
+import PublishIcon from '@material-ui/icons/Publish';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import MaterialTable from "material-table";
 import PolicyService from '../../../api/PolicyService';
 import PolicyToscaService from '../../../api/PolicyToscaService';
-import Select from 'react-select';
+import Select from '@material-ui/core/Select';
 import Alert from 'react-bootstrap/Alert';
 import Tabs from 'react-bootstrap/Tabs';
 import Tab from 'react-bootstrap/Tab';
 import PolicyEditor from './PolicyEditor';
 import ToscaViewer from './ToscaViewer';
+import PolicyDeploymentEditor from './PolicyDeploymentEditor';
 
 const DivWhiteSpaceStyled = styled.div`
     white-space: pre;
 `
 
 const ModalStyled = styled(Modal)`
-    @media (min-width: 1000px) {
+    @media (min-width: 800px) {
         .modal-xl {
             max-width: 96%;
         }
@@ -78,13 +80,13 @@ const DetailedRow = styled.div`
 
 
 const standardCellStyle = { backgroundColor: '#039be5', color: '#FFF', border: '1px solid black' };
-const cellPdpGroupStyle = { backgroundColor: '#039be5', color: '#FFF', border: '1px solid black'};
-const headerStyle = { backgroundColor: '#ddd',    border: '2px solid black' };
-const rowHeaderStyle = {backgroundColor:'#ddd',  fontSize: '15pt', text: 'bold', border: '1px solid black'};
+const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' };
+const rowHeaderStyle = {backgroundColor:'#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black'};
 
 export default class ViewAllPolicies extends React.Component {
   state = {
         show: true,
+        showPolicyDeploymentDialog: false,
         content: 'Please select a policy to display it',
         selectedRowId: -1,
         policiesListData: [],
@@ -102,7 +104,7 @@ export default class ViewAllPolicies extends React.Component {
             {
                 title: "Policy Version", field: "version",
                 cellStyle: standardCellStyle,
-                headerStyle: headerStyle
+                headerStyle: headerStyle,
             },
             {
                 title: "Policy Type", field: "type",
@@ -115,20 +117,13 @@ export default class ViewAllPolicies extends React.Component {
                 headerStyle: headerStyle
             },
             {
-                title: "Deployed in PDP", field: "pdpGroupInfo.pdpGroup",
-                cellStyle: cellPdpGroupStyle,
-                headerStyle: headerStyle,
-                render: rowData => this.renderPdpGroupDropBox(rowData),
-                grouping: false
-            },
-            {
-                title: "PDP Group", field: "pdpGroupInfo.pdpGroup",
-                cellStyle: cellPdpGroupStyle,
+                title: "Deployable in PDP Group", field: "supportedPdpGroupsString",
+                cellStyle: standardCellStyle,
                 headerStyle: headerStyle
             },
             {
-                title: "PDP SubGroup", field: "pdpGroupInfo.pdpSubGroup",
-                cellStyle: cellPdpGroupStyle,
+                title: "Deployed in PDP Group", field: "pdpGroupInfoString",
+                cellStyle: standardCellStyle,
                 headerStyle: headerStyle
             }
         ],
@@ -183,58 +178,54 @@ export default class ViewAllPolicies extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.handleClose = this.handleClose.bind(this);
-        this.renderPdpGroupDropBox = this.renderPdpGroupDropBox.bind(this);
-        this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this);
         this.handlePrefixGrouping = this.handlePrefixGrouping.bind(this);
         this.handleDeletePolicy = this.handleDeletePolicy.bind(this);
         this.disableAlert = this.disableAlert.bind(this);
         this.getAllPolicies = this.getAllPolicies.bind(this);
         this.getAllToscaModels = this.getAllToscaModels.bind(this);
+        this.generateAdditionalPolicyColumns = this.generateAdditionalPolicyColumns.bind(this);
         this.getAllPolicies();
         this.getAllToscaModels();
     }
 
+    generateAdditionalPolicyColumns(policiesData) {
+        policiesData.forEach(policy => {
+            let supportedPdpGroupsString = "";
+            if (typeof policy.supportedPdpGroups !== "undefined") {
+                for (const pdpGroup of policy["supportedPdpGroups"]) {
+                    for (const pdpSubGroup of Object.values(pdpGroup)[0]) {
+                        supportedPdpGroupsString += (Object.keys(pdpGroup)[0] + "/" + pdpSubGroup + "\r\n");
+                    }
+                }
+                policy["supportedPdpGroupsString"] = supportedPdpGroupsString;
+            }
+
+            let infoPdpGroup = "";
+            if (typeof policy.pdpGroupInfo !== "undefined") {
+                policy["pdpGroupInfo"].forEach(pdpGroupElem => {
+                    let groupName = Object.keys(pdpGroupElem)[0];
+                    pdpGroupElem[groupName]["pdpSubgroups"].forEach(pdpSubGroupElem => {
+                        infoPdpGroup +=  (groupName + "/" + pdpSubGroupElem["pdpType"] + " ("
+                            + pdpGroupElem[groupName]["pdpGroupState"] + ")" + "\r\n");
+                    });
+                    policy["pdpGroupInfoString"] = infoPdpGroup;
+                });
+            }
+        });
+    }
+
     getAllToscaModels() {
         PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => {
             this.setState({ toscaModelsListData: toscaModelsList });
         });
     }
 
-    handlePdpGroupChange(e) {
-        let pdpSplit = e.value.split("/");
-        let selectedPdpGroup = pdpSplit[0];
-        let selectedSubPdpGroup = pdpSplit[1];
-        if (typeof selectedSubPdpGroup !== "undefined") {
-            let temp = this.state.policiesListData;
-            temp[this.state.selectedRowId]["pdpGroupInfo"] = {"pdpGroup":selectedPdpGroup,"pdpSubGroup":selectedSubPdpGroup};
-            this.setState({policiesListData: temp});
-        } else {
-            delete this.state.policiesListData[this.state.selectedRowId]["pdpGroupInfo"];
-        }
-    }
-
-    renderPdpGroupDropBox(dataRow) {
-        let optionItems = [{label: "NOT DEPLOYED", value: "NOT DEPLOYED"}];
-        let selectedItem = {label: "NOT DEPLOYED", value: "NOT DEPLOYED"};
-        if (typeof dataRow.supportedPdpGroups !== "undefined") {
-            for (const pdpGroup of dataRow["supportedPdpGroups"]) {
-                for (const pdpSubGroup of Object.values(pdpGroup)[0]) {
-                    optionItems.push({ label: Object.keys(pdpGroup)[0]+"/"+pdpSubGroup,
-                    value: Object.keys(pdpGroup)[0]+"/"+pdpSubGroup });
-                }
-            }
-        }
-        if (typeof dataRow.pdpGroupInfo !== "undefined") {
-            selectedItem = {label: dataRow["pdpGroupInfo"]["pdpGroup"]+"/"+dataRow["pdpGroupInfo"]["pdpSubGroup"],
-            value: dataRow["pdpGroupInfo"]["pdpGroup"]+"/"+dataRow["pdpGroupInfo"]["pdpSubGroup"]};
-        }
-        return (<div style={{width: '250px'}}><Select value={selectedItem} options={optionItems} onChange={this.handlePdpGroupChange}/></div>);
-    }
-
     getAllPolicies() {
         PolicyService.getPoliciesList().then(allPolicies => {
+            this.generateAdditionalPolicyColumns(allPolicies["policies"])
             this.setState({ policiesListData: allPolicies["policies"] })
         });
+
     }
 
     handleClose() {
@@ -316,6 +307,15 @@ export default class ViewAllPolicies extends React.Component {
                                     )
                                   },
                                 },
+                                {
+                                  icon: PublishIcon,
+                                  tooltip: 'PDP Group Deployment',
+                                  render: rowData => {
+                                    return (
+                                        <PolicyDeploymentEditor policyData={rowData}/>
+                                    )
+                                  },
+                                }
                               ]}
                               actions={[
                                   {
@@ -416,7 +416,7 @@ export default class ViewAllPolicies extends React.Component {
                 <Modal.Footer>
                     <Button variant="secondary" onClick={this.handleClose}>Close</Button>
                </Modal.Footer>
-      </ModalStyled>
+            </ModalStyled>
       );
     }
   }
\ No newline at end of file