add framework for blocking user interaction

this adds two new methods to LoopUI.js, setBusyLoading and
clearBusyLoading, and one new state variable, busyLoadingCount, for
supporting the blocking of user clicking during async back end calls
that might take a bit of time to return. Blocking the user from clicking
on a component box is implemented as an important first case use, as
well as all PerformAction calls.

Issue-ID: CLAMP-894
Change-Id: I28660afe26b6cc8184b9392aee42157f44601bf6
Signed-off-by: Ted Humphrey <Thomas.Humphrey@att.com>

1 files changed, 136 insertions, 19 deletions

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 8624726be..0ee6e6e24 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -52,6 +52,7 @@ import PerformAction from './components/dialogs/PerformActions';
 import RefreshStatus from './components/dialogs/RefreshStatus';
 import DeployLoopModal from './components/dialogs/Loop/DeployLoopModal';
 import Alert from 'react-bootstrap/Alert';
+import Spinner from 'react-bootstrap/Spinner';
 
 import { Link } from 'react-router-dom';
 
@@ -59,6 +60,11 @@ const StyledMainDiv = styled.div`
 	background-color: ${props => props.theme.backgroundColor};
 `
 
+const StyledSpinnerDiv = styled.div`
+	justify-content: center !important;
+	display: flex !important;
+`;
+
 const ProjectNameStyled = styled.a`
 	vertical-align: middle;
 	padding-left: 30px;
@@ -108,7 +114,8 @@ export default class LoopUI extends React.Component {
 		loopName: OnapConstants.defaultLoopName,
 		loopCache: new LoopCache({}),
 		showSucAlert: false,
-		showFailAlert: false
+		showFailAlert: false,
+		busyLoadingCount: 0
 	};
 
 	constructor() {
@@ -120,6 +127,9 @@ export default class LoopUI extends React.Component {
 		this.showSucAlert =  this.showSucAlert.bind(this);
 		this.showFailAlert =  this.showFailAlert.bind(this);
 		this.disableAlert =  this.disableAlert.bind(this);
+		this.setBusyLoading = this.setBusyLoading.bind(this);
+		this.clearBusyLoading = this.clearBusyLoading.bind(this);
+		this.isBusyLoading = this.isBusyLoading.bind(this);
 	}
 
 	componentWillMount() {
@@ -191,7 +201,7 @@ export default class LoopUI extends React.Component {
 	renderLoopViewBody() {
 		return (
 			<LoopViewBodyDivStyled>
-				<SvgGenerator loopCache={this.state.loopCache} clickable={true} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE}/>
+				<SvgGenerator loopCache={this.state.loopCache} clickable={true} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE} isBusyLoading={this.isBusyLoading}/>
 				<LoopStatus loopCache={this.state.loopCache}/>
 				<LoopLogs loopCache={this.state.loopCache} />
 			</LoopViewBodyDivStyled>
@@ -225,53 +235,160 @@ export default class LoopUI extends React.Component {
 	showFailAlert(message) {
 		this.setState ({ showFailAlert: true, showMessage:message });
 	}
- 
+
 	disableAlert() {
 		this.setState ({ showSucAlert: false, showFailAlert: false });
 	}
 
 	loadLoop(loopName) {
+		this.setBusyLoading();
 		LoopService.getLoop(loopName).then(loop => {
 			console.debug("Updating loopCache");
 			LoopActionService.refreshStatus(loopName).then(data => {
 				this.updateLoopCache(data);
+				this.clearBusyLoading();
 				this.props.history.push('/');
 			})
 			.catch(error => {
 				this.updateLoopCache(loop);
+				this.clearBusyLoading();
 				this.props.history.push('/');
 			});
 		});
 	}
 
+	setBusyLoading() {
+		this.setState((state,props) => ({ busyLoadingCount: ++state.busyLoadingCount }));
+	}
+
+	clearBusyLoading() {
+		this.setState((state,props) => ({ busyLoadingCount: --state.busyLoadingCount }));
+	}
+
+	isBusyLoading() {
+		if (this.state.busyLoadingCount === 0) {
+			return false;
+		} else {
+			return true;
+		}
+	}
+
 	closeLoop() {
 		this.setState({ loopCache: new LoopCache({}), loopName: OnapConstants.defaultLoopName });
 		this.props.history.push('/');
 	}
 
-	render() {
-		return (
-				<StyledMainDiv id="main_div">
+	renderRoutes() {
+		return(
+			<React.Fragment>
 				<Route path="/uploadToscaPolicyModal" render={(routeProps) => (<UploadToscaPolicyModal {...routeProps} />)} />
 				<Route path="/viewToscaPolicyModal" render={(routeProps) => (<ViewToscaPolicyModal {...routeProps} />)} />
 				<Route path="/ViewLoopTemplatesModal" render={(routeProps) => (<ViewLoopTemplatesModal {...routeProps} />)} />
 				<Route path="/ManageDictionaries" render={(routeProps) => (<ManageDictionaries {...routeProps} />)} />
-				<Route path="/policyModal/:policyInstanceType/:policyName" render={(routeProps) => (<PolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
-				<Route path="/createLoop" render={(routeProps) => (<CreateLoopModal {...routeProps} loadLoopFunction={this.loadLoop} />)} />
-				<Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} loadLoopFunction={this.loadLoop} />)} />
-				<Route path="/loopProperties" render={(routeProps) => (<LoopPropertiesModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
-				<Route path="/modifyLoop" render={(routeProps) => (<ModifyLoopModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
+
+				<Route path="/policyModal/:policyInstanceType/:policyName" render={(routeProps) => (<PolicyModal {...routeProps}
+					loopCache={this.getLoopCache()}
+					loadLoopFunction={this.loadLoop}/>)}
+				/>
+				<Route path="/createLoop" render={(routeProps) => (<CreateLoopModal {...routeProps}
+					loadLoopFunction={this.loadLoop} />)}
+				/>
+				<Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps}
+					loadLoopFunction={this.loadLoop} />)}
+				/>
+				<Route path="/loopProperties" render={(routeProps) => (<LoopPropertiesModal {...routeProps}
+					loopCache={this.getLoopCache()}
+					loadLoopFunction={this.loadLoop}/>)}
+				/>
+				<Route path="/modifyLoop" render={(routeProps) => (<ModifyLoopModal {...routeProps}
+					loopCache={this.getLoopCache()}
+					loadLoopFunction={this.loadLoop}/>)}
+				/>
 
 				<Route path="/userInfo" render={(routeProps) => (<UserInfoModal {...routeProps} />)} />
 				<Route path="/closeLoop" render={this.closeLoop} />
-				<Route path="/submit" render={(routeProps) => (<PerformAction {...routeProps} loopAction="submit" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
-				<Route path="/stop" render={(routeProps) => (<PerformAction {...routeProps} loopAction="stop" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
-				<Route path="/restart" render={(routeProps) => (<PerformAction {...routeProps} loopAction="restart" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
-				<Route path="/delete" render={(routeProps) => (<PerformAction {...routeProps} loopAction="delete" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
-				<Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps} loopAction="undeploy" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
-				<Route path="/deploy" render={(routeProps) => (<DeployLoopModal {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
-				<Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} />
-				<GlobalClampStyle />
+
+				<Route path="/submit" render={(routeProps) => (<PerformAction {...routeProps}
+					loopAction="submit"
+					loopCache={this.getLoopCache()}
+					updateLoopFunction={this.updateLoopCache}
+					showSucAlert={this.showSucAlert}
+					showFailAlert={this.showFailAlert}
+					setBusyLoading={this.setBusyLoading}
+					clearBusyLoading={this.clearBusyLoading}/>)}
+				/>
+				<Route path="/stop" render={(routeProps) => (<PerformAction {...routeProps}
+					loopAction="stop"
+					loopCache={this.getLoopCache()}
+					updateLoopFunction={this.updateLoopCache}
+					showSucAlert={this.showSucAlert}
+					showFailAlert={this.showFailAlert}
+					setBusyLoading={this.setBusyLoading}
+					clearBusyLoading={this.clearBusyLoading}/>)}
+				/>
+				<Route path="/restart" render={(routeProps) => (<PerformAction {...routeProps}
+					loopAction="restart"
+					loopCache={this.getLoopCache()}
+					updateLoopFunction={this.updateLoopCache}
+					showSucAlert={this.showSucAlert}
+					showFailAlert={this.showFailAlert}
+					setBusyLoading={this.setBusyLoading}
+					clearBusyLoading={this.clearBusyLoading}/>)}
+				/>
+				<Route path="/delete" render={(routeProps) => (<PerformAction {...routeProps}
+					loopAction="delete"
+					loopCache={this.getLoopCache()}
+					updateLoopFunction={this.updateLoopCache}
+					showSucAlert={this.showSucAlert}
+					showFailAlert={this.showFailAlert}
+					setBusyLoading={this.setBusyLoading}
+					clearBusyLoading={this.clearBusyLoading}/>)}
+				/>
+				<Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps}
+					loopAction="undeploy"
+					loopCache={this.getLoopCache()}
+					updateLoopFunction={this.updateLoopCache}
+					showSucAlert={this.showSucAlert}
+					showFailAlert={this.showFailAlert}
+					setBusyLoading={this.setBusyLoading}
+					clearBusyLoading={this.clearBusyLoading}/>)}
+				/>
+				<Route path="/deploy" render={(routeProps) => (<DeployLoopModal {...routeProps}
+					loopCache={this.getLoopCache()}
+					updateLoopFunction={this.updateLoopCache}
+					showSucAlert={this.showSucAlert}
+					showFailAlert={this.showFailAlert}/>)}
+				/>
+				<Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps}
+					loopCache={this.getLoopCache()}
+					updateLoopFunction={this.updateLoopCache}
+					showSucAlert={this.showSucAlert}
+					showFailAlert={this.showFailAlert}/>)}
+				/>
+			</React.Fragment>
+		);
+	}
+
+	renderSpinner() {
+		if (this.isBusyLoading()) {
+			return (
+				<StyledSpinnerDiv>
+					<Spinner animation="border" role="status">
+						<span className="sr-only">Loading...</span>
+					</Spinner>
+				</StyledSpinnerDiv>
+			);
+		} else {
+			return (<div></div>);
+		}
+	}
+
+	render() {
+		return (
+				<StyledMainDiv id="main_div">
+					<GlobalClampStyle />
+					{this.renderRoutes()}
+					{this.renderSpinner()}
 					{this.renderAlertBar()}
 					{this.renderNavBar()}
 					{this.renderLoopViewer()}