diff options
| -rw-r--r-- | ui-react/src/LoopUI.js | 15 | ||||
| -rw-r--r-- | ui-react/src/React-Spinner.jpg | bin | 0 -> 5140 bytes | |||
| -rw-r--r-- | ui-react/src/api/LoopActionService.js | 74 | ||||
| -rw-r--r-- | ui-react/src/components/menu/MenuBar.js | 58 | ||||
| -rw-r--r-- | ui-react/src/components/menu/PerformActions.js | 85 | ||||
| -rw-r--r-- | ui-react/src/components/menu/RefreshStatus.js | 66 |
6 files changed, 240 insertions, 58 deletions
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index 643b32d14..c7080a2b6 100644 --- a/ui-react/src/LoopUI.js +++ b/ui-react/src/LoopUI.js @@ -41,6 +41,8 @@ import ConfigurationPolicyModal from './components/dialogs/ConfigurationPolicy/C 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'; const ProjectNameStyled = styled.a` vertical-align: middle; @@ -80,7 +82,7 @@ export default class LoopUI extends React.Component { state = { userName: null, loopName: LoopUI.defaultLoopName, - loopCache: new LoopCache({}), + loopCache: new LoopCache({}) }; constructor() { @@ -102,7 +104,7 @@ export default class LoopUI extends React.Component { renderMenuNavBar() { return ( - <MenuBar loopCache={this.state.loopCache}/> + <MenuBar/> ); } @@ -155,6 +157,7 @@ export default class LoopUI extends React.Component { return this.state.loopCache; } + renderLoopViewer() { return ( <LoopViewDivStyled> @@ -169,7 +172,7 @@ export default class LoopUI extends React.Component { this.setState({ loopName: this.state.loopCache.getLoopName() }); console.info(this.state.loopName+" loop loaded successfully"); } - + loadLoop(loopName) { LoopService.getLoop(loopName).then(loop => { console.debug("Updating loopCache"); @@ -187,6 +190,12 @@ export default class LoopUI extends React.Component { <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='/'/>)} /> + <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="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache}/>)} /> <GlobalClampStyle /> {this.renderNavBar()} {this.renderLoopViewer()} diff --git a/ui-react/src/React-Spinner.jpg b/ui-react/src/React-Spinner.jpg Binary files differnew file mode 100644 index 000000000..227689764 --- /dev/null +++ b/ui-react/src/React-Spinner.jpg diff --git a/ui-react/src/api/LoopActionService.js b/ui-react/src/api/LoopActionService.js index 9ce8ff0a9..6e45ce4b9 100644 --- a/ui-react/src/api/LoopActionService.js +++ b/ui-react/src/api/LoopActionService.js @@ -20,35 +20,55 @@ * =================================================================== * */ -const loopActionService = { - submit -}; +export default class LoopActionService{ -function submit(uiAction) { - const cl_name = ""; - console.log("clActionServices perform action: " + uiAction + " closedloopName=" - + cl_name); - const svcAction = uiAction.toLowerCase(); - const svcUrl = "/restservices/clds/v2/loop/" + svcAction + "/" + cl_name; + static performAction(cl_name, uiAction) { + console.log("LoopActionService perform action: " + uiAction + " closedloopName=" + cl_name); + const svcAction = uiAction.toLowerCase(); + return fetch("/restservices/clds/v2/loop/" + svcAction + "/" + cl_name, { + method: 'PUT', + credentials: 'same-origin', + }) + .then(function (response) { + if (response.ok) { + return response.json(); + } else { + return Promise.reject("Perform action failed with code:" + response.status); + } + }) + .then(function (data) { + alert("Action Successful: " + uiAction); + return data; + }) + .catch(function(error) { + console.log("Action Failure: " + uiAction); + return Promise.reject(error); + }); + } - let options = { - method: 'GET' - }; - return sendRequest(svcUrl, svcAction, options); -} - -function sendRequest(svcUrl, svcAction) { - fetch(svcUrl, options) - .then( - response => { - alertService.alertMessage("Action Successful: " + svcAction, 1) - }).error(error => { - alertService.alertMessage("Action Failure: " + svcAction, 2); - return Promise.reject(error); - }); - return response.json(); -}; + static refreshStatus(cl_name) { + console.log("Refresh the status for closedloopName=" + cl_name); -export default loopActionService;
\ No newline at end of file + return fetch("/restservices/clds/v2/loop/getstatus/" + cl_name, { + method: 'GET', + credentials: 'same-origin', + }) + .then(function (response) { + if (response.ok) { + return response.json(); + } else { + return Promise.reject("Refresh status failed with code:" + response.status); + } + }) + .then(function (data) { + console.info ("Refresh status Successful"); + return data; + }) + .catch(function(error) { + console.info ("Refresh status failed:", error); + return Promise.reject(error); + }); + } +} diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js index 811a48ba0..5022152e3 100644 --- a/ui-react/src/components/menu/MenuBar.js +++ b/ui-react/src/components/menu/MenuBar.js @@ -21,21 +21,13 @@ * */ import React from 'react'; +import Nav from 'react-bootstrap/Nav'; import Navbar from 'react-bootstrap/Navbar'; import NavDropdown from 'react-bootstrap/NavDropdown'; import 'bootstrap-css-only/css/bootstrap.min.css'; import styled from 'styled-components'; import { Link } from 'react-router-dom' -const StyledNavDropdownItem = styled(NavDropdown.Item)` - color: ${props => props.theme.menuFontColor}; - background-color: ${props => props.theme.menuBackgroundColor}; - :hover { - background-color: ${props => props.theme.menuHighlightedBackgroundColor}; - color: ${props => props.theme.menuHighlightedFontColor}; - } -`; - const StyledLink = styled(Link)` color: ${props => props.theme.menuColor}; background-color: ${props => props.theme.menuBackgroundColor}; @@ -53,31 +45,41 @@ const StyledLink = styled(Link)` color: ${props => props.theme.loopViewerHeaderFontColor}; } `; - +const StyledNavLink = styled(Nav.Link)` + color: ${props => props.theme.menuColor}; + background-color: ${props => props.theme.menuBackgroundColor}; + font-weight: normal; + padding: .25rem 1.5rem; + :hover { + background-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; + color: ${props => props.theme.loopViewerHeaderFontColor} + } +`; export default class MenuBar extends React.Component { + render () { return ( - <Navbar.Collapse id="basic-navbar-nav" className="justify-content-center"> - <NavDropdown title="Closed Loop" id="basic-nav-dropdown"> - <StyledNavDropdownItem as={StyledLink} to="/openLoop">Open CL</StyledNavDropdownItem> - <StyledNavDropdownItem as={StyledLink} to="/loopProperties">Properties CL</StyledNavDropdownItem> - <StyledNavDropdownItem as={StyledLink} to="/closeLoop">Close Model</StyledNavDropdownItem> + <Navbar.Collapse> + <NavDropdown title="Closed Loop"> + <NavDropdown.Item as={StyledLink} to="/openLoop">Open CL</NavDropdown.Item> + <NavDropdown.Item as={StyledLink} to="/loopProperties">Properties CL</NavDropdown.Item> + <NavDropdown.Item as={StyledLink} to="/closeLoop">Close Model</NavDropdown.Item> </NavDropdown> - <NavDropdown title="Manage" id="basic-nav-dropdown"> - <StyledNavDropdownItem as={StyledLink} to="/operationalPolicyModal">Submit</StyledNavDropdownItem> - <StyledNavDropdownItem as={StyledLink} to="#action/3.2">Stop</StyledNavDropdownItem> - <StyledNavDropdownItem as={StyledLink} to="#action/3.3">Restart</StyledNavDropdownItem> - <StyledNavDropdownItem as={StyledLink} to="#action/3.3">Delete</StyledNavDropdownItem> - <StyledNavDropdownItem as={StyledLink} to="#action/3.3">Deploy</StyledNavDropdownItem> - <StyledNavDropdownItem as={StyledLink} to="#action/3.3">UnDeploy</StyledNavDropdownItem> + <NavDropdown title="Manage"> + <NavDropdown.Item as={StyledLink} to="/submit">Submit</NavDropdown.Item> + <NavDropdown.Item as={StyledLink} to="/stop">Stop</NavDropdown.Item> + <NavDropdown.Item as={StyledLink} to="/restart">Restart</NavDropdown.Item> + <NavDropdown.Item as={StyledLink} to="/delete">Delete</NavDropdown.Item> + <NavDropdown.Item as={StyledLink} to="/deploy">Deploy</NavDropdown.Item> + <NavDropdown.Item as={StyledLink} to="/undeploy">UnDeploy</NavDropdown.Item> </NavDropdown> - <NavDropdown title="View" id="basic-nav-dropdown"> - <StyledNavDropdownItem as={StyledLink} to="#action/3.1">Refresh Status</StyledNavDropdownItem> + <NavDropdown title="View"> + <NavDropdown.Item as={StyledLink} to="/refreshStatus">Refresh Status</NavDropdown.Item> </NavDropdown> - <NavDropdown title="Help" id="basic-nav-dropdown"> - <StyledNavDropdownItem href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavDropdownItem> - <StyledNavDropdownItem href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavDropdownItem> - <StyledNavDropdownItem as={StyledLink} to="/userInfo">User Info</StyledNavDropdownItem> + <NavDropdown title="Help"> + <StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink> + <StyledNavLink href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavLink> + <NavDropdown.Item as={StyledLink} to="/userInfo">User Info</NavDropdown.Item> </NavDropdown> </Navbar.Collapse> ); diff --git a/ui-react/src/components/menu/PerformActions.js b/ui-react/src/components/menu/PerformActions.js new file mode 100644 index 000000000..9c34e141b --- /dev/null +++ b/ui-react/src/components/menu/PerformActions.js @@ -0,0 +1,85 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ +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(), + loopAction: newProps.loopAction + }); + } + + componentDidMount() { + const action = this.state.loopAction; + const loopName = this.state.loopName; + console.log("Perform action:" + action); + LoopActionService.performAction(loopName, action).then(pars => { + alert("Action " + action + " successfully performed"); + // refresh status and update loop logs + this.refreshStatus(loopName); + }) + .catch(error => { + alert("Action " + action + " failed"); + // refresh status and update loop logs + this.refreshStatus(loopName); + }); + + } + + refreshStatus(loopName) { + LoopActionService.refreshStatus(loopName).then(data => { + this.props.updateLoopFunction(data); + this.props.history.push('/'); + }) + .catch(error => { + this.props.history.push('/'); + }); + } + + render() { + return ( + <StyledSpinnerDiv> + <Spinner animation="border" role="status"> + </Spinner> + </StyledSpinnerDiv> + ); + } +} diff --git a/ui-react/src/components/menu/RefreshStatus.js b/ui-react/src/components/menu/RefreshStatus.js new file mode 100644 index 000000000..cf08655ee --- /dev/null +++ b/ui-react/src/components/menu/RefreshStatus.js @@ -0,0 +1,66 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ +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 RefreshStatus extends React.Component { + state = { + loopName: this.props.loopCache.getLoopName() + }; + + componentWillReceiveProps(newProps) { + this.setState({ + loopName: newProps.loopCache.getLoopName() + }); + } + + componentDidMount() { + console.log("Refresh status for: " + this.state.loopName); + // refresh status and update loop logs + LoopActionService.refreshStatus(this.state.loopName).then(data => { + alert("Status successfully refreshed") + this.props.updateLoopFunction(data); + this.props.history.push('/'); + }) + .catch(error => { + alert("Status refreshing failed"); + this.props.history.push('/'); + }); + } + + render() { + return ( + <StyledSpinnerDiv> + <Spinner animation="border" role="status"> + </Spinner> + </StyledSpinnerDiv> + ); + } +} |
