diff options
author | 2020-04-08 08:46:25 +0200 | |
---|---|---|
committer | 2020-04-08 13:52:24 +0200 | |
commit | ed70037caff4471e05de0604f985c2003ed13f28 (patch) | |
tree | fa3bd4b89fe3ed6b897d70b4da759e2c41443a40 /ui-react/src/components/dialogs/Loop | |
parent | cc5fe51690dc1f780c6b7cd1168e59dedc3b245f (diff) |
Add spinner for Deploy action
Add the spinning symbol while loop is deploying.
Issue-ID: CLAMP-814
Change-Id: Id041622c300e18643e6fb725b3b5bd4ad8e9911e
Signed-off-by: xuegao <xg353y@intl.att.com>
Diffstat (limited to 'ui-react/src/components/dialogs/Loop')
-rw-r--r-- | ui-react/src/components/dialogs/Loop/DeployLoopModal.js | 29 | ||||
-rw-r--r-- | ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap | 1 |
2 files changed, 28 insertions, 2 deletions
diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js index 5dacad13..6e743703 100644 --- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js @@ -29,6 +29,12 @@ import Form from 'react-bootstrap/Form'; import Tabs from 'react-bootstrap/Tabs'; import Tab from 'react-bootstrap/Tab'; import styled from 'styled-components'; +import Spinner from 'react-bootstrap/Spinner' + +const StyledSpinnerDiv = styled.div` + justify-content: center !important; + display: flex !important; +`; const ModalStyled = styled(Modal)` background-color: transparent; @@ -48,6 +54,7 @@ export default class DeployLoopModal extends React.Component { this.handleChange = this.handleChange.bind(this); this.refreshStatus = this.refreshStatus.bind(this); this.renderDeployParam = this.renderDeployParam.bind(this); + this.renderSpinner = this.renderSpinner.bind(this); const propertiesJson = JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())); this.state = { @@ -79,9 +86,24 @@ export default class DeployLoopModal extends React.Component { this.props.history.push('/'); } + renderSpinner() { + if (this.state.deploying) { + return ( + <StyledSpinnerDiv> + <Spinner animation="border" role="status"> + <span className="sr-only">Loading...</span> + </Spinner> + </StyledSpinnerDiv> + ); + } else { + return (<div></div>); + } + } + handleSave() { const loopName = this.props.loopCache.getLoopName(); // save the global propserties + this.setState({ deploying: true }); LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => { LoopActionService.performAction(loopName, "deploy").then(pars => { this.props.showSucAlert("Action deploy successfully performed"); @@ -94,16 +116,18 @@ export default class DeployLoopModal extends React.Component { this.refreshStatus(loopName); }); }); - this.setState({ show: false }); - this.props.history.push('/'); } refreshStatus(loopName) { LoopActionService.refreshStatus(loopName).then(data => { this.props.updateLoopFunction(data); + this.setState({ show: false, deploying: false }); + this.props.history.push('/'); }) .catch(error => { this.props.showFailAlert("Refresh status failed"); + this.setState({ show: false, deploying: false }); + this.props.history.push('/'); }); } handleChange(event) { @@ -144,6 +168,7 @@ export default class DeployLoopModal extends React.Component { <Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key })}> {this.renderDeployParamTabs()} </Tabs> + {this.renderSpinner()} <Modal.Footer> <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button> <Button variant="primary" type="submit" onClick={this.handleSave}>Deploy</Button> diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap index 0f86aa34..d7beecd0 100644 --- a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap +++ b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap @@ -56,6 +56,7 @@ exports[`Verify DeployLoopModal Test the render method 1`] = ` </Styled(FormGroup)> </Tab> </Tabs> + <div /> <ModalFooter> <Button active={false} |