From fb4b25f6827accf6f975f9ca9a7aaee08d335c2f Mon Sep 17 00:00:00 2001 From: xuegao Date: Wed, 11 Mar 2020 11:22:15 +0100 Subject: Add remove op policy option Update the UI and backend code to be able to remove op policy for loop instances. Issue-ID: CLAMP-648 Change-Id: Ib3eab4977fe4f1b85e11f2373263197009bbc3e1 Signed-off-by: xuegao --- .../src/components/dialogs/Loop/ModifyLoopModal.js | 98 +++++++++++++----- .../dialogs/Loop/ModifyLoopModal.test.js | 109 +++++++++++++++++++++ 2 files changed, 180 insertions(+), 27 deletions(-) create mode 100644 ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js (limited to 'ui-react/src/components/dialogs') diff --git a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js index 4cd21fdb5..7c16b7863 100644 --- a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js @@ -35,6 +35,8 @@ import FirstPage from '@material-ui/icons/FirstPage'; import LastPage from '@material-ui/icons/LastPage'; import Search from '@material-ui/icons/Search'; import LoopService from '../../../api/LoopService'; +import Tabs from 'react-bootstrap/Tabs'; +import Tab from 'react-bootstrap/Tab'; const ModalStyled = styled(Modal)` @@ -61,6 +63,8 @@ export default class ModifyLoopModal extends React.Component { content: 'Please select Tosca model to view the details', selectedRowData: {}, toscaPolicyModelsData: [], + selectedPolicyModelsData: [], + key: 'add', toscaColumns: [ { title: "#", field: "index", render: rowData => rowData.tableData.id + 1, cellStyle: cellStyle, @@ -105,11 +109,12 @@ export default class ModifyLoopModal extends React.Component { constructor(props, context) { super(props, context); this.handleClose = this.handleClose.bind(this); - this.getPolicyToscaModels = this.getToscaPolicyModels.bind(this); + this.initializeToscaPolicyModelsInfo = this.initializeToscaPolicyModelsInfo.bind(this); this.handleYamlContent = this.handleYamlContent.bind(this); this.getToscaPolicyModelYaml = this.getToscaPolicyModelYaml.bind(this); this.handleAdd = this.handleAdd.bind(this); - this.getToscaPolicyModels(); + this.handleRemove = this.handleRemove.bind(this); + this.initializeToscaPolicyModelsInfo(); } componentWillReceiveProps(newProps) { @@ -119,9 +124,16 @@ export default class ModifyLoopModal extends React.Component { }); } - getToscaPolicyModels() { - PolicyToscaService.getToscaPolicyModels().then(allToscaModels => { - this.setState({ toscaPolicyModelsData: allToscaModels}); + initializeToscaPolicyModelsInfo() { + var operationalPolicies = this.state.loopCache.getOperationalPolicies(); + var selectedPolicyModels = []; + for (var policy in operationalPolicies) { + selectedPolicyModels.push(operationalPolicies[policy]["policyModel"]); + } + + PolicyToscaService.getToscaPolicyModels().then(allToscaModels => { + this.setState({ toscaPolicyModelsData: allToscaModels, + selectedPolicyModelsData: selectedPolicyModels}); }); } @@ -149,38 +161,70 @@ export default class ModifyLoopModal extends React.Component { } handleAdd() { - LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version); - this.handleClose(); - this.props.loadLoopFunction(this.state.loopCache.getLoopName()); + LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version); + this.handleClose(); + this.props.loadLoopFunction(this.state.loopCache.getLoopName()); + } + + handleRemove() { + LoopService.removeOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version); + this.handleClose(); + this.props.loadLoopFunction(this.state.loopCache.getLoopName()); } render() { return ( + Modify Loop Operational Policies - - {this.getToscaPolicyModelYaml(rowData.policyModelType, rowData.version);this.setState({selectedRowData: rowData})}} - options={{ - headerStyle: rowHeaderStyle, - rowStyle: rowData => ({ - backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.id === rowData.tableData.id) ? '#EEE' : '#FFF' - }) - }} - /> -
- -
- + this.setState({ key, selectedRowData: {} })}> + + + {this.getToscaPolicyModelYaml(rowData.policyModelType, rowData.version);this.setState({selectedRowData: rowData})}} + options={{ + headerStyle: rowHeaderStyle, + rowStyle: rowData => ({ + backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined + && this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF' + }) + }} + /> +
+ +
+ + + + + {this.setState({selectedRowData: rowData})}} + options={{ + headerStyle: rowHeaderStyle, + rowStyle: rowData => ({ + backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined + && this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF' + }) + }} + /> + + + - + + + ); } diff --git a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js new file mode 100644 index 000000000..055ad0e68 --- /dev/null +++ b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js @@ -0,0 +1,109 @@ +/*- + * ============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 { mount } from 'enzyme'; +import ModifyLoopModal from './ModifyLoopModal'; +import LoopCache from '../../../api/LoopCache'; +import LoopService from '../../../api/LoopService'; +import PolicyToscaService from '../../../api/PolicyToscaService'; + +describe('Verify ModifyLoopModal', () => { + beforeEach(() => { + PolicyToscaService.getToscaPolicyModels = jest.fn().mockImplementation(() => { + return Promise.resolve([{ + "policyModelType":"test", + "policyAcronym":"test", + "version":"1.0.0", + "updatedBy":"", + "updatedDate":"" + }]); + }); + PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => { + return Promise.resolve("OK"); + }); + }) + + const loopCache = new LoopCache({ + "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", + "microServicePolicies": [{ + "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca", + "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app", + "properties": {"domain": "measurementsForVfScaling"}, + "shared": false, + "jsonRepresentation": {"schema": {}} + }], + "globalPropertiesJson": { + "dcaeDeployParameters": { + "testMs": { + "location_id": "", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + } + } + } + }); + const historyMock = { push: jest.fn() }; + const flushPromises = () => new Promise(setImmediate); + + it('Test handleClose', () => { + const handleClose = jest.spyOn(ModifyLoopModal.prototype,'handleClose'); + const component = mount() + + component.find('[variant="secondary"]').get(0).props.onClick(); + + expect(handleClose).toHaveBeenCalledTimes(1); + expect(component.state('show')).toEqual(false); + expect(historyMock.push.mock.calls[0]).toEqual([ '/']); + }); + + it('Test getToscaPolicyModelYaml', async () => { + const flushPromises = () => new Promise(setImmediate); + const component = mount() + component.setState({ + "selectedRowData": {"tableData":{"id":0}} + }); + const instance = component.instance(); + + instance.getToscaPolicyModelYaml("","1.0.0"); + expect(component.state('content')).toEqual("Please select Tosca model to view the details"); + + instance.getToscaPolicyModelYaml("test","1.0.0"); + await flushPromises(); + expect(component.state('content')).toEqual("OK"); + + PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => { + return Promise.resolve(""); + }); + instance.getToscaPolicyModelYaml("test","1.0.0"); + await flushPromises(); + expect(component.state('content')).toEqual("No Tosca model Yaml available"); + }); + + it('Test handleYamlContent', async () => { + const component = mount() + const instance = component.instance(); + + const event = {"target":{"value":"testValue"}} + instance.handleYamlContent(event); + expect(component.state('content')).toEqual("testValue"); + }); +}); \ No newline at end of file -- cgit 1.2.3-korg