diff options
Diffstat (limited to 'ui-react/src/LoopUI.js')
| -rw-r--r-- | ui-react/src/LoopUI.js | 72 |
1 files changed, 59 insertions, 13 deletions
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index 643b32d1..fb595ded 100644 --- a/ui-react/src/LoopUI.js +++ b/ui-react/src/LoopUI.js @@ -34,20 +34,40 @@ import LoopStatus from './components/loop_viewer/status/LoopStatus'; import UserService from './api/UserService'; import LoopCache from './api/LoopCache'; -import { Route, Redirect } from 'react-router-dom' +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/dialogs/PerformActions'; +import RefreshStatus from './components/dialogs/RefreshStatus'; +import DeployLoop from './components/dialogs/DeployLoop'; + +import { Link } from 'react-router-dom'; + +const StyledMainDiv = styled.div` + background-color: ${props => props.theme.backgroundColor}; +` const ProjectNameStyled = styled.a` vertical-align: middle; padding-left: 30px; - font-size: 30px; + font-size: 36px; + font-weight: bold; +` +const StyledRouterLink = styled(Link)` + color: ${props => props.theme.menuFontColor}; + background-color: ${props => props.theme.backgroundColor}; ` + +const StyledLoginInfo = styled.a` + color: ${props => props.theme.menuFontColor}; + background-color: ${props => props.theme.backgroundColor}; +` + const LoopViewDivStyled = styled.div` height: 100%; overflow: hidden; @@ -80,14 +100,16 @@ export default class LoopUI extends React.Component { state = { userName: null, loopName: LoopUI.defaultLoopName, - loopCache: new LoopCache({}), + loopCache: new LoopCache({}) }; constructor() { super(); this.getUser = this.getUser.bind(this); + this.logout = this.logout.bind(this); this.updateLoopCache = this.updateLoopCache.bind(this); this.loadLoop = this.loadLoop.bind(this); + this.closeLoop = this.closeLoop.bind(this); } componentWillMount() { @@ -99,17 +121,27 @@ export default class LoopUI extends React.Component { this.setState({ userName: user }) }); } + + logout() { + UserService.logout().then(user => { + this.setState({ userName: user }); + window.location.reload(); + }); + + } renderMenuNavBar() { return ( - <MenuBar loopCache={this.state.loopCache}/> + <MenuBar loopName={this.state.loopName}/> ); } renderUserLoggedNavBar() { return ( <Navbar.Text> - Signed in as: <a href="/login">{this.state.userName}</a> + <StyledLoginInfo>Signed in as: </StyledLoginInfo> + <StyledRouterLink to="/userInfo">{this.state.userName}</StyledRouterLink> + <StyledRouterLink to="/logout/"> (logout)</StyledRouterLink> </Navbar.Text> ); } @@ -125,8 +157,9 @@ export default class LoopUI extends React.Component { renderNavBar() { return ( - <Navbar expand="lg"> + <Navbar > {this.renderLogoNavBar()} + <Navbar.Toggle aria-controls="responsive-navbar-nav" /> {this.renderMenuNavBar()} {this.renderUserLoggedNavBar()} </Navbar> @@ -155,6 +188,7 @@ export default class LoopUI extends React.Component { return this.state.loopCache; } + renderLoopViewer() { return ( <LoopViewDivStyled> @@ -165,11 +199,10 @@ export default class LoopUI extends React.Component { } updateLoopCache(loopJson) { - this.setState({ loopCache: new LoopCache(loopJson) }); - this.setState({ loopName: this.state.loopCache.getLoopName() }); + this.setState({ loopCache: new LoopCache(loopJson), loopName: this.state.loopCache.getLoopName() }); console.info(this.state.loopName+" loop loaded successfully"); } - + loadLoop(loopName) { LoopService.getLoop(loopName).then(loop => { console.debug("Updating loopCache"); @@ -177,20 +210,33 @@ export default class LoopUI extends React.Component { }); } + closeLoop() { + this.setState({ loopCache: new LoopCache({}), loopName: LoopUI.defaultLoopName }); + this.props.history.push('/'); + } + render() { return ( - <div id="main_div"> + <StyledMainDiv id="main_div"> <Route path="/operationalPolicyModal" 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={(routeProps) => (<Redirect to='/'/>)} /> - <GlobalClampStyle /> + <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}/>)} /> + <Route path="/logout" render={this.logout} /> + <GlobalClampStyle /> {this.renderNavBar()} {this.renderLoopViewer()} - </div> + </StyledMainDiv> ); } } |