diff options
| author |   sebdet <sebastien.determe@intl.att.com> | 2021-03-12 19:30:22 +0100 |
|---|---|---|
| committer | S�bastien Determe <sebastien.determe@intl.att.com> | 2021-03-15 16:41:08 +0000 |
| commit | b8831e5199aa0fe2bb1de531069d376182b3571d (patch) | |
| tree | 9a5eb6ba206300a3ec43ba099c42302ac3707010 | |
| parent | 396cb9b814626a0383ee49a928f4e534264170aa (diff) | |
Add refresh & update libs
Add refresh features to the policy list when changing it + update materials-Ui + update Json-editor libs to solve big lag in UI + Remove useless link in the menu + fix issue with build due to mariadb not started yet
Issue-ID: POLICY-3131
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: I9bcb9558f213731a4ea8e20e186fb91c9db1b6f3
22 files changed, 630 insertions, 536 deletions
diff --git a/extra/docker/clamp/clamp.env b/extra/docker/clamp/clamp.env index fc80be5d2..eb9e54784 100644 --- a/extra/docker/clamp/clamp.env +++ b/extra/docker/clamp/clamp.env @@ -1,2 +1,2 @@ ### Be careful, this must be in one line only ### -SPRING_APPLICATION_JSON={"spring.datasource.url":"jdbc:mariadb:sequential://db:3306/cldsdb4?autoReconnect=true&connectTimeout=10000&socketTimeout=10000&retriesAllDown=3","spring.profiles.active":"clamp-default,clamp-default-user,clamp-sdc-controller,clamp-ssl-config","clamp.config.policy.api.url":"http4://third-party-proxy:8085","clamp.config.policy.pap.url":"http4://third-party-proxy:8085","clamp.config.dcae.inventory.url":"http://third-party-proxy:8085","clamp.config.dcae.deployment.url":"http4://third-party-proxy:8085"} +SPRING_APPLICATION_JSON={"spring.datasource.url":"jdbc:mariadb:sequential://db:3306/cldsdb4?autoReconnect=true&connectTimeout=10000&socketTimeout=10000&retriesAllDown=3","spring.profiles.active":"clamp-default,clamp-default-user,clamp-sdc-controller,clamp-ssl-config,clamp-policy-controller,default-dictionary-elements","clamp.config.policy.api.url":"http4://third-party-proxy:8085","clamp.config.policy.pap.url":"http4://third-party-proxy:8085","clamp.config.dcae.inventory.url":"http://third-party-proxy:8085","clamp.config.dcae.deployment.url":"http4://third-party-proxy:8085"} @@ -951,7 +951,7 @@ </bind> </volumes> <wait> - <log>socket: '/run/mysqld/mysqld.sock'</log> + <log>port: 3306</log> <time>300000</time> <exec> <preStop>/docker-entrypoint-initdb.d/dump/backup-data-only.sh</preStop> diff --git a/src/test/java/org/onap/policy/clamp/clds/it/RobotItCase.java b/src/test/java/org/onap/policy/clamp/clds/it/RobotItCase.java index 02e5ee7fa..017881ba7 100644 --- a/src/test/java/org/onap/policy/clamp/clds/it/RobotItCase.java +++ b/src/test/java/org/onap/policy/clamp/clds/it/RobotItCase.java @@ -128,4 +128,4 @@ public class RobotItCase { Assert.assertEquals(exec.getState().getError(), 0L, Objects.requireNonNull(exec.getState().getExitCodeLong()).longValue()); } -}
\ No newline at end of file +} diff --git a/ui-react/package.json b/ui-react/package.json index 83c9c77a6..8d1104442 100644 --- a/ui-react/package.json +++ b/ui-react/package.json @@ -25,30 +25,31 @@ "src/theme" ], "dependencies": { - "@json-editor/json-editor": "1.4.0-beta.0", - "react": "16.9.0", - "react-dom": "16.9.0", - "react-scripts": "3.1.1", - "react-bootstrap": "1.0.0-beta.14", + "@json-editor/json-editor": "2.5.2", + "@fortawesome/fontawesome-free": "5.15.2", + "react": "17.0.1", + "react-dom": "17.0.1", + "react-scripts": "4.0.3", + "react-bootstrap": "1.5.2", "bootstrap-css-only": "4.3.1", - "styled-components": "4.3.2", - "react-router-dom": "5.0.1", - "@material-ui/core": "4.9.11", - "@material-ui/icons": "4.9.1", - "material-table": "1.57.2", - "react-select": "3.0.8", + "styled-components": "5.2.1", + "react-router-dom": "5.2.0", + "@material-ui/core": "4.11.3", + "@material-ui/icons": "4.11.2", + "material-table": "1.68.1", + "react-select": "4.2.1", "react-uuid": "1.0.2" }, "devDependencies": { - "jest": "24.8.0", - "babel-jest": "24.8.0", - "@babel/preset-env": "7.5.5", - "@babel/preset-react": "7.0.0", - "@babel/plugin-proposal-class-properties": "7.5.5", - "enzyme": "3.10.0", - "enzyme-adapter-react-16": "1.14.0", - "enzyme-to-json": "3.4.0", - "jest-fetch-mock": "2.1.2" + "jest": "26.6.0", + "babel-jest": "26.6.0", + "@babel/preset-env": "7.13.10", + "@babel/preset-react": "7.12.13", + "@babel/plugin-proposal-class-properties": "7.13.0", + "enzyme": "3.11.0", + "enzyme-adapter-react-17-updated": "1.0.2", + "enzyme-to-json": "3.6.1", + "jest-fetch-mock": "3.0.3" }, "browserslist": [ ">0.2%", diff --git a/ui-react/src/__snapshots__/LoopUI.test.js.snap b/ui-react/src/__snapshots__/LoopUI.test.js.snap index c230dbcf6..322c93155 100644 --- a/ui-react/src/__snapshots__/LoopUI.test.js.snap +++ b/ui-react/src/__snapshots__/LoopUI.test.js.snap @@ -4,7 +4,7 @@ exports[`Verify LoopUI Test the render method 1`] = ` <styled.div id="main_div" > - <GlobalStyleComponent /> + <Memo(l) /> <Route path="/viewLoopTemplatesModal" render={[Function]} @@ -90,7 +90,6 @@ exports[`Verify LoopUI Test the render method 1`] = ` "timeout": 300, "unmountOnExit": false, }, - "displayName": "Fade", "render": [Function], } } @@ -111,7 +110,6 @@ exports[`Verify LoopUI Test the render method 1`] = ` "timeout": 300, "unmountOnExit": false, }, - "displayName": "Fade", "render": [Function], } } diff --git a/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/ui-react/src/__snapshots__/OnapClamp.test.js.snap index d487d6ac0..353bc1173 100644 --- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap +++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Verify OnapClamp Test the render method 1`] = ` -<ThemeProvider +<Component theme={ Object { "backgroundColor": "#eeeeee", @@ -33,7 +33,7 @@ exports[`Verify OnapClamp Test the render method 1`] = ` <styled.div id="main_div" > - <GlobalStyleComponent /> + <Memo(l) /> <Route path="/viewLoopTemplatesModal" render={[Function]} @@ -119,7 +119,6 @@ exports[`Verify OnapClamp Test the render method 1`] = ` "timeout": 300, "unmountOnExit": false, }, - "displayName": "Fade", "render": [Function], } } @@ -140,7 +139,6 @@ exports[`Verify OnapClamp Test the render method 1`] = ` "timeout": 300, "unmountOnExit": false, }, - "displayName": "Fade", "render": [Function], } } @@ -214,5 +212,5 @@ exports[`Verify OnapClamp Test the render method 1`] = ` </styled.div> </styled.div> </styled.div> -</ThemeProvider> +</Component> `; diff --git a/ui-react/src/api/PolicyService.js b/ui-react/src/api/PolicyService.js index a9f44b2a4..855d44167 100644 --- a/ui-react/src/api/PolicyService.js +++ b/ui-react/src/api/PolicyService.js @@ -40,7 +40,7 @@ export default class PolicyService { .catch(function(error) { console.error("getPoliciesList error occurred ", error); alert("getPoliciesList error occurred " + error); - return ""; + return undefined; }) } static createNewPolicy(policyModelType, policyModelVersion, policyName, policyVersion, policyJson) { @@ -67,7 +67,7 @@ export default class PolicyService { .catch(function (error) { console.error("createNewPolicy error occurred ", error); alert ("createNewPolicy error occurred " + error); - return ""; + return undefined; }); } static deletePolicy(policyModelType, policyModelVersion, policyName, policyVersion) { @@ -90,7 +90,7 @@ export default class PolicyService { .catch(function (error) { console.error("deletePolicy error occurred ", error); alert ("deletePolicy error occurred " + error); - return ""; + return undefined; }); } } diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap index b05781641..1ba9dbaf1 100644 --- a/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap +++ b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Verify CreateLoopModal Test the render method 1`] = ` -<Styled(Bootstrap(Modal)) +<Styled(Modal) backdrop="static" keyboard={false} onHide={[Function]} @@ -163,5 +163,5 @@ exports[`Verify CreateLoopModal Test the render method 1`] = ` Create </Button> </ModalFooter> -</Styled(Bootstrap(Modal))> +</Styled(Modal)> `; diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap index 8d0faa5f7..4779ced0d 100644 --- a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap +++ b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Verify DeployLoopModal Test the render method 1`] = ` -<Styled(Bootstrap(Modal)) +<Styled(Modal) backdrop="static" keyboard={false} onHide={[Function]} @@ -79,5 +79,5 @@ exports[`Verify DeployLoopModal Test the render method 1`] = ` Deploy </Button> </ModalFooter> -</Styled(Bootstrap(Modal))> +</Styled(Modal)> `; diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap index 233c560ab..3baaa5798 100644 --- a/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap +++ b/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Verify LoopPropertiesModal Test the render method 1`] = ` -<Styled(Bootstrap(Modal)) +<Styled(Modal) backdrop="static" keyboard={false} onHide={[Function]} @@ -57,5 +57,5 @@ exports[`Verify LoopPropertiesModal Test the render method 1`] = ` Save Changes </Button> </ModalFooter> -</Styled(Bootstrap(Modal))> +</Styled(Modal)> `; diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap index 477260477..581fd0ec0 100644 --- a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap +++ b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Verify OpenLoopModal Test the render method 1`] = ` -<Styled(Bootstrap(Modal)) +<Styled(Modal) backdrop="static" keyboard={false} onHide={[Function]} @@ -98,14 +98,7 @@ exports[`Verify OpenLoopModal Test the render method 1`] = ` } controlId="formBasicCheckbox" > - <FormCheck - disabled={false} - inline={false} - isInvalid={false} - isValid={false} - title="" - type="checkbox" - > + <FormCheck> <FormCheckLabel> Read Only Mode: </FormCheckLabel> @@ -140,5 +133,5 @@ exports[`Verify OpenLoopModal Test the render method 1`] = ` Open </Button> </ModalFooter> -</Styled(Bootstrap(Modal))> +</Styled(Modal)> `; diff --git a/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap b/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap index 40914aee6..6b583632f 100644 --- a/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap +++ b/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Verify ManageDictionaries Test API Successful 1`] = ` -<Styled(Bootstrap(Modal)) +<Styled(Modal) backdrop="static" keyboard={false} onHide={[Function]} @@ -192,5 +192,5 @@ exports[`Verify ManageDictionaries Test API Successful 1`] = ` Close </Button> </ModalFooter> -</Styled(Bootstrap(Modal))> +</Styled(Modal)> `; diff --git a/ui-react/src/components/dialogs/Policy/PolicyEditor.js b/ui-react/src/components/dialogs/Policy/PolicyEditor.js index e329e0c32..f20650e26 100644 --- a/ui-react/src/components/dialogs/Policy/PolicyEditor.js +++ b/ui-react/src/components/dialogs/Policy/PolicyEditor.js @@ -23,7 +23,8 @@ import React from 'react' import PolicyToscaService from '../../../api/PolicyToscaService'; -import JSONEditor from '@json-editor/json-editor'; +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'; @@ -32,6 +33,7 @@ import PolicyService from '../../../api/PolicyService'; import OnapUtils from '../../../utils/OnapUtils'; import uuid from 'react-uuid'; +//const JSONEditor = require("@json-editor/json-editor").JSONEditor; const DivWhiteSpaceStyled = styled.div` white-space: pre; ` @@ -41,6 +43,7 @@ const JsonEditorDiv = styled.div` background-color: ${props => props.theme.loopViewerBackgroundColor}; text-align: justify; font-size: ${props => props.theme.policyEditorFontSize}; + border: 1px solid #C0C0C0; ` const PanelDiv = styled.div` margin-top: 20px; @@ -98,7 +101,7 @@ export default class PolicyEditor extends React.Component { 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 (respPolicyCreation === "") { + if (typeof(respPolicyCreation) === "undefined") { //it indicates a failure this.setState({ showFailAlert: true, @@ -109,6 +112,7 @@ export default class PolicyEditor extends React.Component { showSuccessAlert: true, showMessage: 'Policy '+ this.state.policyName + '/' + this.state.policyVersion + ' created successfully' }); + this.props.policyUpdateFunction(); } }) } @@ -135,7 +139,7 @@ export default class PolicyEditor extends React.Component { } createJsonEditor(toscaModel, editorData) { - JSONEditor.defaults.themes.myBootstrap4 = JSONEditor.defaults.themes.bootstrap4.extend({ + /*JSONEditor.defaults.themes.myBootstrap4 = JSONEditor.defaults.themes.bootstrap4.extend({ getTab: function(text,tabId) { var liel = document.createElement('li'); liel.classList.add('nav-item'); @@ -149,12 +153,15 @@ export default class PolicyEditor extends React.Component { liel.appendChild(ael); return liel; } - }); + });*/ + return new JSONEditor(document.getElementById(this.state.jsonEditorDivId), { schema: toscaModel, startval: editorData, - theme: 'myBootstrap4', + //theme: 'myBootstrap4', + theme: 'bootstrap4', + iconlib: 'fontawesome5', object_layout: 'grid', disable_properties: false, disable_edit_json: false, @@ -163,7 +170,7 @@ export default class PolicyEditor extends React.Component { disable_array_delete_all_rows: false, array_controls_top: true, keep_oneof_values: false, - collapsed:true, + collapsed: true, show_errors: 'always', display_required_only: false, show_opt_in: false, diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js index 6b1ebe178..2fa0b5432 100644 --- a/ui-react/src/components/dialogs/Policy/PolicyModal.js +++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js @@ -1,8 +1,8 @@ /*- * ============LICENSE_START======================================================= - * ONAP CLAMP + * ONAP POLICY-CLAMP * ================================================================================ - * Copyright (C) 2020 AT&T Intellectual Property. All rights + * Copyright (C) 2020-2021 AT&T Intellectual Property. All rights * reserved. * ================================================================================ * Licensed under the Apache License, Version 2.0 (the "License"); @@ -31,131 +31,133 @@ 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'; +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; + background-color: transparent; ` const DivWhiteSpaceStyled = styled.div` - white-space: pre; + 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 - }; + 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; - } + 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())); + 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()); - }); - } - } - } + 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 []; - } + customValidation(editorData, templateName) { + // method for sub-classes to override with customized validation + return []; + } - handleClose() { - this.setState({ show: false }); - this.props.history.push('/'); - } + handleClose() { + this.setState({ show: false }); + this.props.history.push('/'); + } - componentDidMount() { - this.renderJsonEditor(); - } + componentDidMount() { + this.renderJsonEditor(); + } - componentDidUpdate() { - if (this.state.showSucAlert === true || this.state.showFailAlert === true) { - let modalElement = document.getElementById("policyModal") - if (modalElement) { - modalElement.scrollTo(0, 0); - } - } - } + componentDidUpdate() { + if (this.state.showSucAlert === true || this.state.showFailAlert === true) { + let modalElement = document.getElementById("policyModal") + if (modalElement) { + modalElement.scrollTo(0, 0); + } + } + } createJsonEditor(toscaModel, editorData) { - JSONEditor.defaults.themes.myBootstrap4 = JSONEditor.defaults.themes.bootstrap4.extend({ - getTab: function(text,tabId) { - var liel = document.createElement('li'); - liel.classList.add('nav-item'); - var ael = document.createElement("a"); - ael.classList.add("nav-link"); - ael.setAttribute("style",'padding:10px;max-width:160px;'); - ael.setAttribute("href", "#" + tabId); - ael.setAttribute('data-toggle', 'tab'); - text.setAttribute("style",'word-wrap:break-word;'); - ael.appendChild(text); - liel.appendChild(ael); - return liel; - } - }); + /*JSONEditor.defaults.themes.myBootstrap4 = JSONEditor.defaults.themes.bootstrap4.extend({ + getTab: function(text,tabId) { + var liel = document.createElement('li'); + liel.classList.add('nav-item'); + var ael = document.createElement("a"); + ael.classList.add("nav-link"); + ael.setAttribute("style",'padding:10px;max-width:160px;'); + ael.setAttribute("href", "#" + tabId); + ael.setAttribute('data-toggle', 'tab'); + text.setAttribute("style",'word-wrap:break-word;'); + ael.appendChild(text); + liel.appendChild(ael); + return liel; + } + });*/ return new JSONEditor(document.getElementById("editor"), { schema: toscaModel, startval: editorData, - theme: 'myBootstrap4', + theme: 'bootstrap4', + iconlib: 'fontawesome5', object_layout: 'grid', disable_properties: false, disable_edit_json: false, @@ -173,147 +175,147 @@ export default class PolicyModal extends React.Component { }) } - 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); - } + 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; - } + 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 - }) - } + 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 - }); - } - } + 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 }); - } + 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" - }); - }); - } - } + 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 }); - } + 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> - ); - } - } + 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!" - ); - } + 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> - ); - } + renderModalTitle() { + return ( + <Modal.Title>Edit the policy</Modal.Title> + ); + } - renderButton() { - var allElement = [(<Button variant="secondary" onClick={this.handleClose}> - Close + renderButton() { + var allElement = [(<Button variant="secondary" onClick={this.handleClose}> + Close </Button>)]; - if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) { + if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) { allElement.push(( <Button variant="primary" disabled={this.readOnly} onClick={this.handleSave}> Save Changes @@ -324,16 +326,16 @@ export default class PolicyModal extends React.Component { Refresh </Button> )); - } - return allElement; - } + } + 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> + 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} @@ -344,15 +346,15 @@ export default class PolicyModal extends React.Component { {this.state.showMessage} </DivWhiteSpaceStyled> </Alert> - <Modal.Body> - {this.renderOpenLoopMessage()} - <div id="editor" /> - {this.renderPdpGroupDropDown()} - </Modal.Body> - <Modal.Footer> - {this.renderButton()} - </Modal.Footer> - </ModalStyled> - ); - } + <Modal.Body> + {this.renderOpenLoopMessage()} + <div id="editor" /> + {this.renderPdpGroupDropDown()} + </Modal.Body> + <Modal.Footer> + {this.renderButton()} + </Modal.Footer> + </ModalStyled> + ); + } } diff --git a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js index 1e71bb853..d699f781c 100644 --- a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js +++ b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js @@ -40,9 +40,9 @@ 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 DescriptionIcon from '@material-ui/icons/Description'; -import SettingsEthernetIcon from '@material-ui/icons/SettingsEthernet'; -import NoteAddIcon from '@material-ui/icons/NoteAdd'; +import DehazeIcon from '@material-ui/icons/Dehaze'; +import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; +import AddIcon from '@material-ui/icons/Add'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Switch from '@material-ui/core/Switch'; import MaterialTable from "material-table"; @@ -188,6 +188,8 @@ export default class ViewAllPolicies extends React.Component { this.handlePrefixGrouping = this.handlePrefixGrouping.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.getAllPolicies(); this.getAllToscaModels(); } @@ -247,7 +249,7 @@ export default class ViewAllPolicies extends React.Component { handleDeletePolicy(event, rowData) { PolicyService.deletePolicy(rowData["type"], rowData["type_version"], rowData["name"],rowData["version"]).then( respPolicyDeletion => { - if (respPolicyDeletion === "") { + if (typeof(respPolicyDeletion) === "undefined") { //it indicates a failure this.setState({ showFailAlert: true, @@ -259,6 +261,7 @@ export default class ViewAllPolicies extends React.Component { showMessage: 'Policy successfully Deleted' }); } + this.getAllPolicies(); } ) } @@ -292,18 +295,18 @@ export default class ViewAllPolicies extends React.Component { }} detailPanel={[ { - icon: SettingsEthernetIcon, + 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"]} /> + <PolicyEditor policyModelType={rowData["type"]} policyModelTypeVersion={rowData["type_version"]} policyName={rowData["name"]} policyVersion={rowData["version"]} policyProperties={rowData["properties"]} policyUpdateFunction={this.getAllPolicies} /> </DetailedRow> ) }, }, { - icon: DescriptionIcon, + icon: DehazeIcon, tooltip: 'Show Raw Data', render: rowData => { return ( @@ -352,7 +355,7 @@ export default class ViewAllPolicies extends React.Component { }} detailPanel={[ { - icon: SettingsEthernetIcon, + icon: ArrowForwardIosIcon, tooltip: 'Show Tosca', render: rowData => { return ( @@ -363,7 +366,7 @@ export default class ViewAllPolicies extends React.Component { }, }, { - icon: DescriptionIcon, + icon: DehazeIcon, tooltip: 'Show Raw Data', render: rowData => { return ( @@ -374,24 +377,17 @@ export default class ViewAllPolicies extends React.Component { }, }, { - icon: NoteAddIcon, + icon: AddIcon, tooltip: 'Create a policy from this model', render: rowData => { return ( <DetailedRow> - <PolicyEditor policyModelType={rowData["policyModelType"]} policyModelTypeVersion={rowData["version"]} policyProperties={{}} /> + <PolicyEditor policyModelType={rowData["policyModelType"]} policyModelTypeVersion={rowData["version"]} policyProperties={{}} policyUpdateFunction={this.getAllPolicies} /> </DetailedRow> ) }, }, ]} - actions={[ - { - icon: forwardRef((props, ref) => <DeleteRoundedIcon {...props} ref={ref} />), - tooltip: 'Delete Tosca Model', - onClick: (event, rowData) => this.handleDeletePolicy(event, rowData) - } - ]} /> </Modal.Body> </Tab> diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap index ee7b679a5..73f659606 100644 --- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap +++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1`] = ` -<Styled(Bootstrap(Modal)) +<Styled(Modal) backdrop="static" keyboard={false} onHide={[Function]} @@ -148,11 +148,10 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1 active={false} disabled={false} onClick={[Function]} - type="button" variant="secondary" > Close </Button> </ModalFooter> -</Styled(Bootstrap(Modal))> +</Styled(Modal)> `; diff --git a/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap b/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap index bd05e8635..7c725bc42 100644 --- a/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap +++ b/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Verify UserInfoModal Test the render method full permission 1`] = ` -<Styled(Bootstrap(Modal)) +<Styled(Modal) onHide={[Function]} show={true} size="lg" @@ -113,5 +113,5 @@ exports[`Verify UserInfoModal Test the render method full permission 1`] = ` Cancel </Button> </ModalFooter> -</Styled(Bootstrap(Modal))> +</Styled(Modal)> `; diff --git a/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap b/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap index 25736d2e9..75b817bab 100644 --- a/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap +++ b/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap @@ -5,7 +5,7 @@ exports[`Verify LoopLogs Test the render method 1`] = ` <label> Loop Logs </label> - <Styled(Bootstrap(Table)) + <Styled(Component) hover={true} responsive={true} striped={true} @@ -56,6 +56,6 @@ exports[`Verify LoopLogs Test the render method 1`] = ` } /> </tbody> - </Styled(Bootstrap(Table))> + </Styled(Component)> </styled.div> `; diff --git a/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap b/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap index 275933ee8..73da5fff1 100644 --- a/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap +++ b/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap @@ -7,7 +7,7 @@ exports[`Verify LoopStatus Test the render method 1`] = ` DESIGN </label> <div> - <Styled(Bootstrap(Table)) + <Styled(Component) hover={true} responsive={true} striped={true} @@ -58,7 +58,7 @@ exports[`Verify LoopStatus Test the render method 1`] = ` } /> </tbody> - </Styled(Bootstrap(Table))> + </Styled(Component)> </div> </styled.div> `; diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js index ae1387912..995db9e16 100644 --- a/ui-react/src/components/menu/MenuBar.js +++ b/ui-react/src/components/menu/MenuBar.js @@ -1,6 +1,6 @@ /*- * ============LICENSE_START======================================================= - * ONAP CLAMP + * ONAP POLICY-CLAMP * ================================================================================ * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights * reserved. @@ -87,15 +87,12 @@ export default class MenuBar extends React.Component { return ( <Navbar.Collapse> <StyledNavDropdown title="POLICY Framework"> - <NavDropdown.Item as={StyledLink} to="/manageDictionaries">Manage Metadata Dictionaries</NavDropdown.Item> - <NavDropdown.Divider /> <NavDropdown.Item as={StyledLink} to="/viewAllPolicies">View All Policies</NavDropdown.Item> - <NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Models</NavDropdown.Item> - <NavDropdown.Divider /> - <NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Model</NavDropdown.Item> </StyledNavDropdown> - <StyledNavDropdown title="LOOP Templates"> - <NavDropdown.Item as={StyledLink} to="/viewLoopTemplatesModal">View All Templates</NavDropdown.Item> + <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> diff --git a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap index fd9956ed2..ba19097e5 100644 --- a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap +++ b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap @@ -10,8 +10,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -40,66 +42,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [Function], - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={false} - to="/manageDictionaries" - > - Manage Metadata Dictionaries - </DropdownItem> - <DropdownDivider - role="separator" - /> - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", - "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], - "; - } -", - ], + "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], }, - "displayName": "Styled(Link)", - "foldedComponentIds": Array [], - "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], "withComponent": [Function], @@ -110,13 +69,19 @@ exports[`Verify MenuBar Test the render method 1`] = ` > View All Policies </DropdownItem> + </Styled(NavDropdown)> + <Styled(NavDropdown) + title="CLAMP Options" + > <DropdownItem as={ Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -145,21 +110,32 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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="/viewToscaPolicyModal" + to="/manageDictionaries" > - View Tosca Models + Tosca Metadata Dictionaries </DropdownItem> <DropdownDivider role="separator" @@ -169,8 +145,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -199,67 +177,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [Function], - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - disabled={false} - to="/uploadToscaPolicyModal" - > - Upload Tosca Model - </DropdownItem> - </Styled(NavDropdown)> - <Styled(NavDropdown) - title="LOOP Templates" - > - <DropdownItem - as={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", - "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], - "; - } -", - ], + "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], }, - "displayName": "Styled(Link)", - "foldedComponentIds": Array [], - "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], "withComponent": [Function], @@ -268,7 +202,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` disabled={false} to="/viewLoopTemplatesModal" > - View All Templates + View All Loop Templates </DropdownItem> </Styled(NavDropdown)> <Styled(NavDropdown) @@ -279,8 +213,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -309,12 +245,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], @@ -330,8 +277,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -360,12 +309,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], @@ -381,8 +341,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -411,12 +373,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], @@ -432,8 +405,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -462,12 +437,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], @@ -486,8 +472,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -516,12 +504,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], @@ -537,8 +536,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -567,12 +568,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], @@ -592,8 +604,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -622,12 +636,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], @@ -643,8 +668,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -673,12 +700,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], @@ -694,8 +732,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -724,12 +764,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], @@ -745,8 +796,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -775,12 +828,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], @@ -799,8 +863,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -829,12 +895,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], @@ -850,8 +927,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -880,12 +959,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], @@ -916,8 +1006,10 @@ exports[`Verify MenuBar Test the render method 1`] = ` Object { "$$typeof": Symbol(react.forward_ref), "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "sc-bdVaJa", + "componentStyle": e { + "baseHash": 1014106698, + "baseStyle": undefined, + "componentId": "sc-bdfBwQ", "isStatic": false, "rules": Array [ " @@ -946,12 +1038,23 @@ exports[`Verify MenuBar Test the render method 1`] = ` } ", ], + "staticRulesId": "", }, - "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-bdVaJa", - "target": [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], diff --git a/ui-react/src/setupTests.js b/ui-react/src/setupTests.js index 55d746052..f5535835c 100644 --- a/ui-react/src/setupTests.js +++ b/ui-react/src/setupTests.js @@ -1,8 +1,8 @@ /*- * ============LICENSE_START======================================================= - * ONAP CLAMP + * ONAP POLICY-CLAMP * ================================================================================ - * Copyright (C) 2019 AT&T Intellectual Property. All rights + * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights * reserved. * ================================================================================ * Licensed under the Apache License, Version 2.0 (the "License"); @@ -22,7 +22,7 @@ */ import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; +import Adapter from 'enzyme-adapter-react-17-updated'; configure({ adapter: new Adapter() }); global.fetch = require('jest-fetch-mock');
\ No newline at end of file |