Add button to refresh op policy UI

Add the button on Operational Policy UI to refresh the json
representation.

Issue-ID: CLAMP-584
Change-Id: I3ae6ca0207bf9ca84f1e1dc6b3aed42b90298d8e
Signed-off-by: xuegao <xg353y@intl.att.com>

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 58fbce6..eb4ff6a 100644 (file)
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -252,7 +252,7 @@ export default class LoopUI extends React.Component {
                                <Route path="/viewToscaPolicyModal" render={(routeProps) => (<ViewToscaPolicyModal {...routeProps} />)} />
                                <Route path="/viewBlueprintMicroServiceTemplatesModal" render={(routeProps) => (<ViewBlueprintMicroServiceTemplatesModal {...routeProps} />)} />
                                <Route path="/operationalPolicyModal"
-                                       render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop} showAlert={this.showAlert}/>)} />
+                                       render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} />
                                <Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
                                <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} loadLoopFunction={this.loadLoop} />)} />
                                <Route path="/loopProperties" render={(routeProps) => (<LoopPropertiesModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />

diff --git a/ui-react/src/api/LoopService.js b/ui-react/src/api/LoopService.js
index e2e2348..ead2cf8 100644 (file)
--- a/ui-react/src/api/LoopService.js
+++ b/ui-react/src/api/LoopService.js
@@ -152,4 +152,27 @@ export default class LoopService {
                                return "";
                        });
        }
+
+       static refreshOpPolicyJson(loopName) {
+               return fetch('/restservices/clds/v2/loop/refreshOpPolicyJsonSchema/' + loopName, {
+                       method: 'PUT',
+                       headers: {
+                               "Content-Type": "application/json"
+                       },
+                       credentials: 'same-origin'
+               })
+                       .then(function (response) {
+                               console.debug("Refresh Operational Policy Json Schema response received: ", response.status);
+                               if (response.ok) {
+                                       return response.json();
+                               } else {
+                                       console.error("Refresh Operational Policy Json Schema query failed");
+                                       return {};
+                               }
+                       })
+                       .catch(function (error) {
+                               console.error("Refresh Operational Policy Json Schema error received", error);
+                               return {};
+                       });
+       }
 }

diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
index c7363f6..dc7c0a4 100644 (file)
--- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
+++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
@@ -25,6 +25,7 @@ import React from 'react'
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import styled from 'styled-components';
+import LoopCache from '../../../api/LoopCache';
 import LoopService from '../../../api/LoopService';
 import JSONEditor from '@json-editor/json-editor';
 
@@ -45,6 +46,7 @@ export default class OperationalPolicyModal extends React.Component {
                this.handleClose = this.handleClose.bind(this);
                this.handleSave = this.handleSave.bind(this);
                this.renderJsonEditor = this.renderJsonEditor.bind(this);
+               this.handleRefresh = this.handleRefresh.bind(this);
                this.setDefaultJsonEditorOptions();
        }
 
@@ -122,6 +124,25 @@ export default class OperationalPolicyModal extends React.Component {
                        })
        }
 
+       handleRefresh() {
+               LoopService.refreshOpPolicyJson(this.state.loopCache.getLoopName()).then(data => {
+                       var newLoopCache =  new LoopCache(data);
+                       var schema_json = newLoopCache.getOperationalPolicyJsonSchema();
+                       var operationalPoliciesData = newLoopCache.getOperationalPoliciesNoJsonSchema();
+                       document.getElementById("editor").innerHTML = "";
+                       this.setState({
+                               loopCache: newLoopCache,
+                               jsonEditor: new JSONEditor(document.getElementById("editor"),
+                                       { schema: schema_json.schema, startval: operationalPoliciesData })
+                       })
+                       this.props.updateLoopFunction(data);
+                       
+               })
+               .catch(error => {
+                       console.error("Error while refreshing the Operational Policy Json Representation");
+               });
+       }
+
        render() {
                return (
                        <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
@@ -135,10 +156,13 @@ export default class OperationalPolicyModal extends React.Component {
                                <Modal.Footer>
                                        <Button variant="secondary" onClick={this.handleClose}>
                                                Close
-                   </Button>
+                                       </Button>
+                                       <Button variant="secondary" onClick={this.handleRefresh}>
+                                               Refresh
+                                       </Button>
                                        <Button variant="primary" onClick={this.handleSave}>
                                                Save Changes
-                   </Button>
+                                       </Button>
                                </Modal.Footer>
                        </ModalStyled>
 

diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.test.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.test.js
index 522a3f6..c10c6ff 100644 (file)
--- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.test.js
+++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.test.js
@@ -57,7 +57,7 @@ describe('Verify OperationalPolicyModal', () => {
       const handleClose = jest.spyOn(OperationalPolicyModal.prototype,'handleClose');
       const component = mount(<OperationalPolicyModal history={historyMock} loopCache={loopCache}/>)
 
-      component.find('[variant="secondary"]').prop('onClick')();
+      component.find('[variant="secondary"]').get(0).props.onClick();
 
       expect(handleClose).toHaveBeenCalledTimes(1);
       expect(component.state('show')).toEqual(false);
@@ -78,4 +78,17 @@ describe('Verify OperationalPolicyModal', () => {
         expect(component.state('show')).toEqual(false);
         expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
     });
+
+    it('Test handleRefresh', async () => {
+        const updateLoopFunction = jest.fn();
+        const handleRefresh = jest.spyOn(OperationalPolicyModal.prototype,'handleRefresh');
+        const component = mount(<OperationalPolicyModal loopCache={loopCache} updateLoopFunction={updateLoopFunction} />)
+
+        component.find('[variant="secondary"]').get(1).props.onClick();
+        await flushPromises();
+        component.update();
+
+        expect(handleRefresh).toHaveBeenCalledTimes(1);
+        expect(component.state('show')).toEqual(true);
+    });
 });
\ No newline at end of file