@@ -165,20 +225,174 @@ export default class LoopUI extends React.Component {
updateLoopCache(loopJson) {
this.setState({ loopCache: new LoopCache(loopJson) });
this.setState({ loopName: this.state.loopCache.getLoopName() });
+ console.info(this.state.loopName+" loop loaded successfully");
+ }
+
+ showSucAlert(message) {
+ this.setState ({ showSucAlert: true, showMessage:message });
+ }
+
+ 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('/');
+ }
+
+ renderRoutes() {
+ return(
+
+ ()} />
+ ()} />
+ ()} />
+ ()} />
+
+ ()}
+ />
+ ()}
+ />
+ ()}
+ />
+ ()}
+ />
+ ()}
+ />
+
+ ()} />
+
+
+ ()}
+ />
+ ()}
+ />
+ ()}
+ />
+ ()}
+ />
+ ()}
+ />
+ ()}
+ />
+ ()}
+ />
+
+ );
+ }
+
+ renderSpinner() {
+ if (this.isBusyLoading()) {
+ return (
+
+
+ Loading...
+
+
+ );
+ } else {
+ return ();
+ }
}
render() {
return (
-
-
- {this.renderNavBar()}
- {this.renderLoopViewer()}
- ()} />
- ()} />
- ()} />
- ()} />
-
+
+
+ {this.renderRoutes()}
+ {this.renderSpinner()}
+ {this.renderAlertBar()}
+ {this.renderNavBar()}
+ {this.renderLoopViewer()}
+
);
}
}