From 5fe750cb519c88a5fd6c55a93670354b78b806dc Mon Sep 17 00:00:00 2001 From: xuegao Date: Tue, 6 Aug 2019 13:03:53 +0200 Subject: 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/components/menu/MenuBar.js | 58 +++++++++--------- ui-react/src/components/menu/PerformActions.js | 85 ++++++++++++++++++++++++++ ui-react/src/components/menu/RefreshStatus.js | 66 ++++++++++++++++++++ 3 files changed, 181 insertions(+), 28 deletions(-) create mode 100644 ui-react/src/components/menu/PerformActions.js create mode 100644 ui-react/src/components/menu/RefreshStatus.js (limited to 'ui-react/src/components') 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 ( + + + + + ); + } +} -- cgit 1.2.3-korg