Add "delete policy" feature in UI

Add delete policy functionality (call to backend) + insert Policies array in a tabs for future policy create operation + Ask column names during export of the test db

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

3 files changed, 118 insertions, 71 deletions

diff --git a/extra/sql/dump/backup-data-only.sh b/extra/sql/dump/backup-data-only.sh
index cb8bc8b4f..8ebebf91d 100755
--- a/extra/sql/dump/backup-data-only.sh
+++ b/extra/sql/dump/backup-data-only.sh
@@ -4,7 +4,7 @@
 # ============LICENSE_START=======================================================
 # ONAP CLAMP
 # ================================================================================
-# Copyright (C) 2019 AT&T Intellectual Property. All rights
+# Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights
 #                             reserved.
 # ================================================================================
 # Licensed under the Apache License, Version 2.0 (the "License");
@@ -20,7 +20,7 @@
 # limitations under the License.
 # ============LICENSE_END============================================
 # ===================================================================
-# 
+#
 ###
 
-mysqldump -uroot -p$MYSQL_ROOT_PASSWORD -v --extended-insert=FALSE --no-create-db --no-create-info --databases cldsdb4 > /docker-entrypoint-initdb.d/dump/test-data.sql
\ No newline at end of file
+mysqldump -uroot -p$MYSQL_ROOT_PASSWORD -v --extended-insert=FALSE --complete-insert --no-create-db --no-create-info --databases cldsdb4 > /docker-entrypoint-initdb.d/dump/test-data.sql
\ No newline at end of file
diff --git a/ui-react/src/api/PolicyService.js b/ui-react/src/api/PolicyService.js
index 16cc1f322..a77a8bdb0 100644
--- a/ui-react/src/api/PolicyService.js
+++ b/ui-react/src/api/PolicyService.js
@@ -26,19 +26,22 @@ export default class PolicyService {
         method: 'GET',
         credentials: 'same-origin'
         })
-      .then(function (response) {
-        console.debug("getPoliciesList response received: ", response.status);
-        if (response.ok) {
-          return response.json();
-        } else {
-          console.error("getPoliciesList query failed");
-          return {};
-        }
-      })
-      .catch(function (error) {
-        console.error("getPoliciesList error received", error);
-        return {};
-      });
+        .then(function(response) {
+            console.debug("getPoliciesList response received: ", response.status);
+            if (response.ok) {
+                console.info("getPoliciesList query successful");
+                return response.json();
+            } else {
+                return response.text().then(responseBody => {
+                    throw new Error("HTTP " + response.status + "," + responseBody);
+                })
+            }
+        })
+        .catch(function(error) {
+            console.error("getPoliciesList error occurred ", error);
+            alert("getPoliciesList error occurred " + error);
+            return "";
+        })
   }
   static createNewPolicy(policyModelType, policyModelVersion, policyJson) {
     return fetch(window.location.pathname + 'restservices/clds/v2/policies/' + policyModelType + '/' + policyModelVersion, {
@@ -49,18 +52,44 @@ export default class PolicyService {
             },
             body: JSON.stringify(policyJson)
         })
-      .then(function (response) {
-        console.debug("createNewPolicy response received: ", response.status);
-        if (response.ok) {
-          return response.text;
-        } else {
-          console.error("createNewPolicy query failed");
-          return "";
-        }
-      })
-      .catch(function (error) {
-        console.error("createNewPolicy error received", error);
-        throw new Error(error)
-      });
+        .then(function (response) {
+            console.debug("createNewPolicy response received: ", response.status);
+            if (response.ok) {
+                console.info("createNewPolicy query successful");
+                return response.text();
+            } else {
+               return response.text().then(responseBody => {
+                    throw new Error("HTTP " + response.status + "," + responseBody);
+                })
+            }
+        })
+        .catch(function (error) {
+            console.error("createNewPolicy error occurred ", error);
+            alert ("createNewPolicy error occurred " + error);
+            return "";
+        });
+  }
+  static deletePolicy(policyModelType, policyModelVersion, policyName, policyVersion) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/policies/' + policyModelType + '/'
+        + policyModelVersion + '/' + policyName + '/' + policyVersion, {
+            method: 'DELETE',
+            credentials: 'same-origin'
+        })
+        .then(function (response) {
+            console.debug("deletePolicy response received: ", response.status);
+            if (response.ok) {
+                console.info("deletePolicy query successful");
+                return response.text();
+            } else {
+                return response.text().then(responseBody => {
+                    throw new Error("HTTP " + response.status + "," + responseBody);
+                })
+            }
+        })
+        .catch(function (error) {
+            console.error("deletePolicy error occurred ", error);
+            alert ("deletePolicy error occurred " + error);
+            return "";
+        });
   }
 }
diff --git a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
index dfebc51d8..b159584dd 100644
--- a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
+++ b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
@@ -49,9 +49,11 @@ import Select from 'react-select';
 import JSONEditor from '@json-editor/json-editor';
 import OnapUtils from '../../../utils/OnapUtils';
 import Alert from 'react-bootstrap/Alert';
+import Tabs from 'react-bootstrap/Tabs';
+import Tab from 'react-bootstrap/Tab';
 
 const DivWhiteSpaceStyled = styled.div`
-	white-space: pre;
+    white-space: pre;
 `
 
 const ModalStyled = styled(Modal)`
@@ -259,7 +261,22 @@ export default class ViewAllPolicies extends React.Component {
     }
 
     handleDeletePolicy(event, rowData) {
-        return null;
+        PolicyService.deletePolicy(rowData["type"], rowData["type_version"], rowData["name"],rowData["version"]).then(
+            respPolicyDeletion => {
+                if (respPolicyDeletion === "") {
+                    //it indicates a failure
+                    this.setState({
+                        showFailAlert: true,
+                        showMessage: 'Policy Deletion Failure'
+                    });
+                } else {
+                    this.setState({
+                        showSuccessAlert: true,
+                        showMessage: 'Policy successfully Deleted'
+                    });
+                }
+            }
+        )
     }
 
     customValidation(editorData) {
@@ -324,53 +341,54 @@ export default class ViewAllPolicies extends React.Component {
             <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}>
                 <Modal.Header closeButton>
                 </Modal.Header>
-
-                <Modal.Body>
-                  <FormControlLabel
-                        control={<Switch checked={this.state.prefixGrouping} onChange={this.handlePrefixGrouping} />}
-                        label="Group by prefix"
-                      />
-                   <MaterialTable
-                      title={"View All Policies in Policy Engine"}
-                      data={this.state.policiesListData}
-                      columns={this.state.policyColumnsDefinition}
-                      icons={this.state.tableIcons}
-                      onRowClick={(event, rowData) => {this.handleOnRowClick(rowData)}}
-                      options={{
-                          grouping: true,
-                          exportButton: true,
-                          headerStyle:rowHeaderStyle,
-                          rowStyle: rowData => ({
-                            backgroundColor: (this.state.selectedRowId !== -1 && this.state.selectedRowId === rowData.tableData.id) ? '#EEE' : '#FFF'
-                          })
-                      }}
-                      actions={[
-                          {
-                            icon: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
-                            tooltip: 'Delete Policy',
-                            onClick: (event, rowData) => this.handleDeletePolicy(event, rowData)
-                          }
-                      ]}
-                />
+                <Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key, selectedRowData: {} })}>
+                    <Tab eventKey="policies" title="Policies in Policy Framework">
+                        <Modal.Body>
+                          <FormControlLabel
+                                control={<Switch checked={this.state.prefixGrouping} onChange={this.handlePrefixGrouping} />}
+                                label="Group by prefix"
+                              />
+                           <MaterialTable
+                              title={"View All Policies in Policy Engine"}
+                              data={this.state.policiesListData}
+                              columns={this.state.policyColumnsDefinition}
+                              icons={this.state.tableIcons}
+                              onRowClick={(event, rowData) => {this.handleOnRowClick(rowData)}}
+                              options={{
+                                  grouping: true,
+                                  exportButton: true,
+                                  headerStyle:rowHeaderStyle,
+                                  rowStyle: rowData => ({
+                                    backgroundColor: (this.state.selectedRowId !== -1 && this.state.selectedRowId === rowData.tableData.id) ? '#EEE' : '#FFF'
+                                  })
+                              }}
+                              actions={[
+                                  {
+                                    icon: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
+                                    tooltip: 'Delete Policy',
+                                    onClick: (event, rowData) => this.handleDeletePolicy(event, rowData)
+                                  }
+                              ]}
+                           />
+                        </Modal.Body>
+                    </Tab>
+                </Tabs>
                 <JsonEditorDiv>
                     <h5>Policy Properties Editor</h5>
                     <div id="policy-editor" title="Policy Properties"/>
                     <Button variant="secondary" title="Create a new policy version from the defined parameters"
                         onClick={this.handleCreateNewVersion}>Create New Version</Button>
-                    <Button variant="secondary" title="Update the current policy version, BE CAREFUL this will undeploy the policy from PDP, delete it and then recreate the policy"
-                        onClick={this.handleUpdatePolicy}>Update Current Version</Button>
                 </JsonEditorDiv>
                 <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>
-                </Modal.Body>
+                    <DivWhiteSpaceStyled>
+                        {this.state.showMessage}
+                    </DivWhiteSpaceStyled>
+                </Alert>
+                <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
+                    <DivWhiteSpaceStyled>
+                        {this.state.showMessage}
+                    </DivWhiteSpaceStyled>
+                </Alert>
                 <Modal.Footer>
                     <Button variant="secondary" onClick={this.handleClose}>Close</Button>
                </Modal.Footer>