diff options
Diffstat (limited to 'ui-react/src/components')
| -rw-r--r-- | ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js | 127 | ||||
| -rw-r--r-- | ui-react/src/components/dialogs/Policy/ViewAllPolicies.js | 29 |
2 files changed, 153 insertions, 3 deletions
diff --git a/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js b/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js new file mode 100644 index 000000000..8753c7834 --- /dev/null +++ b/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js @@ -0,0 +1,127 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP POLICY-CLAMP + * ================================================================================ + * Copyright (C) 2021 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 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 { Input, InputLabel, 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) { + 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.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>)] + }; + }); + } + }); + }; + }); + this.props.toscaTableUpdateFunction(); + } + + 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> + ); + } +}
\ No newline at end of file diff --git a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js index 0fd0d13e5..04965352b 100644 --- a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js +++ b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js @@ -56,6 +56,7 @@ import PolicyEditor from './PolicyEditor'; import ToscaViewer from './ToscaViewer'; import PolicyDeploymentEditor from './PolicyDeploymentEditor'; import PoliciesTreeViewer from './PoliciesTreeViewer'; +import PolicyToscaFileSelector from './PolicyToscaFileSelector'; const DivWhiteSpaceStyled = styled.div` white-space: pre; @@ -106,6 +107,7 @@ export default class ViewAllPolicies extends React.Component { jsonEditorForPolicy: new Map(), showSuccessAlert: false, showFailAlert: false, + showFileSelector: false, policyColumnsDefinition: [ { title: "Policy Name", field: "name", @@ -196,6 +198,8 @@ export default class ViewAllPolicies extends React.Component { this.generateAdditionalPolicyColumns = this.generateAdditionalPolicyColumns.bind(this); this.filterPolicies = this.filterPolicies.bind(this); this.filterTosca = this.filterTosca.bind(this); + this.showFileSelector = this.showFileSelector.bind(this); + this.disableFileSelector = this.disableFileSelector.bind(this); this.getAllPolicies(); this.getAllToscaModels(); } @@ -263,8 +267,8 @@ export default class ViewAllPolicies extends React.Component { showSuccessAlert: true, showMessage: 'Policy successfully Deleted' }); + this.getAllPolicies(); } - this.getAllPolicies(); } ) } @@ -281,6 +285,14 @@ export default class ViewAllPolicies extends React.Component { this.setState({toscaModelsListDataFiltered: this.state.toscaModelsListData.filter(element => element.policyModelType.startsWith(prefixForFiltering))}); } + showFileSelector() { + this.setState({showFileSelector:true}); + } + + disableFileSelector() { + this.setState({showFileSelector:false}); + } + renderPoliciesTab() { return ( <Tab eventKey="policies" title="Policies in Policy Framework"> @@ -343,7 +355,7 @@ export default class ViewAllPolicies extends React.Component { ]} actions={[ { - icon: forwardRef((props, ref) => <DeleteRoundedIcon {...props} ref={ref} />), + icon: DeleteRoundedIcon, tooltip: 'Delete Policy', onClick: (event, rowData) => this.handleDeletePolicy(event, rowData) } @@ -377,6 +389,14 @@ export default class ViewAllPolicies extends React.Component { headerStyle:rowHeaderStyle, actionsColumnIndex: -1 }} + actions={[ + { + icon: AddIcon, + tooltip: 'Add New Tosca Model', + isFreeAction: true, + onClick: () => this.showFileSelector() + } + ]} detailPanel={[ { icon: ArrowForwardIosIcon, @@ -423,7 +443,8 @@ export default class ViewAllPolicies extends React.Component { } render() { - return ( + return ( + <React.Fragment> <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}> <Modal.Header closeButton> </Modal.Header> @@ -445,6 +466,8 @@ export default class ViewAllPolicies extends React.Component { <Button variant="secondary" onClick={this.handleClose}>Close</Button> </Modal.Footer> </ModalStyled> + <PolicyToscaFileSelector show={this.state.showFileSelector} disableFunction={this.disableFileSelector} toscaTableUpdateFunction={this.getAllToscaModels}/> + </React.Fragment> ); } }
\ No newline at end of file |