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>

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}