aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src/components/dialogs/Loop
diff options
context:
space:
mode:
Diffstat (limited to 'ui-react/src/components/dialogs/Loop')
0 files changed, 0 insertions, 0 deletions
58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 
/*-
 * ============LICENSE_START=======================================================
 * ONAP POLICY-CLAMP
 * ================================================================================
 * Copyright (C) 2021 AT&T Intellectual Property. All rights reserved.
 * Modifications Copyright (C) 2022 Nordix Foundation.
 * ================================================================================
 * 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 Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import styled from 'styled-components';
import Alert from 'react-bootstrap/Alert';
import { Button, SvgIcon } from "@material-ui/core";
import PublishIcon from '@material-ui/icons/Publish';
import PolicyService from "../../../api/PolicyService";

const ModalStyled = styled(Modal)`
  background-color: transparent;
`

const StyledMessagesDiv = styled.div`
  overflow: auto;
  max-height: 300px;
`


export default class PolicyToscaFileSelector extends React.Component {

  state = {
    show: this.props.show,
    alertMessages: [],
  }

  constructor(props, context) {
    super(props, context);
    this.handleClose = this.handleClose.bind(this);
    this.onFileChange = this.onFileChange.bind(this);
  }

  componentDidUpdate(prevProps) {
    if (this.props.show !== this.state.show) {
      this.setState({ show: this.props.show });
    }
  }

  handleClose() {
    this.props.disableFunction();
    this.setState({ alertMessages: [] });
  }

  onFileChange(target) {
    console.log('onFileChange target');
    this.setState({ alertMessages: [] });
    target.currentTarget.files.forEach(file => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = (content) => {
        PolicyService.sendNewPolicyModel(atob(content.target.result.split(",")[1])).then(respModelCreate => {
          if (typeof (respModelCreate) === "undefined") {
            //it indicates a failure
            this.setState(state => {
              return {
                alertMessages: [...state.alertMessages, (<Alert variant="danger"><Alert.Heading>{ file.name }</Alert.Heading><p>Policy Tosca Model Creation Failure</p>
                  <hr/>
                  <p>Type: { file.type }</p><p>Size: { file.size }</p></Alert>)]
              };
            });
          } else {
            this.props.toscaTableUpdateFunction();
            this.setState(state => {
              return {
                alertMessages: [...state.alertMessages, (<Alert variant="success"><Alert.Heading>{ file.name }</Alert.Heading><p>Policy Tosca Model Created Successfully</p>
                  <hr/>
                  <p>Type: { file.type }</p><p>Size: { file.size }</p></Alert>)]
              };
            });
          }
        });
      };
    });

  }

  render() {
    return (
      <ModalStyled size="lg" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
        <Modal.Header closeButton>
          <Modal.Title>Create New Policy Tosca Model</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form.Group as={ Row } controlId="formPlaintextEmail">
            <Col sm="10">
              <input type="file" multiple accept=".yaml,.yml" id="fileUploadButton" style={ { display: 'none' } } onChange={ this.onFileChange }/>
              <label htmlFor={ 'fileUploadButton' }>
                <Button color="primary" variant="contained" component="span"
                        startIcon={
                          <SvgIcon fontSize="small">
                            <PublishIcon/>
                          </SvgIcon>
                        }>
                  Upload Files
                </Button>
                <p>(Only YAML files are supported)</p>
              </label>
              <StyledMessagesDiv>
                { this.state.alertMessages }
              </StyledMessagesDiv>
            </Col>
          </Form.Group>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={ this.handleClose }>Close</Button>
        </Modal.Footer>
      </ModalStyled>
    );
  }
}