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';
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;
loopName: OnapConstants.defaultLoopName,
loopCache: new LoopCache({}),
showSucAlert: false,
- showFailAlert: false
+ showFailAlert: false,
+ busyLoadingCount: 0
};
constructor() {
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() {
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>
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()}
*/
import React from 'react';
import LoopActionService from '../../api/LoopActionService';
-import Spinner from 'react-bootstrap/Spinner'
-import styled from 'styled-components';
-const StyledSpinnerDiv = styled.div`
- justify-content: center !important;
- display: flex !important;
-`;
export default class PerformActions extends React.Component {
state = {
loopName: this.props.loopCache.getLoopName(),
loopAction: this.props.loopAction
};
+
constructor(props, context) {
super(props, context);
-
this.refreshStatus = this.refreshStatus.bind(this);
}
+
componentWillReceiveProps(newProps) {
this.setState({
loopName: newProps.loopCache.getLoopName(),
const action = this.state.loopAction;
const loopName = this.state.loopName;
- LoopActionService.performAction(loopName, action).then(pars => {
+ if (action === 'delete') {
+ if (window.confirm('You are about to remove Control Loop Model "' + loopName +
+ '". Select OK to continue with deletion or Cancel to keep the model.') === false) {
+ return;
+ }
+ }
+
+ this.props.setBusyLoading(); // Alert top level to start block user clicks
+
+ LoopActionService.performAction(loopName, action)
+ .then(pars => {
this.props.showSucAlert("Action " + action + " successfully performed");
- // refresh status and update loop logs
- this.refreshStatus(loopName);
+ if (action === 'delete') {
+ this.props.updateLoopFunction(null);
+ this.props.history.push('/');
+ } else {
+ // refresh status and update loop logs
+ this.refreshStatus(loopName);
+ }
})
.catch(error => {
this.props.showFailAlert("Action " + action + " failed");
// refresh status and update loop logs
this.refreshStatus(loopName);
- });
-
+ })
+ .finally(() => this.props.clearBusyLoading());
}
refreshStatus(loopName) {
- LoopActionService.refreshStatus(loopName).then(data => {
+
+ this.props.setBusyLoading();
+
+ LoopActionService.refreshStatus(loopName)
+ .then(data => {
this.props.updateLoopFunction(data);
this.props.history.push('/');
})
- .catch(error => {
+ .catch(error => {
this.props.history.push('/');
- });
+ })
+ .finally(() => this.props.clearBusyLoading());
}
render() {
- return (
- <StyledSpinnerDiv>
- <Spinner animation="border" role="status">
- </Spinner>
- </StyledSpinnerDiv>
- );
+ return null;
}
}
Code Review / clamp.git / commitdiff