From d1ed0a9ba6ffea4006fadf3847495563d11dc12e Mon Sep 17 00:00:00 2001 From: sebdet Date: Wed, 21 Apr 2021 16:28:33 +0200 Subject: ToscaFileSelector The UI code that manages the tosca file selector that will be sent to clamp be + fix Rest Camel endpoint that always want ot convert http body to JSON (due to Camel upgrade) Issue-ID: POLICY-3229 Signed-off-by: sebdet Change-Id: I6148276d4c527f29db904a76655055c19d4e2023 --- .../dialogs/Policy/PolicyToscaFileSelector.js | 127 +++++++++++++++++++++ .../components/dialogs/Policy/ViewAllPolicies.js | 29 ++++- 2 files changed, 153 insertions(+), 3 deletions(-) create mode 100644 ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js (limited to 'ui-react/src/components/dialogs') 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,({file.name}

Policy Tosca Model Creation Failure

Type: {file.type}

Size: {file.size}

)] + }; + }); + } else { + this.setState(state => { + return { + alertMessages: [...state.alertMessages,({file.name}

Policy Tosca Model Created Successfully

Type: {file.type}

Size: {file.size}

)] + }; + }); + } + }); + }; + }); + this.props.toscaTableUpdateFunction(); + } + + render() { + return ( + + + Create New Policy Tosca Model + + + + + + + + {this.state.alertMessages} + + + + + + + + + ); + } +} \ 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 ( @@ -343,7 +355,7 @@ export default class ViewAllPolicies extends React.Component { ]} actions={[ { - icon: forwardRef((props, 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 ( + @@ -445,6 +466,8 @@ export default class ViewAllPolicies extends React.Component { + + ); } } \ No newline at end of file -- cgit 1.2.3-korg