2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright (C) 2019 AT&T Intellectual Property. All rights
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
12 * http://www.apache.org/licenses/LICENSE-2.0
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 * ===================================================================
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 Tabs from 'react-bootstrap/Tabs';
30 import Tab from 'react-bootstrap/Tab';
31 import styled from 'styled-components';
32 import Spinner from 'react-bootstrap/Spinner'
34 const StyledSpinnerDiv = styled.div`
35 justify-content: center !important;
36 display: flex !important;
39 const ModalStyled = styled(Modal)`
40 background-color: transparent;
42 const FormStyled = styled(Form.Group)`
43 padding: .25rem 1.5rem;
45 export default class DeployLoopModal extends React.Component {
49 constructor(props, context) {
50 super(props, context);
52 this.handleSave = this.handleSave.bind(this);
53 this.handleClose = this.handleClose.bind(this);
54 this.handleChange = this.handleChange.bind(this);
55 this.refreshStatus = this.refreshStatus.bind(this);
56 this.renderDeployParam = this.renderDeployParam.bind(this);
57 this.renderSpinner = this.renderSpinner.bind(this);
59 const propertiesJson = JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()));
61 loopCache: this.props.loopCache,
62 temporaryPropertiesJson: propertiesJson,
64 key: this.getInitialKeyValue(propertiesJson)
67 getInitialKeyValue(temporaryPropertiesJson) {
68 const deployJsonList = temporaryPropertiesJson["dcaeDeployParameters"];
70 Object.keys(deployJsonList)
71 .filter((obj) => Object.keys(deployJsonList).indexOf(obj) === 0)
77 componentWillReceiveProps(newProps) {
79 loopName: newProps.loopCache.getLoopName(),
85 this.setState({ show: false });
86 this.props.history.push('/');
90 if (this.state.deploying) {
93 <Spinner animation="border" role="status">
94 <span className="sr-only">Loading...</span>
104 const loopName = this.props.loopCache.getLoopName();
105 // save the global propserties
106 this.setState({ deploying: true });
107 LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => {
108 LoopActionService.performAction(loopName, "deploy").then(pars => {
109 this.props.showSucAlert("Action deploy successfully performed");
110 // refresh status and update loop logs
111 this.refreshStatus(loopName);
114 this.props.showFailAlert("Action deploy failed");
115 // refresh status and update loop logs
116 this.refreshStatus(loopName);
121 refreshStatus(loopName) {
122 LoopActionService.refreshStatus(loopName).then(data => {
123 this.props.updateLoopFunction(data);
124 this.setState({ show: false, deploying: false });
125 this.props.history.push('/');
128 this.props.showFailAlert("Refresh status failed");
129 this.setState({ show: false, deploying: false });
130 this.props.history.push('/');
133 handleChange(event) {
134 let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
135 deploymentParam[this.state.key][event.target.name] = event.target.value;
137 this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}});
139 renderDeployParamTabs() {
140 if (typeof (this.state.temporaryPropertiesJson) === "undefined") {
144 const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
146 Object.keys(deployJsonList).map((item,key) =>
147 indents.push(<Tab eventKey={item} title={item}>
148 {this.renderDeployParam(deployJsonList[item])}
153 renderDeployParam(deployJson) {
155 Object.keys(deployJson).map((item,key) =>
156 indents.push(<FormStyled>
157 <Form.Label>{item}</Form.Label>
158 <Form.Control type="text" name={item} onChange={this.handleChange} defaultValue={deployJson[item]}></Form.Control>
164 <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} >
165 <Modal.Header closeButton>
166 <Modal.Title>Deployment parameters</Modal.Title>
168 <Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key })}>
169 {this.renderDeployParamTabs()}
171 {this.renderSpinner()}
173 <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
174 <Button variant="primary" type="submit" onClick={this.handleSave}>Deploy</Button>