diff options
Diffstat (limited to 'ui-react/src/components/dialogs')
6 files changed, 414 insertions, 72 deletions
diff --git a/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js new file mode 100644 index 000000000..76beca711 --- /dev/null +++ b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js @@ -0,0 +1,138 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2020 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 Button from 'react-bootstrap/Button'; +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 TemplateMenuService from '../../../api/TemplateMenuService'; + +const ModalStyled = styled(Modal)` + background-color: transparent; +` +export default class UploadToscaPolicyModal extends React.Component { + constructor(props, context) { + super(props, context); + + this.handleUploadToscaPolicyModel = this.handleUploadToscaPolicyModel.bind(this); + this.handleClose = this.handleClose.bind(this); + this.handlePolicyModelType = this.handlePolicyModelType.bind(this); + this.fileSelectedHandler = this.fileSelectedHandler.bind(this); + this.state = { + show: true, + selectedFile: '', + policyModelType: '', + policyModelTosca: [], + apiResponseStatus: '', + apiResponseMessage: '', + upldBtnClicked: false + }; + } + + fileSelectedHandler = (event) => { + if (event.target.files && event.target.files[0]) { + const scope = this; + let reader = new FileReader(); + this.setState({policyModelType: '', policyModelTosca: '' }); + reader.onload = function(e) { + var lines = reader.result.split('\n'); + for (var line = 0; line < lines.length; line++) { + if(lines[line].trim().slice(0, 24) === 'onap.policies.monitoring') { + var microsvc = lines[line].trim().slice(0, -1); + scope.setState({ policyModelType: microsvc, policyModelTosca: reader.result}); + } + } + }; + console.log("Filename is", event.target.files[0]); + reader.readAsText(event.target.files[0]); + } + this.setState({selectedFile: event.target.files[0]}); + }; + + handleClose() { + this.setState({ show: false }); + this.props.history.push('/'); + } + + handleUploadToscaPolicyModel(e) { + e.preventDefault(); + console.log("Policy Model Type is", this.state.policyModelType); + if(this.state.policyModelType && this.state.policyModelTosca) { + TemplateMenuService.uploadToscaPolicyModal(this.state.policyModelType, this.state.policyModelTosca).then(resp => { + if(resp.status === 200) { + this.setState({apiResponseStatus: resp.status, apiResponseMessage: resp.message, upldBtnClicked: true}); + } else { + this.setState({apiResponseStatus: 500, apiResponseMessage: resp, upldBtnClicked: true}); + } + }); + } else { + this.setState({apiResponse: 500, apiResponseMessage: 'Parameters are missing', upldBtnClicked: true}); + } +} + + handlePolicyModelType = event => { + this.setState({ + policyModelType: event.target.value + }) + } + + render() { + return ( + <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}> + <Modal.Header closeButton> + <Modal.Title>Upload Tosca Modal</Modal.Title> + </Modal.Header> + <Modal.Body> + <Form.Group as={Row} controlId="formPlaintextEmail"> + <Col sm="10"> + <input style={{display: 'none'}} type="file" name="file" accept=".yaml" onChange={this.fileSelectedHandler} + ref={fileInput => this.fileInput = fileInput}/> + <button onClick={() => this.fileInput.click()}>Pick Tosca File</button> + <Alert variant="secondary"> + <p>{this.state.selectedFile.name}</p> + </Alert> + <Form.Label column sm="2">Micro Service Name:</Form.Label> + <input type="text" style={{width: '50%'}} + value={this.state.policyModelType} + onChange={this.handlePolicyModelType} + /> + </Col> + </Form.Group> + </Modal.Body> + <Modal.Footer> + {!this.state.apiResponseStatus?<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>:""} + {!this.state.apiResponseStatus?<Button disabled={!this.state.selectedFile.name || this.state.upldBtnClicked} variant="primary" type="submit" onClick={this.handleUploadToscaPolicyModel.bind(this)}>Upload</Button>:""} + {this.state.apiResponseStatus?<Alert variant={this.state.apiResponseStatus === 200?"success":"danger"}> + <p>{this.state.apiResponseMessage}</p> + <Button onClick={this.handleClose} variant={this.state.apiResponseStatus === 200?"outline-success":"danger"}> + Exit + </Button> + </Alert>:""} + </Modal.Footer> + </ModalStyled> + ); + } +} diff --git a/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.test.js b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.test.js new file mode 100644 index 000000000..dac8ac920 --- /dev/null +++ b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.test.js @@ -0,0 +1,87 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2020 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 { shallow } from 'enzyme'; +import UploadToscaPolicyModal from './UploadToscaPolicyModal'; + + +describe('Test Upload Tosca Policy Model', () => { + + it('Test handleMicroServiceName', () => { + + const component = shallow(<UploadToscaPolicyModal />); + + const inputValue = 'TCA' + + const button = component.find('input').at(1); + + button.simulate('change', { target: { value: inputValue }}); + + expect(component.state('policyModelType')).toEqual(inputValue); + + expect(component).toMatchSnapshot(); + + }); + + it('Test handleUploadToscaPolicyModel for Tosca Model', () => { + + const component = shallow(<UploadToscaPolicyModal />); + + const fakeEvent = { preventDefault: () => console.log('preventDefault') }; + + component.setState({ + policyModelType: "TCA", + upldBtnClicked: false, + policyModelTosca: "TCAToscaModelYaml", + selectedFile: { name: "tca.yaml"} + }); + + const Button = component.find('Button').at(1); + + Button.simulate('click', fakeEvent); + + expect(component.state('policyModelTosca')).toEqual('TCAToscaModelYaml'); + + }); + + it('Test handleClose', () => { + + const historyMock = { push: jest.fn() }; + + const handleClose = jest.spyOn(UploadToscaPolicyModal.prototype,'handleClose'); + + const component = shallow(<UploadToscaPolicyModal history={historyMock} />) + + component.find('[variant="secondary"]').at(1).prop('onClick')(); + + expect(handleClose).toHaveBeenCalledTimes(1); + + expect(component.state('show')).toEqual(false); + + expect(historyMock.push.mock.calls[0]).toEqual([ '/']); + + handleClose.mockClear(); + + }); + +}); diff --git a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js index 6a93d4d98..5b66a25c0 100644 --- a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js +++ b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP CLAMP * ================================================================================ - * Copyright (C) 2019 AT&T Intellectual Property. All rights + * Copyright (C) 2020 AT&T Intellectual Property. All rights * reserved. * ================================================================================ * Licensed under the Apache License, Version 2.0 (the "License"); @@ -58,29 +58,29 @@ export default class ViewToscalPolicyModal extends React.Component { show: true, content: 'Please select Tosca model to view the details', selectedRow: -1, - toscaNames: [], + toscaPolicyModelNames: [], toscaColumns: [ { title: "#", field: "index", render: rowData => rowData.tableData.id + 1, cellStyle: cellStyle, headerStyle: headerStyle }, - { title: "Micro Service Name", field: "toscaModelName", + { title: "Policy Model Type", field: "policyModelType", cellStyle: cellStyle, headerStyle: headerStyle }, - { title: "PolicyType", field: "policyType", + { title: "Policy Acronym", field: "policyAcronym", cellStyle: cellStyle, headerStyle: headerStyle }, - { title: "Version", field: "toscaModelRevisions[0].version", + { title: "Version", field: "version", cellStyle: cellStyle, headerStyle: headerStyle }, - { title: "Uploaded By", field: "userId", + { title: "Uploaded By", field: "updatedBy", cellStyle: cellStyle, headerStyle: headerStyle }, - { title: "Uploaded Date", field: "lastUpdatedDate", editable: 'never', + { title: "Uploaded Date", field: "updatedDate", editable: 'never', cellStyle: cellStyle, headerStyle: headerStyle } @@ -101,6 +101,7 @@ export default class ViewToscalPolicyModal extends React.Component { this.handleClose = this.handleClose.bind(this); this.getPolicyToscaModels = this.getToscaPolicyModels.bind(this); this.handleYamlContent = this.handleYamlContent.bind(this); + this.getToscaPolicyModelYaml = this.getToscaPolicyModelYaml.bind(this); } componentWillMount() { @@ -108,11 +109,25 @@ export default class ViewToscalPolicyModal extends React.Component { } getToscaPolicyModels() { - TemplateMenuService.getToscaPolicyModels().then(toscaNames => { - this.setState({ toscaNames: toscaNames }); + TemplateMenuService.getToscaPolicyModels().then(toscaPolicyModelNames => { + this.setState({ toscaPolicyModelNames: toscaPolicyModelNames }); }); } + getToscaPolicyModelYaml(policyModelType) { + if (typeof policyModelType !== "undefined") { + TemplateMenuService.getToscaPolicyModelYaml(policyModelType).then(toscaYaml => { + if (toscaYaml.length !== 0) { + this.setState({content: toscaYaml}) + } else { + this.setState({ content: 'Please select Tosca model to view the details' }) + } + }); + } else { + this.setState({ content: 'Please select Tosca model to view the details' }) + } + } + handleYamlContent(event) { this.setState({ content: event.target.value }); } @@ -130,10 +145,10 @@ export default class ViewToscalPolicyModal extends React.Component { <Modal.Body> <MaterialTable title={"View Tosca Policy Models"} - data={this.state.toscaNames} + data={this.state.toscaPolicyModelNames} columns={this.state.toscaColumns} icons={this.state.tableIcons} - onRowClick={(event, rowData) => {this.setState({content: rowData.toscaModelRevisions[0].toscaModelYaml, selectedRow: rowData.tableData.id})}} + onRowClick={(event, rowData) => {this.getToscaPolicyModelYaml(rowData.policyModelType);this.setState({selectedRow: rowData.tableData.id})}} options={{ headerStyle: rowHeaderStyle, rowStyle: rowData => ({ diff --git a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js index 1445e8863..952e88867 100644 --- a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js +++ b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP CLAMP * ================================================================================ - * Copyright (C) 2019 AT&T Intellectual Property. All rights + * Copyright (C) 2020 AT&T Intellectual Property. All rights * reserved. * ================================================================================ * Licensed under the Apache License, Version 2.0 (the "License"); @@ -39,12 +39,12 @@ describe('Verify ViewToscaPolicyModal', () => { json: () => { return Promise.resolve({ "index": "1", - "toscaModelYaml":"MTCA", - "toscaModelName":"DCAE_MTCAConfig", - "version":"16", - "userId":"aj928f", - "policyType":"mtca", - "lastUpdatedDate":"05-07-2019 19:09:42" + "policyModelTosca":"TCA", + "policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app", + "version":"1.0.0", + "policyAcronym": "TCA", + "updatedDate": "2020-01-31T20:49:48.658795600Z", + "updatedBy": "admin" }); } }); @@ -60,11 +60,12 @@ describe('Verify ViewToscaPolicyModal', () => { json: () => { return Promise.resolve({ "index": "1", - "toscaModelName":"DCAE_MTCAConfig", - "version":"16", - "userId":"aj928f", - "policyType":"mtca", - "lastUpdatedDate":"05-07-2019 19:09:42" + "policyModelTosca":"TCA", + "policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app", + "version":"1.0.0", + "policyAcronym": "TCA", + "updatedDate": "2020-01-31T20:49:48.658795600Z", + "updatedBy": "admin" }); } }); @@ -95,12 +96,12 @@ describe('Verify ViewToscaPolicyModal', () => { json: () => { return Promise.resolve({ "index": "1", - "toscaModelYaml":"MTCA", - "toscaModelName":"DCAE_MTCAConfig", - "version":"16", - "userId":"aj928f", - "policyType":"mtca", - "lastUpdatedDate":"05-07-2019 19:09:42" + "policyModelTosca":"TCA", + "policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app", + "version":"1.0.0", + "policyAcronym": "TCA", + "updatedDate": "2020-01-31T20:49:48.658795600Z", + "updatedBy": "admin" }); } }); @@ -108,12 +109,12 @@ describe('Verify ViewToscaPolicyModal', () => { const component = shallow(<ViewToscaPolicyModal/>); component.setState({ toscaNames: { "index": "1", - "toscaModelYaml": "MTCA", - "toscaModelName": "DCAE_MTCAConfig", - "version" : "16", - "userId" : "aj928f", - "policyType" : "mtca", - "lastUpdatedDate" : "05-07-2019 19:09:42" + "policyModelTosca":"TCA", + "policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app", + "version":"1.0.0", + "policyAcronym": "TCA", + "updatedDate": "2020-01-31T20:49:48.658795600Z", + "updatedBy": "admin" } }); expect(component).toMatchSnapshot(); @@ -127,12 +128,12 @@ describe('Verify ViewToscaPolicyModal', () => { json: () => { return Promise.resolve({ "index": "1", - "toscaModelYaml":"MTCA", - "toscaModelName":"DCAE_MTCAConfig", - "version":"16", - "userId":"aj928f", - "policyType":"mtca", - "lastUpdatedDate":"05-07-2019 19:09:42" + "policyModelTosca":"TCA", + "policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app", + "version":"1.0.0", + "policyAcronym": "TCA", + "updatedDate": "2020-01-31T20:49:48.658795600Z", + "updatedBy": "admin" }); } }); @@ -149,17 +150,17 @@ describe('Verify ViewToscaPolicyModal', () => { json: () => { return Promise.resolve({ "index": "1", - "toscaModelYaml":"MTCA", - "toscaModelName":"DCAE_MTCAConfig", - "version":"16", - "userId":"aj928f", - "policyType":"mtca", - "lastUpdatedDate":"05-07-2019 19:09:42" + "policyModelTosca":"TCA", + "policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app", + "version":"1.0.0", + "policyAcronym":"TCA", + "updatedDate": "2020-01-31T20:49:48.658795600Z", + "updatedBy": "admin" }); } }); }); - const yamlContent = 'MTCA Tosca model details'; + const yamlContent = 'TCA Tosca model details'; const component = shallow(<ViewToscaPolicyModal/>); component.find('[value="Please select Tosca model to view the details"]').prop('onChange')({ target: { value: yamlContent }}); expect(component.state('content')).toEqual(yamlContent); @@ -173,12 +174,12 @@ describe('Verify ViewToscaPolicyModal', () => { json: () => { return Promise.resolve({ "index": "1", - "toscaModelYaml":"MTCA", - "toscaModelName":"DCAE_MTCAConfig", - "version":"16", - "userId":"aj928f", - "policyType":"mtca", - "lastUpdatedDate":"05-07-2019 19:09:42" + "policyModelTosca":"TCA", + "policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app", + "version":"1.0.0", + "policyAcronym": "TCA", + "updatedDate": "2020-01-31T20:49:48.658795600Z", + "updatedBy": "admin" }); } }); diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/UploadToscaPolicyModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/UploadToscaPolicyModal.test.js.snap new file mode 100644 index 000000000..1b5cd82a8 --- /dev/null +++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/UploadToscaPolicyModal.test.js.snap @@ -0,0 +1,111 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Test Upload Tosca Policy Model Test handleMicroServiceName 1`] = ` +<Styled(Bootstrap(Modal)) + onHide={[Function]} + show={true} + size="lg" +> + <ModalHeader + closeButton={true} + closeLabel="Close" + > + <ModalTitle> + Upload Tosca Modal + </ModalTitle> + </ModalHeader> + <ModalBody> + <FormGroup + as={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "noGutters": false, + }, + "render": [Function], + } + } + controlId="formPlaintextEmail" + > + <Col + sm="10" + > + <input + accept=".yaml" + name="file" + onChange={[Function]} + style={ + Object { + "display": "none", + } + } + type="file" + /> + <button + onClick={[Function]} + > + Pick Tosca File + </button> + <Alert + closeLabel="Close alert" + show={true} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="secondary" + > + <p /> + </Alert> + <FormLabel + column={true} + sm="2" + srOnly={false} + > + Micro Service Name: + </FormLabel> + <input + onChange={[Function]} + style={ + Object { + "width": "50%", + } + } + type="text" + value="TCA" + /> + </Col> + </FormGroup> + </ModalBody> + <ModalFooter> + <Button + active={false} + disabled={false} + onClick={[Function]} + type="null" + variant="secondary" + > + Cancel + </Button> + <Button + active={false} + disabled={true} + onClick={[Function]} + type="submit" + variant="primary" + > + Upload + </Button> + </ModalFooter> +</Styled(Bootstrap(Modal))> +`; diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap index e7294c080..fc5eef024 100644 --- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap +++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap @@ -30,29 +30,29 @@ exports[`Verify ViewToscaPolicyModal Test the tosca model view render method 1`] "cellStyle": Object { "border": "1px solid black", }, - "field": "toscaModelName", + "field": "policyModelType", "headerStyle": Object { "backgroundColor": "#ddd", "border": "2px solid black", }, - "title": "Micro Service Name", + "title": "Policy Model Type", }, Object { "cellStyle": Object { "border": "1px solid black", }, - "field": "policyType", + "field": "policyAcronym", "headerStyle": Object { "backgroundColor": "#ddd", "border": "2px solid black", }, - "title": "PolicyType", + "title": "Policy Acronym", }, Object { "cellStyle": Object { "border": "1px solid black", }, - "field": "toscaModelRevisions[0].version", + "field": "version", "headerStyle": Object { "backgroundColor": "#ddd", "border": "2px solid black", @@ -63,7 +63,7 @@ exports[`Verify ViewToscaPolicyModal Test the tosca model view render method 1`] "cellStyle": Object { "border": "1px solid black", }, - "field": "userId", + "field": "updatedBy", "headerStyle": Object { "backgroundColor": "#ddd", "border": "2px solid black", @@ -75,7 +75,7 @@ exports[`Verify ViewToscaPolicyModal Test the tosca model view render method 1`] "border": "1px solid black", }, "editable": "never", - "field": "lastUpdatedDate", + "field": "updatedDate", "headerStyle": Object { "backgroundColor": "#ddd", "border": "2px solid black", @@ -84,17 +84,7 @@ exports[`Verify ViewToscaPolicyModal Test the tosca model view render method 1`] }, ] } - data={ - Object { - "index": "1", - "lastUpdatedDate": "05-07-2019 19:09:42", - "policyType": "mtca", - "toscaModelName": "DCAE_MTCAConfig", - "toscaModelYaml": "MTCA", - "userId": "aj928f", - "version": "16", - } - } + data={Array []} icons={ Object { "FirstPage": Object { |