ui-react/src/components/dialogs/Loop/DeployLoopModal.js

/*-
 * ============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 Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
import styled from 'styled-components';
import Spinner from 'react-bootstrap/Spinner'

const StyledSpinnerDiv = styled.div`
	justify-content: center !important;
	display: flex !important;
`;

const ModalStyled = styled(Modal)`
	background-color: transparent;
`
const FormStyled = styled(Form.Group)`
	padding: .25rem 1.5rem;
`
export default class DeployLoopModal extends React.Component {


		
	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);
		this.renderSpinner = this.renderSpinner.bind(this);

		const propertiesJson = JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()));
		this.state = {
			loopCache: this.props.loopCache,
			temporaryPropertiesJson: propertiesJson,
			show: true,
			key: this.getInitialKeyValue(propertiesJson)
		};
	}
	getInitialKeyValue(temporaryPropertiesJson) {
		const deployJsonList = temporaryPropertiesJson["dcaeDeployParameters"];
		let initialKey;
		Object.keys(deployJsonList)
			.filter((obj) => Object.keys(deployJsonList).indexOf(obj) === 0)
			.map(obj =>
				initialKey = obj
		);
		return initialKey;
	}
	componentWillReceiveProps(newProps) {
		this.setState({
			loopName: newProps.loopCache.getLoopName(),
			show: true
		});
	}

	handleClose(){
		this.setState({ show: false });
		this.props.history.push('/');
	}

	renderSpinner() {
		if (this.state.deploying) {
			return (
				<StyledSpinnerDiv>
					<Spinner animation="border" role="status">
						<span className="sr-only">Loading...</span>
					</Spinner>
				</StyledSpinnerDiv>
			);
		} else {
			return (<div></div>);
		}
	}

	handleSave() {
		const loopName = this.props.loopCache.getLoopName();
		// save the global propserties
		this.setState({ deploying: true });
		LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => {
			LoopActionService.performAction(loopName, "deploy").then(pars => {
				this.props.showSucAlert("Action deploy successfully performed");
				// refresh status and update loop logs
				this.refreshStatus(loopName);
			})
			.catch(error => {
				this.props.showFailAlert("Action deploy failed");
				// refresh status and update loop logs
				this.refreshStatus(loopName);
			});
		});
	}

	refreshStatus(loopName) {
		LoopActionService.refreshStatus(loopName).then(data => {
			this.props.updateLoopFunction(data);
			this.setState({ show: false, deploying: false });
			this.props.history.push('/');
		})
		.catch(error => {
			this.props.showFailAlert("Refresh status failed");
			this.setState({ show: false, deploying: false  });
			this.props.history.push('/');
		});
	}
	handleChange(event) {
		let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
		deploymentParam[this.state.key][event.target.name] = event.target.value;

		this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}});
	}
	renderDeployParamTabs() {
		if (typeof (this.state.temporaryPropertiesJson) === "undefined") {
			 return "";
		}

		const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
		var indents = [];
		Object.keys(deployJsonList).map((item,key) =>
			indents.push(<Tab eventKey={item} title={item}>
				{this.renderDeployParam(deployJsonList[item])}
				</Tab>)
		);
		return indents;
	}
	renderDeployParam(deployJson) {
		var indents = [];
		Object.keys(deployJson).map((item,key) =>
		indents.push(<FormStyled>
				<Form.Label>{item}</Form.Label>
				<Form.Control type="text" name={item} onChange={this.handleChange} defaultValue={deployJson[item]}></Form.Control>
			</FormStyled>));
		return indents;
	}
	render() {
		return (
					<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
						<Modal.Header closeButton>
							<Modal.Title>Deployment parameters</Modal.Title>
						</Modal.Header>
						<Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key })}>
						{this.renderDeployParamTabs()}
						</Tabs>
						{this.renderSpinner()}
						<Modal.Footer>
							<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
							<Button variant="primary" type="submit" onClick={this.handleSave}>Deploy</Button>
						</Modal.Footer>
					</ModalStyled>
		);
	}
}