diff options
Diffstat (limited to 'runtime/ui-react/src/components')
52 files changed, 0 insertions, 9258 deletions
diff --git a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js deleted file mode 100644 index 690dcbbdf..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js +++ /dev/null @@ -1,193 +0,0 @@ -/*- - * ============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 Select from 'react-select'; -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 LoopService from '../../../api/LoopService'; -import TemplateService from '../../../api/TemplateService'; -import LoopCache from '../../../api/LoopCache'; -import SvgGenerator from '../../loop_viewer/svg/SvgGenerator'; - -const ModalStyled = styled(Modal)` - background-color: transparent; -` - -const ErrMsgStyled = styled.div` - color: red; -` - -export default class CreateLoopModal extends React.Component { - constructor(props, context) { - super(props, context); - - this.getAllLoopTemplates = this.getAllLoopTemplates.bind(this); - this.handleCreate = this.handleCreate.bind(this); - this.handleModelName = this.handleModelName.bind(this); - this.handleClose = this.handleClose.bind(this); - this.handleDropDownListChange = this.handleDropDownListChange.bind(this); - this.renderSvg = this.renderSvg.bind(this); - this.state = { - show: true, - chosenTemplateName: '', - modelInputErrMsg: '', - modelName: '', - templateNames: [], - fakeLoopCacheWithTemplate: new LoopCache({}) - }; - } - - async componentDidMount() { - await this.getAllLoopTemplates(); - await this.getModelNames(); - } - - handleClose() { - this.setState({ show: false }); - this.props.history.push('/'); - } - - handleDropDownListChange(e) { - if (typeof e.value !== "undefined") { - this.setState({ - fakeLoopCacheWithTemplate: - new LoopCache({ - "loopTemplate": e.templateObject, - "name": "fakeLoop" - }), - chosenTemplateName: e.value - }) - } else { - this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) }) - } - } - - getAllLoopTemplates() { - TemplateService.getAllLoopTemplates().then(templatesData => { - const templateOptions = templatesData.map((templateData) => { - return { label: templateData.name, value: templateData.name, templateObject: templateData } - }); - this.setState({ - templateNames: templateOptions - }) - }); - } - - getModelNames() { - TemplateService.getLoopNames().then(loopNames => { - if (!loopNames) { - loopNames = []; - } - // Remove LOOP_ prefix - let trimmedLoopNames = loopNames.map(str => str.replace('LOOP_', '')); - this.setState({ modelNames: trimmedLoopNames }); - }); - } - - handleCreate() { - if (!this.state.modelName) { - alert("A model name is required"); - return; - } - console.debug("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen"); - this.setState({ show: false }); - LoopService.createLoop("LOOP_" + this.state.modelName, this.state.chosenTemplateName).then(text => { - console.debug("CreateLoop response received: ", text); - try { - this.props.history.push('/'); - this.props.loadLoopFunction("LOOP_" + this.state.modelName); - } catch (err) { - alert(text); - this.props.history.push('/'); - } - }) - .catch(error => { - console.debug("Create Loop failed"); - }); - } - - handleModelName(event) { - if (this.state.modelNames.includes(event.target.value)) { - this.setState({ - modelInputErrMsg: 'A model named "' + event.target.value + '" already exists. Please pick another name.', - modelName: event.target.value - }); - return; - } else { - this.setState({ - modelInputErrMsg: '', - modelName: event.target.value - }); - } - } - - renderSvg() { - return ( - <SvgGenerator loopCache={ this.state.fakeLoopCacheWithTemplate } clickable={ false } generatedFrom={ SvgGenerator.GENERATED_FROM_TEMPLATE }/> - ); - } - - render() { - return ( - <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }> - <Modal.Header closeButton> - <Modal.Title>Create Model</Modal.Title> - </Modal.Header> - <Modal.Body> - <Form.Group as={ Row } controlId="formPlaintextEmail"> - <Form.Label column sm="2">Template Name:</Form.Label> - <Col sm="10"> - <Select onChange={ this.handleDropDownListChange } options={ this.state.templateNames }/> - </Col> - </Form.Group> - <Form.Group as={ Row } style={ { alignItems: 'center' } } controlId="formSvgPreview"> - <Form.Label column sm="2">Model Preview:</Form.Label> - <Col sm="10"> - { this.renderSvg() } - </Col> - </Form.Group> - <Form.Group as={ Row } controlId="formPlaintextEmail"> - <Form.Label column sm="2">Model Name:</Form.Label> - <input sm="5" type="text" style={ { width: '50%', marginLeft: '1em' } } - value={ this.state.modelName } - onChange={ this.handleModelName } - /> - <span sm="5"/> - </Form.Group> - <Form.Group as={ Row } controlId="formPlaintextEmail"> - <Form.Label column sm="2"> </Form.Label> - <ErrMsgStyled>{ this.state.modelInputErrMsg }</ErrMsgStyled> - </Form.Group> - </Modal.Body> - <Modal.Footer> - <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button> - <Button variant="primary" type="submit" onClick={ this.handleCreate }>Create</Button> - </Modal.Footer> - </ModalStyled> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js deleted file mode 100644 index 3d9483334..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js +++ /dev/null @@ -1,151 +0,0 @@ -/*- - * ============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 CreateLoopModal from './CreateLoopModal'; -import LoopService from '../../../api/LoopService'; -import TemplateService from '../../../api/TemplateService'; - -let errorMessage = ''; -window.alert = jest.fn().mockImplementation((mesg) => { - errorMessage = mesg; - return -}); - - -describe('Verify CreateLoopModal', () => { - - it('Test the render method', async () => { - const flushPromises = () => new Promise(setImmediate); - TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => { - return Promise.resolve([{ "name": "template1" }, { "name": "template2" }]); - }); - TemplateService.getLoopNames = jest.fn().mockImplementation(() => { - return Promise.resolve([]); - }); - - const component = shallow(<CreateLoopModal/>); - expect(component).toMatchSnapshot(); - await flushPromises(); - component.update(); - expect(component.state('templateNames')).toStrictEqual([{ "label": "template1", "value": "template1", "templateObject": { "name": "template1" } }, { - "label": "template2", - "value": "template2", - "templateObject": { "name": "template2" } - }]); - }); - - it('handleDropdownListChange event', async () => { - const flushPromises = () => new Promise(setImmediate); - - const component = shallow(<CreateLoopModal/>); - component.find('StateManager').simulate('change', { value: 'template1', templateObject: { "name": "template1" } }); - await flushPromises(); - component.update(); - expect(component.state('chosenTemplateName')).toEqual("template1"); - expect(component.state('fakeLoopCacheWithTemplate').getLoopTemplate()['name']).toEqual("template1"); - expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop"); - - component.find('StateManager').simulate('change', { value: 'template2', templateObject: { "name": "template2" } }); - await flushPromises(); - component.update(); - expect(component.state('chosenTemplateName')).toEqual("template2"); - expect(component.state('fakeLoopCacheWithTemplate').getLoopTemplate()['name']).toEqual("template2"); - expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop"); - }); - - it('handleModelName event', async () => { - const flushPromises = () => new Promise(setImmediate); - TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => { - return Promise.resolve([{ "name": "template1" }, { "name": "template2" }]); - }); - TemplateService.getLoopNames = jest.fn().mockImplementation(() => { - return Promise.resolve([]); - }); - const event = { target: { value: "model1" } }; - const component = shallow(<CreateLoopModal/>); - await flushPromises(); - component.find('input').simulate('change', event); - component.update(); - expect(component.state('modelName')).toEqual("model1"); - }); - - it('Test handleClose', () => { - const historyMock = { push: jest.fn() }; - const handleClose = jest.spyOn(CreateLoopModal.prototype, 'handleClose'); - const component = shallow(<CreateLoopModal history={ historyMock }/>) - - component.find('[variant="secondary"]').prop('onClick')(); - - expect(handleClose).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - - handleClose.mockClear(); - }); - - it('Test handleCreate Fail', () => { - const handleCreate = jest.spyOn(CreateLoopModal.prototype, 'handleCreate'); - const component = shallow(<CreateLoopModal/>) - - component.find('[variant="primary"]').prop('onClick')(); - - expect(handleCreate).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(true); - - handleCreate.mockClear(); - }); - - it('Test handleCreate Suc', async () => { - const flushPromises = () => new Promise(setImmediate); - const historyMock = { push: jest.fn() }; - const loadLoopFunction = jest.fn(); - - LoopService.createLoop = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - } - }); - }); - - const handleCreate = jest.spyOn(CreateLoopModal.prototype, 'handleCreate'); - const component = shallow(<CreateLoopModal history={ historyMock } loadLoopFunction={ loadLoopFunction }/>) - component.setState({ - modelName: "modelNameTest", - chosenTemplateName: "template1" - }); - - component.find('[variant="primary"]').prop('onClick')(); - await flushPromises(); - component.update(); - - expect(handleCreate).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - - handleCreate.mockClear(); - }); - -}); diff --git a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js deleted file mode 100644 index 5fff58631..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js +++ /dev/null @@ -1,178 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP POLICY-CLAMP - * ================================================================================ - * Copyright (C) 2019, 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 LoopActionService from '../../../api/LoopActionService'; -import LoopService from '../../../api/LoopService'; -import Button from 'react-bootstrap/Button'; -import Modal from 'react-bootstrap/Modal'; -import Form from 'react-bootstrap/Form'; -import Tabs from 'react-bootstrap/Tabs'; -import Tab from 'react-bootstrap/Tab'; -import styled from 'styled-components'; -import Spinner from 'react-bootstrap/Spinner' - -const StyledSpinnerDiv = styled.div` - justify-content: center !important; - display: flex !important; -`; - -const ModalStyled = styled(Modal)` - background-color: transparent; -` -const FormStyled = styled(Form.Group)` - padding: .25rem 1.5rem; -` -export default class DeployLoopModal extends React.Component { - - - constructor(props, context) { - super(props, context); - - this.handleSave = this.handleSave.bind(this); - this.handleClose = this.handleClose.bind(this); - this.handleChange = this.handleChange.bind(this); - this.refreshStatus = this.refreshStatus.bind(this); - this.renderDeployParam = this.renderDeployParam.bind(this); - this.renderSpinner = this.renderSpinner.bind(this); - - const propertiesJson = JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())); - this.state = { - loopCache: this.props.loopCache, - temporaryPropertiesJson: propertiesJson, - show: true, - key: this.getInitialKeyValue(propertiesJson) - }; - } - - getInitialKeyValue(temporaryPropertiesJson) { - const deployJsonList = temporaryPropertiesJson["dcaeDeployParameters"]; - return Object.keys(deployJsonList).find((obj) => Object.keys(deployJsonList).indexOf(obj) === 0); - } - - componentWillReceiveProps(newProps) { - this.setState({ - loopName: newProps.loopCache.getLoopName(), - show: true - }); - } - - handleClose() { - this.setState({ show: false }); - this.props.history.push('/'); - } - - renderSpinner() { - if (this.state.deploying) { - return ( - <StyledSpinnerDiv> - <Spinner animation="border" role="status"> - <span className="sr-only">Loading...</span> - </Spinner> - </StyledSpinnerDiv> - ); - } else { - return (<div></div>); - } - } - - handleSave() { - const loopName = this.props.loopCache.getLoopName(); - // save the global propserties - this.setState({ deploying: true }); - LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => { - LoopActionService.performAction(loopName, "deploy").then(pars => { - this.props.showSucAlert("Action deploy successfully performed"); - // refresh status and update loop logs - this.refreshStatus(loopName); - }) - .catch(error => { - this.props.showFailAlert("Action deploy failed"); - // refresh status and update loop logs - this.refreshStatus(loopName); - }); - }); - } - - refreshStatus(loopName) { - LoopActionService.refreshStatus(loopName).then(data => { - this.props.updateLoopFunction(data); - this.setState({ show: false, deploying: false }); - this.props.history.push('/'); - }) - .catch(error => { - this.props.showFailAlert("Refresh status failed"); - this.setState({ show: false, deploying: false }); - this.props.history.push('/'); - }); - } - - handleChange(event) { - let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; - deploymentParam[this.state.key][event.target.name] = event.target.value; - - this.setState({ temporaryPropertiesJson: { dcaeDeployParameters: deploymentParam } }); - } - - renderDeployParamTabs() { - if (typeof (this.state.temporaryPropertiesJson) === "undefined") { - return ""; - } - - const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"]; - var indents = []; - Object.keys(deployJsonList).forEach(item => - indents.push(<Tab key={ item } eventKey={ item } title={ item }> - { this.renderDeployParam(deployJsonList[item]) } - </Tab>) - ); - return indents; - } - - renderDeployParam(deployJson) { - var indents = []; - Object.keys(deployJson).forEach(item => - indents.push(<FormStyled key={ item }> - <Form.Label>{ item }</Form.Label> - <Form.Control type="text" name={ item } onChange={ this.handleChange } defaultValue={ deployJson[item] }></Form.Control> - </FormStyled>)); - return indents; - } - - render() { - return ( - <ModalStyled size="lg" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }> - <Modal.Header closeButton> - <Modal.Title>Deployment parameters</Modal.Title> - </Modal.Header> - <Tabs id="controlled-tab-example" activeKey={ this.state.key } onSelect={ key => this.setState({ key }) }> - { this.renderDeployParamTabs() } - </Tabs> - { this.renderSpinner() } - <Modal.Footer> - <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button> - <Button variant="primary" type="submit" onClick={ this.handleSave }>Deploy</Button> - </Modal.Footer> - </ModalStyled> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js deleted file mode 100644 index 0c68f237c..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js +++ /dev/null @@ -1,114 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 DeployLoopModal from './DeployLoopModal'; -import LoopCache from '../../../api/LoopCache'; -import LoopActionService from '../../../api/LoopActionService'; -import LoopService from '../../../api/LoopService'; - -describe('Verify DeployLoopModal', () => { - const loopCache = new LoopCache({ - "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", - "globalPropertiesJson": { - "dcaeDeployParameters": { - "testMs": { - "location_id": "", - "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" - } - } - } - }); - - it('Test the render method', () => { - const component = shallow( - <DeployLoopModal loopCache={ loopCache }/> - ) - - expect(component).toMatchSnapshot(); - }); - - it('Test handleClose', () => { - const historyMock = { push: jest.fn() }; - const handleClose = jest.spyOn(DeployLoopModal.prototype, 'handleClose'); - const component = shallow(<DeployLoopModal history={ historyMock } loopCache={ loopCache }/>) - - component.find('[variant="secondary"]').prop('onClick')(); - - expect(handleClose).toHaveBeenCalledTimes(1); - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - }); - - it('Test handleSave successful', async () => { - const flushPromises = () => new Promise(setImmediate); - const historyMock = { push: jest.fn() }; - const updateLoopFunction = jest.fn(); - const showSucAlert = jest.fn(); - const showFailAlert = jest.fn(); - const handleSave = jest.spyOn(DeployLoopModal.prototype, 'handleSave'); - LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - text: () => "OK" - }); - }); - LoopActionService.performAction = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - } - }); - }); - LoopActionService.refreshStatus = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - } - }); - }); - - const component = shallow(<DeployLoopModal history={ historyMock } - loopCache={ loopCache } updateLoopFunction={ updateLoopFunction } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert }/>) - - component.find('[variant="primary"]').prop('onClick')(); - await flushPromises(); - component.update(); - - expect(handleSave).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - handleSave.mockClear(); - }); - - it('Onchange event', () => { - const event = { target: { name: "location_id", value: "testLocation" } }; - const component = shallow(<DeployLoopModal loopCache={ loopCache }/>); - - component.find('[name="location_id"]').simulate('change', event); - component.update(); - expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.testMs.location_id).toEqual("testLocation"); - }); -}); diff --git a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js deleted file mode 100644 index 69177134b..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js +++ /dev/null @@ -1,118 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 styled from 'styled-components'; -import LoopService from '../../../api/LoopService'; - -const ModalStyled = styled(Modal)` - background-color: transparent; -` -export default class LoopPropertiesModal extends React.Component { - - state = { - show: true, - loopCache: this.props.loopCache, - temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())) - }; - - constructor(props, context) { - super(props, context); - - this.handleClose = this.handleClose.bind(this); - this.handleSave = this.handleSave.bind(this); - this.handleChange = this.handleChange.bind(this); - - this.renderDcaeParameters = this.renderDcaeParameters.bind(this); - this.renderAllParameters = this.renderAllParameters.bind(this); - this.getDcaeParameters = this.getDcaeParameters.bind(this); - this.readOnly = props.readOnly !== undefined ? props.readOnly : false; - } - - componentWillReceiveProps(newProps) { - this.setState({ - loopCache: newProps.loopCache, - temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties())) - }); - } - - handleClose() { - this.props.history.push('/'); - } - - handleSave(event) { - LoopService.updateGlobalProperties(this.state.loopCache.getLoopName(), this.state.temporaryPropertiesJson).then(resp => { - this.setState({ show: false }); - this.props.history.push('/'); - this.props.loadLoopFunction(this.state.loopCache.getLoopName()); - }); - } - - handleChange(event) { - this.setState({ temporaryPropertiesJson: { [event.target.name]: JSON.parse(event.target.value) } }); - } - - renderAllParameters() { - return (<Modal.Body> - <Form> - { this.renderDcaeParameters() } - </Form> - </Modal.Body> - ); - } - - getDcaeParameters() { - if (typeof (this.state.temporaryPropertiesJson) !== "undefined") { - return JSON.stringify(this.state.temporaryPropertiesJson["dcaeDeployParameters"]); - } else { - return ""; - } - - } - - renderDcaeParameters() { - return ( - <Form.Group> - <Form.Label>Deploy Parameters</Form.Label> - <Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={ this.handleChange } defaultValue={ this.getDcaeParameters() }></Form.Control> - </Form.Group> - ); - } - - render() { - return ( - <ModalStyled size="lg" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }> - <Modal.Header closeButton> - <Modal.Title>Model Properties</Modal.Title> - </Modal.Header> - { this.renderAllParameters() } - <Modal.Footer> - <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button> - <Button variant="primary" type="submit" disabled={ this.readOnly } onClick={ this.handleSave }>Save Changes</Button> - </Modal.Footer> - </ModalStyled> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js deleted file mode 100644 index a9c5903a4..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js +++ /dev/null @@ -1,110 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 LoopPropertiesModal from './LoopPropertiesModal'; -import LoopCache from '../../../api/LoopCache'; -import LoopService from '../../../api/LoopService'; - -describe('Verify LoopPropertiesModal', () => { - const loopCache = new LoopCache({ - "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", - "globalPropertiesJson": { - "dcaeDeployParameters": { - "location_id": "", - "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" - } - } - }); - - it('Test the render method', () => { - const component = shallow( - <LoopPropertiesModal loopCache={ loopCache }/> - ) - component.setState({ - show: true, - temporaryPropertiesJson: { - "dcaeDeployParameters": { - "location_id": "", - "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" - } - } - }); - - expect(component.state('temporaryPropertiesJson')).toEqual({ - "dcaeDeployParameters": { - "location_id": "", - "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" - } - }); - expect(component.state('show')).toEqual(true); - - expect(component).toMatchSnapshot(); - }); - - it('Test handleClose', () => { - const historyMock = { push: jest.fn() }; - const handleClose = jest.spyOn(LoopPropertiesModal.prototype, 'handleClose'); - const component = shallow(<LoopPropertiesModal history={ historyMock } loopCache={ loopCache }/>) - - component.find('[variant="secondary"]').prop('onClick')(); - - expect(handleClose).toHaveBeenCalledTimes(1); - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - }); - - it('Test handleSave successful', async () => { - const flushPromises = () => new Promise(setImmediate); - const historyMock = { push: jest.fn() }; - const loadLoopFunction = jest.fn(); - const handleSave = jest.spyOn(LoopPropertiesModal.prototype, 'handleSave'); - LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - text: () => "OK" - }); - }); - - const component = shallow(<LoopPropertiesModal history={ historyMock } - loopCache={ loopCache } loadLoopFunction={ loadLoopFunction }/>) - - component.find('[variant="primary"]').prop('onClick')(); - await flushPromises(); - component.update(); - - expect(handleSave).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - }); - - it('Onchange event', () => { - const event = { target: { name: "dcaeDeployParameters", value: "{\"location_id\": \"testLocation\",\"policy_id\": \"TCA_h2NMX_v1_0_ResourceInstanceName1_tca\"}" } }; - const component = shallow(<LoopPropertiesModal loopCache={ loopCache }/>); - - component.find('FormControl').simulate('change', event); - component.update(); - - expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.location_id).toEqual("testLocation"); - }); -}); diff --git a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js deleted file mode 100644 index 0d203418b..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js +++ /dev/null @@ -1,262 +0,0 @@ -/*- - * ============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, { forwardRef } from 'react' -import MaterialTable from "material-table"; -import Button from 'react-bootstrap/Button'; -import Modal from 'react-bootstrap/Modal'; -import styled from 'styled-components'; -import PolicyToscaService from '../../../api/PolicyToscaService'; -import ArrowUpward from '@material-ui/icons/ArrowUpward'; -import ChevronLeft from '@material-ui/icons/ChevronLeft'; -import ChevronRight from '@material-ui/icons/ChevronRight'; -import Clear from '@material-ui/icons/Clear'; -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'; -import Alert from 'react-bootstrap/Alert'; - -const ModalStyled = styled(Modal)` - background-color: transparent; -` -const TextModal = styled.textarea` - margin-top: 20px; - white-space: pre; - background-color: ${ props => props.theme.toscaTextareaBackgroundColor }; - text-align: justify; - font-size: ${ props => props.theme.toscaTextareaFontSize }; - width: 100%; - height: 300px; -` -const cellStyle = { border: '1px solid black' }; -const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' }; -const rowHeaderStyle = { backgroundColor: '#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black' }; - -export default class ModifyLoopModal extends React.Component { - - state = { - show: true, - loopCache: this.props.loopCache, - content: 'Please select Tosca model to view the details', - selectedRowData: {}, - toscaPolicyModelsData: [], - selectedPolicyModelsData: [], - key: 'add', - showFailAlert: false, - toscaColumns: [ - { - title: "#", field: "index", render: rowData => rowData.tableData.id + 1, - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Policy Model Type", field: "policyModelType", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Policy Acronym", field: "policyAcronym", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Policy Name", field: "policyName", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Version", field: "version", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Uploaded By", field: "updatedBy", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Uploaded Date", field: "updatedDate", editable: 'never', - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Created Date", field: "createdDate", editable: 'never', - cellStyle: cellStyle, - headerStyle: headerStyle - } - ], - tableIcons: { - FirstPage: forwardRef((props, ref) => <FirstPage { ...props } ref={ ref }/>), - LastPage: forwardRef((props, ref) => <LastPage { ...props } ref={ ref }/>), - NextPage: forwardRef((props, ref) => <ChevronRight { ...props } ref={ ref }/>), - PreviousPage: forwardRef((props, ref) => <ChevronLeft { ...props } ref={ ref }/>), - ResetSearch: forwardRef((props, ref) => <Clear { ...props } ref={ ref }/>), - Search: forwardRef((props, ref) => <Search { ...props } ref={ ref }/>), - SortArrow: forwardRef((props, ref) => <ArrowUpward { ...props } ref={ ref }/>) - } - }; - - constructor(props, context) { - super(props, context); - this.handleClose = this.handleClose.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.handleRemove = this.handleRemove.bind(this); - this.initializeToscaPolicyModelsInfo(); - } - - initializeToscaPolicyModelsInfo() { - var operationalPolicies = this.state.loopCache.getOperationalPolicies(); - var selectedPolicyModels = []; - for (var policy in operationalPolicies) { - var newRow = operationalPolicies[policy]["policyModel"]; - newRow["policyName"] = operationalPolicies[policy].name; - selectedPolicyModels.push(newRow); - } - - PolicyToscaService.getToscaPolicyModels().then(allToscaModels => { - this.setState({ - toscaPolicyModelsData: allToscaModels, - selectedPolicyModelsData: selectedPolicyModels - }); - }); - } - - getToscaPolicyModelYaml(policyModelType, policyModelVersion) { - if (typeof policyModelType !== "undefined") { - PolicyToscaService.getToscaPolicyModelYaml(policyModelType, policyModelVersion).then(toscaYaml => { - if (toscaYaml.length !== 0) { - this.setState({ content: toscaYaml }) - } else { - this.setState({ content: 'No Tosca model Yaml available' }) - } - }); - } else { - this.setState({ content: 'Please select Tosca model to view the details' }) - } - } - - handleYamlContent(event) { - this.setState({ content: event.target.value }); - } - - handleClose() { - this.setState({ show: false }); - this.props.history.push('/'); - } - - renderAlert() { - return ( - <div> - <Alert variant="danger" show={ this.state.showFailAlert } onClose={ this.disableAlert } dismissible> - { this.state.showMessage } - </Alert> - </div> - ); - } - - handleAdd() { - LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(), this.state.selectedRowData.policyModelType, this.state.selectedRowData.version) - .then(pars => { - this.props.loadLoopFunction(this.state.loopCache.getLoopName()); - this.handleClose(); - }) - .catch(error => { - this.setState({ showFailAlert: true, showMessage: "Adding failed with error: " + error.message }); - }); - } - - handleRemove() { - LoopService.removeOperationalPolicyType(this.state.loopCache.getLoopName(), this.state.selectedRowData.policyModelType, this.state.selectedRowData.version, this.state.selectedRowData.policyName); - this.props.loadLoopFunction(this.state.loopCache.getLoopName()); - this.handleClose(); - } - - render() { - return ( - <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }> - <Modal.Header closeButton> - <Modal.Title>Modify Loop Operational Policies</Modal.Title> - </Modal.Header> - <Tabs id="controlled-tab-example" activeKey={ this.state.key } onSelect={ key => this.setState({ key, selectedRowData: {} }) }> - <Tab eventKey="add" title="Add Operational Policies"> - <Modal.Body> - <MaterialTable - title={ "View Tosca Policy Models" } - data={ this.state.toscaPolicyModelsData } - columns={ this.state.toscaColumns } - icons={ this.state.tableIcons } - onRowClick={ (event, rowData) => { - 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' - }) - } } - /> - <div> - <TextModal value={ this.state.content } onChange={ this.handleYamlContent }/> - </div> - </Modal.Body> - { this.renderAlert() } - </Tab> - <Tab eventKey="remove" title="Remove Operational Policies"> - <Modal.Body> - <MaterialTable - title={ "Tosca Policy Models already added" } - data={ this.state.selectedPolicyModelsData } - columns={ this.state.toscaColumns } - icons={ this.state.tableIcons } - onRowClick={ (event, rowData) => { - 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' - }) - } } - /> - </Modal.Body> - </Tab> - </Tabs> - <Modal.Footer> - <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button> - <Button variant="primary" disabled={ (this.state.key === "remove") } type="submit" onClick={ this.handleAdd }>Add</Button> - <Button variant="primary" disabled={ (this.state.key === "add") } type="submit" onClick={ this.handleRemove }>Remove</Button> - </Modal.Footer> - - </ModalStyled> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js deleted file mode 100644 index 79267af4f..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js +++ /dev/null @@ -1,109 +0,0 @@ -/*- - * ============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(<ModifyLoopModal history={ historyMock } loopCache={ loopCache }/>) - - 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(<ModifyLoopModal history={ historyMock } loopCache={ loopCache }/>) - 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(<ModifyLoopModal loopCache={ loopCache }/>) - const instance = component.instance(); - - const event = { "target": { "value": "testValue" } } - instance.handleYamlContent(event); - expect(component.state('content')).toEqual("testValue"); - }); -}); diff --git a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js deleted file mode 100644 index b6407fbbb..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js +++ /dev/null @@ -1,139 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 Select from 'react-select'; -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 FormCheck from 'react-bootstrap/FormCheck' -import styled from 'styled-components'; -import LoopService from '../../../api/LoopService'; -import SvgGenerator from '../../loop_viewer/svg/SvgGenerator'; -import LoopCache from '../../../api/LoopCache'; - -const ModalStyled = styled(Modal)` - background-color: transparent; -` -const CheckBoxStyled = styled(FormCheck.Input)` - margin-left: 3rem; -` - -export default class OpenLoopModal extends React.Component { - constructor(props, context) { - super(props, context); - - this.getLoopNames = this.getLoopNames.bind(this); - this.handleOpen = this.handleOpen.bind(this); - this.handleClose = this.handleClose.bind(this); - this.handleDropDownListChange = this.handleDropDownListChange.bind(this); - this.renderSvg = this.renderSvg.bind(this); - this.showReadOnly = props.showReadOnly !== undefined ? props.showReadOnly : true; - this.state = { - show: true, - chosenLoopName: '', - loopNames: [], - loopCacheOpened: new LoopCache({}) - }; - } - - componentWillMount() { - this.getLoopNames(); - } - - handleClose() { - this.setState({ show: false }); - this.props.history.push('/'); - } - - handleDropDownListChange(e) { - LoopService.getLoop(e.value).then(loop => { - this.setState({ - chosenLoopName: e.value, - loopCacheOpened: new LoopCache(loop) - }); - }); - } - - getLoopNames() { - LoopService.getLoopNames().then(loopNames => { - if (Object.entries(loopNames).length !== 0) { - const loopOptions = loopNames.filter(loopName => loopName !== 'undefined').map((loopName) => { - return { label: loopName, value: loopName } - }); - this.setState({ loopNames: loopOptions }) - } - }); - } - - handleOpen() { - console.info("Loop " + this.state.chosenLoopName + " is chosen"); - this.handleClose(); - this.props.loadLoopFunction(this.state.chosenLoopName); - } - - renderSvg() { - return ( - <SvgGenerator loopCache={ this.state.loopCacheOpened } clickable={ false } generatedFrom={ SvgGenerator.GENERATED_FROM_INSTANCE }/> - ); - } - - render() { - return ( - <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }> - <Modal.Header closeButton> - <Modal.Title>Open Model</Modal.Title> - </Modal.Header> - <Modal.Body> - <Form.Group as={ Row } controlId="formPlaintextEmail"> - <Form.Label column sm="2">Model Name:</Form.Label> - <Col sm="10"> - <Select onChange={ this.handleDropDownListChange } - options={ this.state.loopNames }/> - </Col> - </Form.Group> - <Form.Group as={ Row } style={ { alignItems: 'center' } } controlId="formSvgPreview"> - <Form.Label column sm="2">Model Preview:</Form.Label> - <Col sm="10"> - { this.renderSvg() } - </Col> - </Form.Group> - { this.showReadOnly === true ? - <Form.Group as={ Row } controlId="formBasicCheckbox"> - <Form.Check> - <FormCheck.Label>Read Only Mode:</FormCheck.Label> - <CheckBoxStyled style={ { marginLeft: '3.5em' } } type="checkbox"/> - </Form.Check> - </Form.Group> - : null } - </Modal.Body> - <Modal.Footer> - <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button> - <Button variant="primary" type="submit" onClick={ this.handleOpen }>Open</Button> - </Modal.Footer> - </ModalStyled> - - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js deleted file mode 100644 index 6b2dc4afb..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js +++ /dev/null @@ -1,93 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 OpenLoopModal from './OpenLoopModal'; -import LoopService from '../../../api/LoopService'; - -describe('Verify OpenLoopModal', () => { - - beforeEach(() => { - fetch.resetMocks(); - fetch.mockResponse(JSON.stringify([ - "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca", - "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3", - "LOOP_gmtAS_v1_0_ResourceInstanceName2_tca_2" - ])); - }); - - it('Test the render method', () => { - - const component = shallow(<OpenLoopModal/>); - expect(component).toMatchSnapshot(); - }); - - it('Onchange event', async () => { - const flushPromises = () => new Promise(setImmediate); - LoopService.getLoop = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - } - }); - }); - const event = { value: 'LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3' }; - const component = shallow(<OpenLoopModal/>); - component.find('StateManager').simulate('change', event); - await flushPromises(); - component.update(); - expect(component.state('chosenLoopName')).toEqual("LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3"); - }); - - - it('Test handleClose', () => { - const historyMock = { push: jest.fn() }; - const handleClose = jest.spyOn(OpenLoopModal.prototype, 'handleClose'); - const component = shallow(<OpenLoopModal history={ historyMock }/>) - - component.find('[variant="secondary"]').prop('onClick')(); - - expect(handleClose).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - - handleClose.mockClear(); - }); - - it('Test handleSubmit', () => { - const historyMock = { push: jest.fn() }; - const loadLoopFunction = jest.fn(); - const handleOpen = jest.spyOn(OpenLoopModal.prototype, 'handleOpen'); - const component = shallow(<OpenLoopModal history={ historyMock } loadLoopFunction={ loadLoopFunction }/>) - - component.find('[variant="primary"]').prop('onClick')(); - - expect(handleOpen).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - - handleOpen.mockClear(); - }); - -}); diff --git a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap b/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap deleted file mode 100644 index 1ba9dbaf1..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap +++ /dev/null @@ -1,167 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify CreateLoopModal Test the render method 1`] = ` -<Styled(Modal) - backdrop="static" - keyboard={false} - onHide={[Function]} - show={true} - size="xl" -> - <ModalHeader - closeButton={true} - closeLabel="Close" - > - <ModalTitle> - Create Model - </ModalTitle> - </ModalHeader> - <ModalBody> - <FormGroup - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "noGutters": false, - }, - "render": [Function], - } - } - controlId="formPlaintextEmail" - > - <FormLabel - column={true} - sm="2" - srOnly={false} - > - Template Name: - </FormLabel> - <Col - sm="10" - > - <StateManager - defaultInputValue="" - defaultMenuIsOpen={false} - defaultValue={null} - onChange={[Function]} - options={Array []} - /> - </Col> - </FormGroup> - <FormGroup - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "noGutters": false, - }, - "render": [Function], - } - } - controlId="formSvgPreview" - style={ - Object { - "alignItems": "center", - } - } - > - <FormLabel - column={true} - sm="2" - srOnly={false} - > - Model Preview: - </FormLabel> - <Col - sm="10" - > - <withRouter(SvgGenerator) - clickable={false} - generatedFrom="TEMPLATE" - loopCache={ - LoopCache { - "loopJsonCache": Object {}, - } - } - /> - </Col> - </FormGroup> - <FormGroup - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "noGutters": false, - }, - "render": [Function], - } - } - controlId="formPlaintextEmail" - > - <FormLabel - column={true} - sm="2" - srOnly={false} - > - Model Name: - </FormLabel> - <input - onChange={[Function]} - sm="5" - style={ - Object { - "marginLeft": "1em", - "width": "50%", - } - } - type="text" - value="" - /> - <span - sm="5" - /> - </FormGroup> - <FormGroup - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "noGutters": false, - }, - "render": [Function], - } - } - controlId="formPlaintextEmail" - > - <FormLabel - column={true} - sm="2" - srOnly={false} - > - - </FormLabel> - <styled.div /> - </FormGroup> - </ModalBody> - <ModalFooter> - <Button - active={false} - disabled={false} - onClick={[Function]} - type="null" - variant="secondary" - > - Cancel - </Button> - <Button - active={false} - disabled={false} - onClick={[Function]} - type="submit" - variant="primary" - > - Create - </Button> - </ModalFooter> -</Styled(Modal)> -`; diff --git a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap b/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap deleted file mode 100644 index 33f8faa77..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap +++ /dev/null @@ -1,88 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify DeployLoopModal Test the render method 1`] = ` -<Styled(Modal) - backdrop="static" - keyboard={false} - onHide={[Function]} - show={true} - size="lg" -> - <ModalHeader - closeButton={true} - closeLabel="Close" - > - <ModalTitle> - Deployment parameters - </ModalTitle> - </ModalHeader> - <Tabs - activeKey="testMs" - id="controlled-tab-example" - mountOnEnter={false} - onSelect={[Function]} - unmountOnExit={false} - variant="tabs" - > - <Tab - eventKey="testMs" - key="testMs" - title="testMs" - > - <Styled(FormGroup) - key="location_id" - > - <FormLabel - column={false} - srOnly={false} - > - location_id - </FormLabel> - <FormControl - defaultValue="" - name="location_id" - onChange={[Function]} - type="text" - /> - </Styled(FormGroup)> - <Styled(FormGroup) - key="policy_id" - > - <FormLabel - column={false} - srOnly={false} - > - policy_id - </FormLabel> - <FormControl - defaultValue="TCA_h2NMX_v1_0_ResourceInstanceName1_tca" - name="policy_id" - onChange={[Function]} - type="text" - /> - </Styled(FormGroup)> - </Tab> - </Tabs> - <div /> - <ModalFooter> - <Button - active={false} - disabled={false} - onClick={[Function]} - type="null" - variant="secondary" - > - Cancel - </Button> - <Button - active={false} - disabled={false} - onClick={[Function]} - type="submit" - variant="primary" - > - Deploy - </Button> - </ModalFooter> -</Styled(Modal)> -`; diff --git a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap b/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap deleted file mode 100644 index 3baaa5798..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap +++ /dev/null @@ -1,61 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify LoopPropertiesModal Test the render method 1`] = ` -<Styled(Modal) - backdrop="static" - keyboard={false} - onHide={[Function]} - show={true} - size="lg" -> - <ModalHeader - closeButton={true} - closeLabel="Close" - > - <ModalTitle> - Model Properties - </ModalTitle> - </ModalHeader> - <ModalBody> - <Form - inline={false} - > - <FormGroup> - <FormLabel - column={false} - srOnly={false} - > - Deploy Parameters - </FormLabel> - <FormControl - as="textarea" - defaultValue="{\\"location_id\\":\\"\\",\\"policy_id\\":\\"TCA_h2NMX_v1_0_ResourceInstanceName1_tca\\"}" - name="dcaeDeployParameters" - onChange={[Function]} - rows="3" - /> - </FormGroup> - </Form> - </ModalBody> - <ModalFooter> - <Button - active={false} - disabled={false} - onClick={[Function]} - type="null" - variant="secondary" - > - Cancel - </Button> - <Button - active={false} - disabled={false} - onClick={[Function]} - type="submit" - variant="primary" - > - Save Changes - </Button> - </ModalFooter> -</Styled(Modal)> -`; diff --git a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap b/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap deleted file mode 100644 index 581fd0ec0..000000000 --- a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap +++ /dev/null @@ -1,137 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify OpenLoopModal Test the render method 1`] = ` -<Styled(Modal) - backdrop="static" - keyboard={false} - onHide={[Function]} - show={true} - size="xl" -> - <ModalHeader - closeButton={true} - closeLabel="Close" - > - <ModalTitle> - Open Model - </ModalTitle> - </ModalHeader> - <ModalBody> - <FormGroup - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "noGutters": false, - }, - "render": [Function], - } - } - controlId="formPlaintextEmail" - > - <FormLabel - column={true} - sm="2" - srOnly={false} - > - Model Name: - </FormLabel> - <Col - sm="10" - > - <StateManager - defaultInputValue="" - defaultMenuIsOpen={false} - defaultValue={null} - onChange={[Function]} - options={Array []} - /> - </Col> - </FormGroup> - <FormGroup - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "noGutters": false, - }, - "render": [Function], - } - } - controlId="formSvgPreview" - style={ - Object { - "alignItems": "center", - } - } - > - <FormLabel - column={true} - sm="2" - srOnly={false} - > - Model Preview: - </FormLabel> - <Col - sm="10" - > - <withRouter(SvgGenerator) - clickable={false} - generatedFrom="INSTANCE" - loopCache={ - LoopCache { - "loopJsonCache": Object {}, - } - } - /> - </Col> - </FormGroup> - <FormGroup - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "noGutters": false, - }, - "render": [Function], - } - } - controlId="formBasicCheckbox" - > - <FormCheck> - <FormCheckLabel> - Read Only Mode: - </FormCheckLabel> - <Styled(FormCheckInput) - style={ - Object { - "marginLeft": "3.5em", - } - } - type="checkbox" - /> - </FormCheck> - </FormGroup> - </ModalBody> - <ModalFooter> - <Button - active={false} - disabled={false} - onClick={[Function]} - type="null" - variant="secondary" - > - Cancel - </Button> - <Button - active={false} - disabled={false} - onClick={[Function]} - type="submit" - variant="primary" - > - Open - </Button> - </ModalFooter> -</Styled(Modal)> -`; diff --git a/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js b/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js deleted file mode 100644 index d7ba8d1c6..000000000 --- a/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js +++ /dev/null @@ -1,637 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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, { forwardRef } from 'react'; -import Button from 'react-bootstrap/Button'; -import Modal from 'react-bootstrap/Modal'; -import Row from 'react-bootstrap/Row'; -import Col from 'react-bootstrap/Col'; -import styled from 'styled-components'; -import TemplateMenuService from '../../../api/TemplateService'; -import CsvToJson from '../../../utils/CsvToJson'; -import MaterialTable, { MTableToolbar } from "material-table"; -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import AddBox from '@material-ui/icons/AddBox'; -import ArrowUpward from '@material-ui/icons/ArrowUpward'; -import Check from '@material-ui/icons/Check'; -import ChevronLeft from '@material-ui/icons/ChevronLeft'; -import VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop'; -import VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom'; -import ChevronRight from '@material-ui/icons/ChevronRight'; -import Clear from '@material-ui/icons/Clear'; -import DeleteOutline from '@material-ui/icons/DeleteOutline'; -import Edit from '@material-ui/icons/Edit'; -import FilterList from '@material-ui/icons/FilterList'; -import FirstPage from '@material-ui/icons/FirstPage'; -import LastPage from '@material-ui/icons/LastPage'; -import Remove from '@material-ui/icons/Remove'; -import Search from '@material-ui/icons/Search'; -import ViewColumn from '@material-ui/icons/ViewColumn'; - - -const ModalStyled = styled(Modal)` - @media (min-width: 1200px) { - .modal-xl { - max-width: 96%; - } - } - background-color: transparent; -` - -const MTableToolbarStyled = styled(MTableToolbar)` - display: flex; - flex-direction: row; - align-items: center; -` -const ColPullLeftStyled = styled(Col)` - display: flex; - flex-direction: row; - align-items: center; - margin-left: -40px; -` - -const cellStyle = { border: '1px solid black' }; -const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' }; -const rowHeaderStyle = { backgroundColor: '#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black' }; - -let dictList = []; -let subDictFlag = false; - -function SelectSubDictType(props) { - const { onChange } = props; - const selectedValues = (e) => { - let options = e.target.options; - let SelectedDictTypes = ''; - for (let dictType = 0, values = options.length; dictType < values; dictType++) { - if (options[dictType].selected) { - SelectedDictTypes = SelectedDictTypes.concat(options[dictType].value); - SelectedDictTypes = SelectedDictTypes.concat('|'); - } - } - SelectedDictTypes = SelectedDictTypes.slice(0, -1); - onChange(SelectedDictTypes); - } - // When the subDictFlag is true, we need to disable selection of element "type" - return ( - <div> - <select disabled={ subDictFlag } multiple={ true } onChange={ selectedValues }> - <option value="string">string</option> - <option value="number">number</option> - <option value="datetime">datetime</option> - <option value="map">map</option> - <option value="json">json</option> - </select> - </div> - ); -} - -function SubDict(props) { - const { onChange } = props; - const subDicts = []; - subDicts.push('none'); - if (dictList !== undefined && dictList.length > 0) { - let item; - for (item in dictList) { - if (dictList[item].secondLevelDictionary === 1) { - subDicts.push(dictList[item].name); - } - } - } - let optionItems = []; - for (let i = 0; i < subDicts.length; ++i) { - if (i === 0) { - optionItems.push(<option selected key={ subDicts[i] }>{ subDicts[i] }</option>); - } else { - optionItems.push(<option key={ subDicts[i] }>{ subDicts[i] }</option>); - } - } - - function selectedValue(e) { - onChange(e.target.value); - } - - // When the subDictFlag is true, we need to disable selection of - // the sub-dictionary flag - return ( - <select disabled={ subDictFlag } onChange={ selectedValue }> - { optionItems } - </select> - ); -} - -export default class ManageDictionaries extends React.Component { - constructor(props, context) { - super(props, context); - this.addDictionaryElementRow = this.addDictionaryElementRow.bind(this); - this.addDictionaryRow = this.addDictionaryRow.bind(this); - this.addReplaceDictionaryRequest = this.addReplaceDictionaryRequest.bind(this); - this.clickHandler = this.clickHandler.bind(this); - this.deleteDictionaryElementRow = this.deleteDictionaryElementRow.bind(this); - this.deleteDictionaryRequest = this.deleteDictionaryRequest.bind(this); - this.deleteDictionaryRow = this.deleteDictionaryRow.bind(this); - this.fileSelectedHandler = this.fileSelectedHandler.bind(this); - this.getDictionaries = this.getDictionaries.bind(this); - this.getDictionaryElements = this.getDictionaryElements.bind(this); - this.handleClose = this.handleClose.bind(this); - this.handleDictionaryRowClick = this.handleDictionaryRowClick.bind(this); - this.importCsvData = this.importCsvData.bind(this); - this.updateDictionaryElementRow = this.updateDictionaryElementRow.bind(this); - this.updateDictionaryElementsRequest = this.updateDictionaryElementsRequest.bind(this); - this.updateDictionaryRow = this.updateDictionaryRow.bind(this); - this.readOnly = props.readOnly !== undefined ? props.readOnly : false; - this.state = { - show: true, - currentSelectedDictionary: null, - exportFilename: '', - content: null, - dictionaryElements: [], - tableIcons: { - Add: forwardRef((props, ref) => <AddBox { ...props } ref={ ref }/>), - Delete: forwardRef((props, ref) => <DeleteOutline { ...props } ref={ ref }/>), - DetailPanel: forwardRef((props, ref) => <ChevronRight { ...props } ref={ ref }/>), - Edit: forwardRef((props, ref) => <Edit { ...props } ref={ ref }/>), - Check: forwardRef((props, ref) => <Check { ...props } ref={ ref }/>), - Clear: forwardRef((props, ref) => <Clear { ...props } ref={ ref }/>), - Export: forwardRef((props, ref) => <VerticalAlignBottomIcon { ...props } ref={ ref }/>), - Filter: forwardRef((props, ref) => <FilterList { ...props } ref={ ref }/>), - FirstPage: forwardRef((props, ref) => <FirstPage { ...props } ref={ ref }/>), - LastPage: forwardRef((props, ref) => <LastPage { ...props } ref={ ref }/>), - NextPage: forwardRef((props, ref) => <ChevronRight { ...props } ref={ ref }/>), - PreviousPage: forwardRef((props, ref) => <ChevronLeft { ...props } ref={ ref }/>), - ResetSearch: forwardRef((props, ref) => <Clear { ...props } ref={ ref }/>), - Search: forwardRef((props, ref) => <Search { ...props } ref={ ref }/>), - SortArrow: forwardRef((props, ref) => <ArrowUpward { ...props } ref={ ref }/>), - ThirdStateCheck: forwardRef((props, ref) => <Remove { ...props } ref={ ref }/>), - ViewColumn: forwardRef((props, ref) => <ViewColumn { ...props } ref={ ref }/>) - }, - dictColumns: [ - { - title: "Dictionary Name", field: "name", editable: 'onAdd', - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Sub Dictionary ?", field: "secondLevelDictionary", lookup: { 0: 'No', 1: 'Yes' }, - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Dictionary Type", field: "subDictionaryType", lookup: { string: 'string', number: 'number' }, - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Updated By", field: "updatedBy", editable: 'never', - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Last Updated Date", field: "updatedDate", editable: 'never', - cellStyle: cellStyle, - headerStyle: headerStyle - } - ], - dictElementColumns: [ - { - title: "Element Short Name", field: "shortName", editable: 'onAdd', - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Element Name", field: "name", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Element Description", field: "description", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Element Type", field: "type", - editComponent: props => ( - <div> - <SelectSubDictType value={ props.value } onChange={ props.onChange }/> - </div> - ), - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Sub-Dictionary", field: "subDictionary", - editComponent: props => ( - <div> - <SubDict value={ props.value } onChange={ props.onChange }/> - </div> - ), - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Updated By", field: "updatedBy", editable: 'never', - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Updated Date", field: "updatedDate", editable: 'never', - cellStyle: cellStyle, - headerStyle: headerStyle - } - ] - } - } - - componentDidMount() { - this.getDictionaries(); - } - - getDictionaries() { - TemplateMenuService.getDictionary().then(arrayOfdictionaries => { - this.setState({ dictionaries: arrayOfdictionaries, currentSelectedDictionary: null }) - // global variable setting used functional components in this file - dictList = arrayOfdictionaries; - }).catch(() => { - console.error('Failed to retrieve dictionaries'); - this.setState({ dictionaries: [], currentSelectedDictionary: null }) - }); - } - - getDictionaryElements(dictionaryName) { - TemplateMenuService.getDictionaryElements(dictionaryName).then(dictionaryElements => { - this.setState({ dictionaryElements: dictionaryElements.dictionaryElements }); - this.setState({ currentSelectDictionary: dictionaryName }); - }).catch(() => console.error('Failed to retrieve dictionary elements')) - } - - clickHandler(rowData) { - this.getDictionaries(); - } - - handleClose() { - this.setState({ show: false }); - this.props.history.push('/'); - } - - addReplaceDictionaryRequest(dictionaryEntry) { - TemplateMenuService.insDictionary(dictionaryEntry) - .then(resp => { - this.getDictionaries(); - }) - .catch(() => console.error('Failed to insert new dictionary elements')); - } - - updateDictionaryElementsRequest(dictElements) { - let reqData = { "name": this.state.currentSelectedDictionary, 'dictionaryElements': dictElements }; - TemplateMenuService.insDictionaryElements(reqData) - .then(resp => { - this.getDictionaryElements(this.state.currentSelectedDictionary) - }) - .catch(() => console.error('Failed to update dictionary elements')); - } - - deleteDictionaryRequest(dictionaryName) { - TemplateMenuService.deleteDictionary(dictionaryName) - .then(resp => { - this.getDictionaries(); - }) - .catch(() => console.error('Failed to delete dictionary')); - } - - deleteDictionaryElementRequest(dictionaryName, elemenetShortName) { - TemplateMenuService.deleteDictionaryElements({ 'name': dictionaryName, 'shortName': elemenetShortName }) - .then(resp => { - this.getDictionaryElements(dictionaryName); - }) - .catch(() => console.error('Failed to delete dictionary elements')); - } - - fileSelectedHandler = (event) => { - - if (event.target.files[0].type === 'text/csv' || event.target.files[0].type === 'application/vnd.ms-excel') { - if (event.target.files && event.target.files[0]) { - const reader = new FileReader(); - reader.onload = (e) => { - let errorMessages = this.importCsvData(reader.result); - if (errorMessages !== '') { - alert(errorMessages); - } - } - reader.readAsText(event.target.files[0]); - } - } else { - alert('Please upload .csv extention files only.'); - } - } - - importCsvData(rawCsvData) { - - const jsonKeyNames = ['shortName', 'name', 'description', 'type', 'subDictionary']; - const userHeaderNames = ['Element Short Name', 'Element Name', 'Element Description', 'Element Type', 'Sub-Dictionary']; - const validTypes = ['string', 'number', 'datetime', 'json', 'map']; - - let mandatory; - - if (subDictFlag) { - mandatory = [true, true, true, false, false]; - } else { - mandatory = [true, true, true, true, false]; - } - - let result = CsvToJson(rawCsvData, ',', '||||', userHeaderNames, jsonKeyNames, mandatory); - - let errorMessages = result.errorMessages; - let jsonObjArray = result.jsonObjArray; - - let validTypesErrorMesg = ''; - - for (let i = 0; i < validTypes.length; ++i) { - if (i === 0) { - validTypesErrorMesg = validTypes[i]; - } else { - validTypesErrorMesg += ',' + validTypes[i]; - } - } - - if (errorMessages !== '') { - return errorMessages; - } - - // Perform further checks on data that is now in JSON form - let subDictionaries = []; - - // NOTE: dictList is a global variable maintained faithfully - // by the getDictionaries() method outside this import - // functionality. - let item; - for (item in dictList) { - if (dictList[item].secondLevelDictionary === 1) { - subDictionaries.push(dictList[item].name); - } - } - ; - - // Check for valid Sub-Dictionary and Element Type values - subDictionaries = subDictionaries.toString(); - let row = 2; - let dictElem; - for (dictElem of jsonObjArray) { - let itemKey; - for (itemKey in dictElem) { - let value = dictElem[itemKey].trim(); - let keyIndex = jsonKeyNames.indexOf(itemKey); - if (itemKey === 'shortName' && /[^a-zA-Z0-9-_.]/.test(value)) { - errorMessages += '\n' + userHeaderNames[keyIndex] + - ' at row #' + row + - ' can only contain alphanumeric characters and periods, hyphens or underscores'; - } - if (itemKey === 'type' && validTypes.indexOf(value) < 0) { - errorMessages += '\nInvalid value of "' + value + '" for "' + userHeaderNames[keyIndex] + '" at row #' + row; - errorMessages += '\nValid types are: ' + validTypesErrorMesg; - } - if (value !== "" && itemKey === 'subDictionary' && subDictionaries.indexOf(value) < 0) { - errorMessages += '\nInvalid Sub-Dictionary value of "' + value + '" at row #' + row; - } - } - ++row; - } - if (errorMessages === '') { - // We made it through all the checks. Send it to back end - this.updateDictionaryElementsRequest(jsonObjArray); - } - - return errorMessages; - } - - addDictionaryRow(newData) { - let validData = true; - return new Promise((resolve, reject) => { - setTimeout(() => { - if (/[^a-zA-Z0-9-_.]/.test(newData.name)) { - validData = false; - alert('Please enter alphanumeric input. Only allowed special characters are:(period, hyphen, underscore)'); - reject(); - } - for (let i = 0; i < this.state.dictionaries.length; i++) { - if (this.state.dictionaries[i].name === newData.name) { - validData = false; - alert(newData.name + ' dictionary name already exists') - reject(); - } - } - if (validData) { - this.addReplaceDictionaryRequest(newData); - } - resolve(); - }, 1000); - }); - } - - - updateDictionaryRow(newData, oldData) { - let validData = true; - return new Promise((resolve, reject) => { - setTimeout(() => { - if (/[^a-zA-Z0-9-_.]/.test(newData.name)) { - validData = false; - alert('Please enter alphanumberic input. Only allowed special characters are:(period, hyphen, underscore)'); - reject(); - } - if (validData) { - this.addReplaceDictionaryRequest(newData); - } - resolve(); - }, 1000); - }); - } - - deleteDictionaryRow(oldData) { - return new Promise((resolve, reject) => { - setTimeout(() => { - this.deleteDictionaryRequest(oldData.name); - resolve(); - }, 1000); - }); - } - - addDictionaryElementRow(newData) { - return new Promise((resolve, reject) => { - setTimeout(() => { - let dictionaryElements = this.state.dictionaryElements; - let errorMessages = ''; - for (let i = 0; i < this.state.dictionaryElements.length; i++) { - if (this.state.dictionaryElements[i].shortName === newData.shortName) { - alert('Short Name "' + newData.shortName + '" already exists'); - reject(""); - } - } - // MaterialTable returns no property at all if the user has not touched a - // new column, so we want to add the property with an emptry string - // for several cases if that is the case to simplify other checks. - if (newData.description === undefined) { - newData.description = ""; - } - if (newData.subDictionary === undefined) { - newData.subDictionary = null; - } - if (newData.type === undefined) { - newData.type = ""; - } - if (!newData.shortName && /[^a-zA-Z0-9-_.]/.test(newData.shortName)) { - errorMessages += '\nShort Name is limited to alphanumeric characters and also period, hyphen, and underscore'; - } - if (!newData.shortName) { - errorMessages += '\nShort Name must be specified'; - } - if (!newData.name) { - errorMessages += '\nElement Name must be specified'; - } - if (!newData.type && !subDictFlag) { - errorMessages += '\nElement Type must be specified'; - } - if (errorMessages === '') { - dictionaryElements.push(newData); - this.updateDictionaryElementsRequest([newData]); - resolve(); - } else { - alert(errorMessages); - reject(""); - } - }, 1000); - }); - } - - updateDictionaryElementRow(newData, oldData) { - return new Promise((resolve, reject) => { - setTimeout(() => { - let dictionaryElements = this.state.dictionaryElements; - let validData = true; - if (!newData.type) { - validData = false; - alert('Element Type cannot be null'); - reject(); - } - if (validData) { - const index = dictionaryElements.indexOf(oldData); - dictionaryElements[index] = newData; - this.updateDictionaryElementsRequest([newData]); - } - resolve(); - }, 1000); - }); - } - - - deleteDictionaryElementRow(oldData) { - return new Promise((resolve) => { - setTimeout(() => { - this.deleteDictionaryElementRequest(this.state.currentSelectedDictionary, oldData.shortName); - resolve(); - }, 1000); - }); - } - - handleDictionaryRowClick(event, rowData) { - subDictFlag = rowData.secondLevelDictionary === 1 ? true : false; - this.setState({ - currentSelectedDictionary: rowData.name, - exportFilename: rowData.name - }) - this.getDictionaryElements(rowData.name); - } - - render() { - return ( - <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }> - <Modal.Header closeButton> - <Modal.Title>Manage Dictionaries</Modal.Title> - </Modal.Header> - <Modal.Body> - { this.state.currentSelectedDictionary === null ? - <MaterialTable - title={ "Dictionary List" } - data={ this.state.dictionaries } - columns={ this.state.dictColumns } - icons={ this.state.tableIcons } - onRowClick={ this.handleDictionaryRowClick } - options={ { - headerStyle: rowHeaderStyle, - } } - editable={ !this.readOnly ? - { - onRowAdd: this.addDictionaryRow, - onRowUpdate: this.updateDictionaryRow, - onRowDelete: this.deleteDictionaryRow - } : undefined } - /> : null - } - { this.state.currentSelectedDictionary !== null ? - <MaterialTable - title={ 'Dictionary Elements List for ' + (subDictFlag ? 'Sub-Dictionary "' : '"') + this.state.currentSelectedDictionary + '"' } - data={ this.state.dictionaryElements } - columns={ this.state.dictElementColumns } - icons={ this.state.tableIcons } - options={ { - exportAllData: true, - exportButton: true, - exportFileName: this.state.exportFilename, - headerStyle: { backgroundColor: 'white', fontSize: '15pt', text: 'bold', border: '1px solid black' } - } } - components={ { - Toolbar: props => ( - <Row> - <Col sm="11"> - <MTableToolbarStyled { ...props } /> - </Col> - <ColPullLeftStyled sm="1"> - <Tooltip title="Import" placement="bottom"> - <IconButton aria-label="import" disabled={ this.readOnly } onClick={ () => this.fileUpload.click() }> - <VerticalAlignTopIcon/> - </IconButton> - </Tooltip> - <input type="file" ref={ (fileUpload) => { - this.fileUpload = fileUpload; - } } - style={ { visibility: 'hidden', width: '1px' } } onChange={ this.fileSelectedHandler }/> - </ColPullLeftStyled> - </Row> - ) - } } - editable={ !this.readOnly ? - { - onRowAdd: this.addDictionaryElementRow, - onRowUpdate: this.updateDictionaryElementRow, - onRowDelete: this.deleteDictionaryElementRow - } : undefined - } - /> : null - } - { this.state.currentSelectedDictionary !== null ? <button onClick={ this.clickHandler } style={ { marginTop: '25px' } }>Go Back to Dictionaries List</button> : "" } - </Modal.Body> - <Modal.Footer> - <Button variant="secondary" type="null" onClick={ this.handleClose }>Close</Button> - </Modal.Footer> - </ModalStyled> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js b/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js deleted file mode 100644 index 2552d7a3d..000000000 --- a/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js +++ /dev/null @@ -1,465 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 { mount } from 'enzyme'; -import { render } from 'enzyme'; -import ManageDictionaries from './ManageDictionaries'; -import TemplateMenuService from '../../../api/TemplateService' - -const TestDictionaryElements = { - name: "test", - secondLevelDictionary: 0, - subDictionaryType: "", - dictionaryElements: [ - { - shortName: "alertType", - name: "Alert Type", - description: "Type of Alert", - type: "string", - subDictionary: "", - createdDate: "2020-06-12T13:58:51.443931Z", - updatedDate: "2020-06-13T16:27:57.084870Z", - updatedBy: "admin", - createdBy: "admin" - } - ] -}; - -const TestDictionaries = - [ - { - name: "test", - secondLevelDictionary: 0, - subDictionaryType: "string", - dictionaryElements: [TestDictionaryElements], - createdDate: "2020-06-14T21:00:33.231166Z", - updatedDate: "2020-06-14T21:00:33.231166Z", - updatedBy: "admin", - createdBy: "admin" - }, - { - name: "testSub1", - secondLevelDictionary: 1, - subDictionaryType: "string", - dictionaryElements: [ - { - shortName: "subElem", - name: "Sub Element", - description: "Sub Element Description", - type: "string", - createdDate: "2020-06-14T21:04:44.402287Z", - updatedDate: "2020-06-14T21:04:44.402287Z", - updatedBy: "admin", - createdBy: "admin" - } - ], - createdDate: "2020-06-14T21:01:16.390250Z", - updatedDate: "2020-06-14T21:01:16.390250Z", - updatedBy: "admin", - createdBy: "admin" - } - ]; - - -const historyMock = { push: jest.fn() }; - -let errorMessage = ''; - -window.alert = jest.fn().mockImplementation((mesg) => { - errorMessage = mesg; - return -}); - -TemplateMenuService.getDictionary = jest.fn().mockImplementation(() => { - return Promise.resolve(TestDictionaries); -}); - -TemplateMenuService.insDictionary = jest.fn().mockImplementation(() => { - return Promise.resolve({ ok: true, status: 200 }); -}); - -TemplateMenuService.deleteDictionary = jest.fn().mockImplementation(() => { - return Promise.resolve("200"); -}); - -TemplateMenuService.getDictionaryElements = jest.fn().mockImplementation(() => { - return Promise.resolve(TestDictionaryElements); -}); - -TemplateMenuService.deleteDictionaryElements = jest.fn().mockImplementation(() => { - return Promise.resolve("200"); -}); - -TemplateMenuService.insDictionaryElements = jest.fn().mockImplementation(() => { - return Promise.resolve("200"); -}); - - -describe('Verify ManageDictionaries', () => { - - beforeEach(() => { - fetch.resetMocks(); - }); - - it('Test API Successful', () => { - fetch.mockImplementationOnce(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - return Promise.resolve({ - "name": "vtest", - "secondLevelDictionary": 1, - "subDictionaryType": "string", - "updatedBy": "test", - "updatedDate": "05-07-2019 19:09:42" - }); - } - }); - }); - const component = shallow(<ManageDictionaries/>); - expect(component).toMatchSnapshot(); - }); - - it('Test API Exception', () => { - fetch.mockImplementationOnce(() => { - return Promise.resolve({ - ok: false, - status: 500, - json: () => { - return Promise.resolve({ - "name": "vtest", - "secondLevelDictionary": 1, - "subDictionaryType": "string", - "updatedBy": "test", - "updatedDate": "05-07-2019 19:09:42" - }); - } - }); - }); - const component = shallow(<ManageDictionaries/>); - }); - - it('Test Table icons', () => { - - const component = mount(<ManageDictionaries/>); - expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy(); - }); - - test('Test add/replace and delete dictionary requests', async () => { - - const component = shallow(<ManageDictionaries history={ historyMock }/>) - const instance = component.instance(); - - const flushPromises = () => new Promise(setImmediate); - - instance.addReplaceDictionaryRequest({ name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" }); - instance.deleteDictionaryRequest("test"); - - await flushPromises(); - - expect(component.state('currentSelectedDictionary')).toEqual(null); - expect(component.state('dictionaries')).toEqual(TestDictionaries); - }); - - test('Test update dictionary row', async () => { - - const component = shallow(<ManageDictionaries history={ historyMock }/>) - const instance = component.instance(); - const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" }; - - await expect(instance.updateDictionaryRow(rowData, rowData)).resolves.toEqual(undefined); - - }, 2000); - - test('Test add dictionary row', async () => { - - const addReplaceRequest = jest.spyOn(ManageDictionaries.prototype, 'addReplaceDictionaryRequest'); - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" }; - - await instance.addDictionaryRow(rowData); - expect(addReplaceRequest).toHaveBeenCalledWith(rowData); - - }, 2000); - - test('Test add dictionary row with errors name already exists', async () => { - - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - let rowData = { name: "test", secondLevelDictionary: 0, subDictionaryType: "" }; - - await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined); - - }, 2000); - - test('Test add dictionary row with errors illegal chars in name', async () => { - - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - let rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" }; - - await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined); - - }, 2000); - - test('Test update dictionary row with errors illegal chars in name', async () => { - - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - let rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" }; - - await expect(instance.updateDictionaryRow(rowData)).rejects.toEqual(undefined); - }); - - - test('Test add dictionary row with errors (illegal chars)', async () => { - - const addReplaceRequest = jest.spyOn(ManageDictionaries.prototype, 'addReplaceDictionaryRequest'); - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - let rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" }; - - await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined); - - }, 2000); - - - test('Test delete dictionary row', async () => { - - const deleteRequest = jest.spyOn(ManageDictionaries.prototype, 'deleteDictionaryRequest'); - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" }; - - await instance.deleteDictionaryRow(rowData); - expect(deleteRequest).toHaveBeenCalledWith("newdict"); - - }, 2000); - - test('Test handle select dictionary row click', async () => { - - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" }; - - instance.handleDictionaryRowClick("event", rowData); - expect(component.state('currentSelectedDictionary')).toEqual("newdict"); - }, 2000); - - test('Test dictionary element row add, update, delete', async () => { - - const rowData = { - createdBy: "admin", - createdDate: "2020-06-15T13:59:20.467381Z", - description: "Description", - name: "Some Elem", - shortName: "someElem", - type: "string", - updatedBy: "admin", - updatedDate: "2020-06-15T13:59:20.467381Z" - }; - - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - - const badRowData = { - description: "Description", - name: "Some Elem", - shortName: "someElem", - type: "string" - }; - - await instance.clickHandler(); - await instance.getDictionaryElements("test"); - - await expect(instance.addDictionaryElementRow(rowData)).resolves.toEqual(undefined); - await expect(instance.updateDictionaryElementRow(rowData, rowData)).resolves.toEqual(undefined); - await expect(instance.deleteDictionaryElementRow(rowData)).resolves.toEqual(undefined); - }); - - test('Test dictionary element row add with errors', async () => { - - const badRowData = { - description: "", - name: "", - shortName: "some#Elem", - type: "" - }; - - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - - await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual(""); - }); - - test('Test dictionary element update with error illegal name', async () => { - - const badRowData = { - description: "", - name: "test@@", - shortName: "some#Elem", - type: "" - }; - - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - - await expect(instance.updateDictionaryElementRow(badRowData)).rejects.toEqual(undefined); - }); - - test('Test dictionary element addition with duplicate name error', async () => { - - const badRowData = { - description: "description", - name: "Alert Type", - shortName: "alertType", - type: "string" - }; - - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - - component.setState({ currentSelectedDictionary: 'test' }); - - await instance.getDictionaryElements(); - await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual(""); - }); - - test('Test dictionary element addition with empty name error', async () => { - - const badRowData = { - description: "description", - name: "Alert Type", - shortName: "", - type: "string" - }; - - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - - component.setState({ currentSelectedDictionary: 'test' }); - - await instance.getDictionaryElements(); - await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual(""); - }); - - - it('Test Import CSV Sunny Day', async () => { - - TemplateMenuService.insDictionaryElements = jest.fn().mockImplementation(() => { - return Promise.resolve({ ok: true, status: 200 }); - }); - - let rawCsvData = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; - rawCsvData += '"alertType","Alert Type","Alert Type Description","string","","admin","2020-06-11T13:56:14.927437Z"'; - - let expectedResult = [ - { - description: "Alert Type Description", - name: "Alert Type", - shortName: "alertType", - subDictionary: "", - type: "string" - } - ]; - - const updateDictionaryElementsRequest = jest.spyOn(ManageDictionaries.prototype, 'updateDictionaryElementsRequest'); - - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - - await expect(instance.importCsvData(rawCsvData)).toEqual(''); - expect(updateDictionaryElementsRequest).toHaveBeenCalledWith(expectedResult); - }); - - it('Test Import CSV Mandatory Field Check Errors', () => { - - let rawCsvData = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; - rawCsvData += '"","","","","","",""'; - - // The empty values for all the fields in row 1 of the rawCsvData will trigger a bunch of errors. - // Getting Enzyme to properly match them with embedded newlines turned out to be impossible - // and maybe not desirable anyway; so our test for "success" here is simply that the - // routine returns a non-empty error string. - - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - expect(instance.importCsvData(rawCsvData)).not.toEqual(''); - }); - - it('Test Import CSV Errors in Row Data', async () => { - - TemplateMenuService.insDictionaryElements = jest.fn().mockImplementation(() => { - return Promise.resolve({ ok: true, status: 200 }); - }); - - let rawCsvData = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; - rawCsvData += '"alert@Type","Alert Type","Alert Type Description","strin","subby","admin","2020-06-11T13:56:14.927437Z"'; - - let expectedResult = [ - { - description: "Alert Type Description", - name: "Alert Type", - shortName: "alertType", - subDictionary: "", - type: "string" - } - ]; - - const updateDictionaryElementsRequest = jest.spyOn(ManageDictionaries.prototype, 'updateDictionaryElementsRequest'); - - const component = shallow(<ManageDictionaries/>) - const instance = component.instance(); - - await expect(instance.importCsvData(rawCsvData)).not.toEqual(''); - }); - - - it('Test handleClose', () => { - fetch.mockImplementationOnce(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - return Promise.resolve({ - "name": "vtest", - "secondLevelDictionary": 1, - "subDictionaryType": "string", - "updatedBy": "test", - "updatedDate": "05-07-2019 19:09:42" - }); - } - }); - }); - const handleClose = jest.spyOn(ManageDictionaries.prototype, 'handleClose'); - const component = shallow(<ManageDictionaries history={ historyMock }/>) - component.find('[variant="secondary"]').prop('onClick')(); - expect(handleClose).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - handleClose.mockClear(); - }); -}); diff --git a/runtime/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap b/runtime/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap deleted file mode 100644 index 6b583632f..000000000 --- a/runtime/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap +++ /dev/null @@ -1,196 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify ManageDictionaries Test API Successful 1`] = ` -<Styled(Modal) - backdrop="static" - keyboard={false} - onHide={[Function]} - show={true} - size="xl" -> - <ModalHeader - closeButton={true} - closeLabel="Close" - > - <ModalTitle> - Manage Dictionaries - </ModalTitle> - </ModalHeader> - <ModalBody> - <WithStyles(Component) - columns={ - Array [ - Object { - "cellStyle": Object { - "border": "1px solid black", - }, - "editable": "onAdd", - "field": "name", - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "2px solid black", - }, - "title": "Dictionary Name", - }, - Object { - "cellStyle": Object { - "border": "1px solid black", - }, - "field": "secondLevelDictionary", - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "2px solid black", - }, - "lookup": Object { - "0": "No", - "1": "Yes", - }, - "title": "Sub Dictionary ?", - }, - Object { - "cellStyle": Object { - "border": "1px solid black", - }, - "field": "subDictionaryType", - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "2px solid black", - }, - "lookup": Object { - "number": "number", - "string": "string", - }, - "title": "Dictionary Type", - }, - Object { - "cellStyle": Object { - "border": "1px solid black", - }, - "editable": "never", - "field": "updatedBy", - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "2px solid black", - }, - "title": "Updated By", - }, - Object { - "cellStyle": Object { - "border": "1px solid black", - }, - "editable": "never", - "field": "updatedDate", - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "2px solid black", - }, - "title": "Last Updated Date", - }, - ] - } - editable={ - Object { - "onRowAdd": [Function], - "onRowDelete": [Function], - "onRowUpdate": [Function], - } - } - icons={ - Object { - "Add": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "Check": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "Clear": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "Delete": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "DetailPanel": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "Edit": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "Export": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "Filter": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "FirstPage": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "LastPage": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "NextPage": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "PreviousPage": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "ResetSearch": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "Search": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "SortArrow": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "ThirdStateCheck": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "ViewColumn": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - } - } - onRowClick={[Function]} - options={ - Object { - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "1px solid black", - "fontSize": "15pt", - "text": "bold", - }, - } - } - title="Dictionary List" - /> - </ModalBody> - <ModalFooter> - <Button - active={false} - disabled={false} - onClick={[Function]} - type="null" - variant="secondary" - > - Close - </Button> - </ModalFooter> -</Styled(Modal)> -`; diff --git a/runtime/ui-react/src/components/dialogs/PerformActions.js b/runtime/ui-react/src/components/dialogs/PerformActions.js deleted file mode 100644 index ba7c99d7f..000000000 --- a/runtime/ui-react/src/components/dialogs/PerformActions.js +++ /dev/null @@ -1,95 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 LoopActionService from '../../api/LoopActionService'; - - -export default class PerformActions extends React.Component { - state = { - loopName: this.props.loopCache.getLoopName(), - loopAction: this.props.loopAction - }; - - constructor(props, context) { - super(props, context); - this.refreshStatus = this.refreshStatus.bind(this); - } - - componentWillReceiveProps(newProps) { - this.setState({ - loopName: newProps.loopCache.getLoopName(), - loopAction: newProps.loopAction - }); - } - - componentDidMount() { - const action = this.state.loopAction; - const loopName = this.state.loopName; - - if (action === 'delete') { - if (window.confirm('You are about to remove Control Loop Model "' + loopName + - '". Select OK to continue with deletion or Cancel to keep the model.') === false) { - return; - } - } - - this.props.setBusyLoading(); // Alert top level to start block user clicks - - LoopActionService.performAction(loopName, action) - .then(pars => { - this.props.showSucAlert("Action " + action + " successfully performed"); - if (action === 'delete') { - this.props.updateLoopFunction(null); - this.props.history.push('/'); - } else { - // refresh status and update loop logs - this.refreshStatus(loopName); - } - }) - .catch(error => { - this.props.showFailAlert("Action " + action + " failed"); - // refresh status and update loop logs - this.refreshStatus(loopName); - }) - .finally(() => this.props.clearBusyLoading()); - } - - refreshStatus(loopName) { - - this.props.setBusyLoading(); - - LoopActionService.refreshStatus(loopName) - .then(data => { - this.props.updateLoopFunction(data); - this.props.history.push('/'); - }) - .catch(error => { - this.props.history.push('/'); - }) - .finally(() => this.props.clearBusyLoading()); - } - - render() { - return null; - } -} diff --git a/runtime/ui-react/src/components/dialogs/PerformActions.test.js b/runtime/ui-react/src/components/dialogs/PerformActions.test.js deleted file mode 100644 index 74c914584..000000000 --- a/runtime/ui-react/src/components/dialogs/PerformActions.test.js +++ /dev/null @@ -1,95 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 PerformActions from './PerformActions'; -import LoopCache from '../../api/LoopCache'; -import LoopActionService from '../../api/LoopActionService'; - -describe('Verify PerformActions', () => { - - const loopCache = new LoopCache({ - "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca" - }); - - it('Test the render method action failed', async () => { - const flushPromises = () => new Promise(setImmediate); - const historyMock = { push: jest.fn() }; - const updateLoopFunction = jest.fn(); - const showSucAlert = jest.fn(); - const showFailAlert = jest.fn(); - const setBusyLoading = jest.fn(); - const clearBusyLoading = jest.fn(); - - LoopActionService.refreshStatus = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - } - }); - }); - const component = shallow(<PerformActions loopCache={ loopCache } - loopAction="submit" history={ historyMock } updateLoopFunction={ updateLoopFunction } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert } - setBusyLoading={ setBusyLoading } clearBusyLoading={ clearBusyLoading }/>) - await flushPromises(); - component.update(); - - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - }); - - it('Test the render method action successful', async () => { - const flushPromises = () => new Promise(setImmediate); - const historyMock = { push: jest.fn() }; - const updateLoopFunction = jest.fn(); - const showSucAlert = jest.fn(); - const showFailAlert = jest.fn(); - const setBusyLoading = jest.fn(); - const clearBusyLoading = jest.fn(); - - LoopActionService.performAction = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - } - }); - }); - LoopActionService.refreshStatus = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - } - }); - }); - const component = shallow(<PerformActions loopCache={ loopCache } - loopAction="submit" history={ historyMock } updateLoopFunction={ updateLoopFunction } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert } - setBusyLoading={ setBusyLoading } clearBusyLoading={ clearBusyLoading }/>) - await flushPromises(); - component.update(); - - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - }); - -}); diff --git a/runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js b/runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js deleted file mode 100644 index 5bca4e6e1..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js +++ /dev/null @@ -1,109 +0,0 @@ -/*- - * ============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, { forwardRef } from 'react' -import TreeView from '@material-ui/lab/TreeView'; -import TreeItem from '@material-ui/lab/TreeItem'; -import FolderIcon from '@material-ui/icons/Folder'; -import FolderOpenIcon from '@material-ui/icons/FolderOpen'; -import DescriptionIcon from '@material-ui/icons/Description'; - - -export default class PoliciesTreeViewer extends React.Component { - - separator = "."; - - nodesList = new Map(); - - constructor(props, context) { - super(props, context); - this.createPoliciesTree = this.createPoliciesTree.bind(this); - this.handleTreeItemClick = this.handleTreeItemClick.bind(this); - this.buildNameWithParent = this.buildNameWithParent.bind(this); - - } - - state = { - policiesTreeData: this.createPoliciesTree(this.props.policiesData), - } - - componentDidUpdate(prevProps) { - if (prevProps.policiesData !== this.props.policiesData) { - this.setState({ policiesTreeData: this.createPoliciesTree(this.props.policiesData) }) - } - } - - createPoliciesTree(policiesArray) { - // put my policies array in a Json - let nodeId = 1; - let root = { id: nodeId, policyCount: 0, name: "ROOT", children: [], parent: undefined }; - this.nodesList.set(nodeId++, root); - - policiesArray.forEach(policy => { - let currentTreeNode = root; - policy[this.props.valueForTreeCreation].split(this.separator).forEach((policyNamePart, index, policyNamePartsArray) => { - let node = currentTreeNode["children"].find(element => element.name === policyNamePart); - if (typeof (node) === "undefined") { - node = { id: nodeId, policyCount: 0, children: [], name: policyNamePart, parent: currentTreeNode }; - this.nodesList.set(nodeId++, node); - currentTreeNode["children"].push(node); - } - if ((index + 1) === policyNamePartsArray.length) { - ++currentTreeNode["policyCount"]; - } - currentTreeNode = node; - }) - }) - return root; - } - - buildNameWithParent(node) { - let nameToBuild = node.name; - if (node.parent !== undefined) { - nameToBuild = this.buildNameWithParent(node.parent) + this.separator + node.name; - } - return nameToBuild; - } - - handleTreeItemClick(event, value) { - let fullName = this.buildNameWithParent(this.nodesList.get(value[0])).substring(5); - this.props.policiesFilterFunction(fullName); - } - - renderTreeItems(nodes) { - return (<TreeItem key={ nodes.id } nodeId={ nodes.id } label={ nodes.name + "(" + nodes.policyCount + ")" } onNodeSelect={ this.handleTreeItemClick }> - { - Array.isArray(nodes.children) ? nodes.children.map((node) => this.renderTreeItems(node)) : null - } - </TreeItem>); - }; - - render() { - return ( - <TreeView defaultExpanded={ ['root'] } defaultCollapseIcon={ <FolderOpenIcon/> } - defaultExpandIcon={ <FolderIcon/> } defaultEndIcon={ <DescriptionIcon/> } onNodeSelect={ this.handleTreeItemClick } multiSelect> - { this.renderTreeItems(this.state.policiesTreeData) } - </TreeView> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js deleted file mode 100644 index de29947fe..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js +++ /dev/null @@ -1,178 +0,0 @@ -/*- - * ============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, { forwardRef } from 'react'; -import Modal from 'react-bootstrap/Modal'; -import styled from 'styled-components'; -import Button from 'react-bootstrap/Button'; -import Alert from 'react-bootstrap/Alert'; -import PolicyService from '../../../api/PolicyService'; -import FormGroup from '@material-ui/core/FormGroup'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; - -const DivWhiteSpaceStyled = styled.div` - white-space: pre; -` - -const PanelDiv = styled.div` - text-align: justify; - font-size: ${ props => props.theme.policyEditorFontSize }; - background-color: ${ props => props.theme.loopViewerBackgroundColor }; -` - -export default class PolicyDeploymentEditor extends React.Component { - - state = { - policyData: this.props.policyData, - showSuccessAlert: false, - showFailAlert: false, - checkboxesState: this.createPdpStructure(this.props.policyData), - checkboxesInitialState: this.createPdpStructure(this.props.policyData), - }; - - constructor(props, context) { - super(props, context); - this.handleClose = this.handleClose.bind(this); - this.handleUpdatePdpDeployment = this.handleUpdatePdpDeployment.bind(this); - this.disableAlert = this.disableAlert.bind(this); - this.renderPdpDeploymentCheckboxes = this.renderPdpDeploymentCheckboxes.bind(this); - this.createPdpStructure = this.createPdpStructure.bind(this); - this.handleCheckboxChange = this.handleCheckboxChange.bind(this); - this.createPdpGroupOperations = this.createPdpGroupOperations.bind(this); - } - - handleClose() { - this.setState({ show: false }); - - } - - disableAlert() { - this.setState({ showSuccessAlert: false, showFailAlert: false }); - } - - createPdpGroupOperations(initialStates, newStates) { - let commandsArray = []; - initialStates.forEach(initElem => { - let newStateFound = newStates.find(newElement => newElement.name === initElem.name); - if (initElem.value !== newStateFound.value) { - let newPdpGroupsArray = newStateFound.name.split("/"); - let operation = "POST/"; - if (initElem.value) { - operation = "DELETE/"; - } - commandsArray.push(operation + newPdpGroupsArray[0] + "/" + newPdpGroupsArray[1] + "/" - + this.state.policyData.name + "/" + this.state.policyData.version); - } - }); - return commandsArray.length > 0 ? { "PdpActions": commandsArray } : undefined; - } - - handleUpdatePdpDeployment() { - let operationsList = this.createPdpGroupOperations(this.state.checkboxesInitialState, - this.state.checkboxesState); - if (typeof (operationsList) !== "undefined") { - PolicyService.updatePdpDeployment(operationsList).then(respPdpDeploymentUpdate => { - if (typeof (respPdpDeploymentUpdate) === "undefined") { - //it indicates a failure - this.setState({ - showFailAlert: true, - showMessage: 'Pdp Deployment update Failure' - }); - } else { - this.setState({ - showSuccessAlert: true, - showMessage: 'Pdp Deployment Update successful' - }); - this.props.policiesTableUpdateFunction(); - } - }) - } else { - this.setState({ - showSuccessAlert: true, - showMessage: 'Pdp Deployment: Nothing to change' - }); - } - } - - createPdpStructure(policyData) { - // Create map with data for all group/subgroup where the policy is deployed - let infoPdpMap = new Map(); - if (typeof policyData.pdpGroupInfo !== "undefined") { - policyData["pdpGroupInfo"].forEach(pdpGroupElem => { - let pdpGroupName = Object.keys(pdpGroupElem)[0]; - pdpGroupElem[pdpGroupName]["pdpSubgroups"].forEach(pdpSubGroupElem => { - infoPdpMap.set(pdpGroupName + "/" + pdpSubGroupElem["pdpType"], true); - }); - }); - } - // Create the possible values for pdpgroup/subgroup and tick the ones where policy is deployed - let pdpStates = []; - if (typeof policyData.supportedPdpGroups !== "undefined") { - for (const pdpGroup of policyData["supportedPdpGroups"]) { - let pdpGroupName = Object.keys(pdpGroup)[0]; - for (const pdpSubGroup of Object.values(pdpGroup)[0]) { - let fullName = pdpGroupName + "/" + pdpSubGroup; - pdpStates.push({ - name: fullName, - value: infoPdpMap.get(fullName) !== undefined - }); - } - } - } - return pdpStates; - } - - handleCheckboxChange(event) { - const checkboxesArray = this.state.checkboxesState; - checkboxesArray.find(element => element.name === event.target.name).value = event.target.checked; - this.setState({ checkboxesState: checkboxesArray }); - } - - renderPdpDeploymentCheckboxes() { - return this.state.checkboxesState.map(item => { - return <FormControlLabel control={ <Checkbox checked={ item.value } onChange={ this.handleCheckboxChange } - name={ item.name }/> } label={ item.name }/>; - }); - } - - render() { - return ( - <PanelDiv> - <Alert variant="success" show={ this.state.showSuccessAlert } onClose={ this.disableAlert } dismissible> - <DivWhiteSpaceStyled> - { this.state.showMessage } - </DivWhiteSpaceStyled> - </Alert> - <Alert variant="danger" show={ this.state.showFailAlert } onClose={ this.disableAlert } dismissible> - <DivWhiteSpaceStyled> - { this.state.showMessage } - </DivWhiteSpaceStyled> - </Alert> - <Button variant="secondary" title="Update the policy to the specified PDP Groups/Subgroups" - onClick={ this.handleUpdatePdpDeployment }>Update PDP</Button> - <FormGroup>{ this.renderPdpDeploymentCheckboxes() }</FormGroup> - </PanelDiv> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js deleted file mode 100644 index 1e2754151..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js +++ /dev/null @@ -1,192 +0,0 @@ -/*- - * ============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 PolicyToscaService from '../../../api/PolicyToscaService'; -import { JSONEditor } from '@json-editor/json-editor/dist/nonmin/jsoneditor.js'; -import "@fortawesome/fontawesome-free/css/all.css" -import styled from 'styled-components'; -import Button from 'react-bootstrap/Button'; -import TextField from '@material-ui/core/TextField'; -import Alert from 'react-bootstrap/Alert'; -import PolicyService from '../../../api/PolicyService'; -import OnapUtils from '../../../utils/OnapUtils'; - -const DivWhiteSpaceStyled = styled.div` - white-space: pre; -` - -const JsonEditorDiv = styled.div` - margin-top: 20px; - background-color: ${ props => props.theme.loopViewerBackgroundColor }; - text-align: justify; - font-size: ${ props => props.theme.policyEditorFontSize }; - border: 1px solid #C0C0C0; -` -const PanelDiv = styled.div` - text-align: justify; - font-size: ${ props => props.theme.policyEditorFontSize }; - background-color: ${ props => props.theme.loopViewerBackgroundColor }; -` - -export default class PolicyEditor extends React.Component { - - state = { - policyModelType: this.props.policyModelType, - policyModelTypeVersion: this.props.policyModelTypeVersion, - policyName: (typeof this.props.policyName !== "undefined") ? this.props.policyName : "org.onap.policy.new", - policyVersion: (typeof this.props.policyVersion !== "undefined") ? this.props.policyVersion : "0.0.1", - policyProperties: this.props.policyProperties, - showSuccessAlert: false, - showFailAlert: false, - jsonEditor: null, - jsonEditorDivId: this.props.policyModelType + "_" + this.props.policyModelTypeVersion + "_" + this.props.policyName + "_" + this.props.policyVersion, - } - - constructor(props, context) { - super(props, context); - this.createJsonEditor = this.createJsonEditor.bind(this); - this.getToscaModelForPolicy = this.getToscaModelForPolicy.bind(this); - this.disableAlert = this.disableAlert.bind(this); - this.handleCreateNewVersion = this.handleCreateNewVersion.bind(this); - this.handleChangePolicyName = this.handleChangePolicyName.bind(this); - this.handleChangePolicyVersion = this.handleChangePolicyVersion.bind(this); - } - - disableAlert() { - this.setState({ showSuccessAlert: false, showFailAlert: false }); - } - - customValidation(editorData) { - // method for sub-classes to override with customized validation - return []; - } - - handleCreateNewVersion() { - var editorData = this.state.jsonEditor.getValue(); - var errors = this.state.jsonEditor.validate(); - errors = errors.concat(this.customValidation(editorData)); - - if (errors.length !== 0) { - console.error("Errors detected during policy data validation ", errors); - this.setState({ - showFailAlert: true, - showMessage: 'Errors detected during policy data validation:\n' + OnapUtils.jsonEditorErrorFormatter(errors) - }); - return; - } else { - console.info("NO validation errors found in policy data"); - PolicyService.createNewPolicy(this.state.policyModelType, this.state.policyModelTypeVersion, - this.state.policyName, this.state.policyVersion, editorData).then(respPolicyCreation => { - if (typeof (respPolicyCreation) === "undefined") { - //it indicates a failure - this.setState({ - showFailAlert: true, - showMessage: 'Policy Creation Failure' - }); - } else { - this.setState({ - showSuccessAlert: true, - showMessage: 'Policy ' + this.state.policyName + '/' + this.state.policyVersion + ' created successfully' - }); - this.props.policiesTableUpdateFunction(); - } - }) - } - } - - getToscaModelForPolicy() { - PolicyToscaService.getToscaPolicyModel(this.state.policyModelType, this.state.policyModelTypeVersion).then(respJsonPolicyTosca => { - if (respJsonPolicyTosca !== {}) { - this.setState({ - jsonSchemaPolicyTosca: respJsonPolicyTosca, - jsonEditor: this.createJsonEditor(respJsonPolicyTosca, this.state.policyProperties), - }) - } - }); - } - - componentDidMount() { - this.getToscaModelForPolicy(); - } - - createJsonEditor(toscaModel, editorData) { - return new JSONEditor(document.getElementById(this.state.jsonEditorDivId), - { - schema: toscaModel, - startval: editorData, - theme: 'bootstrap4', - iconlib: 'fontawesome5', - object_layout: 'grid', - disable_properties: false, - disable_edit_json: false, - disable_array_reorder: true, - disable_array_delete_last_row: true, - disable_array_delete_all_rows: false, - array_controls_top: true, - keep_oneof_values: false, - collapsed: true, - show_errors: 'always', - display_required_only: false, - show_opt_in: false, - prompt_before_delete: true, - required_by_default: false - }) - } - - handleChangePolicyName(event) { - this.setState({ - policyName: event.target.value, - }); - } - - handleChangePolicyVersion(event) { - this.setState({ - policyVersion: event.target.value, - }); - } - - render() { - return ( - <PanelDiv> - <Alert variant="success" show={ this.state.showSuccessAlert } onClose={ this.disableAlert } dismissible> - <DivWhiteSpaceStyled> - { this.state.showMessage } - </DivWhiteSpaceStyled> - </Alert> - <Alert variant="danger" show={ this.state.showFailAlert } onClose={ this.disableAlert } dismissible> - <DivWhiteSpaceStyled> - { this.state.showMessage } - </DivWhiteSpaceStyled> - </Alert> - <TextField required id="policyName" label="Required" defaultValue={ this.state.policyName } - onChange={ this.handleChangePolicyName } variant="outlined" size="small"/> - <TextField required id="policyVersion" label="Required" defaultValue={ this.state.policyVersion } - onChange={ this.handleChangePolicyVersion } size="small" variant="outlined"/> - <Button variant="secondary" title="Create a new policy version from the defined parameters" - onClick={ this.handleCreateNewVersion }>Create New Version</Button> - <JsonEditorDiv id={ this.state.jsonEditorDivId } title="Policy Properties"/> - </PanelDiv> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js deleted file mode 100644 index 111f2c6bf..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js +++ /dev/null @@ -1,72 +0,0 @@ -/*- - * ============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 PolicyEditor from './PolicyEditor'; -import { shallow, mount } from 'enzyme'; -import PolicyToscaService from '../../../api/PolicyToscaService'; - -describe('Verify PolicyEditor', () => { - const fs = require('fs'); - - let toscaJson = fs.readFileSync('src/components/dialogs/Policy/toscaData.test.json', { encoding: 'utf8', flag: 'r' }) - - const policyProperties = { - "tca.policy": { - "domain": "measurementsForVfScaling", - "metricsPerEventName": [ - { - "policyScope": "DCAE", - "thresholds": [ - { - "version": "1.0.2", - "severity": "MAJOR", - "thresholdValue": 200, - "closedLoopEventStatus": "ONSET", - "closedLoopControlName": "LOOP_test", - "direction": "LESS_OR_EQUAL", - "fieldPath": "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta" - } - ], - "eventName": "vLoadBalancer", - "policyVersion": "v0.0.1", - "controlLoopSchemaType": "VM", - "policyName": "DCAE.Config_tca-hi-lo" - } - ] - } - }; - - - it('Test the render method', async () => { - PolicyToscaService.getToscaPolicyModel = jest.fn().mockImplementation(() => { - return Promise.resolve(toscaJson); - }); - - const component = mount(<PolicyEditor policyModelType="onap.policies.monitoring.tcagen2" policyModelTypeVersion="1.0.0" - policyName="org.onap.new" policyVersion="1.0.0" policyProperties={ policyProperties } - policiesTableUpdateFunction={ () => { - } }/>); - await PolicyToscaService.getToscaPolicyModel(); - expect(component).toMatchSnapshot(); - }); -}); diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js deleted file mode 100644 index 0c7637c44..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js +++ /dev/null @@ -1,349 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP POLICY-CLAMP - * ================================================================================ - * Copyright (C) 2020-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 Button from 'react-bootstrap/Button'; -import Form from 'react-bootstrap/Form'; -import Col from 'react-bootstrap/Col'; -import Row from 'react-bootstrap/Row'; -import Select from 'react-select'; -import Modal from 'react-bootstrap/Modal'; -import styled from 'styled-components'; -import LoopService from '../../../api/LoopService'; -import LoopCache from '../../../api/LoopCache'; -import { JSONEditor } from '@json-editor/json-editor/dist/jsoneditor.js'; -import "@fortawesome/fontawesome-free/css/all.css" -import Alert from 'react-bootstrap/Alert'; -import OnapConstant from '../../../utils/OnapConstants'; -import OnapUtils from '../../../utils/OnapUtils'; - -const ModalStyled = styled(Modal)` - background-color: transparent; -` - -const DivWhiteSpaceStyled = styled.div` - white-space: pre; -` - -export default class PolicyModal extends React.Component { - - state = { - show: true, - loopCache: this.props.loopCache, - jsonEditor: null, - policyName: this.props.match.params.policyName, - // This is to indicate whether it's an operational or config policy (in terms of loop instance) - policyInstanceType: this.props.match.params.policyInstanceType, - pdpGroup: null, - pdpGroupList: [], - pdpSubgroupList: [], - chosenPdpGroup: '', - chosenPdpSubgroup: '', - showSucAlert: false, - showFailAlert: false - }; - - constructor(props, context) { - super(props, context); - this.handleClose = this.handleClose.bind(this); - this.handleSave = this.handleSave.bind(this); - this.renderJsonEditor = this.renderJsonEditor.bind(this); - this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this); - this.handlePdpSubgroupChange = this.handlePdpSubgroupChange.bind(this); - this.createJsonEditor = this.createJsonEditor.bind(this); - this.handleRefresh = this.handleRefresh.bind(this); - this.disableAlert = this.disableAlert.bind(this); - this.renderPdpGroupDropDown = this.renderPdpGroupDropDown.bind(this); - this.renderOpenLoopMessage = this.renderOpenLoopMessage.bind(this); - this.renderModalTitle = this.renderModalTitle.bind(this); - this.readOnly = props.readOnly !== undefined ? props.readOnly : false; - } - - handleSave() { - var editorData = this.state.jsonEditor.getValue(); - var errors = this.state.jsonEditor.validate(); - errors = errors.concat(this.customValidation(editorData, this.state.loopCache.getTemplateName())); - - if (errors.length !== 0) { - console.error("Errors detected during policy data validation ", errors); - this.setState({ - showFailAlert: true, - showMessage: 'Errors detected during policy data validation:\n' + OnapUtils.jsonEditorErrorFormatter(errors) - }); - return; - } else { - console.info("NO validation errors found in policy data"); - if (this.state.policyInstanceType === OnapConstant.microServiceType) { - this.state.loopCache.updateMicroServiceProperties(this.state.policyName, editorData); - this.state.loopCache.updateMicroServicePdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup); - LoopService.setMicroServiceProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getMicroServiceForName(this.state.policyName)).then(resp => { - this.setState({ show: false }); - this.props.history.push('/'); - this.props.loadLoopFunction(this.state.loopCache.getLoopName()); - }); - } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) { - this.state.loopCache.updateOperationalPolicyProperties(this.state.policyName, editorData); - this.state.loopCache.updateOperationalPolicyPdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup); - LoopService.setOperationalPolicyProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getOperationalPolicies()).then(resp => { - this.setState({ show: false }); - this.props.history.push('/'); - this.props.loadLoopFunction(this.state.loopCache.getLoopName()); - }); - } - } - } - - customValidation(editorData, templateName) { - // method for sub-classes to override with customized validation - return []; - } - - handleClose() { - this.setState({ show: false }); - this.props.history.push('/'); - } - - componentDidMount() { - this.renderJsonEditor(); - } - - componentDidUpdate() { - if (this.state.showSucAlert === true || this.state.showFailAlert === true) { - let modalElement = document.getElementById("policyModal") - if (modalElement) { - modalElement.scrollTo(0, 0); - } - } - } - - createJsonEditor(toscaModel, editorData) { - return new JSONEditor(document.getElementById("editor"), - { - schema: toscaModel, - startval: editorData, - theme: 'bootstrap4', - iconlib: 'fontawesome5', - object_layout: 'grid', - disable_properties: false, - disable_edit_json: false, - disable_array_reorder: true, - disable_array_delete_last_row: true, - disable_array_delete_all_rows: false, - array_controls_top: true, - keep_oneof_values: false, - collapsed: true, - show_errors: 'always', - display_required_only: false, - show_opt_in: false, - prompt_before_delete: true, - required_by_default: false - }) - } - - renderJsonEditor() { - console.debug("Rendering PolicyModal ", this.state.policyName); - var toscaModel = {}; - var editorData = {}; - var pdpGroupValues = {}; - var chosenPdpGroupValue, chosenPdpSubgroupValue; - if (this.state.policyInstanceType === OnapConstant.microServiceType) { - toscaModel = this.state.loopCache.getMicroServiceJsonRepresentationForName(this.state.policyName); - editorData = this.state.loopCache.getMicroServicePropertiesForName(this.state.policyName); - pdpGroupValues = this.state.loopCache.getMicroServiceSupportedPdpGroup(this.state.policyName); - chosenPdpGroupValue = this.state.loopCache.getMicroServicePdpGroup(this.state.policyName); - chosenPdpSubgroupValue = this.state.loopCache.getMicroServicePdpSubgroup(this.state.policyName); - } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) { - toscaModel = this.state.loopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName); - editorData = this.state.loopCache.getOperationalPolicyPropertiesForName(this.state.policyName); - pdpGroupValues = this.state.loopCache.getOperationalPolicySupportedPdpGroup(this.state.policyName); - chosenPdpGroupValue = this.state.loopCache.getOperationalPolicyPdpGroup(this.state.policyName); - chosenPdpSubgroupValue = this.state.loopCache.getOperationalPolicyPdpSubgroup(this.state.policyName); - } - - if (toscaModel == null) { - return; - } - - var pdpSubgroupValues = []; - if (typeof (chosenPdpGroupValue) !== "undefined") { - var selectedPdpGroup = pdpGroupValues.filter(entry => (Object.keys(entry)[0] === chosenPdpGroupValue)); - pdpSubgroupValues = selectedPdpGroup[0][chosenPdpGroupValue].map((pdpSubgroup) => { - return { label: pdpSubgroup, value: pdpSubgroup } - }); - } - this.setState({ - jsonEditor: this.createJsonEditor(toscaModel, editorData), - pdpGroup: pdpGroupValues, - pdpGroupList: pdpGroupValues.map(entry => { - return { label: Object.keys(entry)[0], value: Object.keys(entry)[0] }; - }), - pdpSubgroupList: pdpSubgroupValues, - chosenPdpGroup: chosenPdpGroupValue, - chosenPdpSubgroup: chosenPdpSubgroupValue - }) - } - - handlePdpGroupChange(e) { - var selectedPdpGroup = this.state.pdpGroup.filter(entry => (Object.keys(entry)[0] === e.value)); - const pdpSubgroupValues = selectedPdpGroup[0][e.value].map((pdpSubgroup) => { - return { label: pdpSubgroup, value: pdpSubgroup } - }); - if (this.state.chosenPdpGroup !== e.value) { - this.setState({ - chosenPdpGroup: e.value, - chosenPdpSubgroup: '', - pdpSubgroupList: pdpSubgroupValues - }); - } - } - - handlePdpSubgroupChange(e) { - this.setState({ chosenPdpSubgroup: e.value }); - } - - handleRefresh() { - var newLoopCache, toscaModel, editorData; - if (this.state.policyInstanceType === OnapConstant.microServiceType) { - LoopService.refreshMicroServicePolicyJson(this.state.loopCache.getLoopName(), this.state.policyName).then(data => { - newLoopCache = new LoopCache(data); - toscaModel = newLoopCache.getMicroServiceJsonRepresentationForName(this.state.policyName); - editorData = newLoopCache.getMicroServicePropertiesForName(this.state.policyName); - document.getElementById("editor").innerHTML = ""; - this.setState({ - loopCache: newLoopCache, - jsonEditor: this.createJsonEditor(toscaModel, editorData), - showSucAlert: true, - showMessage: "Successfully refreshed" - }); - }) - .catch(error => { - console.error("Error while refreshing the Operational Policy Json Representation"); - this.setState({ - showFailAlert: true, - showMessage: "Refreshing of UI failed" - }); - }); - } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) { - LoopService.refreshOperationalPolicyJson(this.state.loopCache.getLoopName(), this.state.policyName).then(data => { - var newLoopCache = new LoopCache(data); - toscaModel = newLoopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName); - editorData = newLoopCache.getOperationalPolicyPropertiesForName(this.state.policyName); - document.getElementById("editor").innerHTML = ""; - this.setState({ - loopCache: newLoopCache, - jsonEditor: this.createJsonEditor(toscaModel, editorData), - showSucAlert: true, - showMessage: "Successfully refreshed" - }); - }) - .catch(error => { - console.error("Error while refreshing the Operational Policy Json Representation"); - this.setState({ - showFailAlert: true, - showMessage: "Refreshing of UI failed" - }); - }); - } - } - - disableAlert() { - this.setState({ showSucAlert: false, showFailAlert: false }); - } - - renderPdpGroupDropDown() { - if (this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) { - return ( - <Form.Group as={ Row } controlId="formPlaintextEmail"> - <Form.Label column sm="2">Pdp Group Info</Form.Label> - <Col sm="3"> - <Select value={ { label: this.state.chosenPdpGroup, value: this.state.chosenPdpGroup } } onChange={ this.handlePdpGroupChange } options={ this.state.pdpGroupList }/> - </Col> - <Col sm="3"> - <Select value={ { label: this.state.chosenPdpSubgroup, value: this.state.chosenPdpSubgroup } } onChange={ this.handlePdpSubgroupChange } options={ this.state.pdpSubgroupList }/> - </Col> - </Form.Group> - ); - } - } - - renderOpenLoopMessage() { - if (this.state.policyInstanceType === OnapConstant.operationalPolicyType && this.state.loopCache.isOpenLoopTemplate()) { - return ( - "Operational Policy cannot be configured as only Open Loop is supported for this Template!" - ); - } - } - - renderModalTitle() { - return ( - <Modal.Title>Edit the policy</Modal.Title> - ); - } - - renderButton() { - var allElement = [(<Button key="close" variant="secondary" onClick={ this.handleClose }> - Close - </Button>)]; - if (this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) { - allElement.push(( - <Button key="save" variant="primary" disabled={ this.readOnly } onClick={ this.handleSave }> - Save Changes - </Button> - )); - allElement.push(( - <Button key="refresh" variant="primary" disabled={ this.readOnly } onClick={ this.handleRefresh }> - Refresh - </Button> - )); - } - return allElement; - } - - render() { - return ( - <ModalStyled size="xl" backdrop="static" keyboard={ false } show={ this.state.show } onHide={ this.handleClose }> - <Modal.Header closeButton> - { this.renderModalTitle() } - </Modal.Header> - <Alert variant="success" show={ this.state.showSucAlert } onClose={ this.disableAlert } dismissible> - <DivWhiteSpaceStyled> - { this.state.showMessage } - </DivWhiteSpaceStyled> - </Alert> - <Alert variant="danger" show={ this.state.showFailAlert } onClose={ this.disableAlert } dismissible> - <DivWhiteSpaceStyled> - { this.state.showMessage } - </DivWhiteSpaceStyled> - </Alert> - <Modal.Body> - { this.renderOpenLoopMessage() } - <div id="editor"/> - { this.renderPdpGroupDropDown() } - </Modal.Body> - <Modal.Footer> - { this.renderButton() } - </Modal.Footer> - </ModalStyled> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.test.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.test.js deleted file mode 100644 index 658b19e26..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.test.js +++ /dev/null @@ -1,135 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP POLICY-CLAMP - * ================================================================================ - * Copyright (C) 2020-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 { mount } from 'enzyme'; -import PolicyModal from './PolicyModal'; -import LoopCache from '../../../api/LoopCache'; -import LoopService from '../../../api/LoopService'; -import OnapConstant from '../../../utils/OnapConstants'; -import { shallow } from 'enzyme'; - -describe('Verify PolicyModal', () => { - beforeEach(() => { - fetch.resetMocks(); - fetch.mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - text: () => "OK" - }); - }); - }) - const loopCacheStr = { - "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", - "operationalPolicies": [{ - "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", - "configurationsJson": { - "operational_policy": { - "controlLoop": {}, - "policies": [] - } - }, - "policyModel": { "policyPdpGroup": { "supportedPdpGroups": [{ "monitoring": ["xacml"] }] } }, - "jsonRepresentation": { "schema": {} } - }] - }; - - const loopCache = new LoopCache(loopCacheStr); - const historyMock = { push: jest.fn() }; - const flushPromises = () => new Promise(setImmediate); - const match = { params: { policyName: "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", policyInstanceType: OnapConstant.operationalPolicyType } } - - it('Test handleClose', () => { - const handleClose = jest.spyOn(PolicyModal.prototype, 'handleClose'); - const component = mount(<PolicyModal history={ historyMock } match={ match } loopCache={ loopCache }/>) - - component.find('[variant="secondary"]').prop('onClick')(); - - expect(handleClose).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - }); - - it('Test handleSave', async () => { - const loadLoopFunction = jest.fn(); - const handleSave = jest.spyOn(PolicyModal.prototype, 'handleSave'); - const component = mount(<PolicyModal history={ historyMock } - loopCache={ loopCache } match={ match } loadLoopFunction={ loadLoopFunction }/>) - - component.find('[variant="primary"]').get(0).props.onClick(); - await flushPromises(); - component.update(); - - expect(handleSave).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - }); - - it('Test handleRefresh', async () => { - LoopService.refreshOperationalPolicyJson = jest.fn().mockImplementation(() => { - return Promise.resolve(loopCacheStr); - }); - const updateLoopFunction = jest.fn(); - const handleRefresh = jest.spyOn(PolicyModal.prototype, 'handleRefresh'); - const component = mount(<PolicyModal loopCache={ loopCache } match={ match } updateLoopFunction={ updateLoopFunction }/>) - - component.find('[variant="primary"]').get(1).props.onClick(); - await flushPromises(); - component.update(); - - expect(handleRefresh).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(true); - expect(component.state('showSucAlert')).toEqual(true); - expect(component.state('showMessage')).toEqual("Successfully refreshed"); - }); - - it('Test handlePdpGroupChange', () => { - const component = mount(<PolicyModal loopCache={ loopCache } match={ match }/>) - component.setState({ - "pdpGroup": [{ "option1": ["subPdp1", "subPdp2"] }], - "chosenPdpGroup": "option2" - }); - expect(component.state('chosenPdpGroup')).toEqual("option2"); - - const instance = component.instance(); - const event = { label: "option1", value: "option1" } - instance.handlePdpGroupChange(event); - expect(component.state('chosenPdpGroup')).toEqual("option1"); - expect(component.state('chosenPdpSubgroup')).toEqual(""); - expect(component.state('pdpSubgroupList')).toEqual([{ label: "subPdp1", value: "subPdp1" }, { label: "subPdp2", value: "subPdp2" }]); - }); - - it('Test handlePdpSubgroupChange', () => { - const component = mount(<PolicyModal loopCache={ loopCache } match={ match }/>) - - const instance = component.instance(); - const event = { label: "option1", value: "option1" } - instance.handlePdpSubgroupChange(event); - expect(component.state('chosenPdpSubgroup')).toEqual("option1"); - }); - - it('Test the render method', () => { - const component = shallow(<PolicyModal loopCache={ loopCache } match={ match }/>) - expect(component).toMatchSnapshot(); - }); -}); diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js deleted file mode 100644 index 8093b7e4e..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js +++ /dev/null @@ -1,133 +0,0 @@ -/*- - * ============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.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> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js b/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js deleted file mode 100644 index fc69a637a..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js +++ /dev/null @@ -1,66 +0,0 @@ -/*- - * ============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 PolicyToscaService from '../../../api/PolicyToscaService'; -import styled from 'styled-components'; -import Button from 'react-bootstrap/Button'; - -const ToscaDiv = styled.div` - background-color: ${ props => props.theme.toscaTextareaBackgroundColor }; - text-align: justify; - font-size: ${ props => props.theme.toscaTextareaFontSize }; - width: 100%; - height: 30%; -` - -export default class ToscaViewer extends React.Component { - - state = { - toscaData: this.props.toscaData, - yamlPolicyTosca: this.getToscaModelYamlFor(this.props.toscaData), - } - - constructor(props, context) { - super(props, context); - this.getToscaModelYamlFor = this.getToscaModelYamlFor.bind(this); - } - - getToscaModelYamlFor(toscaData) { - PolicyToscaService.getToscaPolicyModelYaml(toscaData["policyModelType"], toscaData["version"]).then(respYamlPolicyTosca => { - this.setState({ - yamlPolicyTosca: respYamlPolicyTosca, - }) - }); - } - - render() { - return ( - <ToscaDiv> - <pre>{ this.state.yamlPolicyTosca }</pre> - <Button variant="secondary" title="Create a new policy version from the defined parameters" - onClick={ this.handleCreateNewVersion }>Create New Version</Button> - </ToscaDiv> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js b/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js deleted file mode 100644 index 5b5976046..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js +++ /dev/null @@ -1,54 +0,0 @@ -/*- - * ============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 ToscaViewer from './ToscaViewer'; -import { shallow, mount } from 'enzyme'; -import PolicyToscaService from '../../../api/PolicyToscaService'; - -describe('Verify ToscaViewer', () => { - const fs = require('fs'); - - let toscaYaml = fs.readFileSync('src/components/dialogs/Policy/toscaData.test.yaml', { encoding: 'utf8', flag: 'r' }) - - const toscaData = { - "policyModelType": "onap.policies.controlloop.Guard", - "version": "1.0.0", - "policyAcronym": "Guard", - "createdDate": "2021-04-09T02:29:31.407356Z", - "updatedDate": "2021-04-09T02:29:31.407356Z", - "updatedBy": "Not found", - "createdBy": "Not found", - "tableData": { - "id": 0 - } - }; - - it('Test the render method', async () => { - PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => { - return Promise.resolve(toscaYaml); - }); - const component = shallow(<ToscaViewer toscaData={ toscaData }/>); - await PolicyToscaService.getToscaPolicyModelYaml(); - expect(component).toMatchSnapshot(); - }); -}); diff --git a/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js deleted file mode 100644 index f571bc16d..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js +++ /dev/null @@ -1,475 +0,0 @@ -/*- - * ============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, { forwardRef } from 'react' -import Button from 'react-bootstrap/Button'; -import Modal from 'react-bootstrap/Modal'; -import styled from 'styled-components'; -import AddBox from '@material-ui/icons/AddBox'; -import ArrowDownward from '@material-ui/icons/ArrowDownward'; -import Check from '@material-ui/icons/Check'; -import ChevronLeft from '@material-ui/icons/ChevronLeft'; -import ChevronRight from '@material-ui/icons/ChevronRight'; -import Clear from '@material-ui/icons/Clear'; -import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded'; -import Edit from '@material-ui/icons/Edit'; -import FilterList from '@material-ui/icons/FilterList'; -import FirstPage from '@material-ui/icons/FirstPage'; -import LastPage from '@material-ui/icons/LastPage'; -import Remove from '@material-ui/icons/Remove'; -import SaveAlt from '@material-ui/icons/SaveAlt'; -import Search from '@material-ui/icons/Search'; -import ViewColumn from '@material-ui/icons/ViewColumn'; -import DehazeIcon from '@material-ui/icons/Dehaze'; -import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; -import AddIcon from '@material-ui/icons/Add'; -import PublishIcon from '@material-ui/icons/Publish'; -import Switch from '@material-ui/core/Switch'; -import MaterialTable from "material-table"; -import PolicyService from '../../../api/PolicyService'; -import PolicyToscaService from '../../../api/PolicyToscaService'; -import Select from '@material-ui/core/Select'; -import Alert from 'react-bootstrap/Alert'; -import Tabs from 'react-bootstrap/Tabs'; -import Tab from 'react-bootstrap/Tab'; -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; -` - -const ModalStyled = styled(Modal)` - @media (min-width: 800px) { - .modal-xl { - max-width: 96%; - } - } - background-color: transparent; -` -const DetailedRow = styled.div` - margin: 0 auto; - background-color: ${ props => props.theme.policyEditorBackgroundColor }; - font-size: ${ props => props.theme.policyEditorFontSize }; - width: 97%; - margin-left: auto; - margin-right: auto; - margin-top: 20px; -` - -const PoliciesTreeViewerDiv = styled.div` - width: 20%; - float: left; - left: 0; - overflow: auto; -` - -const MaterialTableDiv = styled.div` - float: right; - width: 80%; - left: 20%; -` - -const standardCellStyle = { backgroundColor: '#039be5', color: '#FFF', border: '1px solid black' }; -const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' }; -const rowHeaderStyle = { backgroundColor: '#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black' }; - -export default class ViewAllPolicies extends React.Component { - state = { - show: true, - policiesListData: [], - policiesListDataFiltered: [], - toscaModelsListData: [], - toscaModelsListDataFiltered: [], - jsonEditorForPolicy: new Map(), - showSuccessAlert: false, - showFailAlert: false, - showFileSelector: false, - policyColumnsDefinition: [ - { - title: "Policy Name", field: "name", - cellStyle: standardCellStyle, - headerStyle: headerStyle - }, - { - title: "Policy Version", field: "version", - cellStyle: standardCellStyle, - headerStyle: headerStyle, - }, - { - title: "Policy Type", field: "type", - cellStyle: standardCellStyle, - headerStyle: headerStyle - }, - { - title: "Policy Type Version", field: "type_version", - cellStyle: standardCellStyle, - headerStyle: headerStyle - }, - { - title: "Deployable in PDP Group", field: "supportedPdpGroupsString", - cellStyle: standardCellStyle, - headerStyle: headerStyle - }, - { - title: "Deployed in PDP Group", field: "pdpGroupInfoString", - cellStyle: standardCellStyle, - headerStyle: headerStyle - } - ], - toscaColumnsDefinition: [ - { - title: "Policy Model Type", field: "policyModelType", - cellStyle: standardCellStyle, - headerStyle: headerStyle - }, - { - title: "Policy Acronym", field: "policyAcronym", - cellStyle: standardCellStyle, - headerStyle: headerStyle - }, - { - title: "Version", field: "version", - cellStyle: standardCellStyle, - headerStyle: headerStyle - }, - { - title: "Uploaded By", field: "updatedBy", - cellStyle: standardCellStyle, - headerStyle: headerStyle - }, - { - title: "Uploaded Date", field: "updatedDate", editable: 'never', - cellStyle: standardCellStyle, - headerStyle: headerStyle - } - ], - tableIcons: { - Add: forwardRef((props, ref) => <AddBox { ...props } ref={ ref }/>), - Check: forwardRef((props, ref) => <Check { ...props } ref={ ref }/>), - Clear: forwardRef((props, ref) => <Clear { ...props } ref={ ref }/>), - Delete: forwardRef((props, ref) => <DeleteRoundedIcon { ...props } ref={ ref }/>), - DetailPanel: forwardRef((props, ref) => <ChevronRight { ...props } ref={ ref }/>), - Edit: forwardRef((props, ref) => <Edit { ...props } ref={ ref }/>), - Export: forwardRef((props, ref) => <SaveAlt { ...props } ref={ ref }/>), - Filter: forwardRef((props, ref) => <FilterList { ...props } ref={ ref }/>), - FirstPage: forwardRef((props, ref) => <FirstPage { ...props } ref={ ref }/>), - LastPage: forwardRef((props, ref) => <LastPage { ...props } ref={ ref }/>), - NextPage: forwardRef((props, ref) => <ChevronRight { ...props } ref={ ref }/>), - PreviousPage: forwardRef((props, ref) => <ChevronLeft { ...props } ref={ ref }/>), - ResetSearch: forwardRef((props, ref) => <Clear { ...props } ref={ ref }/>), - Search: forwardRef((props, ref) => <Search { ...props } ref={ ref }/>), - SortArrow: forwardRef((props, ref) => <ArrowDownward { ...props } ref={ ref }/>), - ThirdStateCheck: forwardRef((props, ref) => <Remove { ...props } ref={ ref }/>), - ViewColumn: forwardRef((props, ref) => <ViewColumn { ...props } ref={ ref }/>) - } - }; - - constructor(props, context) { - super(props, context); - this.handleClose = this.handleClose.bind(this); - this.handleDeletePolicy = this.handleDeletePolicy.bind(this); - this.disableAlert = this.disableAlert.bind(this); - this.getAllPolicies = this.getAllPolicies.bind(this); - this.getAllToscaModels = this.getAllToscaModels.bind(this); - 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(); - } - - generateAdditionalPolicyColumns(policiesData) { - policiesData.forEach(policy => { - let supportedPdpGroupsString = ""; - if (typeof policy.supportedPdpGroups !== "undefined") { - for (const pdpGroup of policy["supportedPdpGroups"]) { - for (const pdpSubGroup of Object.values(pdpGroup)[0]) { - supportedPdpGroupsString += (Object.keys(pdpGroup)[0] + "/" + pdpSubGroup + "\r\n"); - } - } - policy["supportedPdpGroupsString"] = supportedPdpGroupsString; - } - - let infoPdpGroup = ""; - if (typeof policy.pdpGroupInfo !== "undefined") { - policy["pdpGroupInfo"].forEach(pdpGroupElem => { - let groupName = Object.keys(pdpGroupElem)[0]; - pdpGroupElem[groupName]["pdpSubgroups"].forEach(pdpSubGroupElem => { - infoPdpGroup += (groupName + "/" + pdpSubGroupElem["pdpType"] + " (" - + pdpGroupElem[groupName]["pdpGroupState"] + ")" + "\r\n"); - }); - policy["pdpGroupInfoString"] = infoPdpGroup; - }); - } - }); - } - - getAllToscaModels() { - PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => { - this.setState({ - toscaModelsListData: toscaModelsList, - toscaModelsListDataFiltered: toscaModelsList - }); - }); - } - - getAllPolicies() { - PolicyService.getPoliciesList().then(allPolicies => { - this.generateAdditionalPolicyColumns(allPolicies["policies"]) - this.setState({ - policiesListData: allPolicies["policies"], - policiesListDataFiltered: allPolicies["policies"], - }) - }); - - } - - handleClose() { - this.setState({ show: false }); - this.props.history.push('/') - } - - handleDeletePolicy(event, rowData) { - PolicyService.deletePolicy(rowData["type"], rowData["type_version"], rowData["name"], rowData["version"]).then( - respPolicyDeletion => { - if (typeof (respPolicyDeletion) === "undefined") { - //it indicates a failure - this.setState({ - showFailAlert: true, - showMessage: 'Policy Deletion Failure' - }); - } else { - this.setState({ - showSuccessAlert: true, - showMessage: 'Policy successfully Deleted' - }); - this.getAllPolicies(); - } - } - ) - } - - disableAlert() { - this.setState({ showSuccessAlert: false, showFailAlert: false }); - } - - filterPolicies(prefixForFiltering) { - this.setState({ policiesListDataFiltered: this.state.policiesListData.filter(element => element.name.startsWith(prefixForFiltering)) }); - } - - filterTosca(prefixForFiltering) { - 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"> - <Modal.Body> - <div> - <PoliciesTreeViewerDiv> - <PoliciesTreeViewer policiesData={ this.state.policiesListData } valueForTreeCreation="name" policiesFilterFunction={ this.filterPolicies }/> - </PoliciesTreeViewerDiv> - <MaterialTableDiv> - <MaterialTable - title={ "Policies" } - data={ this.state.policiesListDataFiltered } - columns={ this.state.policyColumnsDefinition } - icons={ this.state.tableIcons } - onRowClick={ (event, rowData, togglePanel) => togglePanel() } - options={ { - grouping: true, - exportButton: true, - headerStyle: rowHeaderStyle, - actionsColumnIndex: -1 - } } - detailPanel={ [ - { - icon: ArrowForwardIosIcon, - tooltip: 'Show Configuration', - render: rowData => { - return ( - <DetailedRow> - <PolicyEditor policyModelType={ rowData["type"] } policyModelTypeVersion={ rowData["type_version"] } - policyName={ rowData["name"] } policyVersion={ rowData["version"] } policyProperties={ rowData["properties"] } - policiesTableUpdateFunction={ this.getAllPolicies }/> - </DetailedRow> - ) - }, - }, - { - icon: DehazeIcon, - openIcon: DehazeIcon, - tooltip: 'Show Raw Data', - render: rowData => { - return ( - <DetailedRow> - <pre>{ JSON.stringify(rowData, null, 2) }</pre> - </DetailedRow> - ) - }, - }, - { - icon: PublishIcon, - openIcon: PublishIcon, - tooltip: 'PDP Group Deployment', - render: rowData => { - return ( - <DetailedRow> - <PolicyDeploymentEditor policyData={ rowData } policiesTableUpdateFunction={ this.getAllPolicies }/> - </DetailedRow> - ) - }, - } - ] } - actions={ [ - { - icon: DeleteRoundedIcon, - tooltip: 'Delete Policy', - onClick: (event, rowData) => this.handleDeletePolicy(event, rowData) - } - ] } - /> - </MaterialTableDiv> - </div> - </Modal.Body> - </Tab> - ); - } - - renderToscaTab() { - return ( - <Tab eventKey="tosca models" title="Tosca Models in Policy Framework"> - <Modal.Body> - <div> - <PoliciesTreeViewerDiv> - <PoliciesTreeViewer policiesData={ this.state.toscaModelsListData } valueForTreeCreation="policyModelType" policiesFilterFunction={ this.filterTosca }/> - </PoliciesTreeViewerDiv> - <MaterialTableDiv> - <MaterialTable - title={ "Tosca Models" } - data={ this.state.toscaModelsListDataFiltered } - columns={ this.state.toscaColumnsDefinition } - icons={ this.state.tableIcons } - onRowClick={ (event, rowData, togglePanel) => togglePanel() } - options={ { - grouping: true, - exportButton: true, - headerStyle: rowHeaderStyle, - actionsColumnIndex: -1 - } } - actions={ [ - { - icon: AddIcon, - tooltip: 'Add New Tosca Model', - isFreeAction: true, - onClick: () => this.showFileSelector() - } - ] } - detailPanel={ [ - { - icon: ArrowForwardIosIcon, - tooltip: 'Show Tosca', - render: rowData => { - return ( - <DetailedRow> - <ToscaViewer toscaData={ rowData }/> - </DetailedRow> - ) - }, - }, - { - icon: DehazeIcon, - openIcon: DehazeIcon, - tooltip: 'Show Raw Data', - render: rowData => { - return ( - <DetailedRow> - <pre>{ JSON.stringify(rowData, null, 2) }</pre> - </DetailedRow> - ) - }, - }, - { - icon: AddIcon, - openIcon: AddIcon, - tooltip: 'Create a policy from this model', - render: rowData => { - return ( - <DetailedRow> - <PolicyEditor policyModelType={ rowData["policyModelType"] } policyModelTypeVersion={ rowData["version"] } policyProperties={ {} } policiesTableUpdateFunction={ this.getAllPolicies }/> - </DetailedRow> - ) - }, - }, - ] } - /> - </MaterialTableDiv> - </div> - </Modal.Body> - </Tab> - ); - } - - render() { - return ( - <React.Fragment> - <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }> - <Modal.Header closeButton> - </Modal.Header> - <Tabs id="controlled-tab-example" activeKey={ this.state.key } onSelect={ key => this.setState({ key, selectedRowData: {} }) }> - { this.renderPoliciesTab() } - { this.renderToscaTab() } - </Tabs> - <Alert variant="success" show={ this.state.showSuccessAlert } onClose={ this.disableAlert } dismissible> - <DivWhiteSpaceStyled> - { this.state.showMessage } - </DivWhiteSpaceStyled> - </Alert> - <Alert variant="danger" show={ this.state.showFailAlert } onClose={ this.disableAlert } dismissible> - <DivWhiteSpaceStyled> - { this.state.showMessage } - </DivWhiteSpaceStyled> - </Alert> - <Modal.Footer> - <Button variant="secondary" onClick={ this.handleClose }>Close</Button> - </Modal.Footer> - </ModalStyled> - <PolicyToscaFileSelector show={ this.state.showFileSelector } disableFunction={ this.disableFileSelector } toscaTableUpdateFunction={ this.getAllToscaModels }/> - </React.Fragment> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap b/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap deleted file mode 100644 index bf84e91d1..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap +++ /dev/null @@ -1,788 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify PolicyEditor Test the render method 1`] = ` -<PolicyEditor - policiesTableUpdateFunction={[Function]} - policyModelType="onap.policies.monitoring.tcagen2" - policyModelTypeVersion="1.0.0" - policyName="org.onap.new" - policyProperties={ - Object { - "tca.policy": Object { - "domain": "measurementsForVfScaling", - "metricsPerEventName": Array [ - Object { - "controlLoopSchemaType": "VM", - "eventName": "vLoadBalancer", - "policyName": "DCAE.Config_tca-hi-lo", - "policyScope": "DCAE", - "policyVersion": "v0.0.1", - "thresholds": Array [ - Object { - "closedLoopControlName": "LOOP_test", - "closedLoopEventStatus": "ONSET", - "direction": "LESS_OR_EQUAL", - "fieldPath": "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta", - "severity": "MAJOR", - "thresholdValue": 200, - "version": "1.0.2", - }, - ], - }, - ], - }, - } - } - policyVersion="1.0.0" -> - <styled.div> - <div - className="sc-dlfnbm eVKaeY" - > - <Alert - closeLabel="Close alert" - dismissible={true} - onClose={[Function]} - show={false} - transition={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "appear": false, - "in": false, - "mountOnEnter": false, - "timeout": 300, - "unmountOnExit": false, - }, - "render": [Function], - } - } - variant="success" - > - <Fade - appear={false} - in={false} - mountOnEnter={false} - timeout={300} - unmountOnExit={true} - > - <Transition - addEndListener={[Function]} - appear={false} - enter={true} - exit={true} - in={false} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={300} - unmountOnExit={true} - /> - </Fade> - </Alert> - <Alert - closeLabel="Close alert" - dismissible={true} - onClose={[Function]} - show={false} - transition={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "appear": false, - "in": false, - "mountOnEnter": false, - "timeout": 300, - "unmountOnExit": false, - }, - "render": [Function], - } - } - variant="danger" - > - <Fade - appear={false} - in={false} - mountOnEnter={false} - timeout={300} - unmountOnExit={true} - > - <Transition - addEndListener={[Function]} - appear={false} - enter={true} - exit={true} - in={false} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={300} - unmountOnExit={true} - /> - </Fade> - </Alert> - <WithStyles(ForwardRef(TextField)) - defaultValue="org.onap.new" - id="policyName" - label="Required" - onChange={[Function]} - required={true} - size="small" - variant="outlined" - > - <ForwardRef(TextField) - classes={ - Object { - "root": "MuiTextField-root", - } - } - defaultValue="org.onap.new" - id="policyName" - label="Required" - onChange={[Function]} - required={true} - size="small" - variant="outlined" - > - <WithStyles(ForwardRef(FormControl)) - className="MuiTextField-root" - color="primary" - disabled={false} - error={false} - fullWidth={false} - required={true} - size="small" - variant="outlined" - > - <ForwardRef(FormControl) - className="MuiTextField-root" - classes={ - Object { - "fullWidth": "MuiFormControl-fullWidth", - "marginDense": "MuiFormControl-marginDense", - "marginNormal": "MuiFormControl-marginNormal", - "root": "MuiFormControl-root", - } - } - color="primary" - disabled={false} - error={false} - fullWidth={false} - required={true} - size="small" - variant="outlined" - > - <div - className="MuiFormControl-root MuiTextField-root" - > - <WithStyles(ForwardRef(InputLabel)) - htmlFor="policyName" - id="policyName-label" - > - <ForwardRef(InputLabel) - classes={ - Object { - "animated": "MuiInputLabel-animated", - "asterisk": "MuiInputLabel-asterisk", - "disabled": "Mui-disabled", - "error": "Mui-error", - "filled": "MuiInputLabel-filled", - "focused": "Mui-focused", - "formControl": "MuiInputLabel-formControl", - "marginDense": "MuiInputLabel-marginDense", - "outlined": "MuiInputLabel-outlined", - "required": "Mui-required", - "root": "MuiInputLabel-root", - "shrink": "MuiInputLabel-shrink", - } - } - htmlFor="policyName" - id="policyName-label" - > - <WithStyles(ForwardRef(FormLabel)) - className="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined" - classes={ - Object { - "asterisk": "MuiInputLabel-asterisk", - "disabled": "Mui-disabled", - "error": "Mui-error", - "focused": "Mui-focused", - "required": "Mui-required", - } - } - data-shrink={true} - htmlFor="policyName" - id="policyName-label" - > - <ForwardRef(FormLabel) - className="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined" - classes={ - Object { - "asterisk": "MuiFormLabel-asterisk MuiInputLabel-asterisk", - "colorSecondary": "MuiFormLabel-colorSecondary", - "disabled": "Mui-disabled Mui-disabled", - "error": "Mui-error Mui-error", - "filled": "MuiFormLabel-filled", - "focused": "Mui-focused Mui-focused", - "required": "Mui-required Mui-required", - "root": "MuiFormLabel-root", - } - } - data-shrink={true} - htmlFor="policyName" - id="policyName-label" - > - <label - className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required" - data-shrink={true} - htmlFor="policyName" - id="policyName-label" - > - Required - <span - aria-hidden={true} - className="MuiFormLabel-asterisk MuiInputLabel-asterisk" - > -   - * - </span> - </label> - </ForwardRef(FormLabel)> - </WithStyles(ForwardRef(FormLabel))> - </ForwardRef(InputLabel)> - </WithStyles(ForwardRef(InputLabel))> - <WithStyles(ForwardRef(OutlinedInput)) - autoFocus={false} - defaultValue="org.onap.new" - fullWidth={false} - id="policyName" - label={ - <React.Fragment> - Required -  * - </React.Fragment> - } - multiline={false} - onChange={[Function]} - > - <ForwardRef(OutlinedInput) - autoFocus={false} - classes={ - Object { - "adornedEnd": "MuiOutlinedInput-adornedEnd", - "adornedStart": "MuiOutlinedInput-adornedStart", - "colorSecondary": "MuiOutlinedInput-colorSecondary", - "disabled": "Mui-disabled", - "error": "Mui-error", - "focused": "Mui-focused", - "input": "MuiOutlinedInput-input", - "inputAdornedEnd": "MuiOutlinedInput-inputAdornedEnd", - "inputAdornedStart": "MuiOutlinedInput-inputAdornedStart", - "inputMarginDense": "MuiOutlinedInput-inputMarginDense", - "inputMultiline": "MuiOutlinedInput-inputMultiline", - "marginDense": "MuiOutlinedInput-marginDense", - "multiline": "MuiOutlinedInput-multiline", - "notchedOutline": "MuiOutlinedInput-notchedOutline", - "root": "MuiOutlinedInput-root", - } - } - defaultValue="org.onap.new" - fullWidth={false} - id="policyName" - label={ - <React.Fragment> - Required -  * - </React.Fragment> - } - multiline={false} - onChange={[Function]} - > - <WithStyles(ForwardRef(InputBase)) - autoFocus={false} - classes={ - Object { - "adornedEnd": "MuiOutlinedInput-adornedEnd", - "adornedStart": "MuiOutlinedInput-adornedStart", - "colorSecondary": "MuiOutlinedInput-colorSecondary", - "disabled": "Mui-disabled", - "error": "Mui-error", - "focused": "Mui-focused", - "input": "MuiOutlinedInput-input", - "inputAdornedEnd": "MuiOutlinedInput-inputAdornedEnd", - "inputAdornedStart": "MuiOutlinedInput-inputAdornedStart", - "inputMarginDense": "MuiOutlinedInput-inputMarginDense", - "inputMultiline": "MuiOutlinedInput-inputMultiline", - "marginDense": "MuiOutlinedInput-marginDense", - "multiline": "MuiOutlinedInput-multiline", - "notchedOutline": null, - "root": "MuiOutlinedInput-root", - } - } - defaultValue="org.onap.new" - fullWidth={false} - id="policyName" - inputComponent="input" - multiline={false} - onChange={[Function]} - renderSuffix={[Function]} - type="text" - > - <ForwardRef(InputBase) - autoFocus={false} - classes={ - Object { - "adornedEnd": "MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd", - "adornedStart": "MuiInputBase-adornedStart MuiOutlinedInput-adornedStart", - "colorSecondary": "MuiInputBase-colorSecondary MuiOutlinedInput-colorSecondary", - "disabled": "Mui-disabled Mui-disabled", - "error": "Mui-error Mui-error", - "focused": "Mui-focused Mui-focused", - "formControl": "MuiInputBase-formControl", - "fullWidth": "MuiInputBase-fullWidth", - "input": "MuiInputBase-input MuiOutlinedInput-input", - "inputAdornedEnd": "MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd", - "inputAdornedStart": "MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart", - "inputHiddenLabel": "MuiInputBase-inputHiddenLabel", - "inputMarginDense": "MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense", - "inputMultiline": "MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline", - "inputTypeSearch": "MuiInputBase-inputTypeSearch", - "marginDense": "MuiInputBase-marginDense MuiOutlinedInput-marginDense", - "multiline": "MuiInputBase-multiline MuiOutlinedInput-multiline", - "root": "MuiInputBase-root MuiOutlinedInput-root", - } - } - defaultValue="org.onap.new" - fullWidth={false} - id="policyName" - inputComponent="input" - multiline={false} - onChange={[Function]} - renderSuffix={[Function]} - type="text" - > - <div - className="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense" - onClick={[Function]} - > - <input - aria-invalid={false} - autoFocus={false} - className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense" - defaultValue="org.onap.new" - disabled={false} - id="policyName" - onAnimationStart={[Function]} - onBlur={[Function]} - onChange={[Function]} - onFocus={[Function]} - required={true} - type="text" - /> - <WithStyles(ForwardRef(NotchedOutline)) - className="MuiOutlinedInput-notchedOutline" - label={ - <React.Fragment> - Required -  * - </React.Fragment> - } - labelWidth={0} - notched={true} - > - <ForwardRef(NotchedOutline) - className="MuiOutlinedInput-notchedOutline" - classes={ - Object { - "legend": "PrivateNotchedOutline-legend-2", - "legendLabelled": "PrivateNotchedOutline-legendLabelled-3", - "legendNotched": "PrivateNotchedOutline-legendNotched-4", - "root": "PrivateNotchedOutline-root-1", - } - } - label={ - <React.Fragment> - Required -  * - </React.Fragment> - } - labelWidth={0} - notched={true} - > - <fieldset - aria-hidden={true} - className="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline" - > - <legend - className="PrivateNotchedOutline-legendLabelled-3 PrivateNotchedOutline-legendNotched-4" - > - <span> - Required -  * - </span> - </legend> - </fieldset> - </ForwardRef(NotchedOutline)> - </WithStyles(ForwardRef(NotchedOutline))> - </div> - </ForwardRef(InputBase)> - </WithStyles(ForwardRef(InputBase))> - </ForwardRef(OutlinedInput)> - </WithStyles(ForwardRef(OutlinedInput))> - </div> - </ForwardRef(FormControl)> - </WithStyles(ForwardRef(FormControl))> - </ForwardRef(TextField)> - </WithStyles(ForwardRef(TextField))> - <WithStyles(ForwardRef(TextField)) - defaultValue="1.0.0" - id="policyVersion" - label="Required" - onChange={[Function]} - required={true} - size="small" - variant="outlined" - > - <ForwardRef(TextField) - classes={ - Object { - "root": "MuiTextField-root", - } - } - defaultValue="1.0.0" - id="policyVersion" - label="Required" - onChange={[Function]} - required={true} - size="small" - variant="outlined" - > - <WithStyles(ForwardRef(FormControl)) - className="MuiTextField-root" - color="primary" - disabled={false} - error={false} - fullWidth={false} - required={true} - size="small" - variant="outlined" - > - <ForwardRef(FormControl) - className="MuiTextField-root" - classes={ - Object { - "fullWidth": "MuiFormControl-fullWidth", - "marginDense": "MuiFormControl-marginDense", - "marginNormal": "MuiFormControl-marginNormal", - "root": "MuiFormControl-root", - } - } - color="primary" - disabled={false} - error={false} - fullWidth={false} - required={true} - size="small" - variant="outlined" - > - <div - className="MuiFormControl-root MuiTextField-root" - > - <WithStyles(ForwardRef(InputLabel)) - htmlFor="policyVersion" - id="policyVersion-label" - > - <ForwardRef(InputLabel) - classes={ - Object { - "animated": "MuiInputLabel-animated", - "asterisk": "MuiInputLabel-asterisk", - "disabled": "Mui-disabled", - "error": "Mui-error", - "filled": "MuiInputLabel-filled", - "focused": "Mui-focused", - "formControl": "MuiInputLabel-formControl", - "marginDense": "MuiInputLabel-marginDense", - "outlined": "MuiInputLabel-outlined", - "required": "Mui-required", - "root": "MuiInputLabel-root", - "shrink": "MuiInputLabel-shrink", - } - } - htmlFor="policyVersion" - id="policyVersion-label" - > - <WithStyles(ForwardRef(FormLabel)) - className="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined" - classes={ - Object { - "asterisk": "MuiInputLabel-asterisk", - "disabled": "Mui-disabled", - "error": "Mui-error", - "focused": "Mui-focused", - "required": "Mui-required", - } - } - data-shrink={true} - htmlFor="policyVersion" - id="policyVersion-label" - > - <ForwardRef(FormLabel) - className="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined" - classes={ - Object { - "asterisk": "MuiFormLabel-asterisk MuiInputLabel-asterisk", - "colorSecondary": "MuiFormLabel-colorSecondary", - "disabled": "Mui-disabled Mui-disabled", - "error": "Mui-error Mui-error", - "filled": "MuiFormLabel-filled", - "focused": "Mui-focused Mui-focused", - "required": "Mui-required Mui-required", - "root": "MuiFormLabel-root", - } - } - data-shrink={true} - htmlFor="policyVersion" - id="policyVersion-label" - > - <label - className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required" - data-shrink={true} - htmlFor="policyVersion" - id="policyVersion-label" - > - Required - <span - aria-hidden={true} - className="MuiFormLabel-asterisk MuiInputLabel-asterisk" - > -   - * - </span> - </label> - </ForwardRef(FormLabel)> - </WithStyles(ForwardRef(FormLabel))> - </ForwardRef(InputLabel)> - </WithStyles(ForwardRef(InputLabel))> - <WithStyles(ForwardRef(OutlinedInput)) - autoFocus={false} - defaultValue="1.0.0" - fullWidth={false} - id="policyVersion" - label={ - <React.Fragment> - Required -  * - </React.Fragment> - } - multiline={false} - onChange={[Function]} - > - <ForwardRef(OutlinedInput) - autoFocus={false} - classes={ - Object { - "adornedEnd": "MuiOutlinedInput-adornedEnd", - "adornedStart": "MuiOutlinedInput-adornedStart", - "colorSecondary": "MuiOutlinedInput-colorSecondary", - "disabled": "Mui-disabled", - "error": "Mui-error", - "focused": "Mui-focused", - "input": "MuiOutlinedInput-input", - "inputAdornedEnd": "MuiOutlinedInput-inputAdornedEnd", - "inputAdornedStart": "MuiOutlinedInput-inputAdornedStart", - "inputMarginDense": "MuiOutlinedInput-inputMarginDense", - "inputMultiline": "MuiOutlinedInput-inputMultiline", - "marginDense": "MuiOutlinedInput-marginDense", - "multiline": "MuiOutlinedInput-multiline", - "notchedOutline": "MuiOutlinedInput-notchedOutline", - "root": "MuiOutlinedInput-root", - } - } - defaultValue="1.0.0" - fullWidth={false} - id="policyVersion" - label={ - <React.Fragment> - Required -  * - </React.Fragment> - } - multiline={false} - onChange={[Function]} - > - <WithStyles(ForwardRef(InputBase)) - autoFocus={false} - classes={ - Object { - "adornedEnd": "MuiOutlinedInput-adornedEnd", - "adornedStart": "MuiOutlinedInput-adornedStart", - "colorSecondary": "MuiOutlinedInput-colorSecondary", - "disabled": "Mui-disabled", - "error": "Mui-error", - "focused": "Mui-focused", - "input": "MuiOutlinedInput-input", - "inputAdornedEnd": "MuiOutlinedInput-inputAdornedEnd", - "inputAdornedStart": "MuiOutlinedInput-inputAdornedStart", - "inputMarginDense": "MuiOutlinedInput-inputMarginDense", - "inputMultiline": "MuiOutlinedInput-inputMultiline", - "marginDense": "MuiOutlinedInput-marginDense", - "multiline": "MuiOutlinedInput-multiline", - "notchedOutline": null, - "root": "MuiOutlinedInput-root", - } - } - defaultValue="1.0.0" - fullWidth={false} - id="policyVersion" - inputComponent="input" - multiline={false} - onChange={[Function]} - renderSuffix={[Function]} - type="text" - > - <ForwardRef(InputBase) - autoFocus={false} - classes={ - Object { - "adornedEnd": "MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd", - "adornedStart": "MuiInputBase-adornedStart MuiOutlinedInput-adornedStart", - "colorSecondary": "MuiInputBase-colorSecondary MuiOutlinedInput-colorSecondary", - "disabled": "Mui-disabled Mui-disabled", - "error": "Mui-error Mui-error", - "focused": "Mui-focused Mui-focused", - "formControl": "MuiInputBase-formControl", - "fullWidth": "MuiInputBase-fullWidth", - "input": "MuiInputBase-input MuiOutlinedInput-input", - "inputAdornedEnd": "MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd", - "inputAdornedStart": "MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart", - "inputHiddenLabel": "MuiInputBase-inputHiddenLabel", - "inputMarginDense": "MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense", - "inputMultiline": "MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline", - "inputTypeSearch": "MuiInputBase-inputTypeSearch", - "marginDense": "MuiInputBase-marginDense MuiOutlinedInput-marginDense", - "multiline": "MuiInputBase-multiline MuiOutlinedInput-multiline", - "root": "MuiInputBase-root MuiOutlinedInput-root", - } - } - defaultValue="1.0.0" - fullWidth={false} - id="policyVersion" - inputComponent="input" - multiline={false} - onChange={[Function]} - renderSuffix={[Function]} - type="text" - > - <div - className="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense" - onClick={[Function]} - > - <input - aria-invalid={false} - autoFocus={false} - className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense" - defaultValue="1.0.0" - disabled={false} - id="policyVersion" - onAnimationStart={[Function]} - onBlur={[Function]} - onChange={[Function]} - onFocus={[Function]} - required={true} - type="text" - /> - <WithStyles(ForwardRef(NotchedOutline)) - className="MuiOutlinedInput-notchedOutline" - label={ - <React.Fragment> - Required -  * - </React.Fragment> - } - labelWidth={0} - notched={true} - > - <ForwardRef(NotchedOutline) - className="MuiOutlinedInput-notchedOutline" - classes={ - Object { - "legend": "PrivateNotchedOutline-legend-2", - "legendLabelled": "PrivateNotchedOutline-legendLabelled-3", - "legendNotched": "PrivateNotchedOutline-legendNotched-4", - "root": "PrivateNotchedOutline-root-1", - } - } - label={ - <React.Fragment> - Required -  * - </React.Fragment> - } - labelWidth={0} - notched={true} - > - <fieldset - aria-hidden={true} - className="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline" - > - <legend - className="PrivateNotchedOutline-legendLabelled-3 PrivateNotchedOutline-legendNotched-4" - > - <span> - Required -  * - </span> - </legend> - </fieldset> - </ForwardRef(NotchedOutline)> - </WithStyles(ForwardRef(NotchedOutline))> - </div> - </ForwardRef(InputBase)> - </WithStyles(ForwardRef(InputBase))> - </ForwardRef(OutlinedInput)> - </WithStyles(ForwardRef(OutlinedInput))> - </div> - </ForwardRef(FormControl)> - </WithStyles(ForwardRef(FormControl))> - </ForwardRef(TextField)> - </WithStyles(ForwardRef(TextField))> - <Button - active={false} - disabled={false} - onClick={[Function]} - title="Create a new policy version from the defined parameters" - variant="secondary" - > - <button - className="btn btn-secondary" - disabled={false} - onClick={[Function]} - title="Create a new policy version from the defined parameters" - type="button" - > - Create New Version - </button> - </Button> - <styled.div - id="onap.policies.monitoring.tcagen2_1.0.0_org.onap.new_1.0.0" - title="Policy Properties" - > - <div - className="sc-gsTCUz hXXDCR" - id="onap.policies.monitoring.tcagen2_1.0.0_org.onap.new_1.0.0" - title="Policy Properties" - /> - </styled.div> - </div> - </styled.div> -</PolicyEditor> -`; diff --git a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyModal.test.js.snap b/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyModal.test.js.snap deleted file mode 100644 index 8b1261b1c..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyModal.test.js.snap +++ /dev/null @@ -1,159 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify PolicyModal Test the render method 1`] = ` -<Styled(Modal) - backdrop="static" - keyboard={false} - onHide={[Function]} - show={true} - size="xl" -> - <ModalHeader - closeButton={true} - closeLabel="Close" - > - <ModalTitle> - Edit the policy - </ModalTitle> - </ModalHeader> - <Alert - closeLabel="Close alert" - dismissible={true} - onClose={[Function]} - show={false} - transition={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "appear": false, - "in": false, - "mountOnEnter": false, - "timeout": 300, - "unmountOnExit": false, - }, - "render": [Function], - } - } - variant="success" - > - <styled.div /> - </Alert> - <Alert - closeLabel="Close alert" - dismissible={true} - onClose={[Function]} - show={false} - transition={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "appear": false, - "in": false, - "mountOnEnter": false, - "timeout": 300, - "unmountOnExit": false, - }, - "render": [Function], - } - } - variant="danger" - > - <styled.div /> - </Alert> - <ModalBody> - <div - id="editor" - /> - <FormGroup - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "noGutters": false, - }, - "render": [Function], - } - } - controlId="formPlaintextEmail" - > - <FormLabel - column={true} - sm="2" - srOnly={false} - > - Pdp Group Info - </FormLabel> - <Col - sm="3" - > - <StateManager - defaultInputValue="" - defaultMenuIsOpen={false} - defaultValue={null} - onChange={[Function]} - options={ - Array [ - Object { - "label": "monitoring", - "value": "monitoring", - }, - ] - } - value={ - Object { - "label": undefined, - "value": undefined, - } - } - /> - </Col> - <Col - sm="3" - > - <StateManager - defaultInputValue="" - defaultMenuIsOpen={false} - defaultValue={null} - onChange={[Function]} - options={Array []} - value={ - Object { - "label": undefined, - "value": undefined, - } - } - /> - </Col> - </FormGroup> - </ModalBody> - <ModalFooter> - <Button - active={false} - disabled={false} - key="close" - onClick={[Function]} - variant="secondary" - > - Close - </Button> - <Button - active={false} - disabled={false} - key="save" - onClick={[Function]} - variant="primary" - > - Save Changes - </Button> - <Button - active={false} - disabled={false} - key="refresh" - onClick={[Function]} - variant="primary" - > - Refresh - </Button> - </ModalFooter> -</Styled(Modal)> -`; diff --git a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/ToscaViewer.test.js.snap b/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/ToscaViewer.test.js.snap deleted file mode 100644 index 61fb4850d..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/ToscaViewer.test.js.snap +++ /dev/null @@ -1,30 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify ToscaViewer Test the render method 1`] = ` -<styled.div> - <pre> - tosca_definitions_version: tosca_simple_yaml_1_1_0 -policy_types: - onap.policies.controlloop.Guard: - properties: { - } - name: onap.policies.controlloop.Guard - version: 1.0.0 - derived_from: tosca.policies.Root - metadata: { - } - description: Guard Policies for Control Loop Operational Policies -name: ToscaServiceTemplateSimple -version: 1.0.0 - - </pre> - <Button - active={false} - disabled={false} - title="Create a new policy version from the defined parameters" - variant="secondary" - > - Create New Version - </Button> -</styled.div> -`; diff --git a/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.json b/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.json deleted file mode 100644 index 3b001b384..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.json +++ /dev/null @@ -1,179 +0,0 @@ -{ - "title": "onap.policies.monitoring.tcagen2", - "type": "object", - "required": [ - "tca.policy" - ], - "properties": { - "tca.policy": { - "title": "onap.datatypes.monitoring.tca_policy", - "type": "object", - "required": [ - "domain", - "metricsPerEventName" - ], - "properties": { - "domain": { - "type": "string", - "description": "Domain name to which TCA needs to be applied", - "default": "measurementsForVfScaling", - "const": "measurementsForVfScaling" - }, - "metricsPerEventName": { - "type": "array", - "description": "Contains eventName and threshold details that need to be applied to given eventName", - "items": { - "title": "onap.datatypes.monitoring.metricsPerEventName", - "type": "object", - "required": [ - "controlLoopSchemaType", - "eventName", - "policyName", - "policyScope", - "policyVersion", - "thresholds" - ], - "properties": { - "controlLoopSchemaType": { - "type": "string", - "description": "Specifies Control Loop Schema Type for the event Name e.g. VNF, VM", - "enum": [ - "VM", - "VNF" - ] - }, - "eventName": { - "type": "string", - "description": "Event name to which thresholds need to be applied" - }, - "policyName": { - "type": "string", - "description": "TCA Policy Scope Name" - }, - "policyScope": { - "type": "string", - "description": "TCA Policy Scope" - }, - "policyVersion": { - "type": "string", - "description": "TCA Policy Scope Version" - }, - "thresholds": { - "type": "array", - "description": "Thresholds associated with eventName", - "items": { - "title": "onap.datatypes.monitoring.thresholds", - "type": "object", - "required": [ - "closedLoopControlName", - "closedLoopEventStatus", - "direction", - "fieldPath", - "severity", - "thresholdValue", - "version" - ], - "properties": { - "closedLoopControlName": { - "type": "string", - "description": "Closed Loop Control Name associated with the threshold" - }, - "closedLoopEventStatus": { - "type": "string", - "description": "Closed Loop Event Status of the threshold", - "enum": [ - "ONSET", - "ABATED" - ] - }, - "direction": { - "type": "string", - "description": "Direction of the threshold", - "enum": [ - "LESS", - "LESS_OR_EQUAL", - "GREATER", - "GREATER_OR_EQUAL", - "EQUAL" - ] - }, - "fieldPath": { - "type": "string", - "description": "Json field Path as per CEF message which needs to be analyzed for TCA", - "enum": [ - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedOctetsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedUnicastPacketsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedMulticastPacketsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedBroadcastPacketsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedDiscardedPacketsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedErrorPacketsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedOctetsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedUnicastPacketsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedMulticastPacketsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedBroadcastPacketsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedDiscardedPacketsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedErrorPacketsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedTotalPacketsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedOctetsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedUnicastPacketsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedMulticastPacketsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedBroadcastPacketsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedDiscardedPacketsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedErrorPacketsDelta", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedTotalPacketsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedOctetsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedUnicastPacketsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedMulticastPacketsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedBroadcastPacketsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedDiscardedPacketsAccumulated", - "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedErrorPacketsAccumulated", - "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuIdle", - "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageInterrupt", - "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageNice", - "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageSoftIrq", - "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageSteal", - "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageSystem", - "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuWait", - "$.event.measurementsForVfScalingFields.cpuUsageArray[*].percentUsage", - "$.event.measurementsForVfScalingFields.meanRequestLatency", - "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryBuffered", - "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryCached", - "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryConfigured", - "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryFree", - "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryUsed", - "$.event.measurementsForVfScalingFields.additionalMeasurements[*].arrayOfFields[0].value" - ] - }, - "severity": { - "type": "string", - "description": "Threshold Event Severity", - "enum": [ - "CRITICAL", - "MAJOR", - "MINOR", - "WARNING", - "NORMAL" - ] - }, - "thresholdValue": { - "type": "integer", - "description": "Threshold value for the field Path inside CEF message" - }, - "version": { - "type": "string", - "description": "Version number associated with the threshold" - } - } - }, - "format": "tabs-top" - } - } - }, - "format": "tabs-top" - } - } - } - } -} diff --git a/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.yaml b/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.yaml deleted file mode 100644 index 15a3cec35..000000000 --- a/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.yaml +++ /dev/null @@ -1,13 +0,0 @@ -tosca_definitions_version: tosca_simple_yaml_1_1_0 -policy_types: - onap.policies.controlloop.Guard: - properties: { - } - name: onap.policies.controlloop.Guard - version: 1.0.0 - derived_from: tosca.policies.Root - metadata: { - } - description: Guard Policies for Control Loop Operational Policies -name: ToscaServiceTemplateSimple -version: 1.0.0 diff --git a/runtime/ui-react/src/components/dialogs/RefreshStatus.js b/runtime/ui-react/src/components/dialogs/RefreshStatus.js deleted file mode 100644 index e23ab3f84..000000000 --- a/runtime/ui-react/src/components/dialogs/RefreshStatus.js +++ /dev/null @@ -1,65 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 LoopActionService from '../../api/LoopActionService'; -import Spinner from 'react-bootstrap/Spinner'; -import styled from 'styled-components'; - -const StyledSpinnerDiv = styled.div` - justify-content: center !important; - display: flex !important; -`; - -export default class RefreshStatus extends React.Component { - state = { - loopName: this.props.loopCache.getLoopName() - }; - - componentWillReceiveProps(newProps) { - this.setState({ - loopName: newProps.loopCache.getLoopName() - }); - } - - componentDidMount() { - // refresh status and update loop logs - LoopActionService.refreshStatus(this.state.loopName).then(data => { - this.props.showSucAlert("Status successfully refreshed"); - this.props.updateLoopFunction(data); - this.props.history.push('/'); - }) - .catch(error => { - this.props.showFailAlert("Status refreshing failed"); - this.props.history.push('/'); - }); - } - - render() { - return ( - <StyledSpinnerDiv> - <Spinner animation="border" role="status"> - </Spinner> - </StyledSpinnerDiv> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/RefreshStatus.test.js b/runtime/ui-react/src/components/dialogs/RefreshStatus.test.js deleted file mode 100644 index 7736ffd49..000000000 --- a/runtime/ui-react/src/components/dialogs/RefreshStatus.test.js +++ /dev/null @@ -1,72 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 RefreshStatus from './RefreshStatus'; -import LoopCache from '../../api/LoopCache'; -import LoopActionService from '../../api/LoopActionService'; - -describe('Verify RefreshStatus', () => { - - const loopCache = new LoopCache({ - "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca" - }); - - it('Test refresh status failed', async () => { - const flushPromises = () => new Promise(setImmediate); - const historyMock = { push: jest.fn() }; - const showSucAlert = jest.fn(); - const showFailAlert = jest.fn(); - - const component = shallow(<RefreshStatus loopCache={ loopCache } history={ historyMock } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert }/>) - await flushPromises(); - component.update(); - - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - }); - - it('Test refresh status successful', async () => { - const flushPromises = () => new Promise(setImmediate); - const historyMock = { push: jest.fn() }; - const updateLoopFunction = jest.fn(); - const showSucAlert = jest.fn(); - const showFailAlert = jest.fn(); - - LoopActionService.refreshStatus = jest.fn().mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - } - }); - }); - - const component = shallow(<RefreshStatus loopCache={ loopCache } - loopAction="submit" history={ historyMock } updateLoopFunction={ updateLoopFunction } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert }/>) - await flushPromises(); - component.update(); - - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - }); - -}); diff --git a/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js deleted file mode 100644 index e7be9841e..000000000 --- a/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js +++ /dev/null @@ -1,173 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP POLICY-CLAMP - * ================================================================================ - * Copyright (C) 2019, 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, { forwardRef } from 'react' -import Button from 'react-bootstrap/Button'; -import Modal from 'react-bootstrap/Modal'; -import styled from 'styled-components'; -import TemplateService from '../../../api/TemplateService'; -import ArrowUpward from '@material-ui/icons/ArrowUpward'; -import ChevronLeft from '@material-ui/icons/ChevronLeft'; -import ChevronRight from '@material-ui/icons/ChevronRight'; -import Clear from '@material-ui/icons/Clear'; -import FirstPage from '@material-ui/icons/FirstPage'; -import LastPage from '@material-ui/icons/LastPage'; -import Search from '@material-ui/icons/Search'; -import MaterialTable from "material-table"; -import LoopCache from '../../../api/LoopCache'; -import SvgGenerator from '../../loop_viewer/svg/SvgGenerator'; - -const ModalStyled = styled(Modal)` - background-color: transparent; -` - -const cellStyle = { border: '1px solid black' }; -const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' }; -const rowHeaderStyle = { backgroundColor: '#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black' }; - -export default class ViewLoopTemplatesModal extends React.Component { - state = { - show: true, - content: 'Please select a loop template to display it', - selectedRow: -1, - loopTemplatesData: [], - fakeLoopCacheWithTemplate: new LoopCache({}), - loopTemplateColumnsDefinition: [ - { - title: "#", field: "index", render: rowData => rowData.tableData.id + 1, - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Template Name", field: "name", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Service Model Name", field: "modelService.serviceDetails.name", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Loop Type Allowed", field: "allowedLoopType", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "# Instances Allowed", field: "maximumInstancesAllowed", - cellStyle: cellStyle, - headerStyle: headerStyle - }, - { - title: "Modified Date", field: "updatedDate", editable: 'never', - cellStyle: cellStyle, - headerStyle: headerStyle - } - ], - tableIcons: { - FirstPage: forwardRef((props, ref) => <FirstPage { ...props } ref={ ref }/>), - LastPage: forwardRef((props, ref) => <LastPage { ...props } ref={ ref }/>), - NextPage: forwardRef((props, ref) => <ChevronRight { ...props } ref={ ref }/>), - PreviousPage: forwardRef((props, ref) => <ChevronLeft { ...props } ref={ ref }/>), - ResetSearch: forwardRef((props, ref) => <Clear { ...props } ref={ ref }/>), - Search: forwardRef((props, ref) => <Search { ...props } ref={ ref }/>), - SortArrow: forwardRef((props, ref) => <ArrowUpward { ...props } ref={ ref }/>) - } - }; - - constructor(props, context) { - super(props, context); - this.handleClose = this.handleClose.bind(this); - this.renderSvg = this.renderSvg.bind(this); - this.getLoopTemplate = this.getLoopTemplate.bind(this); - this.getAllLoopTemplates(); - } - - getAllLoopTemplates() { - TemplateService.getAllLoopTemplates().then(templatesData => { - // replace -1 in maximumInstancesAllowed with more meaningful 'No Limit' - for (let item in templatesData) { - if (templatesData[item].maximumInstancesAllowed === -1) { - templatesData[item].maximumInstancesAllowed = 'No Limit'; - } - } - this.setState({ loopTemplatesData: templatesData }) - }); - } - - getLoopTemplate(templateIdInDataArray) { - if (typeof templateIdInDataArray !== "undefined") { - this.setState({ - fakeLoopCacheWithTemplate: - new LoopCache({ - "loopTemplate": this.state.loopTemplatesData[templateIdInDataArray], - "name": "fakeLoop" - }) - }) - } else { - this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) }) - } - } - - handleClose() { - this.setState({ show: false }); - this.props.history.push('/') - } - - renderSvg() { - return ( - <SvgGenerator loopCache={ this.state.fakeLoopCacheWithTemplate } clickable={ false } generatedFrom={ SvgGenerator.GENERATED_FROM_TEMPLATE }/> - ) - } - - render() { - return ( - <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }> - <Modal.Header closeButton> - </Modal.Header> - <Modal.Body> - <MaterialTable - title={ "View Blueprint MicroService Templates" } - data={ this.state.loopTemplatesData } - columns={ this.state.loopTemplateColumnsDefinition } - icons={ this.state.tableIcons } - onRowClick={ (event, rowData) => { - this.getLoopTemplate(rowData.tableData.id); - this.setState({ selectedRow: rowData.tableData.id }) - } } - options={ { - headerStyle: rowHeaderStyle, - rowStyle: rowData => ({ - backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF' - }) - } } - /> - { this.renderSvg() } - </Modal.Body> - <Modal.Footer> - <Button variant="secondary" onClick={ this.handleClose }>Close</Button> - </Modal.Footer> - </ModalStyled> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js deleted file mode 100644 index d93f0b00c..000000000 --- a/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js +++ /dev/null @@ -1,163 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 ViewLoopTemplatesModal from './ViewLoopTemplatesModal'; -import { mount } from 'enzyme'; -import { BrowserRouter as Router } from 'react-router-dom'; - -describe('Verify ViewLoopTemplatesModal', () => { - beforeEach(() => { - fetch.resetMocks(); - }); - - it('Test API Successful', () => { - fetch.mockImplementationOnce(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - return Promise.resolve({ - "index": "1", - "name": "MTCA version 1", - "modelService.serviceDetails.name": "MTCA", - "allowedLoopType": "CLOSED", - "maximumInstancesAllowed": 1, - "updatedDate": "2019-09-06 19:09:42" - }); - } - }); - }); - const component = shallow(<ViewLoopTemplatesModal/>); - }); - - it('Test API Exception', () => { - fetch.mockImplementationOnce(() => { - return Promise.resolve({ - ok: false, - status: 500, - json: () => { - return Promise.resolve({ - "index": "1", - "name": "MTCA version 1", - "modelService.serviceDetails.name": "MTCA", - "allowedLoopType": "CLOSED", - "maximumInstancesAllowed": 1, - "updatedDate": "2019-09-06 19:09:42" - }); - } - }); - }); - const component = shallow(<ViewLoopTemplatesModal/>); - }); - - it('Test API Rejection', () => { - const myMockFunc = fetch.mockImplementationOnce(() => Promise.reject('error')); - setTimeout(() => myMockFunc().catch(e => { - console.info(e); - }), - 100 - ); - const component = shallow(<ViewLoopTemplatesModal/>); - expect(myMockFunc.mock.calls.length).toBe(1); - }); - - it('Test the tosca model view render method', () => { - fetch.mockImplementationOnce(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - return Promise.resolve({ - "index": "1", - "name": "MTCA version 1", - "modelService.serviceDetails.name": "MTCA", - "allowedLoopType": "CLOSED", - "maximumInstancesAllowed": 1, - "updatedDate": "2019-09-06 19:09:42" - }); - } - }); - }); - const component = shallow(<ViewLoopTemplatesModal/>); - component.setState({ - loopTemplateData: { - "index": "1", - "name": "MTCA version 1", - "modelService.serviceDetails.name": "MTCA", - "allowedLoopType": "CLOSED", - "maximumInstancesAllowed": 1, - "updatedDate": "2019-09-06 19:09:42" - } - }); - expect(component).toMatchSnapshot(); - }); - - it('Test Table icons', () => { - fetch.mockImplementationOnce(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - return Promise.resolve({ - "index": "1", - "name": "MTCA version 1", - "modelService.serviceDetails.name": "MTCA", - "allowedLoopType": "CLOSED", - "maximumInstancesAllowed": 1, - "updatedDate": "2019-09-06 19:09:42" - }); - } - }); - }); - const component = mount(<Router><ViewLoopTemplatesModal/></Router>); - expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy(); - }); - - it('Test handleClose', () => { - fetch.mockImplementationOnce(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - return Promise.resolve({ - "index": "1", - "name": "MTCA version 1", - "modelService.serviceDetails.name": "MTCA", - "allowedLoopType": "CLOSED", - "maximumInstancesAllowed": 1, - "updatedDate": "2019-09-06 19:09:42" - }); - } - }); - }); - const historyMock = { push: jest.fn() }; - const handleClose = jest.spyOn(ViewLoopTemplatesModal.prototype, 'handleClose'); - const component = shallow(<ViewLoopTemplatesModal history={ historyMock }/>) - component.find('[variant="secondary"]').prop('onClick')(); - expect(handleClose).toHaveBeenCalledTimes(1); - expect(component.state('show')).toEqual(false); - expect(historyMock.push.mock.calls[0]).toEqual(['/']); - handleClose.mockClear(); - }); -}); diff --git a/runtime/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap b/runtime/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap deleted file mode 100644 index 73f659606..000000000 --- a/runtime/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap +++ /dev/null @@ -1,157 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1`] = ` -<Styled(Modal) - backdrop="static" - keyboard={false} - onHide={[Function]} - show={true} - size="xl" -> - <ModalHeader - closeButton={true} - closeLabel="Close" - /> - <ModalBody> - <WithStyles(Component) - columns={ - Array [ - Object { - "cellStyle": Object { - "border": "1px solid black", - }, - "field": "index", - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "2px solid black", - }, - "render": [Function], - "title": "#", - }, - Object { - "cellStyle": Object { - "border": "1px solid black", - }, - "field": "name", - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "2px solid black", - }, - "title": "Template Name", - }, - Object { - "cellStyle": Object { - "border": "1px solid black", - }, - "field": "modelService.serviceDetails.name", - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "2px solid black", - }, - "title": "Service Model Name", - }, - Object { - "cellStyle": Object { - "border": "1px solid black", - }, - "field": "allowedLoopType", - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "2px solid black", - }, - "title": "Loop Type Allowed", - }, - Object { - "cellStyle": Object { - "border": "1px solid black", - }, - "field": "maximumInstancesAllowed", - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "2px solid black", - }, - "title": "# Instances Allowed", - }, - Object { - "cellStyle": Object { - "border": "1px solid black", - }, - "editable": "never", - "field": "updatedDate", - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "2px solid black", - }, - "title": "Modified Date", - }, - ] - } - data={Array []} - icons={ - Object { - "FirstPage": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "LastPage": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "NextPage": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "PreviousPage": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "ResetSearch": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "Search": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - "SortArrow": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, - } - } - onRowClick={[Function]} - options={ - Object { - "headerStyle": Object { - "backgroundColor": "#ddd", - "border": "1px solid black", - "fontSize": "15pt", - "text": "bold", - }, - "rowStyle": [Function], - } - } - title="View Blueprint MicroService Templates" - /> - <withRouter(SvgGenerator) - clickable={false} - generatedFrom="TEMPLATE" - loopCache={ - LoopCache { - "loopJsonCache": Object {}, - } - } - /> - </ModalBody> - <ModalFooter> - <Button - active={false} - disabled={false} - onClick={[Function]} - variant="secondary" - > - Close - </Button> - </ModalFooter> -</Styled(Modal)> -`; diff --git a/runtime/ui-react/src/components/dialogs/UserInfoModal.js b/runtime/ui-react/src/components/dialogs/UserInfoModal.js deleted file mode 100644 index d452f6de0..000000000 --- a/runtime/ui-react/src/components/dialogs/UserInfoModal.js +++ /dev/null @@ -1,115 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 UserService from '../../api/UserService'; - -const ModalStyled = styled(Modal)` - background-color: transparent; -` - -export default class UserInfoModal extends React.Component { - - constructor(props, context) { - super(props, context); - - this.handleClose = this.handleClose.bind(this); - this.renderPermissions = this.renderPermissions.bind(this); - this.renderUserName = this.renderUserName.bind(this); - this.state = { - show: true, - userInfo: {} - }; - } - - componentWillMount() { - UserService.getUserInfo().then(userInfo => { - this.setState({ userInfo: userInfo }) - }); - } - - handleClose() { - this.props.history.push('/'); - } - - renderPermissions() { - if (this.state.userInfo["allPermissions"]) { - var listOfPermissions = this.state.userInfo["allPermissions"].map(function (perm) { - return <Form.Control key={ perm } plaintext readOnly defaultValue={ perm }/>; - }) - return listOfPermissions; - } else { - return; - } - } - - renderUserName() { - if (this.state.userInfo["userName"]) { - return <Form.Control plaintext readOnly defaultValue={ this.state.userInfo["userName"] }/> - } else { - return; - } - } - - renderVersion() { - if (this.state.userInfo["cldsVersion"]) { - return <Form.Control plaintext readOnly defaultValue={ this.state.userInfo["cldsVersion"] }/> - } else { - return; - } - } - - render() { - return ( - <ModalStyled size="lg" show={ this.state.show } onHide={ this.handleClose }> - <Modal.Header closeButton> - <Modal.Title>User Info</Modal.Title> - </Modal.Header> - <Modal.Body> - <Form.Group as={ Row } controlId="userName"> - <Form.Label column sm="3">Current User:</Form.Label> - <Col>{ this.renderUserName() }</Col> - </Form.Group> - <Form.Group as={ Row } controlId="cldsVersion"> - <Form.Label column sm="3">CLDS Version:</Form.Label> - <Col>{ this.renderVersion() }</Col> - </Form.Group> - <Form.Group as={ Row } controlId="userPermissions"> - <Form.Label column sm="3">User Permissions:</Form.Label> - <Col> - { this.renderPermissions() } - </Col> - </Form.Group> - </Modal.Body> - <Modal.Footer> - <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button> - </Modal.Footer> - </ModalStyled> - ); - } -} diff --git a/runtime/ui-react/src/components/dialogs/UserInfoModal.test.js b/runtime/ui-react/src/components/dialogs/UserInfoModal.test.js deleted file mode 100644 index 716879232..000000000 --- a/runtime/ui-react/src/components/dialogs/UserInfoModal.test.js +++ /dev/null @@ -1,84 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 UserInfoModal from './UserInfoModal'; - -describe('Verify UserInfoModal', () => { - - beforeEach(() => { - fetch.resetMocks(); - fetch.mockImplementation(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - return Promise.resolve({ - "userName": "test", - "cldsVersion": "1.0.0" - }); - } - }); - }); - }) - - it('Test the render method full permission', () => { - const component = shallow(<UserInfoModal/>) - component.setState({ - userInfo: { - "userName": "test", - "cldsVersion": "1.0.0", - "allPermissions": ["permission1", "permission2"] - } - }); - expect(component).toMatchSnapshot(); - }); - - it('Test the render method no permission', () => { - const component = shallow(<UserInfoModal/>) - component.setState({ - userInfo: {} - }); - - expect(component.find('FormControl').length).toEqual(0); - }); - - it('Test the render method read permission', () => { - const component = shallow(<UserInfoModal/>) - component.setState({ - userInfo: { - "userName": "test", - "cldsVersion": "1.0.0", - "allPermissions": ["permission1", "permission2"] - } - }); - - expect(component.find('FormControl').length).toEqual(4); - - const forms = component.find('FormControl'); - expect(forms.get(0).props.defaultValue).toEqual("test"); - expect(forms.get(1).props.defaultValue).toEqual("1.0.0"); - expect(forms.get(2).props.defaultValue).toEqual("permission1"); - expect(forms.get(3).props.defaultValue).toEqual("permission2"); - }); -}); diff --git a/runtime/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap b/runtime/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap deleted file mode 100644 index 548a2d938..000000000 --- a/runtime/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap +++ /dev/null @@ -1,119 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify UserInfoModal Test the render method full permission 1`] = ` -<Styled(Modal) - onHide={[Function]} - show={true} - size="lg" -> - <ModalHeader - closeButton={true} - closeLabel="Close" - > - <ModalTitle> - User Info - </ModalTitle> - </ModalHeader> - <ModalBody> - <FormGroup - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "noGutters": false, - }, - "render": [Function], - } - } - controlId="userName" - > - <FormLabel - column={true} - sm="3" - srOnly={false} - > - Current User: - </FormLabel> - <Col> - <FormControl - defaultValue="test" - plaintext={true} - readOnly={true} - /> - </Col> - </FormGroup> - <FormGroup - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "noGutters": false, - }, - "render": [Function], - } - } - controlId="cldsVersion" - > - <FormLabel - column={true} - sm="3" - srOnly={false} - > - CLDS Version: - </FormLabel> - <Col> - <FormControl - defaultValue="1.0.0" - plaintext={true} - readOnly={true} - /> - </Col> - </FormGroup> - <FormGroup - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "noGutters": false, - }, - "render": [Function], - } - } - controlId="userPermissions" - > - <FormLabel - column={true} - sm="3" - srOnly={false} - > - User Permissions: - </FormLabel> - <Col> - <FormControl - defaultValue="permission1" - key="permission1" - plaintext={true} - readOnly={true} - /> - <FormControl - defaultValue="permission2" - key="permission2" - plaintext={true} - readOnly={true} - /> - </Col> - </FormGroup> - </ModalBody> - <ModalFooter> - <Button - active={false} - disabled={false} - onClick={[Function]} - type="null" - variant="secondary" - > - Cancel - </Button> - </ModalFooter> -</Styled(Modal)> -`; diff --git a/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js deleted file mode 100644 index 3435ba3bc..000000000 --- a/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js +++ /dev/null @@ -1,97 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 Table from 'react-bootstrap/Table'; -import LoopCache from '../../../api/LoopCache'; -import styled from 'styled-components'; - -const LoopLogsHeaderDivStyled = styled.div` - background-color: ${ props => props.theme.loopLogsHeaderBackgroundColor }; - padding: 10px 10px; - color: ${ props => props.theme.loopLogsHeaderFontColor }; -` -const TableStyled = styled(Table)` - - overflow: auto; -` -const TableRow = ({ logRow }) => ( - <tr> - <td>{ logRow.logInstant }</td> - <td>{ logRow.logType }</td> - <td>{ logRow.logComponent }</td> - <td>{ logRow.message }</td> - </tr> - -) - -export default class LoopLogs extends React.Component { - - state = { - loopCache: new LoopCache({}) - } - - constructor(props) { - super(props); - this.renderLogs = this.renderLogs.bind(this); - this.state.loopCache = props.loopCache; - } - - shouldComponentUpdate(nextProps, nextState) { - return this.state.loopCache !== nextState.loopCache; - } - - componentWillReceiveProps(newProps) { - this.setState({ - loopCache: newProps.loopCache - }); - } - - renderLogs() { - let logsArray = this.state.loopCache.getLoopLogsArray(); - if (logsArray != null) { - return (logsArray.map(row => <TableRow key={ row.id } logRow={ row }/>)); - } - } - - render() { - return ( - <LoopLogsHeaderDivStyled> - <label>Loop Logs</label> - <TableStyled striped hover variant responsive> - <thead> - <tr> - <th><span align="left">Date</span></th> - <th><span align="left">Type</span></th> - <th><span align="left">Component</span></th> - <th><span align="right">Log</span></th> - </tr> - </thead> - <tbody> - { this.renderLogs() } - </tbody> - </TableStyled> - </LoopLogsHeaderDivStyled> - - ); - } -} diff --git a/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js b/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js deleted file mode 100644 index d3a21d80d..000000000 --- a/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js +++ /dev/null @@ -1,70 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 LoopLogs from './LoopLogs'; -import LoopCache from '../../../api/LoopCache'; - -describe('Verify LoopLogs', () => { - - const loopCache = new LoopCache({ - "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", - "loopLogs": [ - { - "id": 1, - "logType": "INFO", - "logComponent": "CLAMP", - "message": "Operational policies UPDATED", - "logInstant": "2019-07-08T09:44:37Z" - } - ] - }); - - it('Test the render method', () => { - const component = shallow(<LoopLogs loopCache={ loopCache }/>) - expect(component).toMatchSnapshot(); - - const loopCacheUpdated = new LoopCache({ - "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", - "loopLogs": [ - { - "id": 1, - "logType": "INFO", - "logComponent": "CLAMP", - "message": "Operational policies UPDATED", - "logInstant": "2019-07-08T09:44:37Z" - }, - { - "id": 2, - "logType": "INFO", - "logComponent": "CLAMP", - "message": "Operational policies UPDATED", - "logInstant": "2019-07-08T09:44:50Z" - } - ] - }); - - component.setProps({ loopCache: loopCacheUpdated }); - expect(component.find('TableRow').length).toEqual(2); - }); -}); diff --git a/runtime/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap b/runtime/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap deleted file mode 100644 index 996c67457..000000000 --- a/runtime/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap +++ /dev/null @@ -1,62 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify LoopLogs Test the render method 1`] = ` -<styled.div> - <label> - Loop Logs - </label> - <Styled(Component) - hover={true} - responsive={true} - striped={true} - variant={true} - > - <thead> - <tr> - <th> - <span - align="left" - > - Date - </span> - </th> - <th> - <span - align="left" - > - Type - </span> - </th> - <th> - <span - align="left" - > - Component - </span> - </th> - <th> - <span - align="right" - > - Log - </span> - </th> - </tr> - </thead> - <tbody> - <TableRow - key="1" - logRow={ - Object { - "id": 1, - "logComponent": "CLAMP", - "logInstant": "2019-07-08T09:44:37Z", - "logType": "INFO", - "message": "Operational policies UPDATED", - } - } - /> - </tbody> - </Styled(Component)> -</styled.div> -`; diff --git a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js b/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js deleted file mode 100644 index f539ad436..000000000 --- a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js +++ /dev/null @@ -1,110 +0,0 @@ -/*- -* ============LICENSE_START======================================================= -* ONAP CLAMP -* ================================================================================ -* Copyright (C) 2019 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 Table from 'react-bootstrap/Table'; -import styled from 'styled-components'; -import LoopCache from '../../../api/LoopCache'; - -const LoopStatusViewDivStyled = styled.div` - background-color: ${ props => props.theme.loopViewerHeaderBackgroundColor }; - padding: 10px 10px; - color: ${ props => props.theme.loopViewerHeaderFontColor }; -` - -const TableStyled = styled(Table)` - overflow: auto; -` - -const TableRow = ({ statusRow }) => ( - <tr> - <td>{ statusRow.componentName }</td> - <td>{ statusRow.stateName }</td> - <td>{ statusRow.description }</td> - </tr> - -) - -export default class LoopStatus extends React.Component { - state = { - loopCache: new LoopCache({}) - } - - constructor(props) { - super(props); - this.renderStatus = this.renderStatus.bind(this); - this.state.loopCache = props.loopCache; - } - - - renderStatus() { - let componentStates = this.state.loopCache.getComponentStates(); - if (componentStates != null) { - return Object.keys(componentStates).map((key) => { - console.debug("Adding status for: ", key); - var res = {} - res[key] = this.state.loopCache.getComponentStates()[key]; - return (<TableRow key={ key } statusRow={ { - 'componentName': key, - 'stateName': this.state.loopCache.getComponentStates()[key].componentState.stateName, - 'description': this.state.loopCache.getComponentStates()[key].componentState.description - } }/>) - }) - - } - } - - shouldComponentUpdate(nextProps, nextState) { - return this.state.loopCache !== nextState.loopCache; - } - - componentWillReceiveProps(newProps) { - this.setState({ - loopCache: newProps.loopCache - }); - } - - render() { - return ( - <LoopStatusViewDivStyled> - <label>Loop Status: { this.state.loopCache.getComputedState() } - </label> - - <div> - <TableStyled striped hover variant responsive> - <thead> - <tr> - <th><span align="left">Component Name</span></th> - <th><span align="left">Component State</span></th> - <th><span align="right">Description</span></th> - </tr> - </thead> - <tbody> - { this.renderStatus() } - </tbody> - </TableStyled> - </div> - </LoopStatusViewDivStyled> - ); - } -} - diff --git a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js b/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js deleted file mode 100644 index b84067e18..000000000 --- a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js +++ /dev/null @@ -1,78 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 LoopStatus from './LoopStatus'; -import LoopCache from '../../../api/LoopCache'; - -describe('Verify LoopStatus', () => { - - const loopCache = new LoopCache({ - "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", - "lastComputedState": "DESIGN", - "components": { - "POLICY": { - "componentState": { - "stateName": "NOT_SENT", - "description": "The policies defined have NOT yet been created on the policy engine" - } - }, - "DCAE": { - "componentState": { - "stateName": "BLUEPRINT_DEPLOYED", - "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop" - } - } - } - }); - - it('Test the render method', () => { - const component = shallow(<LoopStatus loopCache={ loopCache }/>) - - expect(component).toMatchSnapshot(); - - const loopCacheUpdated = new LoopCache({ - "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", - "lastComputedState": "SUBMIT", - "components": { - "POLICY": { - "componentState": { - "stateName": "SENT", - "description": "The policies defined have NOT yet been created on the policy engine" - } - }, - "DCAE": { - "componentState": { - "stateName": "BLUEPRINT_DEPLOYED", - "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop" - } - } - } - }); - component.setProps({ loopCache: loopCacheUpdated }); - - const forms = component.find('TableRow'); - expect(forms.get(0).props.statusRow.stateName).toEqual("SENT"); - expect(component.find('label').text()).toContain('SUBMIT'); - }); -}); diff --git a/runtime/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap b/runtime/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap deleted file mode 100644 index 24d879de9..000000000 --- a/runtime/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap +++ /dev/null @@ -1,66 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify LoopStatus Test the render method 1`] = ` -<styled.div> - <label> - Loop Status: - DESIGN - </label> - <div> - <Styled(Component) - hover={true} - responsive={true} - striped={true} - variant={true} - > - <thead> - <tr> - <th> - <span - align="left" - > - Component Name - </span> - </th> - <th> - <span - align="left" - > - Component State - </span> - </th> - <th> - <span - align="right" - > - Description - </span> - </th> - </tr> - </thead> - <tbody> - <TableRow - key="POLICY" - statusRow={ - Object { - "componentName": "POLICY", - "description": "The policies defined have NOT yet been created on the policy engine", - "stateName": "NOT_SENT", - } - } - /> - <TableRow - key="DCAE" - statusRow={ - Object { - "componentName": "DCAE", - "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop", - "stateName": "BLUEPRINT_DEPLOYED", - } - } - /> - </tbody> - </Styled(Component)> - </div> -</styled.div> -`; diff --git a/runtime/ui-react/src/components/loop_viewer/svg/SvgGenerator.js b/runtime/ui-react/src/components/loop_viewer/svg/SvgGenerator.js deleted file mode 100644 index 2692aefa0..000000000 --- a/runtime/ui-react/src/components/loop_viewer/svg/SvgGenerator.js +++ /dev/null @@ -1,248 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 styled from 'styled-components'; -import { withRouter } from "react-router-dom"; -import LoopCache from '../../../api/LoopCache'; -import OnapConstant from '../../../utils/OnapConstants'; - -const DivStyled = styled.div` - overflow-x: scroll; - display: flex; - width: 100%; - height: 100%; -` - -const emptySvg = (<svg> - <text x="60" y="40">No LOOP (SVG)</text> -</svg>); - -class SvgGenerator extends React.Component { - boxWidth = 200; - boxHeight = 100; - boxSpace = 50; - - static GENERATED_FROM_INSTANCE = "INSTANCE"; - static GENERATED_FROM_TEMPLATE = "TEMPLATE"; - - state = { - loopCache: new LoopCache({}), - clickable: false, - generatedFrom: SvgGenerator.GENERATED_FROM_INSTANCE, // INSTANCE / TEMPLATE - } - - constructor(props) { - super(props); - this.state.loopCache = props.loopCache; - this.state.clickable = props.clickable; - this.state.generatedFrom = props.generatedFrom; - this.handleSvgClick = this.handleSvgClick.bind(this); - this.renderSvg = this.renderSvg.bind(this); - } - - shouldComponentUpdate(nextProps, nextState) { - return this.state.loopCache !== nextProps.loopCache; - } - - componentDidUpdate(prevProps) { - if (prevProps.loopCache !== this.props.loopCache) { - this.setState({ - loopCache: this.props.loopCache, - }); - } - } - - handleSvgClick(event) { - console.debug("svg click event received"); - if (this.state.clickable) { - var elementName = event.target.parentNode.getAttribute('policyId'); - console.info("SVG element clicked", elementName); - // Only allow movement to policy editing IF there busyLoadingCOunt is 0, - // meaning we are not waiting for refreshStatus to complete, for example - if (elementName !== null && !this.props.isBusyLoading()) { - this.props.history.push("/policyModal/" + event.target.parentNode.getAttribute('policyType') + "/" + elementName); - } - } - } - - createVesBox(xPos) { - return this.createOneBox(xPos, null, null, 'VES Collector', 'VES', null); - } - - createOneArrow(xPos) { - return ( - <svg width={ this.boxSpace } height={ this.boxHeight } x={ xPos }> - <defs> - <marker viewBox="0 0 20 20" markerWidth="20" markerHeight="20" orient="auto" refX="8.5" refY="5" id="arrow"> - <path d="m 1 5 l 0 -3 l 7 3 l -7 3 z" - stroke-width="1" stroke-linecap="butt" stroke-dasharray="10000, 1" - fill="#000000" stroke="#000000"/> - </marker> - </defs> - <line x1="0" y1="50%" x2="100%" y2="50%" stroke-width="2" color="black" stroke="black" marker-end="url(#arrow)"/> - </svg> - ); - } - - createBeginCircle(xPos, text) { - return ( - <svg width={ this.boxWidth } height={ this.boxHeight } x={ xPos }> - <circle cx={ this.boxWidth - 30 } cy="50%" r="30" stroke-width="1" color="black" stroke="black" fill="#27ae60"/> - <text x={ this.boxWidth - 30 } y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs">{ text }</text> - </svg> - ); - } - - createEndCircle(xPos, text) { - return ( - <svg width={ this.boxWidth } height={ this.boxHeight } x={ xPos }> - <circle cx={ 30 } cy="50%" r="30" stroke-width="2" color="black" stroke="black" fill="#27ae60"/> - <text x={ 30 } y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs">{ text }</text> - </svg> - ); - } - - createOneBox(xPos, policyId, loopElementModelId, name, title, policyType) { - return ( - <svg width={ this.boxWidth } height={ this.boxHeight } x={ xPos } title="test"> - <g policyId={ policyId } loopElementModelId={ loopElementModelId } policyType={ policyType }> - <rect width="100%" height="100%" stroke-width="2" color="black" stroke="black" fill="#1abc9c"/> - <text x="50%" y="15%" color="white" fill="white" dominant-baseline="middle" text-anchor="middle" textLength="50%" lengthAdjust="spacingAndGlyphs">{ title }</text> - <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" textLength="80%" lengthAdjust="spacingAndGlyphs">{ name }</text> - <text x="50%" y="80%" text-anchor="middle" dominant-baseline="middle" textLength="110%" lengthAdjust="spacingAndGlyphs">{ policyId }</text> - </g> - </svg> - ); - } - - createSvgFromTemplate() { - const allElements = []; - var xPos = 0; - - allElements.push(this.createBeginCircle(xPos, "Start")) - xPos += (this.boxWidth + this.boxSpace); - - allElements.push(this.createOneArrow(xPos - this.boxSpace)); - - allElements.push(this.createVesBox(xPos)); - xPos += (this.boxWidth + this.boxSpace); - - allElements.push(this.createOneArrow(xPos - this.boxSpace)); - //createOneBox(xPos, policyId, loopElementModelId , name, title, policyType) - for (var loopElement of this.state.loopCache.getAllLoopElementModels()) { - - allElements.push(this.createOneBox(xPos, - loopElement['name'], - loopElement['name'], - loopElement['shortName'], - loopElement['loopElementType'], - loopElement['loopElementType'])) - xPos += (this.boxWidth + this.boxSpace); - allElements.push(this.createOneArrow(xPos - this.boxSpace)); - } - - allElements.push(this.createEndCircle(xPos, "End")) - xPos += (this.boxWidth + this.boxSpace); - - return allElements; - } - - createSvgFromInstance() { - const allElements = []; - var xPos = 0; - - allElements.push(this.createBeginCircle(xPos, "Start")) - xPos += (this.boxWidth + this.boxSpace); - - allElements.push(this.createOneArrow(xPos - this.boxSpace)); - - allElements.push(this.createVesBox(xPos)); - xPos += (this.boxWidth + this.boxSpace); - - allElements.push(this.createOneArrow(xPos - this.boxSpace)); - - for (var msPolicy in this.state.loopCache.getMicroServicePolicies()) { - var loopElementModelName = this.state.loopCache.getMicroServicePolicies()[msPolicy]['loopElementModel']; - if (loopElementModelName !== undefined) { - loopElementModelName = loopElementModelName['name']; - } - allElements.push(this.createOneBox(xPos, - this.state.loopCache.getMicroServicePolicies()[msPolicy]['name'], - loopElementModelName, - this.state.loopCache.getMicroServicePolicies()[msPolicy]['policyModel']['policyAcronym'], - 'microservice', - OnapConstant.microServiceType)) - xPos += (this.boxWidth + this.boxSpace); - allElements.push(this.createOneArrow(xPos - this.boxSpace)); - } - - for (var opPolicy in this.state.loopCache.getOperationalPolicies()) { - loopElementModelName = this.state.loopCache.getOperationalPolicies()[opPolicy]['loopElementModel']; - if (loopElementModelName !== undefined) { - loopElementModelName = loopElementModelName['name']; - } - allElements.push(this.createOneBox(xPos, - this.state.loopCache.getOperationalPolicies()[opPolicy]['name'], - loopElementModelName, - this.state.loopCache.getOperationalPolicies()[opPolicy]['policyModel']['policyAcronym'], - 'operational', - OnapConstant.operationalPolicyType)) - xPos += (this.boxWidth + this.boxSpace); - allElements.push(this.createOneArrow(xPos - this.boxSpace)); - } - - allElements.push(this.createEndCircle(xPos, "End")) - xPos += (this.boxWidth + this.boxSpace); - - return allElements; - } - - renderSvg() { - if (this.state.loopCache.getLoopName() === undefined) { - return [emptySvg]; - } - if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_INSTANCE) { - return this.createSvgFromInstance(); - } else if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_TEMPLATE) { - return this.createSvgFromTemplate(); - } - } - - render() { - var allTheElements = this.renderSvg(); - var svgWidth = this.boxWidth * allTheElements.length; - var svgHeight = this.boxHeight + 50; - return ( - - <DivStyled onClick={ this.handleSvgClick }> - <svg key="main" height={ svgHeight } width={ svgWidth } viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none"> - <svg key="content" x="-50" y="25"> - { allTheElements } - </svg> - </svg> - </DivStyled> - ); - } -} - -export default withRouter(SvgGenerator); diff --git a/runtime/ui-react/src/components/menu/MenuBar.js b/runtime/ui-react/src/components/menu/MenuBar.js deleted file mode 100644 index 995db9e16..000000000 --- a/runtime/ui-react/src/components/menu/MenuBar.js +++ /dev/null @@ -1,123 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP POLICY-CLAMP - * ================================================================================ - * Copyright (C) 2019, 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 Nav from 'react-bootstrap/Nav'; -import Navbar from 'react-bootstrap/Navbar'; -import NavDropdown from 'react-bootstrap/NavDropdown'; -import OnapConstants from '../../utils/OnapConstants'; -import 'bootstrap-css-only/css/bootstrap.min.css'; -import styled from 'styled-components'; -import { Link } from 'react-router-dom'; - -const StyledLink = styled(Link)` - color: ${props => props.theme.menuFontColor}; - background-color: ${props => props.theme.menuBackgroundColor}; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ${props => props.theme.menuHighlightedBackgroundColor}; - color: ${props => props.theme.menuHighlightedFontColor}; - } -`; -const StyledNavLink = styled(Nav.Link)` - color: ${props => props.theme.menuFontColor}; - background-color: ${props => props.theme.menuBackgroundColor}; - font-weight: normal; - padding: .25rem 1.5rem; - :hover { - background-color: ${props => props.theme.menuHighlightedBackgroundColor}; - color: ${props => props.theme.menuHighlightedFontColor}; - } -`; - -const StyledNavDropdown = styled(NavDropdown)` - color: ${props => props.theme.menuFontColor}; - & .dropdown-toggle { - color: ${props => props.theme.menuFontColor}; - background-color: ${props => props.theme.backgroundColor}; - font-weight: normal; - :hover { - font-weight: bold; - } - } -`; - -export default class MenuBar extends React.Component { - state = { - loopName: this.props.loopName, - disabled: true - }; - - componentWillReceiveProps(newProps) { - if (newProps.loopName !== OnapConstants.defaultLoopName) { - this.setState({ disabled: false }); - } else { - this.setState({ disabled: true }); - } - } - - render () { - return ( - <Navbar.Collapse> - <StyledNavDropdown title="POLICY Framework"> - <NavDropdown.Item as={StyledLink} to="/viewAllPolicies">View All Policies</NavDropdown.Item> - </StyledNavDropdown> - <StyledNavDropdown title="CLAMP Options"> - <NavDropdown.Item as={StyledLink} to="/manageDictionaries">Tosca Metadata Dictionaries</NavDropdown.Item> - <NavDropdown.Divider /> - <NavDropdown.Item as={StyledLink} to="/viewLoopTemplatesModal">View All Loop Templates</NavDropdown.Item> - </StyledNavDropdown> - <StyledNavDropdown title="LOOP Instance"> - <NavDropdown.Item as={StyledLink} to="/createLoop">Create</NavDropdown.Item> - <NavDropdown.Item as={StyledLink} to="/openLoop">Open</NavDropdown.Item> - <NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close</NavDropdown.Item> - <NavDropdown.Item as={StyledLink} to="/modifyLoop" disabled={this.state.disabled}>Modify</NavDropdown.Item> - <NavDropdown.Divider /> - <NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties</NavDropdown.Item> - <NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item> - </StyledNavDropdown> - <StyledNavDropdown title="LOOP Operations"> - <NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Create and deploy to Policy Framework (SUBMIT)</NavDropdown.Item> - <NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Framework (STOP)</NavDropdown.Item> - <NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Framework (RESTART)</NavDropdown.Item> - <NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete loop instance (DELETE)</NavDropdown.Item> - <NavDropdown.Divider /> - <NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy to DCAE (DEPLOY)</NavDropdown.Item> - <NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy to DCAE (UNDEPLOY)</NavDropdown.Item> - </StyledNavDropdown> - <StyledNavDropdown title="Help"> - <StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink> - <StyledNavLink href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavLink> - <NavDropdown.Item as={StyledLink} to="/userInfo">User Info</NavDropdown.Item> - </StyledNavDropdown> - </Navbar.Collapse> - ); - } -} diff --git a/runtime/ui-react/src/components/menu/MenuBar.test.js b/runtime/ui-react/src/components/menu/MenuBar.test.js deleted file mode 100644 index 81117bb90..000000000 --- a/runtime/ui-react/src/components/menu/MenuBar.test.js +++ /dev/null @@ -1,46 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * ONAP CLAMP - * ================================================================================ - * Copyright (C) 2019 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 MenuBar from './MenuBar'; - -describe('Verify MenuBar', () => { - - it('Test the render method', () => { - const component = shallow(<MenuBar/>) - - expect(component).toMatchSnapshot(); - }); - - it('Update loopName', () => { - const component = shallow(<MenuBar/>) - component.setProps({ loopName: "newLoop" }); - expect(component.state('disabled')).toBe(false); - }); - - it('Default loopName', () => { - const component = shallow(<MenuBar/>) - component.setProps({ loopName: "Empty (NO loop loaded yet)" }); - expect(component.state('disabled')).toBe(true); - }); -}); diff --git a/runtime/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/runtime/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap deleted file mode 100644 index ba19097e5..000000000 --- a/runtime/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap +++ /dev/null @@ -1,1070 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Verify MenuBar Test the render method 1`] = ` -<NavbarCollapse> - <Styled(NavDropdown) - title="POLICY Framework" - > - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={false} - to="/viewAllPolicies" - > - View All Policies - </DropdownItem> - </Styled(NavDropdown)> - <Styled(NavDropdown) - title="CLAMP Options" - > - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={false} - to="/manageDictionaries" - > - Tosca Metadata Dictionaries - </DropdownItem> - <DropdownDivider - role="separator" - /> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={false} - to="/viewLoopTemplatesModal" - > - View All Loop Templates - </DropdownItem> - </Styled(NavDropdown)> - <Styled(NavDropdown) - title="LOOP Instance" - > - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={false} - to="/createLoop" - > - Create - </DropdownItem> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={false} - to="/openLoop" - > - Open - </DropdownItem> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={true} - to="/closeLoop" - > - Close - </DropdownItem> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={true} - to="/modifyLoop" - > - Modify - </DropdownItem> - <DropdownDivider - role="separator" - /> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={true} - to="/loopProperties" - > - Properties - </DropdownItem> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={true} - to="/refreshStatus" - > - Refresh Status - </DropdownItem> - </Styled(NavDropdown)> - <Styled(NavDropdown) - title="LOOP Operations" - > - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={true} - to="/submit" - > - Create and deploy to Policy Framework (SUBMIT) - </DropdownItem> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={true} - to="/stop" - > - Undeploy from Policy Framework (STOP) - </DropdownItem> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={true} - to="/restart" - > - ReDeploy to Policy Framework (RESTART) - </DropdownItem> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={true} - to="/delete" - > - Delete loop instance (DELETE) - </DropdownItem> - <DropdownDivider - role="separator" - /> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={true} - to="/deploy" - > - Deploy to DCAE (DEPLOY) - </DropdownItem> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={true} - to="/undeploy" - > - UnDeploy to DCAE (UNDEPLOY) - </DropdownItem> - </Styled(NavDropdown)> - <Styled(NavDropdown) - title="Help" - > - <Styled(NavLink) - href="https://wiki.onap.org/" - target="_blank" - > - Wiki - </Styled(NavLink)> - <Styled(NavLink) - href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect." - > - Contact Us - </Styled(NavLink)> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": e { - "baseHash": 1014106698, - "baseStyle": undefined, - "componentId": "sc-bdfBwQ", - "isStatic": false, - "rules": Array [ - " - color: ", - [Function], - "; - background-color: ", - [Function], - "; - font-weight: normal; - display: block; - width: 100%; - padding: .25rem 1.5rem; - clear: both; - text-align: inherit; - white-space: nowrap; - border: 0; - :hover { - text-decoration: none; - background-color: ", - [Function], - "; - color: ", - [Function], - "; - } -", - ], - "staticRulesId": "", - }, - "foldedComponentIds": Array [], - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "sc-bdfBwQ", - "target": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "innerRef": [Function], - "onClick": [Function], - "replace": [Function], - "target": [Function], - "to": [Function], - }, - "render": [Function], - }, - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={false} - to="/userInfo" - > - User Info - </DropdownItem> - </Styled(NavDropdown)> -</NavbarCollapse> -`; |