From 5fe750cb519c88a5fd6c55a93670354b78b806dc Mon Sep 17 00:00:00 2001 From: xuegao Date: Tue, 6 Aug 2019 13:03:53 +0200 Subject: [PATCH] Rework action itmes Rework the submit, stop, restart, delete, undeploy and refresh status actions. Issue-ID: CLAMP-441,CLAMP-442,CLAMP-443,CLAMP-444,CLAMP-446,CLAMP-448 Change-Id: I38aed3a06fdcdf0f53fc9b8f8d2d9072f0932d55 Signed-off-by: xuegao --- ui-react/src/LoopUI.js | 15 ++++- ui-react/src/React-Spinner.jpg | Bin 0 -> 5140 bytes ui-react/src/api/LoopActionService.js | 74 +++++++++++++-------- ui-react/src/components/menu/MenuBar.js | 58 +++++++++-------- ui-react/src/components/menu/PerformActions.js | 85 +++++++++++++++++++++++++ ui-react/src/components/menu/RefreshStatus.js | 66 +++++++++++++++++++ 6 files changed, 240 insertions(+), 58 deletions(-) create mode 100644 ui-react/src/React-Spinner.jpg create mode 100644 ui-react/src/components/menu/PerformActions.js create mode 100644 ui-react/src/components/menu/RefreshStatus.js 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 ( - + ); } @@ -155,6 +157,7 @@ export default class LoopUI extends React.Component { return this.state.loopCache; } + renderLoopViewer() { return ( @@ -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 { ()} /> ()} /> ()} /> + ()} /> + ()} /> + ()} /> + ()} /> + ()} /> + ()} /> {this.renderNavBar()} {this.renderLoopViewer()} diff --git a/ui-react/src/React-Spinner.jpg b/ui-react/src/React-Spinner.jpg new file mode 100644 index 0000000000000000000000000000000000000000..22768976403cc5d9a5841d45ece9522dbfcf2391 GIT binary patch literal 5140 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 K?>KgM^uGYVEBY(| literal 0 HcmV?d00001 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 ( - - - Open CL - Properties CL - Close Model + + + Open CL + Properties CL + Close Model - - Submit - Stop - Restart - Delete - Deploy - UnDeploy + + Submit + Stop + Restart + Delete + Deploy + UnDeploy - - Refresh Status + + Refresh Status - - Wiki - Contact Us - User Info + + Wiki + Contact Us + User Info ); 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 ( + + + + + ); + } +} 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 ( + + + + + ); + } +} -- 2.16.6