xuegao | 691e2b7 | 2019-08-16 11:07:24 +0200 | [diff] [blame] | 1 | /*- |
| 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 | import React from 'react'; |
| 24 | import LoopActionService from '../../api/LoopActionService'; |
| 25 | import LoopService from '../../api/LoopService'; |
| 26 | import Button from 'react-bootstrap/Button'; |
| 27 | import Modal from 'react-bootstrap/Modal'; |
| 28 | import Form from 'react-bootstrap/Form'; |
| 29 | import styled from 'styled-components'; |
| 30 | |
| 31 | const ModalStyled = styled(Modal)` |
| 32 | background-color: transparent; |
| 33 | ` |
| 34 | const FormStyled = styled(Form.Group)` |
| 35 | padding: .25rem 1.5rem; |
| 36 | ` |
| 37 | export default class DeployLoop extends React.Component { |
| 38 | state = { |
| 39 | loopCache: this.props.loopCache, |
| 40 | temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())), |
| 41 | show: true |
| 42 | }; |
| 43 | constructor(props, context) { |
| 44 | super(props, context); |
| 45 | |
| 46 | this.handleSave = this.handleSave.bind(this); |
| 47 | this.handleClose = this.handleClose.bind(this); |
| 48 | this.handleChange = this.handleChange.bind(this); |
| 49 | this.refreshStatus = this.refreshStatus.bind(this); |
| 50 | this.renderDeployParam = this.renderDeployParam.bind(this); |
| 51 | } |
| 52 | componentWillReceiveProps(newProps) { |
| 53 | this.setState({ |
| 54 | loopName: newProps.loopCache.getLoopName(), |
| 55 | show: true |
| 56 | }); |
| 57 | } |
| 58 | handleClose(){ |
| 59 | this.props.history.push('/'); |
| 60 | } |
xuegao | 841ddaa | 2019-09-19 14:23:14 +0200 | [diff] [blame] | 61 | handleSave() { |
xuegao | 691e2b7 | 2019-08-16 11:07:24 +0200 | [diff] [blame] | 62 | const loopName = this.props.loopCache.getLoopName(); |
| 63 | // save the global propserties |
| 64 | LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => { |
| 65 | this.setState({ show: false }); |
| 66 | |
xuegao | 691e2b7 | 2019-08-16 11:07:24 +0200 | [diff] [blame] | 67 | LoopActionService.performAction(loopName, "deploy").then(pars => { |
xuegao | 0efeb6b | 2019-10-07 14:36:34 +0200 | [diff] [blame] | 68 | this.props.showAlert("Action deploy successfully performed"); |
xuegao | 691e2b7 | 2019-08-16 11:07:24 +0200 | [diff] [blame] | 69 | // refresh status and update loop logs |
| 70 | this.refreshStatus(loopName); |
| 71 | }) |
| 72 | .catch(error => { |
xuegao | 0efeb6b | 2019-10-07 14:36:34 +0200 | [diff] [blame] | 73 | this.props.showAlert("Action deploy failed"); |
xuegao | 691e2b7 | 2019-08-16 11:07:24 +0200 | [diff] [blame] | 74 | // refresh status and update loop logs |
| 75 | this.refreshStatus(loopName); |
| 76 | }); |
| 77 | }); |
| 78 | } |
| 79 | |
| 80 | refreshStatus(loopName) { |
| 81 | LoopActionService.refreshStatus(loopName).then(data => { |
| 82 | this.props.updateLoopFunction(data); |
| 83 | this.props.history.push('/'); |
| 84 | }) |
| 85 | .catch(error => { |
xuegao | 0efeb6b | 2019-10-07 14:36:34 +0200 | [diff] [blame] | 86 | this.props.showAlert("Refresh status failed"); |
xuegao | 691e2b7 | 2019-08-16 11:07:24 +0200 | [diff] [blame] | 87 | this.props.history.push('/'); |
| 88 | }); |
| 89 | } |
| 90 | handleChange(event) { |
| 91 | let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; |
| 92 | deploymentParam[event.target.name] = event.target.value; |
| 93 | |
| 94 | this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}}); |
| 95 | } |
| 96 | renderDeployParam() { |
| 97 | if (typeof (this.state.temporaryPropertiesJson) === "undefined") { |
| 98 | return ""; |
| 99 | } |
| 100 | |
| 101 | const deployJson = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; |
| 102 | var indents = []; |
| 103 | Object.keys(deployJson).map((item,key) => |
| 104 | indents.push(<FormStyled> |
| 105 | <Form.Label>{item}</Form.Label> |
| 106 | <Form.Control type="text" name={item} onChange={this.handleChange} defaultValue={deployJson[item]}></Form.Control> |
| 107 | </FormStyled>)); |
| 108 | |
| 109 | return indents; |
| 110 | } |
| 111 | |
| 112 | |
| 113 | render() { |
| 114 | return ( |
| 115 | <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} > |
| 116 | <Modal.Header closeButton> |
| 117 | <Modal.Title>Deployment parameters</Modal.Title> |
| 118 | </Modal.Header> |
| 119 | {this.renderDeployParam()} |
| 120 | <Modal.Footer> |
| 121 | <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button> |
| 122 | <Button variant="primary" type="submit" onClick={this.handleSave}>Deploy</Button> |
| 123 | </Modal.Footer> |
| 124 | </ModalStyled> |
| 125 | ); |
| 126 | } |
| 127 | } |