2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright (C) 2020 AT&T Intellectual Property. All rights reserved.
6 * ================================================================================
7 * Licensed under the Apache License, Version 2.0 (the "License");
8 * you may not use this file except in compliance with the License.
9 * You may obtain a copy of the License at
11 * http://www.apache.org/licenses/LICENSE-2.0
13 * Unless required by applicable law or agreed to in writing, software
14 * distributed under the License is distributed on an "AS IS" BASIS,
15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 * See the License for the specific language governing permissions and
17 * limitations under the License.
18 * ============LICENSE_END============================================
19 * ===================================================================
23 import React from 'react'
24 import Button from 'react-bootstrap/Button';
25 import Modal from 'react-bootstrap/Modal';
26 import Form from 'react-bootstrap/Form';
27 import Row from 'react-bootstrap/Row';
28 import Col from 'react-bootstrap/Col';
29 import styled from 'styled-components';
30 import Alert from 'react-bootstrap/Alert';
31 import PolicyToscaService from '../../../api/PolicyToscaService';
33 const ModalStyled = styled(Modal)`
34 background-color: transparent;
36 export default class UploadToscaPolicyModal extends React.Component {
37 constructor(props, context) {
38 super(props, context);
40 this.handleCreateFromToscaPolicyModel = this.handleCreateFromToscaPolicyModel.bind(this);
41 this.handleClose = this.handleClose.bind(this);
42 this.handlePolicyModelType = this.handlePolicyModelType.bind(this);
43 this.fileSelectedHandler = this.fileSelectedHandler.bind(this);
49 apiResponseStatus: '',
50 apiResponseMessage: '',
55 fileSelectedHandler = (event) => {
56 if (event.target.files && event.target.files[0]) {
58 let reader = new FileReader();
59 this.setState({policyModelType: '', policyModelTosca: '' });
60 reader.onload = function(e) {
61 scope.setState({ policyModelTosca: reader.result});
63 console.log("Filename is", event.target.files[0]);
64 reader.readAsText(event.target.files[0]);
66 this.setState({selectedFile: event.target.files[0]});
70 this.setState({ show: false });
71 this.props.history.push('/');
74 handleCreateFromToscaPolicyModel(e) {
76 console.log("Policy Model Type is", this.state.policyModelType);
77 if(this.state.policyModelType && this.state.policyModelTosca) {
78 PolicyToscaService.createPolicyModelFromToscaModel(this.state.policyModelType, this.state.policyModelTosca).then(resp => {
79 if(resp.status === 200) {
80 this.setState({apiResponseStatus: resp.status, apiResponseMessage: resp.message, upldBtnClicked: true});
82 this.setState({apiResponseStatus: 500, apiResponseMessage: resp, upldBtnClicked: true});
86 this.setState({apiResponse: 500, apiResponseMessage: 'Parameters are missing', upldBtnClicked: true});
90 handlePolicyModelType = event => {
92 policyModelType: event.target.value
98 <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
99 <Modal.Header closeButton>
100 <Modal.Title>Upload Tosca Model</Modal.Title>
103 <Form.Group as={Row} controlId="formPlaintextEmail">
105 <input style={{display: 'none'}} type="file" name="file" accept=".yaml" onChange={this.fileSelectedHandler}
106 ref={fileInput => this.fileInput = fileInput}/>
107 <button onClick={() => this.fileInput.click()}>Pick Tosca File</button>
108 <Alert variant="secondary">
109 <p>{this.state.selectedFile.name}</p>
111 <Form.Label column sm="2">Policy Model Type:</Form.Label>
112 <input type="text" style={{width: '50%'}}
113 value={this.state.policyModelType}
114 onChange={this.handlePolicyModelType}
120 {!this.state.apiResponseStatus?<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>:""}
121 {!this.state.apiResponseStatus?<Button disabled={!this.state.selectedFile.name || this.state.upldBtnClicked} variant="primary" type="submit" onClick={this.handleCreateFromToscaPolicyModel.bind(this)}>Create</Button>:""}
122 {this.state.apiResponseStatus?<Alert variant={this.state.apiResponseStatus === 200?"success":"danger"}>
123 <p>{this.state.apiResponseMessage}</p>
124 <Button onClick={this.handleClose} variant={this.state.apiResponseStatus === 200?"outline-success":"danger"}>