blob: 5b8283f8fbf6cff2bccf9b94e72471f6b0881af6 [file] [log] [blame]
sebdetc8d61302019-07-04 15:50:34 +02001/*-
2 * ============LICENSE_START=======================================================
3 * ONAP CLAMP
4 * ================================================================================
5 * Copyright (C) 2019 AT&T Intellectual Property. All rights
6 * reserved.
7 * ================================================================================
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
11 *
12 * http://www.apache.org/licenses/LICENSE-2.0
13 *
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ============LICENSE_END============================================
20 * ===================================================================
21 *
22 */
23
24import React from 'react';
25import styled from 'styled-components';
sebdete44fdb12019-07-12 12:25:56 +020026import MenuBar from './components/menu/MenuBar';
sebdetc8d61302019-07-04 15:50:34 +020027import Navbar from 'react-bootstrap/Navbar';
28import logo from './logo.png';
sebdete44fdb12019-07-12 12:25:56 +020029import { GlobalClampStyle } from './theme/globalStyle.js';
sebdetc8d61302019-07-04 15:50:34 +020030
sebdet493c3832019-07-15 17:26:18 +020031import LoopSvg from './components/loop_viewer/svg/LoopSvg';
32import LoopLogs from './components/loop_viewer/logs/LoopLogs';
33import LoopStatus from './components/loop_viewer/status/LoopStatus';
sebdete44fdb12019-07-12 12:25:56 +020034import UserService from './api/UserService';
sebdet493c3832019-07-15 17:26:18 +020035import LoopCache from './api/LoopCache';
36
xuegao691e2b72019-08-16 11:07:24 +020037import { Route } from 'react-router-dom'
sebdet493c3832019-07-15 17:26:18 +020038import OpenLoopModal from './components/dialogs/OpenLoop/OpenLoopModal';
39import OperationalPolicyModal from './components/dialogs/OperationalPolicy/OperationalPolicyModal';
40import ConfigurationPolicyModal from './components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal';
xuegaoe52d5722019-07-25 15:43:06 +020041import LoopProperties from './components/dialogs/LoopProperties';
42import UserInfo from './components/dialogs/UserInfo';
sebdet83ce0762019-08-02 14:53:59 +020043import LoopService from './api/LoopService';
xuegao5fe750c2019-08-06 13:03:53 +020044import PerformAction from './components/menu/PerformActions';
45import RefreshStatus from './components/menu/RefreshStatus';
xuegao691e2b72019-08-16 11:07:24 +020046import DeployLoop from './components/menu/DeployLoop';
sebdetc8d61302019-07-04 15:50:34 +020047
sebdet4946e5b2019-07-10 12:32:36 +020048const ProjectNameStyled = styled.a`
sebdetc8d61302019-07-04 15:50:34 +020049 vertical-align: middle;
50 padding-left: 30px;
51 font-size: 30px;
52
53`
sebdet4946e5b2019-07-10 12:32:36 +020054const LoopViewDivStyled = styled.div`
sebdet190227a2019-07-19 16:51:19 +020055 height: 100%;
sebdetc8d61302019-07-04 15:50:34 +020056 overflow: hidden;
57 margin-left: 10px;
58 margin-right: 10px;
59 margin-bottom: 10px;
60 color: ${props => props.theme.loopViewerFontColor};
61 background-color: ${props => props.theme.loopViewerBackgroundColor};
62 border: 1px solid transparent;
63 border-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
64`
65
sebdet4946e5b2019-07-10 12:32:36 +020066const LoopViewHeaderDivStyled = styled.div`
sebdetc8d61302019-07-04 15:50:34 +020067 background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
68 padding: 10px 10px;
69 color: ${props => props.theme.loopViewerHeaderFontColor};
70`
71
sebdet4946e5b2019-07-10 12:32:36 +020072const LoopViewBodyDivStyled = styled.div`
sebdetc8d61302019-07-04 15:50:34 +020073 background-color: ${props => (props.theme.loopViewerBackgroundColor)};
74 padding: 10px 10px;
75 color: ${props => (props.theme.loopViewerHeaderFontColor)};
76 height: 95%;
77`
78
sebdetc8d61302019-07-04 15:50:34 +020079export default class LoopUI extends React.Component {
sebdet493c3832019-07-15 17:26:18 +020080
sebdet2dacb9b2019-07-17 13:48:44 +020081 static defaultLoopName="Empty (NO loop loaded yet)";
82
sebdet4946e5b2019-07-10 12:32:36 +020083 state = {
84 userName: null,
sebdet2dacb9b2019-07-17 13:48:44 +020085 loopName: LoopUI.defaultLoopName,
xuegao5fe750c2019-08-06 13:03:53 +020086 loopCache: new LoopCache({})
sebdet4946e5b2019-07-10 12:32:36 +020087 };
xuegao7c7323d2019-07-09 11:52:20 +020088
sebdet4946e5b2019-07-10 12:32:36 +020089 constructor() {
90 super();
91 this.getUser = this.getUser.bind(this);
sebdet493c3832019-07-15 17:26:18 +020092 this.updateLoopCache = this.updateLoopCache.bind(this);
sebdet83ce0762019-08-02 14:53:59 +020093 this.loadLoop = this.loadLoop.bind(this);
xuegao691e2b72019-08-16 11:07:24 +020094 this.closeLoop = this.closeLoop.bind(this);
sebdet4946e5b2019-07-10 12:32:36 +020095 }
sebdet493c3832019-07-15 17:26:18 +020096
sebdet2dacb9b2019-07-17 13:48:44 +020097 componentWillMount() {
sebdet493c3832019-07-15 17:26:18 +020098 this.getUser();
99 }
sebdet4946e5b2019-07-10 12:32:36 +0200100
101 getUser() {
sebdet493c3832019-07-15 17:26:18 +0200102 UserService.login().then(user => {
103 this.setState({ userName: user })
sebdet4946e5b2019-07-10 12:32:36 +0200104 });
105 }
sebdet493c3832019-07-15 17:26:18 +0200106
sebdetc8d61302019-07-04 15:50:34 +0200107 renderMenuNavBar() {
108 return (
xuegao691e2b72019-08-16 11:07:24 +0200109 <MenuBar loopName={this.state.loopName}/>
sebdetc8d61302019-07-04 15:50:34 +0200110 );
111 }
sebdet4946e5b2019-07-10 12:32:36 +0200112
sebdetc8d61302019-07-04 15:50:34 +0200113 renderUserLoggedNavBar() {
114 return (
115 <Navbar.Text>
sebdet4946e5b2019-07-10 12:32:36 +0200116 Signed in as: <a href="/login">{this.state.userName}</a>
sebdetc8d61302019-07-04 15:50:34 +0200117 </Navbar.Text>
118 );
119 }
sebdet4946e5b2019-07-10 12:32:36 +0200120
sebdetc8d61302019-07-04 15:50:34 +0200121 renderLogoNavBar() {
122 return (
123 <Navbar.Brand>
sebdet493c3832019-07-15 17:26:18 +0200124 <img height="50px" width="234px" src={logo} alt="" />
sebdet4946e5b2019-07-10 12:32:36 +0200125 <ProjectNameStyled>CLAMP</ProjectNameStyled>
sebdetc8d61302019-07-04 15:50:34 +0200126 </Navbar.Brand>
127 );
128 }
sebdet4946e5b2019-07-10 12:32:36 +0200129
sebdetc8d61302019-07-04 15:50:34 +0200130 renderNavBar() {
131 return (
sebdet493c3832019-07-15 17:26:18 +0200132 <Navbar expand="lg">
133 {this.renderLogoNavBar()}
134 {this.renderMenuNavBar()}
135 {this.renderUserLoggedNavBar()}
136 </Navbar>
137 );
sebdetc8d61302019-07-04 15:50:34 +0200138 }
sebdet493c3832019-07-15 17:26:18 +0200139
sebdetc8d61302019-07-04 15:50:34 +0200140 renderLoopViewHeader() {
141 return (
sebdet4946e5b2019-07-10 12:32:36 +0200142 <LoopViewHeaderDivStyled>
sebdet190227a2019-07-19 16:51:19 +0200143 Loop Viewer - {this.state.loopName}
sebdet4946e5b2019-07-10 12:32:36 +0200144 </LoopViewHeaderDivStyled>
sebdetc8d61302019-07-04 15:50:34 +0200145 );
146 }
sebdet493c3832019-07-15 17:26:18 +0200147
sebdetc8d61302019-07-04 15:50:34 +0200148 renderLoopViewBody() {
149 return (
sebdet4946e5b2019-07-10 12:32:36 +0200150 <LoopViewBodyDivStyled>
sebdet493c3832019-07-15 17:26:18 +0200151 <LoopSvg loopCache={this.state.loopCache} />
sebdet190227a2019-07-19 16:51:19 +0200152 <LoopStatus loopCache={this.state.loopCache}/>
sebdetc1ccc542019-07-19 09:50:33 +0200153 <LoopLogs loopCache={this.state.loopCache} />
sebdet4946e5b2019-07-10 12:32:36 +0200154 </LoopViewBodyDivStyled>
sebdetc8d61302019-07-04 15:50:34 +0200155 );
156 }
sebdet493c3832019-07-15 17:26:18 +0200157
xuegaoe52d5722019-07-25 15:43:06 +0200158 getLoopCache() {
159 return this.state.loopCache;
160
161 }
xuegao5fe750c2019-08-06 13:03:53 +0200162
sebdetc8d61302019-07-04 15:50:34 +0200163 renderLoopViewer() {
164 return (
sebdet4946e5b2019-07-10 12:32:36 +0200165 <LoopViewDivStyled>
sebdet493c3832019-07-15 17:26:18 +0200166 {this.renderLoopViewHeader()}
167 {this.renderLoopViewBody()}
sebdet4946e5b2019-07-10 12:32:36 +0200168 </LoopViewDivStyled>
sebdet493c3832019-07-15 17:26:18 +0200169 );
sebdetc8d61302019-07-04 15:50:34 +0200170 }
sebdet493c3832019-07-15 17:26:18 +0200171
172 updateLoopCache(loopJson) {
xuegao691e2b72019-08-16 11:07:24 +0200173 this.setState({ loopCache: new LoopCache(loopJson), loopName: this.state.loopCache.getLoopName() });
sebdet83ce0762019-08-02 14:53:59 +0200174 console.info(this.state.loopName+" loop loaded successfully");
175 }
xuegao5fe750c2019-08-06 13:03:53 +0200176
sebdet83ce0762019-08-02 14:53:59 +0200177 loadLoop(loopName) {
178 LoopService.getLoop(loopName).then(loop => {
179 console.debug("Updating loopCache");
180 this.updateLoopCache(loop);
181 });
sebdet493c3832019-07-15 17:26:18 +0200182 }
183
xuegao691e2b72019-08-16 11:07:24 +0200184 closeLoop() {
185 this.setState({ loopCache: new LoopCache({}), loopName: LoopUI.defaultLoopName });
186 this.props.history.push('/');
187 }
188 render() {
sebdetc8d61302019-07-04 15:50:34 +0200189 return (
sebdet8a02dd72019-07-31 17:11:11 +0200190 <div id="main_div">
sebdet493c3832019-07-15 17:26:18 +0200191 <Route path="/operationalPolicyModal"
sebdet83ce0762019-08-02 14:53:59 +0200192 render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
193 <Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
194 <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} loadLoopFunction={this.loadLoop} />)} />
195 <Route path="/loopProperties" render={(routeProps) => (<LoopProperties {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
xuegaoe52d5722019-07-25 15:43:06 +0200196 <Route path="/userInfo" render={(routeProps) => (<UserInfo {...routeProps} />)} />
xuegao691e2b72019-08-16 11:07:24 +0200197 <Route path="/closeLoop" render={this.closeLoop} />
xuegao5fe750c2019-08-06 13:03:53 +0200198 <Route path="/submit" render={(routeProps) => (<PerformAction {...routeProps} loopAction="submit" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
199 <Route path="/stop" render={(routeProps) => (<PerformAction {...routeProps} loopAction="stop" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
200 <Route path="/restart" render={(routeProps) => (<PerformAction {...routeProps} loopAction="restart" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
201 <Route path="/delete" render={(routeProps) => (<PerformAction {...routeProps} loopAction="delete" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
202 <Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps} loopAction="undeploy" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
xuegao691e2b72019-08-16 11:07:24 +0200203 <Route path="/deploy" render={(routeProps) => (<DeployLoop {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
xuegao5fe750c2019-08-06 13:03:53 +0200204 <Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} />
sebdet8a02dd72019-07-31 17:11:11 +0200205 <GlobalClampStyle />
206 {this.renderNavBar()}
207 {this.renderLoopViewer()}
208 </div>
sebdetc8d61302019-07-04 15:50:34 +0200209 );
210 }
211}