Minor UI fixes for dialogues and Tosca upload feature

[clamp.git] / ui-react / src / components / dialogs / Loop / DeployLoopModal.js

diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
index 34304d6..2155977 100644 (file)
--- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
@@ -26,7 +26,15 @@ 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;
@@ -35,11 +43,9 @@ const FormStyled = styled(Form.Group)`
        padding: .25rem 1.5rem;
 `
 export default class DeployLoopModal 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);
 
@@ -48,6 +54,25 @@ export default class DeployLoopModal extends React.Component {
                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({
@@ -55,22 +80,38 @@ export default class DeployLoopModal extends React.Component {
                        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 => {
-                       this.setState({ show: false });
-
                        LoopActionService.performAction(loopName, "deploy").then(pars => {
-                               this.props.showAlert("Action deploy successfully performed");
+                               this.props.showSucAlert("Action deploy successfully performed");
                                // refresh status and update loop logs
                                this.refreshStatus(loopName);
                        })
                        .catch(error => {
-                               this.props.showAlert("Action deploy failed");
+                               this.props.showFailAlert("Action deploy failed");
                                // refresh status and update loop logs
                                this.refreshStatus(loopName);
                        });
@@ -80,43 +121,54 @@ export default class DeployLoopModal extends React.Component {
        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.showAlert("Refresh status failed");
+                       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[event.target.name] = event.target.value;
+               deploymentParam[this.state.key][event.target.name] = event.target.value;
 
                this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}});
        }
-       renderDeployParam() {
+       renderDeployParamTabs() {
                if (typeof (this.state.temporaryPropertiesJson) === "undefined") {
                         return "";
                }
 
-               const deployJson = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
+               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;
+               return indents;
        }
-
-
        render() {
                return (
-                                       <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} >
+                                       <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>
-                                               {this.renderDeployParam()}
+                                               <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>