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>

1 files changed, 26 insertions, 2 deletions

diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
index c7363f6e5..dc7c0a489 100644
--- 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>