From 691e2b7a8bb16d224a0fbe30390152ea309e88e2 Mon Sep 17 00:00:00 2001 From: xuegao Date: Fri, 16 Aug 2019 11:07:24 +0200 Subject: Rework deploy action and close model Rework the deploy action and the close model feature. Issue-ID: CLAMP-445, CLAMP-451 Change-Id: Ic122a584b676d50b9bddcac6e5553266b2281a01 Signed-off-by: xuegao --- ui-react/src/LoopUI.js | 18 ++- ui-react/src/React-Spinner.jpg | Bin 5140 -> 0 bytes ui-react/src/components/dialogs/DeployLoop.js | 128 +++++++++++++++++++++ ui-react/src/components/dialogs/LoopProperties.js | 7 +- ui-react/src/components/dialogs/PerformActions.js | 85 ++++++++++++++ ui-react/src/components/dialogs/RefreshStatus.js | 66 +++++++++++ ui-react/src/components/loop_viewer/svg/LoopSvg.js | 17 +-- ui-react/src/components/menu/MenuBar.js | 31 +++-- ui-react/src/components/menu/PerformActions.js | 85 -------------- ui-react/src/components/menu/RefreshStatus.js | 66 ----------- 10 files changed, 326 insertions(+), 177 deletions(-) delete mode 100644 ui-react/src/React-Spinner.jpg create mode 100644 ui-react/src/components/dialogs/DeployLoop.js create mode 100644 ui-react/src/components/dialogs/PerformActions.js create mode 100644 ui-react/src/components/dialogs/RefreshStatus.js delete mode 100644 ui-react/src/components/menu/PerformActions.js delete mode 100644 ui-react/src/components/menu/RefreshStatus.js (limited to 'ui-react') diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index c7080a2b..5b8283f8 100644 --- a/ui-react/src/LoopUI.js +++ b/ui-react/src/LoopUI.js @@ -34,7 +34,7 @@ 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'; @@ -43,6 +43,7 @@ import UserInfo from './components/dialogs/UserInfo'; import LoopService from './api/LoopService'; import PerformAction from './components/menu/PerformActions'; import RefreshStatus from './components/menu/RefreshStatus'; +import DeployLoop from './components/menu/DeployLoop'; const ProjectNameStyled = styled.a` vertical-align: middle; @@ -90,6 +91,7 @@ export default class LoopUI extends React.Component { this.getUser = this.getUser.bind(this); this.updateLoopCache = this.updateLoopCache.bind(this); this.loadLoop = this.loadLoop.bind(this); + this.closeLoop = this.closeLoop.bind(this); } componentWillMount() { @@ -104,7 +106,7 @@ export default class LoopUI extends React.Component { renderMenuNavBar() { return ( - + ); } @@ -168,8 +170,7 @@ 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"); } @@ -180,7 +181,11 @@ export default class LoopUI extends React.Component { }); } - render() { + closeLoop() { + this.setState({ loopCache: new LoopCache({}), loopName: LoopUI.defaultLoopName }); + this.props.history.push('/'); + } + render() { return (
()} /> ()} /> ()} /> - ()} /> + ()} /> ()} /> ()} /> ()} /> ()} /> + ()} /> ()} /> {this.renderNavBar()} diff --git a/ui-react/src/React-Spinner.jpg b/ui-react/src/React-Spinner.jpg deleted file mode 100644 index 22768976..00000000 Binary files a/ui-react/src/React-Spinner.jpg and /dev/null differ diff --git a/ui-react/src/components/dialogs/DeployLoop.js b/ui-react/src/components/dialogs/DeployLoop.js new file mode 100644 index 00000000..2ec395d2 --- /dev/null +++ b/ui-react/src/components/dialogs/DeployLoop.js @@ -0,0 +1,128 @@ +/*- + * ============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 LoopService from '../../api/LoopService'; +import Button from 'react-bootstrap/Button'; +import Modal from 'react-bootstrap/Modal'; +import Form from 'react-bootstrap/Form'; +import styled from 'styled-components'; + +const ModalStyled = styled(Modal)` + background-color: transparent; +` +const FormStyled = styled(Form.Group)` + padding: .25rem 1.5rem; +` +export default class DeployLoop extends React.Component { + state = { + loopCache: this.props.loopCache, + temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())), + show: true + }; + constructor(props, context) { + super(props, context); + + this.handleSave = this.handleSave.bind(this); + this.handleClose = this.handleClose.bind(this); + this.handleChange = this.handleChange.bind(this); + this.refreshStatus = this.refreshStatus.bind(this); + this.renderDeployParam = this.renderDeployParam.bind(this); + } + componentWillReceiveProps(newProps) { + this.setState({ + loopName: newProps.loopCache.getLoopName(), + show: true + }); + } + handleClose(){ + this.props.history.push('/'); + } + handleSave(e) { + const loopName = this.props.loopCache.getLoopName(); + // save the global propserties + LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => { + this.setState({ show: false }); + + console.log("Perform action: deploy"); + LoopActionService.performAction(loopName, "deploy").then(pars => { + alert("Action deploy successfully performed"); + // refresh status and update loop logs + this.refreshStatus(loopName); + }) + .catch(error => { + alert("Action deploy 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 => { + alert("Refresh status failed"); + this.props.history.push('/'); + }); + } + handleChange(event) { + let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; + deploymentParam[event.target.name] = event.target.value; + + this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}}); + } + renderDeployParam() { + if (typeof (this.state.temporaryPropertiesJson) === "undefined") { + return ""; + } + + const deployJson = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; + var indents = []; + Object.keys(deployJson).map((item,key) => + indents.push( + {item} + + )); + + return indents; + } + + + render() { + return ( + + + Deployment parameters + + {this.renderDeployParam()} + + + + + + ); + } +} diff --git a/ui-react/src/components/dialogs/LoopProperties.js b/ui-react/src/components/dialogs/LoopProperties.js index dac77655..fa82a7e4 100644 --- a/ui-react/src/components/dialogs/LoopProperties.js +++ b/ui-react/src/components/dialogs/LoopProperties.js @@ -30,7 +30,6 @@ import LoopService from '../../api/LoopService'; const ModalStyled = styled(Modal)` background-color: transparent; ` - export default class LoopProperties extends React.Component { state = { @@ -45,7 +44,7 @@ export default class LoopProperties extends React.Component { this.handleClose = this.handleClose.bind(this); this.handleSave = this.handleSave.bind(this); this.handleChange = this.handleChange.bind(this); - + this.renderDcaeParameters = this.renderDcaeParameters.bind(this); this.renderAllParameters = this.renderAllParameters.bind(this); this.getDcaeParameters = this.getDcaeParameters.bind(this); @@ -55,7 +54,7 @@ export default class LoopProperties extends React.Component { this.setState({ loopCache: newProps.loopCache, temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties())), - + }); } @@ -90,7 +89,7 @@ export default class LoopProperties extends React.Component { } else { return ""; } - + } renderDcaeParameters() { diff --git a/ui-react/src/components/dialogs/PerformActions.js b/ui-react/src/components/dialogs/PerformActions.js new file mode 100644 index 00000000..9c34e141 --- /dev/null +++ b/ui-react/src/components/dialogs/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/dialogs/RefreshStatus.js b/ui-react/src/components/dialogs/RefreshStatus.js new file mode 100644 index 00000000..cf08655e --- /dev/null +++ b/ui-react/src/components/dialogs/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 ( + + + + + ); + } +} diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js index 3ac2f31f..1b1e2428 100644 --- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js +++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js @@ -61,13 +61,14 @@ class LoopViewSvg extends React.Component { return this.state.svgContent !== nextState.svgContent; } - componentWillReceiveProps(newProps) { - this.setState({ - loopCache: newProps.loopCache, - componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache), - - }); - this.getSvg(newProps.loopCache.getLoopName()); + componentWillReceiveProps(newProps) { + if (this.state.loopCache !== newProps.loopCache) { + this.setState({ + loopCache: newProps.loopCache, + componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache), + }); + this.getSvg(newProps.loopCache.getLoopName()); + } } getSvg(loopName) { @@ -79,6 +80,8 @@ class LoopViewSvg extends React.Component { this.setState({ svgContent: LoopViewSvg.emptySvg }) } }); + } else { + this.setState({ svgContent: LoopViewSvg.emptySvg }) } } diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js index 5022152e..121787ff 100644 --- a/ui-react/src/components/menu/MenuBar.js +++ b/ui-react/src/components/menu/MenuBar.js @@ -24,6 +24,7 @@ import React from 'react'; import Nav from 'react-bootstrap/Nav'; import Navbar from 'react-bootstrap/Navbar'; import NavDropdown from 'react-bootstrap/NavDropdown'; +import LoopUI from '../../LoopUI'; import 'bootstrap-css-only/css/bootstrap.min.css'; import styled from 'styled-components'; import { Link } from 'react-router-dom' @@ -56,25 +57,37 @@ const StyledNavLink = styled(Nav.Link)` } `; export default class MenuBar extends React.Component { + state = { + loopName: this.props.loopName, + disabled: true + }; + + componentWillReceiveProps(newProps) { + if (newProps.loopName !== LoopUI.defaultLoopName) { + this.setState({ disabled: false }); + } else { + this.setState({ disabled: true }); + } + } render () { return ( Open CL - Properties CL - Close Model + Properties CL + Close Model - Submit - Stop - Restart - Delete - Deploy - UnDeploy + Submit + Stop + Restart + Delete + Deploy + UnDeploy - Refresh Status + Refresh Status Wiki diff --git a/ui-react/src/components/menu/PerformActions.js b/ui-react/src/components/menu/PerformActions.js deleted file mode 100644 index 9c34e141..00000000 --- a/ui-react/src/components/menu/PerformActions.js +++ /dev/null @@ -1,85 +0,0 @@ -/*- - * ============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 deleted file mode 100644 index cf08655e..00000000 --- a/ui-react/src/components/menu/RefreshStatus.js +++ /dev/null @@ -1,66 +0,0 @@ -/*- - * ============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