diff options
author | xuegao <xg353y@intl.att.com> | 2020-03-17 10:46:39 +0100 |
---|---|---|
committer | xuegao <xg353y@intl.att.com> | 2020-03-17 15:23:16 +0100 |
commit | e18ed70c2c2475e7cb7eba74bbb3e74c47740960 (patch) | |
tree | 5c6c83272a0eba9b4a69df9365af29c67307fd76 /ui-react/src/components/dialogs/Policy/PolicyModal.js | |
parent | e916ac28ba46ff7cad64f1a3150b128ba4772c70 (diff) |
Update policy model UI
Update the PolicyModal UI, adding refresh button to update policy josn
representation.
Issue-ID: CLAMP-578
Change-Id: I8dc85fa1908fa735352b3877a845113d4995c3ec
Signed-off-by: xuegao <xg353y@intl.att.com>
Diffstat (limited to 'ui-react/src/components/dialogs/Policy/PolicyModal.js')
-rw-r--r-- | ui-react/src/components/dialogs/Policy/PolicyModal.js | 66 |
1 files changed, 65 insertions, 1 deletions
diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js index 0f41beb09..d78cd6d60 100644 --- a/ui-react/src/components/dialogs/Policy/PolicyModal.js +++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js @@ -30,7 +30,9 @@ import Select from 'react-select'; import Modal from 'react-bootstrap/Modal'; import styled from 'styled-components'; import LoopService from '../../../api/LoopService'; +import LoopCache from '../../../api/LoopCache'; import JSONEditor from '@json-editor/json-editor'; +import Alert from 'react-bootstrap/Alert'; const ModalStyled = styled(Modal)` background-color: transparent; @@ -49,7 +51,9 @@ export default class PolicyModal extends React.Component { pdpGroupList: [], pdpSubgroupList: [], chosenPdpGroup: '', - chosenPdpSubgroup: '' + chosenPdpSubgroup: '', + showSucAlert: false, + showFailAlert: false }; constructor(props, context) { @@ -60,6 +64,8 @@ export default class PolicyModal extends React.Component { this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this); this.handlePdpSubgroupChange = this.handlePdpSubgroupChange.bind(this); this.createJsonEditor = this.createJsonEditor.bind(this); + this.handleRefresh = this.handleRefresh.bind(this); + this.disableAlert = this.disableAlert.bind(this); } handleSave() { @@ -195,12 +201,67 @@ export default class PolicyModal extends React.Component { this.setState({ chosenPdpSubgroup: e.value }); } + handleRefresh() { + var newLoopCache, toscaModel, editorData; + if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') { + LoopService.refreshMicroServicePolicyJson(this.state.loopCache.getLoopName(),this.state.policyName).then(data => { + newLoopCache = new LoopCache(data); + toscaModel = newLoopCache.getMicroServiceJsonRepresentationForName(this.state.policyName); + editorData = newLoopCache.getMicroServicePropertiesForName(this.state.policyName); + document.getElementById("editor").innerHTML = ""; + this.setState({ + loopCache: newLoopCache, + jsonEditor: this.createJsonEditor(toscaModel,editorData), + showSucAlert: true, + showMessage: "Successfully refreshed" + }); + }) + .catch(error => { + console.error("Error while refreshing the Operational Policy Json Representation"); + this.setState({ + showFailAlert: true, + showMessage: "Refreshing of UI failed" + }); + }); + } else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') { + LoopService.refreshOperationalPolicyJson(this.state.loopCache.getLoopName(),this.state.policyName).then(data => { + var newLoopCache = new LoopCache(data); + toscaModel = newLoopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName); + editorData = newLoopCache.getOperationalPolicyPropertiesForName(this.state.policyName); + document.getElementById("editor").innerHTML = ""; + this.setState({ + loopCache: newLoopCache, + jsonEditor: this.createJsonEditor(toscaModel,editorData), + showSucAlert: true, + showMessage: "Successfully refreshed" + }); + }) + .catch(error => { + console.error("Error while refreshing the Operational Policy Json Representation"); + this.setState({ + showFailAlert: true, + showMessage: "Refreshing of UI failed" + }); + }); + } + } + + disableAlert() { + this.setState ({ showSucAlert: false, showFailAlert: false }); + } + render() { return ( <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}> <Modal.Header closeButton> <Modal.Title>Edit the policy</Modal.Title> </Modal.Header> + <Alert variant="success" show={this.state.showSucAlert} onClose={this.disableAlert} dismissible> + {this.state.showMessage} + </Alert> + <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible> + {this.state.showMessage} + </Alert> <Modal.Body> <div id="editor" /> <Form.Group as={Row} controlId="formPlaintextEmail"> @@ -220,6 +281,9 @@ export default class PolicyModal extends React.Component { <Button variant="primary" onClick={this.handleSave}> Save Changes </Button> + <Button variant="primary" onClick={this.handleRefresh}> + Refresh + </Button> </Modal.Footer> </ModalStyled> |