aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorxuegao <xg353y@intl.att.com>2020-04-08 08:46:25 +0200
committerxuegao <xg353y@intl.att.com>2020-04-08 13:52:24 +0200
commited70037caff4471e05de0604f985c2003ed13f28 (patch)
treefa3bd4b89fe3ed6b897d70b4da759e2c41443a40
parentcc5fe51690dc1f780c6b7cd1168e59dedc3b245f (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>
-rw-r--r--ui-react/src/components/dialogs/Loop/DeployLoopModal.js29
-rw-r--r--ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap1
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}