Rework deploy action and close model

[clamp.git] / ui-react / src / LoopUI.js

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index a1aff3d..5b8283f 100644 (file)
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -38,6 +38,12 @@ import { Route } from 'react-router-dom'
 import OpenLoopModal from './components/dialogs/OpenLoop/OpenLoopModal';
 import OperationalPolicyModal from './components/dialogs/OperationalPolicy/OperationalPolicyModal';
 import ConfigurationPolicyModal from './components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal';
+import LoopProperties from './components/dialogs/LoopProperties';
+import UserInfo from './components/dialogs/UserInfo';
+import LoopService from './api/LoopService';
+import PerformAction from './components/menu/PerformActions';
+import RefreshStatus from './components/menu/RefreshStatus';
+import DeployLoop from './components/menu/DeployLoop';
 
 const ProjectNameStyled = styled.a`
        vertical-align: middle;
@@ -46,7 +52,7 @@ const ProjectNameStyled = styled.a`
 
 `
 const LoopViewDivStyled = styled.div`
-       height: 90vh;
+       height: 100%;
        overflow: hidden;
        margin-left: 10px;
        margin-right: 10px;
@@ -70,27 +76,25 @@ const LoopViewBodyDivStyled = styled.div`
        height: 95%;
 `
 
-const LoopViewLoopNameSpanStyled = styled.span`
-       font-weight: bold;
-       color: ${props => (props.theme.loopViewerHeaderFontColor)};
-       background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)};
-`
-
 export default class LoopUI extends React.Component {
 
+       static defaultLoopName="Empty (NO loop loaded yet)";
+
        state = {
                userName: null,
-               loopName: "Empty (NO loop loaded yet)",
-               loopCache: new LoopCache({}),
+               loopName: LoopUI.defaultLoopName,
+               loopCache: new LoopCache({})
        };
 
        constructor() {
                super();
                this.getUser = this.getUser.bind(this);
                this.updateLoopCache = this.updateLoopCache.bind(this);
+               this.loadLoop = this.loadLoop.bind(this);
+               this.closeLoop = this.closeLoop.bind(this);
        }
 
-       componentDidMount() {
+       componentWillMount() {
                this.getUser();
        }
 
@@ -102,7 +106,7 @@ export default class LoopUI extends React.Component {
 
        renderMenuNavBar() {
                return (
-                       <MenuBar />
+                       <MenuBar loopName={this.state.loopName}/>
                );
        }
 
@@ -136,7 +140,7 @@ export default class LoopUI extends React.Component {
        renderLoopViewHeader() {
                return (
                        <LoopViewHeaderDivStyled>
-                               Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled>
+                               Loop Viewer - {this.state.loopName}
                        </LoopViewHeaderDivStyled>
                );
        }
@@ -145,12 +149,17 @@ export default class LoopUI extends React.Component {
                return (
                        <LoopViewBodyDivStyled>
                                <LoopSvg loopCache={this.state.loopCache} />
-                               <LoopLogs />
-                               <LoopStatus />
+                               <LoopStatus loopCache={this.state.loopCache}/>
+                               <LoopLogs loopCache={this.state.loopCache} />
                        </LoopViewBodyDivStyled>
                );
        }
 
+       getLoopCache() {
+               return this.state.loopCache;
+
+       }
+
        renderLoopViewer() {
                return (
                        <LoopViewDivStyled>
@@ -161,20 +170,42 @@ export default class LoopUI extends React.Component {
        }
 
        updateLoopCache(loopJson) {
-               this.setState({ loopCache: new LoopCache(loopJson) });
+               this.setState({ loopCache: new LoopCache(loopJson), loopName: this.state.loopCache.getLoopName() });
+               console.info(this.state.loopName+" loop loaded successfully");
        }
 
-       render() {
+       loadLoop(loopName) {
+               LoopService.getLoop(loopName).then(loop => {
+                       console.debug("Updating loopCache");
+                       this.updateLoopCache(loop);
+               });
+       }
+
+       closeLoop() {
+               this.setState({ loopCache: new LoopCache({}), loopName: LoopUI.defaultLoopName });
+               this.props.history.push('/');
+       }
+ render() {
                return (
-                       <div id="main_div">
-                               <GlobalClampStyle />
-                               {this.renderNavBar()}
-                               {this.renderLoopViewer()}
+                               <div id="main_div">
                                <Route path="/operationalPolicyModal"
-                                       render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
-                               <Route path="/configurationPolicyModal" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
-                               <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} updateLoopCacheFunction={this.updateLoopCache} />)} />
-                       </div>
+                                       render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
+                               <Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
+                               <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} loadLoopFunction={this.loadLoop} />)} />
+                               <Route path="/loopProperties" render={(routeProps) => (<LoopProperties {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
+                               <Route path="/userInfo" render={(routeProps) => (<UserInfo {...routeProps} />)} />
+                               <Route path="/closeLoop" render={this.closeLoop} />
+                               <Route path="/submit" render={(routeProps) => (<PerformAction {...routeProps} loopAction="submit" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
+                               <Route path="/stop" render={(routeProps) => (<PerformAction {...routeProps} loopAction="stop" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
+                               <Route path="/restart" render={(routeProps) => (<PerformAction {...routeProps} loopAction="restart" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
+                               <Route path="/delete" render={(routeProps) => (<PerformAction {...routeProps} loopAction="delete" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
+                               <Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps} loopAction="undeploy" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
+                               <Route path="/deploy" render={(routeProps) => (<DeployLoop {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
+                               <Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
+                                       <GlobalClampStyle />
+                                       {this.renderNavBar()}
+                                       {this.renderLoopViewer()}
+                               </div>
                );
        }
 }