diff options
Diffstat (limited to 'runtime/ui-react')
83 files changed, 12931 insertions, 0 deletions
diff --git a/runtime/ui-react/package.json b/runtime/ui-react/package.json new file mode 100644 index 000000000..fd3dc0ad3 --- /dev/null +++ b/runtime/ui-react/package.json @@ -0,0 +1,100 @@ +{ + "name": "onap-policy-clamp-ui", + "version": "${project.version}", + "description": "ONAP Policy Clamp UI", + "author": "ONAP Policy Team", + "license": "Apache-2.0", + "publishConfig": { + "registry": "${npm.publish.url}" + }, + "main": "index.js", + "proxy": "https://localhost:8443", + "scripts": { + "start": "HTTPS=true react-scripts start", + "build": "react-scripts build", + "test": "jest", + "test:watch": "jest --watch", + "test:coverage": "jest --coverage", + "eject": "react-scripts eject" + }, + "files": [ + "src/*.js", + "src/*.png", + "src/api", + "src/components", + "src/theme" + ], + "dependencies": { + "@json-editor/json-editor": "2.5.2", + "@fortawesome/fontawesome-free": "5.15.2", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-scripts": "4.0.3", + "react-bootstrap": "1.5.2", + "bootstrap-css-only": "4.3.1", + "styled-components": "5.2.1", + "react-router-dom": "5.2.0", + "@material-ui/core": "4.11.3", + "@material-ui/icons": "4.11.2", + "@material-ui/pickers": "3.3.10", + "@material-ui/lab": "4.0.0-alpha.57", + "material-table": "1.68.1", + "react-select": "4.2.1" + }, + "devDependencies": { + "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", + "@wojtekmaj/enzyme-adapter-react-17": "0.6.1", + "enzyme-to-json": "3.6.1", + "jest-fetch-mock": "3.0.3", + "jest-canvas-mock": "2.3.1" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ], + "jest": { + "verbose": true, + "coverageDirectory": "${project.build.directory}/${ui.react.src}/coverage", + "collectCoverageFrom": [ + "**/*.{js,jsx}" + ], + "rootDir": "${project.build.directory}/${ui.react.src}", + "coverageReporters": [ + "lcov" + ], + "moduleNameMapper": { + "\\.(css|png)$": "identity-obj-proxy" + }, + "setupFiles": [ + "./src/setupTests.js", + "jest-canvas-mock" + ], + "snapshotSerializers": [ + "enzyme-to-json/serializer" + ] + }, + "babel": { + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ], + "plugins": [ + [ + "@babel/plugin-proposal-class-properties", + { + "loose": true + } + ], + [ + "@babel/plugin-transform-runtime" + ] + ] + } +} diff --git a/runtime/ui-react/public/index.html b/runtime/ui-react/public/index.html new file mode 100644 index 000000000..bab3e7ab6 --- /dev/null +++ b/runtime/ui-react/public/index.html @@ -0,0 +1,40 @@ +<!-- + ============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============================================ + =================================================================== + + --> + +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<meta name="viewport" + content="width=device-width, initial-scale=1, shrink-to-fit=no"> +<meta name="theme-color" content="#000000"> +<link rel="manifest" href="manifest.json"> +<link rel="shortcut icon" href="onap.ico"> + +<title>Clamp Designer UI</title> +</head> +<body> + <noscript>You need to enable JavaScript to run this app.</noscript> + <div id="root"></div> +</body> +</html> diff --git a/runtime/ui-react/public/manifest.json b/runtime/ui-react/public/manifest.json new file mode 100644 index 000000000..8210c4ee5 --- /dev/null +++ b/runtime/ui-react/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "Clamp Designer UI", + "name": "Clamp Designer UI", + "icons": [ + { + "src": "onap.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/runtime/ui-react/public/onap.ico b/runtime/ui-react/public/onap.ico Binary files differnew file mode 100644 index 000000000..85e168ae2 --- /dev/null +++ b/runtime/ui-react/public/onap.ico diff --git a/runtime/ui-react/src/LoopUI.js b/runtime/ui-react/src/LoopUI.js new file mode 100644 index 000000000..8dc3bdb03 --- /dev/null +++ b/runtime/ui-react/src/LoopUI.js @@ -0,0 +1,419 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP 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 styled from 'styled-components'; +import MenuBar from './components/menu/MenuBar'; +import Navbar from 'react-bootstrap/Navbar'; +import logo from './logo.png'; +import { GlobalClampStyle } from './theme/globalStyle.js'; +import OnapConstants from './utils/OnapConstants'; + +import SvgGenerator from './components/loop_viewer/svg/SvgGenerator'; +import LoopLogs from './components/loop_viewer/logs/LoopLogs'; +import LoopStatus from './components/loop_viewer/status/LoopStatus'; +import UserService from './api/UserService'; +import LoopCache from './api/LoopCache'; +import LoopActionService from './api/LoopActionService'; + +import { Route } from 'react-router-dom' +import CreateLoopModal from './components/dialogs/Loop/CreateLoopModal'; +import OpenLoopModal from './components/dialogs/Loop/OpenLoopModal'; +import ModifyLoopModal from './components/dialogs/Loop/ModifyLoopModal'; +import PolicyModal from './components/dialogs/Policy/PolicyModal'; +import ViewAllPolicies from './components/dialogs/Policy/ViewAllPolicies'; +import LoopPropertiesModal from './components/dialogs/Loop/LoopPropertiesModal'; +import UserInfoModal from './components/dialogs/UserInfoModal'; +import LoopService from './api/LoopService'; +import ViewLoopTemplatesModal from './components/dialogs/Tosca/ViewLoopTemplatesModal'; +import ManageDictionaries from './components/dialogs/ManageDictionaries/ManageDictionaries'; +import PerformAction from './components/dialogs/PerformActions'; +import RefreshStatus from './components/dialogs/RefreshStatus'; +import DeployLoopModal from './components/dialogs/Loop/DeployLoopModal'; +import Alert from 'react-bootstrap/Alert'; +import Spinner from 'react-bootstrap/Spinner'; + +import { Link } from 'react-router-dom'; + +const StyledMainDiv = styled.div` + background-color: ${props => props.theme.backgroundColor}; +` + +const StyledSpinnerDiv = styled.div` + justify-content: center !important; + display: flex !important; +`; + +const ProjectNameStyled = styled.a` + vertical-align: middle; + padding-left: 30px; + font-size: 36px; + font-weight: bold; +` + +const StyledRouterLink = styled(Link)` + color: ${props => props.theme.menuFontColor}; + background-color: ${props => props.theme.backgroundColor}; +` + +const StyledLoginInfo = styled.a` + color: ${props => props.theme.menuFontColor}; + background-color: ${props => props.theme.backgroundColor}; +` + +const LoopViewDivStyled = styled.div` + height: 100%; + overflow: hidden; + margin-left: 10px; + margin-right: 10px; + margin-bottom: 10px; + color: ${props => props.theme.loopViewerFontColor}; + background-color: ${props => props.theme.loopViewerBackgroundColor}; + border: 1px solid transparent; + border-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; +` + +const LoopViewHeaderDivStyled = styled.div` + background-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; + padding: 10px 10px; + color: ${props => props.theme.loopViewerHeaderFontColor}; +` + +const LoopViewBodyDivStyled = styled.div` + background-color: ${props => (props.theme.loopViewerBackgroundColor)}; + padding: 10px 10px; + color: ${props => (props.theme.loopViewerHeaderFontColor)}; + height: 95%; +` + +export default class LoopUI extends React.Component { + + state = { + userName: null, + loopName: OnapConstants.defaultLoopName, + loopCache: new LoopCache({}), + showSucAlert: false, + showFailAlert: false, + busyLoadingCount: 0 + }; + + constructor() { + super(); + this.getUser = this.getUser.bind(this); + this.updateLoopCache = this.updateLoopCache.bind(this); + this.loadLoop = this.loadLoop.bind(this); + this.closeLoop = this.closeLoop.bind(this); + this.showSucAlert = this.showSucAlert.bind(this); + this.showFailAlert = this.showFailAlert.bind(this); + this.disableAlert = this.disableAlert.bind(this); + this.setBusyLoading = this.setBusyLoading.bind(this); + this.clearBusyLoading = this.clearBusyLoading.bind(this); + this.isBusyLoading = this.isBusyLoading.bind(this); + this.renderGlobalStyle = this.renderGlobalStyle.bind(this); + this.renderSvg = this.renderSvg.bind(this); + } + + componentWillMount() { + this.getUser(); + } + + getUser() { + UserService.login().then(user => { + this.setState({ userName: user }) + }); + } + + renderMenuNavBar() { + return ( + <MenuBar loopName={this.state.loopName}/> + ); + } + + renderUserLoggedNavBar() { + return ( + <Navbar.Text> + <StyledLoginInfo>Signed in as: </StyledLoginInfo> + <StyledRouterLink to="/userInfo">{this.state.userName}</StyledRouterLink> + </Navbar.Text> + ); + } + + renderLogoNavBar() { + return ( + <Navbar.Brand> + <img height="50px" width="234px" src={logo} alt="" /> + <ProjectNameStyled>CLAMP</ProjectNameStyled> + </Navbar.Brand> + ); + } + + renderAlertBar() { + return ( + <div> + <Alert variant="success" show={this.state.showSucAlert} onClose={this.disableAlert} dismissible> + {this.state.showMessage} + </Alert> + <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible> + {this.state.showMessage} + </Alert> + </div> + ); + } + + renderNavBar() { + return ( + <Navbar > + {this.renderLogoNavBar()} + <Navbar.Toggle aria-controls="responsive-navbar-nav" /> + {this.renderMenuNavBar()} + {this.renderUserLoggedNavBar()} + </Navbar> + ); + } + + renderLoopViewHeader() { + return ( + <LoopViewHeaderDivStyled> + Loop Viewer - {this.state.loopName} - ({this.state.loopCache.getTemplateName()}) + </LoopViewHeaderDivStyled> + ); + } + + renderSvg() { + return ( + <SvgGenerator loopCache={this.state.loopCache} clickable={true} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE} isBusyLoading={this.isBusyLoading}/> + ) + } + renderLoopViewBody() { + return ( + <LoopViewBodyDivStyled> + {this.renderSvg()} + <LoopStatus loopCache={this.state.loopCache}/> + <LoopLogs loopCache={this.state.loopCache} /> + </LoopViewBodyDivStyled> + ); + } + + getLoopCache() { + return this.state.loopCache; + + } + + renderLoopViewer() { + return ( + <LoopViewDivStyled> + {this.renderLoopViewHeader()} + {this.renderLoopViewBody()} + </LoopViewDivStyled> + ); + } + + updateLoopCache(loopJson) { + + // If call with an empty object for loopJson, this is a reset to empty + // from someplace like PerformActions for the case where we are "deleting" + // a Control Loop model. Set the loopName to the default. + + if (loopJson === null) { + this.setState({ loopName: OnapConstants.defaultLoopName }); + this.setState({ loopCache: new LoopCache({}) }); + } else { + this.setState({ loopCache: new LoopCache(loopJson) }); + this.setState({ loopName: this.state.loopCache.getLoopName() }); + } + console.info(this.state.loopName+" loop loaded successfully"); + } + + showSucAlert(message) { + this.setState ({ showSucAlert: true, showMessage:message }); + } + + showFailAlert(message) { + this.setState ({ showFailAlert: true, showMessage:message }); + } + + disableAlert() { + this.setState ({ showSucAlert: false, showFailAlert: false }); + } + + loadLoop(loopName) { + this.setBusyLoading(); + LoopService.getLoop(loopName).then(loop => { + console.debug("Updating loopCache"); + LoopActionService.refreshStatus(loopName).then(data => { + this.updateLoopCache(data); + this.clearBusyLoading(); + this.props.history.push('/'); + }) + .catch(error => { + this.updateLoopCache(loop); + this.clearBusyLoading(); + this.props.history.push('/'); + }); + }); + } + + setBusyLoading() { + this.setState((state,props) => ({ busyLoadingCount: ++state.busyLoadingCount })); + } + + clearBusyLoading() { + this.setState((state,props) => ({ busyLoadingCount: --state.busyLoadingCount })); + } + + isBusyLoading() { + if (this.state.busyLoadingCount === 0) { + return false; + } else { + return true; + } + } + + closeLoop() { + this.setState({ loopCache: new LoopCache({}), loopName: OnapConstants.defaultLoopName }); + this.props.history.push('/'); + } + + renderRoutes() { + return( + <React.Fragment> + <Route path="/viewLoopTemplatesModal" render={(routeProps) => (<ViewLoopTemplatesModal {...routeProps} />)} /> + <Route path="/manageDictionaries" render={(routeProps) => (<ManageDictionaries {...routeProps} />)} /> + <Route path="/viewAllPolicies" render={(routeProps) => (<ViewAllPolicies {...routeProps} />)} /> + <Route path="/policyModal/:policyInstanceType/:policyName" render={(routeProps) => (<PolicyModal {...routeProps} + loopCache={this.getLoopCache()} + loadLoopFunction={this.loadLoop}/>)} + /> + <Route path="/createLoop" render={(routeProps) => (<CreateLoopModal {...routeProps} + loadLoopFunction={this.loadLoop} />)} + /> + <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} + loadLoopFunction={this.loadLoop} />)} + /> + <Route path="/loopProperties" render={(routeProps) => (<LoopPropertiesModal {...routeProps} + loopCache={this.getLoopCache()} + loadLoopFunction={this.loadLoop}/>)} + /> + <Route path="/modifyLoop" render={(routeProps) => (<ModifyLoopModal {...routeProps} + loopCache={this.getLoopCache()} + loadLoopFunction={this.loadLoop}/>)} + /> + + <Route path="/userInfo" render={(routeProps) => (<UserInfoModal {...routeProps} />)} /> + <Route path="/closeLoop" render={this.closeLoop} /> + + <Route path="/submit" render={(routeProps) => (<PerformAction {...routeProps} + loopAction="submit" + loopCache={this.getLoopCache()} + updateLoopFunction={this.updateLoopCache} + showSucAlert={this.showSucAlert} + showFailAlert={this.showFailAlert} + setBusyLoading={this.setBusyLoading} + clearBusyLoading={this.clearBusyLoading}/>)} + /> + <Route path="/stop" render={(routeProps) => (<PerformAction {...routeProps} + loopAction="stop" + loopCache={this.getLoopCache()} + updateLoopFunction={this.updateLoopCache} + showSucAlert={this.showSucAlert} + showFailAlert={this.showFailAlert} + setBusyLoading={this.setBusyLoading} + clearBusyLoading={this.clearBusyLoading}/>)} + /> + <Route path="/restart" render={(routeProps) => (<PerformAction {...routeProps} + loopAction="restart" + loopCache={this.getLoopCache()} + updateLoopFunction={this.updateLoopCache} + showSucAlert={this.showSucAlert} + showFailAlert={this.showFailAlert} + setBusyLoading={this.setBusyLoading} + clearBusyLoading={this.clearBusyLoading}/>)} + /> + <Route path="/delete" render={(routeProps) => (<PerformAction {...routeProps} + loopAction="delete" + loopCache={this.getLoopCache()} + updateLoopFunction={this.updateLoopCache} + showSucAlert={this.showSucAlert} + showFailAlert={this.showFailAlert} + setBusyLoading={this.setBusyLoading} + clearBusyLoading={this.clearBusyLoading}/>)} + /> + <Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps} + loopAction="undeploy" + loopCache={this.getLoopCache()} + updateLoopFunction={this.updateLoopCache} + showSucAlert={this.showSucAlert} + showFailAlert={this.showFailAlert} + setBusyLoading={this.setBusyLoading} + clearBusyLoading={this.clearBusyLoading}/>)} + /> + <Route path="/deploy" render={(routeProps) => (<DeployLoopModal {...routeProps} + loopCache={this.getLoopCache()} + updateLoopFunction={this.updateLoopCache} + showSucAlert={this.showSucAlert} + showFailAlert={this.showFailAlert}/>)} + /> + <Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps} + loopCache={this.getLoopCache()} + updateLoopFunction={this.updateLoopCache} + showSucAlert={this.showSucAlert} + showFailAlert={this.showFailAlert}/>)} + /> + </React.Fragment> + ); + } + + renderGlobalStyle() { + return ( + <GlobalClampStyle /> + ); + }; + + + renderSpinner() { + if (this.isBusyLoading()) { + return ( + <StyledSpinnerDiv> + <Spinner animation="border" role="status"> + <span className="sr-only">Loading...</span> + </Spinner> + </StyledSpinnerDiv> + ); + } else { + return (<div></div>); + } + } + + render() { + return ( + <StyledMainDiv id="main_div"> + {this.renderGlobalStyle()} + {this.renderRoutes()} + {this.renderSpinner()} + {this.renderAlertBar()} + {this.renderNavBar()} + {this.renderLoopViewer()} + </StyledMainDiv> + ); + } +} diff --git a/runtime/ui-react/src/LoopUI.test.js b/runtime/ui-react/src/LoopUI.test.js new file mode 100644 index 000000000..bfd6376e3 --- /dev/null +++ b/runtime/ui-react/src/LoopUI.test.js @@ -0,0 +1,171 @@ +/*- + * ============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 LoopUI from './LoopUI'; +import OnapConstants from './utils/OnapConstants'; + +import LoopCache from './api/LoopCache'; +import LoopActionService from './api/LoopActionService'; +import LoopService from './api/LoopService'; + +describe('Verify LoopUI', () => { + beforeEach(() => { + fetch.resetMocks(); + fetch.mockImplementation(() => { + return Promise.resolve({ + ok: true, + status: 200, + text: () => "testUser" + + }); + }); + }) + + const loopCache = new LoopCache({ + "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", + "components": { + "POLICY": { + "componentState": { + "stateName": "UNKNOWN", + "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', async () => { + const flushPromises = () => new Promise(setImmediate); + + const component = shallow(<LoopUI />) + component.setState({ + loopName: "testLoopName", + showSucAlert: false, + showFailAlert: false + }); + await flushPromises(); + expect(component).toMatchSnapshot(); + }); + + test('Test closeLoop method', () => { + const historyMock = { push: jest.fn() }; + const component = shallow(<LoopUI history={historyMock}/>) + const instance = component.instance(); + instance.closeLoop(); + + expect(component.state('loopName')).toEqual(OnapConstants.defaultLoopName); + expect(historyMock.push.mock.calls[0]).toEqual([ '/']); + }) + + test('Test loadLoop method refresh suc', async () => { + const historyMock = { push: jest.fn() }; + LoopService.getLoop = jest.fn().mockImplementation(() => { + return Promise.resolve({ + ok: true, + status: 200, + text: () => {} + }); + }); + + LoopActionService.refreshStatus = jest.fn().mockImplementation(() => { + return Promise.resolve({name: "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"}); + }); + + const flushPromises = () => new Promise(setImmediate); + const component = shallow(<LoopUI history={historyMock}/>) + const instance = component.instance(); + instance.loadLoop("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"); + + await flushPromises(); + + const resLoopCache = instance.getLoopCache(); + + expect(resLoopCache.getComponentStates()).toBeUndefined(); + expect(component.state('loopName')).toEqual("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"); + }) + + test('Test loadLoop method refresh fail', async () => { + const historyMock = { push: jest.fn() }; + LoopService.getLoop = jest.fn().mockImplementation(() => { + return Promise.resolve({ + name: "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", + "components": { + "POLICY": { + "componentState": { + "stateName": "UNKNOWN", + "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" + } + } + }}); + }); + + LoopActionService.refreshStatus = jest.fn().mockImplementation(() => { + return Promise.reject({error: "whatever"}); + }); + + const flushPromises = () => new Promise(setImmediate); + const component = shallow(<LoopUI history={historyMock}/>) + const instance = component.instance(); + instance.loadLoop("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"); + + await flushPromises(); + + const resLoopCache = instance.getLoopCache(); + + expect(resLoopCache).toEqual(loopCache); + expect(component.state('loopName')).toEqual("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"); + }) + + test('Test alert methods', () => { + const component = shallow(<LoopUI />) + expect(component.state('showSucAlert')).toEqual(false); + + const instance = component.instance(); + instance.showSucAlert("testAlert"); + expect(component.state('showSucAlert')).toEqual(true); + expect(component.state('showFailAlert')).toEqual(false); + expect(component.state('showMessage')).toEqual("testAlert"); + + instance.disableAlert(); + + expect(component.state('showSucAlert')).toEqual(false); + expect(component.state('showFailAlert')).toEqual(false); + + instance.showFailAlert("testAlert2"); + expect(component.state('showSucAlert')).toEqual(false); + expect(component.state('showFailAlert')).toEqual(true); + expect(component.state('showMessage')).toEqual("testAlert2"); + }) +}); diff --git a/runtime/ui-react/src/NotFound.js b/runtime/ui-react/src/NotFound.js new file mode 100644 index 000000000..d4b53fd71 --- /dev/null +++ b/runtime/ui-react/src/NotFound.js @@ -0,0 +1,36 @@ +/*- + * ============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' + + +export default class NotFound extends React.Component { + render () { + return ( + <div id='main'> + <div class="divRow"><b>Page Not Found!</b></div> + <div class="divRow">Please cick <a href="/">here</a> to go back to the main page.</div> + </div> + + ); + } +} diff --git a/runtime/ui-react/src/NotFound.test.js b/runtime/ui-react/src/NotFound.test.js new file mode 100644 index 000000000..3a5fc107d --- /dev/null +++ b/runtime/ui-react/src/NotFound.test.js @@ -0,0 +1,36 @@ +/*- + * ============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 NotFound from './NotFound'; + +describe('Verify OnapClamp', () => { + + it('Test the render method', () => { + + const component = shallow(<NotFound />) + + expect(component).toMatchSnapshot(); + }); + +}); diff --git a/runtime/ui-react/src/OnapClamp.js b/runtime/ui-react/src/OnapClamp.js new file mode 100644 index 000000000..506f6e09d --- /dev/null +++ b/runtime/ui-react/src/OnapClamp.js @@ -0,0 +1,39 @@ +/*- + * ============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 LoopUI from './LoopUI' +import { ThemeProvider } from 'styled-components'; +import { DefaultClampTheme } from './theme/globalStyle.js'; + +export default class OnapClamp extends LoopUI { + + render() { + console.info("Onap Clamp UI starting"); + return ( + <ThemeProvider theme={DefaultClampTheme}> + {super.render()} + </ThemeProvider>); + } +} + diff --git a/runtime/ui-react/src/OnapClamp.test.js b/runtime/ui-react/src/OnapClamp.test.js new file mode 100644 index 000000000..c3336a9ab --- /dev/null +++ b/runtime/ui-react/src/OnapClamp.test.js @@ -0,0 +1,36 @@ +/*- + * ============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 OnapClamp from './OnapClamp'; + +describe('Verify OnapClamp', () => { + + it('Test the render method', () => { + + const component = shallow(<OnapClamp />) + + expect(component).toMatchSnapshot(); + }); + +}); diff --git a/runtime/ui-react/src/__snapshots__/LoopUI.test.js.snap b/runtime/ui-react/src/__snapshots__/LoopUI.test.js.snap new file mode 100644 index 000000000..322c93155 --- /dev/null +++ b/runtime/ui-react/src/__snapshots__/LoopUI.test.js.snap @@ -0,0 +1,188 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Verify LoopUI Test the render method 1`] = ` +<styled.div + id="main_div" +> + <Memo(l) /> + <Route + path="/viewLoopTemplatesModal" + render={[Function]} + /> + <Route + path="/manageDictionaries" + render={[Function]} + /> + <Route + path="/viewAllPolicies" + render={[Function]} + /> + <Route + path="/policyModal/:policyInstanceType/:policyName" + render={[Function]} + /> + <Route + path="/createLoop" + render={[Function]} + /> + <Route + path="/openLoop" + render={[Function]} + /> + <Route + path="/loopProperties" + render={[Function]} + /> + <Route + path="/modifyLoop" + render={[Function]} + /> + <Route + path="/userInfo" + render={[Function]} + /> + <Route + path="/closeLoop" + render={[Function]} + /> + <Route + path="/submit" + render={[Function]} + /> + <Route + path="/stop" + render={[Function]} + /> + <Route + path="/restart" + render={[Function]} + /> + <Route + path="/delete" + render={[Function]} + /> + <Route + path="/undeploy" + render={[Function]} + /> + <Route + path="/deploy" + render={[Function]} + /> + <Route + path="/refreshStatus" + render={[Function]} + /> + <div /> + <div> + <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" + /> + <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" + /> + </div> + <Navbar + collapseOnSelect={false} + expand={true} + variant="light" + > + <NavbarBrand> + <img + alt="" + height="50px" + src={null} + width="234px" + /> + <styled.a> + CLAMP + </styled.a> + </NavbarBrand> + <NavbarToggle + aria-controls="responsive-navbar-nav" + label="Toggle navigation" + /> + <MenuBar + loopName="testLoopName" + /> + <NavbarText> + <styled.a> + Signed in as: + </styled.a> + <Styled(Link) + to="/userInfo" + > + testUser + </Styled(Link)> + </NavbarText> + </Navbar> + <styled.div> + <styled.div> + Loop Viewer - + testLoopName + - ( + ) + </styled.div> + <styled.div> + <withRouter(SvgGenerator) + clickable={true} + generatedFrom="INSTANCE" + isBusyLoading={[Function]} + loopCache={ + LoopCache { + "loopJsonCache": Object {}, + } + } + /> + <LoopStatus + loopCache={ + LoopCache { + "loopJsonCache": Object {}, + } + } + /> + <LoopLogs + loopCache={ + LoopCache { + "loopJsonCache": Object {}, + } + } + /> + </styled.div> + </styled.div> +</styled.div> +`; diff --git a/runtime/ui-react/src/__snapshots__/NotFound.test.js.snap b/runtime/ui-react/src/__snapshots__/NotFound.test.js.snap new file mode 100644 index 000000000..86bcfd1c4 --- /dev/null +++ b/runtime/ui-react/src/__snapshots__/NotFound.test.js.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Verify OnapClamp Test the render method 1`] = ` +<div + id="main" +> + <div + class="divRow" + > + <b> + Page Not Found! + </b> + </div> + <div + class="divRow" + > + Please cick + <a + href="/" + > + here + </a> + to go back to the main page. + </div> +</div> +`; diff --git a/runtime/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/runtime/ui-react/src/__snapshots__/OnapClamp.test.js.snap new file mode 100644 index 000000000..353bc1173 --- /dev/null +++ b/runtime/ui-react/src/__snapshots__/OnapClamp.test.js.snap @@ -0,0 +1,216 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Verify OnapClamp Test the render method 1`] = ` +<Component + theme={ + Object { + "backgroundColor": "#eeeeee", + "fontDanger": "#eb238e", + "fontDark": "#888888", + "fontFamily": "Arial, Sans-serif", + "fontHighlight": "#ffff00", + "fontLight": "#ffffff", + "fontNormal": "black", + "fontSize": "16px", + "fontWarning": "#eb238e", + "loopLogsHeaderBackgroundColor": "white", + "loopLogsHeaderFontColor": "black", + "loopViewerBackgroundColor": "white", + "loopViewerFontColor": "yellow", + "loopViewerHeaderBackgroundColor": "#337ab7", + "loopViewerHeaderFontColor": "white", + "menuBackgroundColor": "white", + "menuFontColor": "black", + "menuHighlightedBackgroundColor": "#337ab7", + "menuHighlightedFontColor": "white", + "policyEditorBackgroundColor": "white", + "policyEditorFontSize": "13px", + "toscaTextareaBackgroundColor": "white", + "toscaTextareaFontSize": "13px", + } + } +> + <styled.div + id="main_div" + > + <Memo(l) /> + <Route + path="/viewLoopTemplatesModal" + render={[Function]} + /> + <Route + path="/manageDictionaries" + render={[Function]} + /> + <Route + path="/viewAllPolicies" + render={[Function]} + /> + <Route + path="/policyModal/:policyInstanceType/:policyName" + render={[Function]} + /> + <Route + path="/createLoop" + render={[Function]} + /> + <Route + path="/openLoop" + render={[Function]} + /> + <Route + path="/loopProperties" + render={[Function]} + /> + <Route + path="/modifyLoop" + render={[Function]} + /> + <Route + path="/userInfo" + render={[Function]} + /> + <Route + path="/closeLoop" + render={[Function]} + /> + <Route + path="/submit" + render={[Function]} + /> + <Route + path="/stop" + render={[Function]} + /> + <Route + path="/restart" + render={[Function]} + /> + <Route + path="/delete" + render={[Function]} + /> + <Route + path="/undeploy" + render={[Function]} + /> + <Route + path="/deploy" + render={[Function]} + /> + <Route + path="/refreshStatus" + render={[Function]} + /> + <div /> + <div> + <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" + /> + <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" + /> + </div> + <Navbar + collapseOnSelect={false} + expand={true} + variant="light" + > + <NavbarBrand> + <img + alt="" + height="50px" + src={null} + width="234px" + /> + <styled.a> + CLAMP + </styled.a> + </NavbarBrand> + <NavbarToggle + aria-controls="responsive-navbar-nav" + label="Toggle navigation" + /> + <MenuBar + loopName="Empty (NO loop loaded yet)" + /> + <NavbarText> + <styled.a> + Signed in as: + </styled.a> + <Styled(Link) + to="/userInfo" + /> + </NavbarText> + </Navbar> + <styled.div> + <styled.div> + Loop Viewer - + Empty (NO loop loaded yet) + - ( + ) + </styled.div> + <styled.div> + <withRouter(SvgGenerator) + clickable={true} + generatedFrom="INSTANCE" + isBusyLoading={[Function]} + loopCache={ + LoopCache { + "loopJsonCache": Object {}, + } + } + /> + <LoopStatus + loopCache={ + LoopCache { + "loopJsonCache": Object {}, + } + } + /> + <LoopLogs + loopCache={ + LoopCache { + "loopJsonCache": Object {}, + } + } + /> + </styled.div> + </styled.div> + </styled.div> +</Component> +`; diff --git a/runtime/ui-react/src/api/LoopActionService.js b/runtime/ui-react/src/api/LoopActionService.js new file mode 100644 index 000000000..bff812a2f --- /dev/null +++ b/runtime/ui-react/src/api/LoopActionService.js @@ -0,0 +1,74 @@ +/*- + * ============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============================================ + * =================================================================== + * + */ + +export default class LoopActionService{ + + static performAction(cl_name, uiAction) { + console.info("LoopActionService perform action: " + uiAction + " closedloopName=" + cl_name); + const svcAction = uiAction.toLowerCase(); + return fetch(window.location.pathname + "restservices/clds/v2/loop/" + svcAction + "/" + cl_name, { + method: 'PUT', + credentials: 'same-origin' + }) + .then(function (response) { + if (response.ok) { + return response.json(); + } else { + return Promise.reject("Perform action failed with code:" + response.status); + } + }) + .then(function (data) { + console.info("Action Successful: " + uiAction); + return data; + }) + .catch(function(error) { + console.info("Action Failure: " + uiAction); + return Promise.reject(error); + }); + } + + + static refreshStatus(cl_name) { + console.info("Refresh the status for closedloopName=" + cl_name); + + return fetch(window.location.pathname + "restservices/clds/v2/loop/getstatus/" + cl_name, { + method: 'GET', + credentials: 'same-origin' + }) + .then(function (response) { + if (response.ok) { + return response.json(); + } else { + return Promise.reject("Refresh status failed with code:" + response.status); + } + }) + .then(function (data) { + console.info ("Refresh status Successful"); + return data; + }) + .catch(function(error) { + console.info ("Refresh status failed:", error); + return Promise.reject(error); + }); + } +} diff --git a/runtime/ui-react/src/api/LoopCache.js b/runtime/ui-react/src/api/LoopCache.js new file mode 100644 index 000000000..3e19b4fc7 --- /dev/null +++ b/runtime/ui-react/src/api/LoopCache.js @@ -0,0 +1,252 @@ +/*- + * ============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============================================ + * =================================================================== + * + */ + +export default class LoopCache { + loopJsonCache; + + constructor(loopJson) { + this.loopJsonCache=loopJson; + } + + updateMicroServiceProperties(name, newMsProperties) { + for (var policy in this.loopJsonCache["microServicePolicies"]) { + if (this.loopJsonCache["microServicePolicies"][policy]["name"] === name) { + this.loopJsonCache["microServicePolicies"][policy]["configurationsJson"] = newMsProperties; + } + } + } + + updateMicroServicePdpGroup(name, pdpGroup, pdpSubgroup) { + for (var policy in this.loopJsonCache["microServicePolicies"]) { + if (this.loopJsonCache["microServicePolicies"][policy]["name"] === name) { + this.loopJsonCache["microServicePolicies"][policy]["pdpGroup"] = pdpGroup; + this.loopJsonCache["microServicePolicies"][policy]["pdpSubgroup"] = pdpSubgroup; + } + } + } + + updateGlobalProperties(newGlobalProperties) { + this.loopJsonCache["globalPropertiesJson"] = newGlobalProperties; + } + + updateOperationalPolicyProperties(name, newOpProperties) { + for (var policy in this.loopJsonCache["operationalPolicies"]) { + if (this.loopJsonCache["operationalPolicies"][policy]["name"] === name) { + this.loopJsonCache["operationalPolicies"][policy]["configurationsJson"] = newOpProperties; + } + } + } + + updateOperationalPolicyPdpGroup(name, pdpGroup, pdpSubgroup) { + for (var policy in this.loopJsonCache["operationalPolicies"]) { + if (this.loopJsonCache["operationalPolicies"][policy]["name"] === name) { + this.loopJsonCache["operationalPolicies"][policy]["pdpGroup"] = pdpGroup; + this.loopJsonCache["operationalPolicies"][policy]["pdpSubgroup"] = pdpSubgroup; + } + } + } + + getLoopName() { + return this.loopJsonCache["name"]; + } + + getOperationalPolicyJsonSchema() { + return this.loopJsonCache["operationalPolicies"]["0"]["jsonRepresentation"]; + } + + getOperationalPolicies() { + return this.loopJsonCache["operationalPolicies"]; + } + + getOperationalPoliciesNoJsonSchema() { + var operationalPolicies = JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"])); + delete operationalPolicies[0]["jsonRepresentation"]; + return operationalPolicies; + } + + getGlobalProperties() { + return this.loopJsonCache["globalPropertiesJson"]; + } + + getDcaeDeploymentProperties() { + return this.loopJsonCache["globalPropertiesJson"]["dcaeDeployParameters"]; + } + + getMicroServicePolicies() { + return this.loopJsonCache["microServicePolicies"]; + } + + getOperationalPolicyForName(name) { + var opProperties=this.getOperationalPolicies(); + for (var policy in opProperties) { + if (opProperties[policy]["name"] === name) { + return opProperties[policy]; + } + } + return null; + } + + getOperationalPolicyPropertiesForName(name) { + var opConfig = this.getOperationalPolicyForName(name); + if (opConfig !== null) { + return opConfig["configurationsJson"]; + } + return null; + } + + getOperationalPolicyJsonRepresentationForName(name) { + var opConfig = this.getOperationalPolicyForName(name); + if (opConfig !== null) { + return opConfig["jsonRepresentation"]; + } + return null; + } + + getOperationalPolicySupportedPdpGroup(name) { + var opConfig=this.getOperationalPolicyForName(name); + if (opConfig !== null) { + if (opConfig["policyModel"]["policyPdpGroup"] !== undefined && opConfig["policyModel"]["policyPdpGroup"]["supportedPdpGroups"] !== undefined) { + return opConfig["policyModel"]["policyPdpGroup"]["supportedPdpGroups"]; + } + } + return []; + } + + getOperationalPolicyPdpGroup(name) { + var opConfig=this.getOperationalPolicyForName(name); + if (opConfig !== null) { + return opConfig["pdpGroup"]; + } + return null; + } + + getOperationalPolicyPdpSubgroup(name) { + var opConfig=this.getOperationalPolicyForName(name); + if (opConfig !== null) { + return opConfig["pdpSubgroup"]; + } + return null; + } + + getMicroServiceSupportedPdpGroup(name) { + var microService=this.getMicroServiceForName(name); + if (microService !== null) { + if (microService["policyModel"]["policyPdpGroup"] !== undefined && microService["policyModel"]["policyPdpGroup"]["supportedPdpGroups"] !== undefined) { + return microService["policyModel"]["policyPdpGroup"]["supportedPdpGroups"]; + } + } + return []; + } + + getMicroServicePdpGroup(name) { + var microService=this.getMicroServiceForName(name); + if (microService !== null) { + return microService["pdpGroup"]; + } + return null; + } + + getMicroServicePdpSubgroup(name) { + var microService=this.getMicroServiceForName(name); + if (microService !== null) { + return microService["pdpSubgroup"]; + } + return null; + } + + getMicroServiceForName(name) { + var msProperties=this.getMicroServicePolicies(); + for (var policy in msProperties) { + if (msProperties[policy]["name"] === name) { + return msProperties[policy]; + } + } + return null; + } + + getMicroServicePropertiesForName(name) { + var msConfig = this.getMicroServiceForName(name); + if (msConfig !== null) { + return msConfig["configurationsJson"]; + } + return null; + } + + getMicroServiceJsonRepresentationForName(name) { + var msConfig = this.getMicroServiceForName(name); + if (msConfig !== null) { + return msConfig["jsonRepresentation"]; + } + return null; + } + + getResourceDetailsVfProperty() { + return this.loopJsonCache["modelService"]["resourceDetails"]["VF"]; + } + + getResourceDetailsVfModuleProperty() { + return this.loopJsonCache["modelService"]["resourceDetails"]["VFModule"]; + } + + getLoopLogsArray() { + return this.loopJsonCache.loopLogs; + } + + getComputedState() { + return this.loopJsonCache.lastComputedState; + } + + getComponentStates() { + return this.loopJsonCache.components; + } + + getTemplateName() { + if (this.getLoopTemplate() !== undefined) { + return this.getLoopTemplate().name; + } + return null; + } + + getLoopTemplate() { + return this.loopJsonCache["loopTemplate"]; + } + + isOpenLoopTemplate() { + var loopTemplate = this.getLoopTemplate(); + if(loopTemplate != null && loopTemplate["allowedLoopType"] === "OPEN") { + return true; + } + return false; + } + + getAllLoopElementModels() { + var loopTemplate = this.getLoopTemplate(); + var loopElementModels = []; + if(loopTemplate != null) { + for (var element of loopTemplate['loopElementModelsUsed']) { + loopElementModels.push(element['loopElementModel']) + } + } + return loopElementModels; + } +} diff --git a/runtime/ui-react/src/api/LoopCache.test.js b/runtime/ui-react/src/api/LoopCache.test.js new file mode 100644 index 000000000..76f819c69 --- /dev/null +++ b/runtime/ui-react/src/api/LoopCache.test.js @@ -0,0 +1,305 @@ +/*- + * ============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 LoopCache from '../api/LoopCache'; + +const json = require('./LoopCacheMockFile.json'); + +describe('Verify LoopCache functions', () => { + const loopCache = new LoopCache(json); + it('getLoopName', () => { + expect(loopCache.getLoopName()).toBe("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"); + }); + + it('getOperationalPolicies', () => { + const opPolicy = [{ + "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", + "configurationsJson": { + "operational_policy": { + "controlLoop": {}, + "policies": [] + } + }, + "pdpGroup": "pdpGroupTest", + "pdpSubgroup": "pdpSubgroupTest", + "jsonRepresentation": { + "schema": {} + } + }]; + expect(loopCache.getOperationalPolicies()).toStrictEqual(opPolicy); + }); + + it('getOperationalPoliciesNoJsonSchema', () => { + const opPolicy = [{ + "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", + "configurationsJson": { + "operational_policy": { + "controlLoop": {}, + "policies": [] + } + }, + "pdpGroup": "pdpGroupTest", + "pdpSubgroup": "pdpSubgroupTest", + }]; + expect(loopCache.getOperationalPoliciesNoJsonSchema()).toStrictEqual(opPolicy); + }); + + it('getOperationalPolicyJsonSchema', () => { + const jsonSchema = { + "schema": {} + }; + + expect(loopCache.getOperationalPolicyJsonSchema()).toStrictEqual(jsonSchema); + }); + it('getGlobalProperties', () => { + const globelProp = { + "dcaeDeployParameters": { + "location_id": "", + "service_id": "", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + } + }; + expect(loopCache.getGlobalProperties()).toStrictEqual(globelProp); + }); + + it('getDcaeDeploymentProperties', () => { + const deploymentProp = { + "location_id": "", + "service_id": "", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + }; + expect(loopCache.getDcaeDeploymentProperties()).toStrictEqual(deploymentProp); + }); + + it('getMicroServiceForName', () => { + const msJson = { + "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca", + "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app", + "configurationsJson": {"domain": "measurementsForVfScaling"}, + "shared": false, + "pdpGroup": "pdpGroupTest", + "pdpSubgroup": "pdpSubgroupTest", + "policyModel": {"policyPdpGroup": {"supportedPdpGroups": "supportedPdpGroupsTest"}}, + "jsonRepresentation": {"schema": {}} + }; + expect(loopCache.getMicroServiceForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(msJson); + expect(loopCache.getMicroServiceForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca_2")).toBeNull(); + }); + + it('getMicroServicePropertiesForName', () => { + const msProp = {"domain": "measurementsForVfScaling"}; + expect(loopCache.getMicroServicePropertiesForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(msProp); + expect(loopCache.getMicroServicePropertiesForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca_2")).toBeNull(); + }); + + it('getMicroServiceJsonRepresentationForName', () => { + const msJsonRepresentation = {"schema": {}}; + expect(loopCache.getMicroServiceJsonRepresentationForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(msJsonRepresentation); + }); + + it('getResourceDetailsVfProperty', () => { + const resourceVF = { + "vLoadBalancerMS 0": { + "resourceVendor": "Test", + "resourceVendorModelNumber": "", + "name": "vLoadBalancerMS", + "description": "vLBMS", + "invariantUUID": "1a31b9f2-e50d-43b7-89b3-a040250cf506", + "subcategory": "Load Balancer", + "category": "Application L4+", + "type": "VF", + "UUID": "b4c4f3d7-929e-4b6d-a1cd-57e952ddc3e6", + "version": "1.0", + "resourceVendorRelease": "1.0", + "customizationUUID": "465246dc-7748-45f4-a013-308d92922552" + } + }; + expect(loopCache.getResourceDetailsVfProperty()).toStrictEqual(resourceVF); + }); + + it('getResourceDetailsVfModuleProperty', () => { + const vfModule = { + "Vloadbalancerms..vpkg..module-1": { + "vfModuleModelInvariantUUID": "ca052563-eb92-4b5b-ad41-9111768ce043", + "vfModuleModelVersion": "1", + "vfModuleModelName": "Vloadbalancerms..vpkg..module-1", + "vfModuleModelUUID": "1e725ccc-b823-4f67-82b9-4f4367070dbc", + "vfModuleModelCustomizationUUID": "1bffdc31-a37d-4dee-b65c-dde623a76e52", + "min_vf_module_instances": 0, + "vf_module_label": "vpkg", + "max_vf_module_instances": 1, + "vf_module_type": "Expansion", + "isBase": false, + "initial_count": 0, + "volume_group": false + } + }; + expect(loopCache.getResourceDetailsVfModuleProperty()).toStrictEqual(vfModule); + }); + + it('getLoopLogsArray', () => { + const logs = [ + { + "id": 1, + "logType": "INFO", + "logComponent": "CLAMP", + "message": "Operational policies UPDATED", + "logInstant": "2019-07-08T09:44:37Z" + } + ]; + expect(loopCache.getLoopLogsArray()).toStrictEqual(logs); + }); + + it('getComponentStates', () => { + const component = { + "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" + } + } + }; + expect(loopCache.getComponentStates()).toStrictEqual(component); + }); + + it('getOperationalPolicyForName', () => { + const opPolicy = { + "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", + "configurationsJson": { + "operational_policy": { + "controlLoop": {}, + "policies": [] + } + }, + "pdpGroup": "pdpGroupTest", + "pdpSubgroup": "pdpSubgroupTest", + "jsonRepresentation": { + "schema": {} + } + }; + expect(loopCache.getOperationalPolicyForName("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(opPolicy); + expect(loopCache.getOperationalPolicyForName("Not_Exist")).toBeNull(); + }); + + it('getOperationalPolicyPropertiesForName', () => { + const opPolicyJson = { + "operational_policy": { + "controlLoop": {}, + "policies": [] + }}; + expect(loopCache.getOperationalPolicyPropertiesForName("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(opPolicyJson); + expect(loopCache.getOperationalPolicyPropertiesForName("Not_Exist")).toBeNull(); + }); + + it('getOperationalPolicyJsonRepresentationForName', () => { + const opPolicySchema = { + "schema": {} + }; + expect(loopCache.getOperationalPolicyJsonRepresentationForName("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(opPolicySchema); + expect(loopCache.getOperationalPolicyJsonRepresentationForName("Not_Exist")).toBeNull(); + }); + + it('getOperationalPolicySupportedPdpGroup', () => { + expect(loopCache.getOperationalPolicySupportedPdpGroup("Not_Exist")).toStrictEqual([]); + }); + + it('getOperationalPolicyPdpGroup', () => { + expect(loopCache.getOperationalPolicyPdpGroup("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpGroupTest"); + expect(loopCache.getOperationalPolicyPdpGroup("Not_Exist")).toBeNull(); + }); + + it('getOperationalPolicyPdpSubgroup', () => { + expect(loopCache.getOperationalPolicyPdpSubgroup("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpSubgroupTest"); + expect(loopCache.getOperationalPolicyPdpSubgroup("Not_Exist")).toBeNull(); + }); + + it('getMicroServiceSupportedPdpGroup', () => { + expect(loopCache.getMicroServiceSupportedPdpGroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("supportedPdpGroupsTest"); + expect(loopCache.getMicroServiceSupportedPdpGroup("Not_Exist")).toStrictEqual([]); + }); + + it('getMicroServicePdpGroup', () => { + expect(loopCache.getMicroServicePdpGroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpGroupTest"); + expect(loopCache.getMicroServicePdpGroup("Not_Exist")).toBeNull(); + }); + + it('getMicroServicePdpSubgroup', () => { + expect(loopCache.getMicroServicePdpSubgroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpSubgroupTest"); + expect(loopCache.getMicroServicePdpSubgroup("Not_Exist")).toBeNull(); + }); + + it('getMicroServiceJsonRepresentationForName', () => { + const msPolicySchema = { + "schema": {} + }; + expect(loopCache.getMicroServiceJsonRepresentationForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(msPolicySchema); + expect(loopCache.getMicroServiceJsonRepresentationForName("Not_Exist")).toBeNull(); + }); + + it('getTemplateName', () => { + expect(loopCache.getTemplateName()).toStrictEqual("loopTemplateTest"); + }); + + it('updateGlobalProperties', () => { + const newGlobalProps = { + "dcaeDeployParameters": { + "location_id": "newLocation", + "service_id": "newServiceId", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca_2" + } + }; + loopCache.updateGlobalProperties(newGlobalProps); + expect(loopCache.getGlobalProperties()).toStrictEqual(newGlobalProps); + }); + + it('updateOperationalPolicyProperties', () => { + const newOpPolicy = { + "operational_policy": { + "controlLoop": {}, + "policies": [] + } + }; + loopCache.updateOperationalPolicyProperties("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",newOpPolicy); + expect(loopCache.getOperationalPolicyPropertiesForName("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(newOpPolicy); + }); + + it('updateMicroServiceProperties', () => { + const newMsPolicyProperties = {"domain": "measurementsForVfScalingNew"}; + loopCache.updateMicroServiceProperties("TCA_h2NMX_v1_0_ResourceInstanceName1_tca", newMsPolicyProperties); + expect(loopCache.getMicroServicePropertiesForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(newMsPolicyProperties); + }); + + it('updateMicroServicePdpGroup', () => { + const newMsPolicyProperties = {"domain": "measurementsForVfScalingNew"}; + loopCache.updateMicroServicePdpGroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca", "pdpGroupTest1", "pdpSubgroupTest1"); + expect(loopCache.getMicroServicePdpGroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpGroupTest1"); + expect(loopCache.getMicroServicePdpGroup("Not_Exist")).toBeNull(); + expect(loopCache.getMicroServicePdpSubgroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpSubgroupTest1"); + expect(loopCache.getMicroServicePdpSubgroup("Not_Exist")).toBeNull(); + }); + }); diff --git a/runtime/ui-react/src/api/LoopCacheMockFile.json b/runtime/ui-react/src/api/LoopCacheMockFile.json new file mode 100644 index 000000000..cb9ed87b0 --- /dev/null +++ b/runtime/ui-react/src/api/LoopCacheMockFile.json @@ -0,0 +1,125 @@ +{ + "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", + "dcaeBlueprintId": "typeId-3a942643-a8f7-4e54-b2c1-eea8daba2b17", + "globalPropertiesJson": { + "dcaeDeployParameters": { + "location_id": "", + "service_id": "", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + } + }, + "loopTemplate": {"name": "loopTemplateTest"}, + "modelService": { + "serviceDetails": { + "serviceType": "", + "namingPolicy": "", + "environmentContext": "General_Revenue-Bearing", + "serviceEcompNaming": "true", + "serviceRole": "", + "name": "vLoadBalancerMS", + "description": "vLBMS", + "invariantUUID": "30ec5b59-4799-48d8-ac5f-1058a6b0e48f", + "ecompGeneratedNaming": "true", + "category": "Network L4+", + "type": "Service", + "UUID": "63cac700-ab9a-4115-a74f-7eac85e3fce0", + "instantiationType": "A-la-carte" + }, + "resourceDetails": { + "CP": {}, + "VL": {}, + "VF": { + "vLoadBalancerMS 0": { + "resourceVendor": "Test", + "resourceVendorModelNumber": "", + "name": "vLoadBalancerMS", + "description": "vLBMS", + "invariantUUID": "1a31b9f2-e50d-43b7-89b3-a040250cf506", + "subcategory": "Load Balancer", + "category": "Application L4+", + "type": "VF", + "UUID": "b4c4f3d7-929e-4b6d-a1cd-57e952ddc3e6", + "version": "1.0", + "resourceVendorRelease": "1.0", + "customizationUUID": "465246dc-7748-45f4-a013-308d92922552" + } + }, + "CR": {}, + "VFC": {}, + "PNF": {}, + "Service": {}, + "CVFC": {}, + "Service Proxy": {}, + "Configuration": {}, + "AllottedResource": {}, + "VFModule": { + "Vloadbalancerms..vpkg..module-1": { + "vfModuleModelInvariantUUID": "ca052563-eb92-4b5b-ad41-9111768ce043", + "vfModuleModelVersion": "1", + "vfModuleModelName": "Vloadbalancerms..vpkg..module-1", + "vfModuleModelUUID": "1e725ccc-b823-4f67-82b9-4f4367070dbc", + "vfModuleModelCustomizationUUID": "1bffdc31-a37d-4dee-b65c-dde623a76e52", + "min_vf_module_instances": 0, + "vf_module_label": "vpkg", + "max_vf_module_instances": 1, + "vf_module_type": "Expansion", + "isBase": false, + "initial_count": 0, + "volume_group": false + } + } + } + }, + "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" + } + } + }, + "operationalPolicies": [ + { + "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", + "configurationsJson": { + "operational_policy": { + "controlLoop": {}, + "policies": [] + } + }, + "pdpGroup": "pdpGroupTest", + "pdpSubgroup": "pdpSubgroupTest", + "jsonRepresentation": { + "schema": {} + } + } + ], + "microServicePolicies": [ + { + "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca", + "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app", + "configurationsJson": {"domain": "measurementsForVfScaling"}, + "shared": false, + "pdpGroup": "pdpGroupTest", + "pdpSubgroup": "pdpSubgroupTest", + "policyModel": {"policyPdpGroup": {"supportedPdpGroups": "supportedPdpGroupsTest"}}, + "jsonRepresentation": {"schema": {}} + } + ], + "loopLogs": [ + { + "id": 1, + "logType": "INFO", + "logComponent": "CLAMP", + "message": "Operational policies UPDATED", + "logInstant": "2019-07-08T09:44:37Z" + } + ] +} diff --git a/runtime/ui-react/src/api/LoopService.js b/runtime/ui-react/src/api/LoopService.js new file mode 100644 index 000000000..96bb8a0a7 --- /dev/null +++ b/runtime/ui-react/src/api/LoopService.js @@ -0,0 +1,244 @@ +/*- + * ============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============================================ + * =================================================================== + * + */ + +export default class LoopService { + static getLoopNames() { + return fetch(window.location.pathname + 'restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'same-origin' }) + .then(function (response) { + console.debug("GetLoopNames response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("GetLoopNames query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("GetLoopNames error received", error); + return {}; + }); + } + + static createLoop(loopName, templateName) { + return fetch(window.location.pathname + 'restservices/clds/v2/loop/create/' + loopName + '?templateName=' + templateName, { + method: 'POST', + headers: { + "Content-Type": "application/json" + }, + credentials: 'same-origin' + }) + .then(function (response) { + console.debug("CreateLoop response received: ", response.status); + return response.json(); + }) + .catch(function (error) { + console.error("CreateLoop error received", error); + return ""; + }); + } + + static getLoop(loopName) { + return fetch(window.location.pathname + 'restservices/clds/v2/loop/' + loopName, { + method: 'GET', + headers: { + "Content-Type": "application/json" + }, + credentials: 'same-origin' + }) + .then(function (response) { + console.debug("GetLoop response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("GetLoop query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("GetLoop error received", error); + return {}; + }); + } + + static setMicroServiceProperties(loopName, jsonData) { + return fetch(window.location.pathname + 'restservices/clds/v2/loop/updateMicroservicePolicy/' + loopName, { + method: 'POST', + credentials: 'same-origin', + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(jsonData) + }) + .then(function (response) { + console.debug("updateMicroservicePolicy response received: ", response.status); + if (response.ok) { + return response.text(); + } else { + console.error("updateMicroservicePolicy query failed"); + return ""; + } + }) + .catch(function (error) { + console.error("updateMicroservicePolicy error received", error); + return ""; + }); + } + + static setOperationalPolicyProperties(loopName, jsonData) { + return fetch(window.location.pathname + 'restservices/clds/v2/loop/updateOperationalPolicies/' + loopName, { + method: 'POST', + credentials: 'same-origin', + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(jsonData) + }) + .then(function (response) { + console.debug("updateOperationalPolicies response received: ", response.status); + if (response.ok) { + return response.text(); + } else { + console.error("updateOperationalPolicies query failed"); + return ""; + } + }) + .catch(function (error) { + console.error("updateOperationalPolicies error received", error); + return ""; + }); + } + + static updateGlobalProperties(loopName, jsonData) { + return fetch(window.location.pathname + 'restservices/clds/v2/loop/updateGlobalProperties/' + loopName, { + method: 'POST', + credentials: 'same-origin', + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(jsonData) + }) + .then(function (response) { + console.debug("updateGlobalProperties response received: ", response.status); + if (response.ok) { + return response.text(); + } else { + console.error("updateGlobalProperties query failed"); + return ""; + } + }) + .catch(function (error) { + console.error("updateGlobalProperties error received", error); + return ""; + }); + } + + static refreshOperationalPolicyJson(loopName,operationalPolicyName) { + return fetch(window.location.pathname + 'restservices/clds/v2/loop/refreshOperationalPolicyJsonSchema/' + loopName + '/' + operationalPolicyName, { + method: 'PUT', + headers: { + "Content-Type": "application/json" + }, + credentials: 'same-origin' + }) + .then(function (response) { + console.debug("Refresh Operational Policy Json Schema response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("Refresh Operational Policy Json Schema query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("Refresh Operational Policy Json Schema error received", error); + return {}; + }); + } + + static refreshMicroServicePolicyJson(loopName,microServicePolicyName) { + return fetch(window.location.pathname + 'restservices/clds/v2/loop/refreshMicroServicePolicyJsonSchema/' + loopName + '/' + microServicePolicyName, { + method: 'PUT', + headers: { + "Content-Type": "application/json" + }, + credentials: 'same-origin' + }) + .then(function (response) { + console.debug("Refresh Operational Policy Json Schema response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("Refresh Operational Policy Json Schema query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("Refresh Operational Policy Json Schema error received", error); + return {}; + }); + } + + static addOperationalPolicyType(loopName, policyType, policyVersion) { + return fetch(window.location.pathname + 'restservices/clds/v2/loop/addOperationaPolicy/' + loopName + '/policyModel/' + policyType +'/' + policyVersion , { + method: 'PUT', + headers: { + "Content-Type": "application/json" + }, + credentials: 'same-origin' + }) + .then(function (response) { + console.debug("Add Operational Policy response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + return response.text(); + } + }) + .catch(function (error) { + console.error("Add Operational Policy query failed"); + throw new Error(error); + }) + } + + static removeOperationalPolicyType(loopName, policyType, policyVersion, policyName) { + return fetch(window.location.pathname + 'restservices/clds/v2/loop/removeOperationaPolicy/' + loopName + '/policyModel/' + policyType +'/' + policyVersion + '/' + policyName , { + method: 'PUT', + headers: { + "Content-Type": "application/json" + }, + credentials: 'same-origin' + }) + .then(function (response) { + console.debug("Remove Operational Policy response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("Remove Operational Policy query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("Remove Operational Policy error received", error); + return {}; + }); + } +} diff --git a/runtime/ui-react/src/api/PoliciesListCacheMockFile.json b/runtime/ui-react/src/api/PoliciesListCacheMockFile.json new file mode 100644 index 000000000..5c6bd5b6b --- /dev/null +++ b/runtime/ui-react/src/api/PoliciesListCacheMockFile.json @@ -0,0 +1,215 @@ +{ + "policies": [ + { + "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0": { + "type": "onap.policies.monitoring.tcagen2", + "type_version": "1.0.0", + "properties": { + "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" + } + ] + } + }, + "name": "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0", + "version": "1.0.0", + "metadata": { + "policy-id": "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0", + "policy-version": "1.0.0" + }, + "pdpGroupInfo": { + "pdpGroup": "pdpGroup2", + "pdpSubGroup": "subGroup2" + }, + "supportedPdpGroups": [ + { + "pdpGroup2": [ + "subGroup2", + "subGroup3" + ] + } + ] + } + }, + { + "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd": { + "type": "onap.policies.controlloop.operational.common.Drools", + "type_version": "1.0.0", + "properties": { + "abatement": false, + "operations": [ + { + "failure_retries": "final_failure_retries", + "id": "test1", + "failure_timeout": "final_failure_timeout", + "failure": "final_failure", + "operation": { + "payload": { + "artifact_name": "baseconfiguration", + "artifact_version": "1.0.0", + "mode": "async", + "data": "{\"resource-assignment-properties\":{\"request-id\":\"\",\"service-instance-id\":\"\",\"hostname\":\"\",\"request-info\":{\"prop1\":\"\",\"prop2\":\"\"}}}" + }, + "target": { + "entityIds": { + "resourceID": "Vloadbalancerms..vdns..module-3", + "modelInvariantId": "4c10ba9b-f88f-415e-9de3-5d33336047fa", + "modelVersionId": "4fa73b49-8a6c-493e-816b-eb401567b720", + "modelName": "Vloadbalancerms..vdns..module-3", + "modelVersion": "1", + "modelCustomizationId": "bafcdab0-801d-4d81-9ead-f464640a38b1" + }, + "targetType": "VNF" + }, + "actor": "SDNR", + "operation": "BandwidthOnDemand" + }, + "failure_guard": "final_failure_guard", + "retries": 0, + "timeout": 0, + "failure_exception": "final_failure_exception", + "description": "test", + "success": "final_success" + } + ], + "trigger": "test1", + "timeout": 0, + "id": "LOOP_test" + }, + "name": "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd", + "version": "1.0.0", + "metadata": { + "policy-id": "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd", + "policy-version": "1.0.0" + }, + "pdpGroupInfo": { + "pdpGroup": "pdpGroup2", + "pdpSubGroup": "subGroup3" + }, + "supportedPdpGroups": [ + { + "pdpGroup2": [ + "subGroup2", + "subGroup3" + ] + } + ] + } + }, + { + "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP": { + "type": "onap.policies.Naming", + "type_version": "1.0.0", + "properties": { + "naming-models": [ + { + "naming-type": "VNF", + "naming-recipe": "AIC_CLOUD_REGION|DELIMITER|CONSTANT|DELIMITER|TIMESTAMP", + "name-operation": "to_lower_case()", + "naming-properties": [ + { + "property-name": "AIC_CLOUD_REGION" + }, + { + "property-name": "CONSTANT", + "property-value": "onap-nf" + }, + { + "property-name": "TIMESTAMP" + }, + { + "property-value": "-", + "property-name": "DELIMITER" + } + ] + }, + { + "naming-type": "VNFC", + "naming-recipe": "VNF_NAME|DELIMITER|NFC_NAMING_CODE|DELIMITER|SEQUENCE", + "name-operation": "to_lower_case()", + "naming-properties": [ + { + "property-name": "VNF_NAME" + }, + { + "property-name": "SEQUENCE", + "increment-sequence": { + "max": "zzz", + "scope": "ENTIRETY", + "start-value": "1", + "length": "3", + "increment": "1", + "sequence-type": "alpha-numeric" + } + }, + { + "property-name": "NFC_NAMING_CODE" + }, + { + "property-value": "-", + "property-name": "DELIMITER" + } + ] + }, + { + "naming-type": "VF-MODULE", + "naming-recipe": "VNF_NAME|DELIMITER|VF_MODULE_LABEL|DELIMITER|VF_MODULE_TYPE|DELIMITER|SEQUENCE", + "name-operation": "to_lower_case()", + "naming-properties": [ + { + "property-name": "VNF_NAME" + }, + { + "property-value": "-", + "property-name": "DELIMITER" + }, + { + "property-name": "VF_MODULE_LABEL" + }, + { + "property-name": "VF_MODULE_TYPE" + }, + { + "property-name": "SEQUENCE", + "increment-sequence": { + "max": "zzz", + "scope": "PRECEEDING", + "start-value": "1", + "length": "3", + "increment": "1", + "sequence-type": "alpha-numeric" + } + } + ] + } + ], + "policy-instance-name": "ONAP_NF_NAMING_TIMESTAMP" + }, + "name": "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP", + "version": "1.0.0", + "metadata": { + "policy-id": "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP", + "policy-version": "1.0.0" + } + } + } + ] +}
\ No newline at end of file diff --git a/runtime/ui-react/src/api/PolicyService.js b/runtime/ui-react/src/api/PolicyService.js new file mode 100644 index 000000000..f2886b30a --- /dev/null +++ b/runtime/ui-react/src/api/PolicyService.js @@ -0,0 +1,148 @@ +/*- + * ============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============================================ + * =================================================================== + * + */ + +export default class PolicyService { + static getPoliciesList() { + return fetch(window.location.pathname + 'restservices/clds/v2/policies', { + method: 'GET', + credentials: 'same-origin' + }) + .then(function(response) { + console.debug("getPoliciesList response received: ", response.status); + if (response.ok) { + console.info("getPoliciesList query successful"); + return response.json(); + } else { + return response.text().then(responseBody => { + throw new Error("HTTP " + response.status + "," + responseBody); + }) + } + }) + .catch(function(error) { + console.error("getPoliciesList error occurred ", error); + alert("getPoliciesList error occurred " + error); + return undefined; + }); + } + static createNewPolicy(policyModelType, policyModelVersion, policyName, policyVersion, policyJson) { + return fetch(window.location.pathname + 'restservices/clds/v2/policies/' + policyModelType + '/' + + policyModelVersion + '/' + policyName + '/' + policyVersion, { + method: 'POST', + credentials: 'same-origin', + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(policyJson) + }) + .then(function (response) { + console.debug("createNewPolicy response received: ", response.status); + if (response.ok) { + console.info("createNewPolicy query successful"); + return response.text(); + } else { + return response.text().then(responseBody => { + throw new Error("HTTP " + response.status + "," + responseBody); + }) + } + }) + .catch(function (error) { + console.error("createNewPolicy error occurred ", error); + alert ("createNewPolicy error occurred " + error); + return undefined; + }); + } + static deletePolicy(policyModelType, policyModelVersion, policyName, policyVersion) { + return fetch(window.location.pathname + 'restservices/clds/v2/policies/' + policyModelType + '/' + + policyModelVersion + '/' + policyName + '/' + policyVersion, { + method: 'DELETE', + credentials: 'same-origin' + }) + .then(function (response) { + console.debug("deletePolicy response received: ", response.status); + if (response.ok) { + console.info("deletePolicy query successful"); + return response.text(); + } else { + return response.text().then(responseBody => { + throw new Error("HTTP " + response.status + "," + responseBody); + }) + } + }) + .catch(function (error) { + console.error("deletePolicy error occurred ", error); + alert ("deletePolicy error occurred " + error); + return undefined; + }); + } + static updatePdpDeployment(pdpOperationsList) { + return fetch(window.location.pathname + 'restservices/clds/v2/policies/pdpDeployment', { + method: 'PUT', + credentials: 'same-origin', + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(pdpOperationsList) + }) + .then(function (response) { + console.debug("updatePdpDeployment response received: ", response.status); + if (response.ok) { + console.info("updatePdpDeployment query successful"); + return response.text(); + } else { + return response.text().then(responseBody => { + throw new Error("HTTP " + response.status + "," + responseBody); + }) + } + }) + .catch(function (error) { + console.error("updatePdpDeployment error occurred ", error); + alert ("updatePdpDeployment error occurred " + error); + return undefined; + }); + } + static sendNewPolicyModel(newPolicyModel) { + return fetch(window.location.pathname + 'restservices/clds/v2/policies/policytype', { + method: 'POST', + credentials: 'same-origin', + headers: { + "Content-Type": "plain/text" + }, + body: newPolicyModel + }) + .then(function (response) { + console.debug("sendNewPolicyModel response received: ", response.status); + if (response.ok) { + console.info("sendNewPolicyModel query successful"); + return response.text(); + } else { + return response.text().then(responseBody => { + throw new Error("HTTP " + response.status + "," + responseBody); + }) + } + }) + .catch(function (error) { + console.error("sendNewPolicyModel error occurred ", error); + alert ("sendNewPolicyModel error occurred " + error); + return undefined; + }); + } +} diff --git a/runtime/ui-react/src/api/PolicyToscaService.js b/runtime/ui-react/src/api/PolicyToscaService.js new file mode 100644 index 000000000..e2a1f45e4 --- /dev/null +++ b/runtime/ui-react/src/api/PolicyToscaService.js @@ -0,0 +1,80 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP 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============================================ + * =================================================================== + * + */ + +export default class PolicyToscaService { + static getToscaPolicyModels() { + return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels', { method: 'GET', credentials: 'same-origin' }) + .then(function (response) { + console.debug("getToscaPolicyModels response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("getToscaPolicyModels query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("getToscaPolicyModels error received", error); + return {}; + }); + } + + static getToscaPolicyModelYaml(policyModelType, policyModelVersion) { + return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/yaml/' + policyModelType + "/" + policyModelVersion, { + method: 'GET', + credentials: 'same-origin' + }) + .then(function (response) { + console.debug("getToscaPolicyModelYaml response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("getToscaPolicyModelYaml query failed"); + return ""; + } + }) + .catch(function (error) { + console.error("getToscaPolicyModelYaml error received", error); + return ""; + }); + } + + static getToscaPolicyModel(policyModelType, policyModelVersion) { + return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/' + policyModelType + "/" + policyModelVersion, { + method: 'GET', + credentials: 'same-origin' + }) + .then(function (response) { + console.debug("getToscaPolicyModel response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("getToscaPolicyModel query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("getToscaPolicyModel error received", error); + return {}; + }); + } +} diff --git a/runtime/ui-react/src/api/TemplateService.js b/runtime/ui-react/src/api/TemplateService.js new file mode 100644 index 000000000..08436f2b8 --- /dev/null +++ b/runtime/ui-react/src/api/TemplateService.js @@ -0,0 +1,197 @@ +/*- + * ============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============================================ + * =================================================================== + * + */ + +export default class TemplateService { + + static getLoopNames() { + return fetch(window.location.pathname + 'restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'same-origin' }) + .then(function (response) { + console.debug("getLoopNames response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("getLoopNames query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("getLoopNames error received", error); + return {}; + }); + } + + static getAllLoopTemplates() { + return fetch(window.location.pathname + 'restservices/clds/v2/templates', { method: 'GET', credentials: 'same-origin', }) + .then(function (response) { + console.debug("getAllLoopTemplates response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("getAllLoopTemplates query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("getAllLoopTemplates error received", error); + return {}; + }); + } + + static getDictionary() { + return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/', { method: 'GET', credentials: 'same-origin', }) + .then(function (response) { + console.debug("getDictionary response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("getDictionary query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("getDictionary error received", error); + return {}; + }); + } + + static getDictionaryElements(dictionaryName) { + return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + dictionaryName, { + method: 'GET', + headers: { + "Content-Type": "application/json", + }, + credentials: 'same-origin', + }) + .then(function (response) { + console.debug("getDictionaryElements response received: ", response.status); + if (response.ok) { + return response.json(); + } else { + console.error("getDictionaryElements query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("getDictionaryElements error received", error); + return {}; + }); + } + + static insDictionary(jsonData) { + console.log("dictionaryName is", jsonData.name) + return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/', { + method: 'PUT', + credentials: 'same-origin', + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(jsonData) + }) + .then(function (response) { + console.debug("insDictionary response received: ", response.status); + if (response.ok) { + return response.status; + } else { + var errorMessage = response.status; + console.error("insDictionary query failed", response.status); + return errorMessage; + } + }) + .catch(function (error) { + console.error("insDictionary error received", error); + return ""; + }); + } + + static insDictionaryElements(jsonData) { + console.log("dictionaryName is", jsonData.name) + return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + jsonData.name, { + method: 'PUT', + credentials: 'same-origin', + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(jsonData) + }) + .then(function (response) { + console.debug("insDictionary response received: ", response.status); + if (response.ok) { + return response.status; + } else { + var errorMessage = response.status; + console.error("insDictionary query failed", response.status); + return errorMessage; + } + }) + .catch(function (error) { + console.error("insDictionary error received", error); + return ""; + }); + } + + static deleteDictionary(dictionaryName) { + console.log("inside templaemenu service", dictionaryName) + return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + dictionaryName, { + method: 'DELETE', + headers: { + "Content-Type": "application/json", + }, + credentials: 'same-origin', + }) + .then(function (response) { + console.debug("deleteDictionary response received: ", response.status); + if (response.ok) { + return response.status; + } else { + console.error("deleteDictionary query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("deleteDictionary error received", error); + return {}; + }); + } + + static deleteDictionaryElements(dictionaryData) { + return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + dictionaryData.name + '/elements/' + dictionaryData.shortName , { + method: 'DELETE', + headers: { + "Content-Type": "application/json", + }, + credentials: 'same-origin', + }) + .then(function (response) { + console.debug("deleteDictionary response received: ", response.status); + if (response.ok) { + return response.status; + } else { + console.error("deleteDictionary query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("deleteDictionary error received", error); + return {}; + }); + } + } diff --git a/runtime/ui-react/src/api/UserService.js b/runtime/ui-react/src/api/UserService.js new file mode 100644 index 000000000..5fb4aa6b4 --- /dev/null +++ b/runtime/ui-react/src/api/UserService.js @@ -0,0 +1,74 @@ +/*- + * ============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============================================ + * =================================================================== + * + */ + +export default class UserService { + static notLoggedUserName='Anonymous'; + static login() { + return fetch(window.location.pathname + 'restservices/clds/v1/user/getUser', { + method: 'GET', + credentials: 'same-origin' + }) + .then(function (response) { + console.debug("getUser response received, status code:", response.status); + if (response.ok) { + return response.text(); + } else { + console.error("getUser response is nok"); + return UserService.notLoggedUserName; + } + }) + .then(function (data) { + console.info ("User connected:",data) + return data; + }) + .catch(function(error) { + console.warn("getUser error received, user set to: ",UserService.notLoggedUserName); + console.error("getUser error:",error); + return UserService.notLoggedUserName; + }); + } + + static getUserInfo() { + return fetch(window.location.pathname + 'restservices/clds/v2/clampInformation', { + method: 'GET', + credentials: 'same-origin' + }) + .then(function (response) { + console.debug("getUserInfo response received, status code:", response.status); + if (response.ok) { + return response.json(); + } else { + return {} + } + }) + .then(function (data) { + console.info ("User info received:",data) + return data; + }) + .catch(function(error) { + console.warn("getUserInfo error received, user set to: ",UserService.notLoggedUserName); + console.error("getUserInfo error:",error); + return {}; + }); + } +} diff --git a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js new file mode 100644 index 000000000..5663360a0 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js @@ -0,0 +1,190 @@ +/*- + * ============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 new file mode 100644 index 000000000..8ef53b412 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js @@ -0,0 +1,143 @@ +/*- + * ============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 new file mode 100644 index 000000000..803cfa9cb --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js @@ -0,0 +1,173 @@ +/*- + * ============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 new file mode 100644 index 000000000..84dbfd1f6 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js @@ -0,0 +1,112 @@ +/*- + * ============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"); + }); +});
\ No newline at end of file diff --git a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js new file mode 100644 index 000000000..acd0acade --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js @@ -0,0 +1,118 @@ +/*- + * ============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 new file mode 100644 index 000000000..5bbefe228 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js @@ -0,0 +1,108 @@ +/*- + * ============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 new file mode 100644 index 000000000..f6c0d2ede --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js @@ -0,0 +1,247 @@ +/*- + * ============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 new file mode 100644 index 000000000..055ad0e68 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js @@ -0,0 +1,109 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2020 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ +import React from 'react'; +import { mount } from 'enzyme'; +import ModifyLoopModal from './ModifyLoopModal'; +import LoopCache from '../../../api/LoopCache'; +import LoopService from '../../../api/LoopService'; +import PolicyToscaService from '../../../api/PolicyToscaService'; + +describe('Verify ModifyLoopModal', () => { + beforeEach(() => { + PolicyToscaService.getToscaPolicyModels = jest.fn().mockImplementation(() => { + return Promise.resolve([{ + "policyModelType":"test", + "policyAcronym":"test", + "version":"1.0.0", + "updatedBy":"", + "updatedDate":"" + }]); + }); + PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => { + return Promise.resolve("OK"); + }); + }) + + const loopCache = new LoopCache({ + "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca", + "microServicePolicies": [{ + "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca", + "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app", + "properties": {"domain": "measurementsForVfScaling"}, + "shared": false, + "jsonRepresentation": {"schema": {}} + }], + "globalPropertiesJson": { + "dcaeDeployParameters": { + "testMs": { + "location_id": "", + "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca" + } + } + } + }); + const historyMock = { push: jest.fn() }; + const flushPromises = () => new Promise(setImmediate); + + it('Test handleClose', () => { + const handleClose = jest.spyOn(ModifyLoopModal.prototype,'handleClose'); + const component = mount(<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"); + }); +});
\ No newline at end of file diff --git a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js new file mode 100644 index 000000000..b45df6502 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js @@ -0,0 +1,137 @@ +/*- + * ============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 new file mode 100644 index 000000000..1865869df --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js @@ -0,0 +1,92 @@ +/*- + * ============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 new file mode 100644 index 000000000..1ba9dbaf1 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap @@ -0,0 +1,167 @@ +// 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 new file mode 100644 index 000000000..33f8faa77 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap @@ -0,0 +1,88 @@ +// 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 new file mode 100644 index 000000000..3baaa5798 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap @@ -0,0 +1,61 @@ +// 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 new file mode 100644 index 000000000..581fd0ec0 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap @@ -0,0 +1,137 @@ +// 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 new file mode 100644 index 000000000..90bbc887c --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js @@ -0,0 +1,631 @@ +/*- + * ============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 new file mode 100644 index 000000000..a4c1335d8 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js @@ -0,0 +1,462 @@ +/*- + * ============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 new file mode 100644 index 000000000..6b583632f --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap @@ -0,0 +1,196 @@ +// 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 new file mode 100644 index 000000000..f6001e21f --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/PerformActions.js @@ -0,0 +1,95 @@ +/*- + * ============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 new file mode 100644 index 000000000..c91c2f675 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/PerformActions.test.js @@ -0,0 +1,90 @@ +/*- + * ============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 new file mode 100644 index 000000000..9c2f102b4 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js @@ -0,0 +1,109 @@ +/*- + * ============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> + ); + } +}
\ No newline at end of file diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js new file mode 100644 index 000000000..57d61600a --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js @@ -0,0 +1,176 @@ +/*- + * ============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> + ); + } + }
\ No newline at end of file diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js new file mode 100644 index 000000000..be77f14e9 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js @@ -0,0 +1,192 @@ +/*- + * ============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> + ); + } +}
\ No newline at end of file diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js new file mode 100644 index 000000000..0b734430a --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js @@ -0,0 +1,71 @@ +/*- + * ============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(); + }); +});
\ No newline at end of file diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js new file mode 100644 index 000000000..4a883fffa --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js @@ -0,0 +1,345 @@ +/*- + * ============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 new file mode 100644 index 000000000..1e6fac0a0 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.test.js @@ -0,0 +1,135 @@ +/*- + * ============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(); + }); +});
\ No newline at end of file diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js new file mode 100644 index 000000000..9cd3d4172 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js @@ -0,0 +1,128 @@ +/*- + * ============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> + ); + } +}
\ No newline at end of file diff --git a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js b/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js new file mode 100644 index 000000000..fa83aa245 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js @@ -0,0 +1,66 @@ +/*- + * ============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 new file mode 100644 index 000000000..cc8c59a03 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js @@ -0,0 +1,54 @@ +/*- + * ============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 new file mode 100644 index 000000000..04965352b --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js @@ -0,0 +1,473 @@ +/*- + * ============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> + ); + } + }
\ No newline at end of file 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 new file mode 100644 index 000000000..959b52a36 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap @@ -0,0 +1,788 @@ +// 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 iSTbVM" + > + <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 dAYWPx" + 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 new file mode 100644 index 000000000..8b1261b1c --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyModal.test.js.snap @@ -0,0 +1,159 @@ +// 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 new file mode 100644 index 000000000..61fb4850d --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/ToscaViewer.test.js.snap @@ -0,0 +1,30 @@ +// 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 new file mode 100644 index 000000000..3b001b384 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.json @@ -0,0 +1,179 @@ +{ + "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 new file mode 100644 index 000000000..15a3cec35 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.yaml @@ -0,0 +1,13 @@ +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 new file mode 100644 index 000000000..bb0939152 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/RefreshStatus.js @@ -0,0 +1,65 @@ +/*- + * ============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 new file mode 100644 index 000000000..e08c50d2e --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/RefreshStatus.test.js @@ -0,0 +1,71 @@ +/*- + * ============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 new file mode 100644 index 000000000..4796b8d73 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js @@ -0,0 +1,163 @@ +/*- + * ============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 new file mode 100644 index 000000000..7680ec4b9 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js @@ -0,0 +1,162 @@ +/*- + * ============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 new file mode 100644 index 000000000..73f659606 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap @@ -0,0 +1,157 @@ +// 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 new file mode 100644 index 000000000..96eabb4c2 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/UserInfoModal.js @@ -0,0 +1,110 @@ +/*- + * ============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 new file mode 100644 index 000000000..f5ed0ae10 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/UserInfoModal.test.js @@ -0,0 +1,78 @@ +/*- + * ============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 new file mode 100644 index 000000000..548a2d938 --- /dev/null +++ b/runtime/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap @@ -0,0 +1,119 @@ +// 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 new file mode 100644 index 000000000..e3d9f601f --- /dev/null +++ b/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js @@ -0,0 +1,96 @@ +/*- + * ============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 new file mode 100644 index 000000000..3b7fd413a --- /dev/null +++ b/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js @@ -0,0 +1,70 @@ +/*- + * ============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); + }); +});
\ No newline at end of file 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 new file mode 100644 index 000000000..996c67457 --- /dev/null +++ b/runtime/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap @@ -0,0 +1,62 @@ +// 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 new file mode 100644 index 000000000..4b35b48e1 --- /dev/null +++ b/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js @@ -0,0 +1,106 @@ +/*- +* ============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 new file mode 100644 index 000000000..8d0448796 --- /dev/null +++ b/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js @@ -0,0 +1,78 @@ +/*- + * ============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'); + }); +});
\ No newline at end of file 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 new file mode 100644 index 000000000..24d879de9 --- /dev/null +++ b/runtime/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap @@ -0,0 +1,66 @@ +// 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 new file mode 100644 index 000000000..6d3cd7a21 --- /dev/null +++ b/runtime/ui-react/src/components/loop_viewer/svg/SvgGenerator.js @@ -0,0 +1,246 @@ +/*- + * ============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 new file mode 100644 index 000000000..995db9e16 --- /dev/null +++ b/runtime/ui-react/src/components/menu/MenuBar.js @@ -0,0 +1,123 @@ +/*- + * ============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 new file mode 100644 index 000000000..3e96dbf38 --- /dev/null +++ b/runtime/ui-react/src/components/menu/MenuBar.test.js @@ -0,0 +1,46 @@ +/*- + * ============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 new file mode 100644 index 000000000..ba19097e5 --- /dev/null +++ b/runtime/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap @@ -0,0 +1,1070 @@ +// 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> +`; diff --git a/runtime/ui-react/src/index.js b/runtime/ui-react/src/index.js new file mode 100644 index 000000000..dd83096ea --- /dev/null +++ b/runtime/ui-react/src/index.js @@ -0,0 +1,38 @@ +/*- + * ============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 ReactDOM from 'react-dom'; +import OnapClamp from './OnapClamp'; +import { Route, MemoryRouter } from 'react-router-dom' + + +const routing = ( + <MemoryRouter forceRefresh={false}> + <Route path="/" component={OnapClamp}/> + </MemoryRouter> +); + +export var mainClamp = ReactDOM.render( + routing, + document.getElementById('root') +) diff --git a/runtime/ui-react/src/logo.png b/runtime/ui-react/src/logo.png Binary files differnew file mode 100644 index 000000000..c6f6857a5 --- /dev/null +++ b/runtime/ui-react/src/logo.png diff --git a/runtime/ui-react/src/setupTests.js b/runtime/ui-react/src/setupTests.js new file mode 100644 index 000000000..30ce019ea --- /dev/null +++ b/runtime/ui-react/src/setupTests.js @@ -0,0 +1,28 @@ +/*- + * ============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 { configure } from 'enzyme'; +import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; + +configure({ adapter: new Adapter() }); +global.fetch = require('jest-fetch-mock'); diff --git a/runtime/ui-react/src/theme/globalStyle.js b/runtime/ui-react/src/theme/globalStyle.js new file mode 100644 index 000000000..1e316d20b --- /dev/null +++ b/runtime/ui-react/src/theme/globalStyle.js @@ -0,0 +1,98 @@ +/*- + * ============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 { createGlobalStyle } from 'styled-components'; + +export const GlobalClampStyle = createGlobalStyle` + body { + padding: 0; + margin: 0; + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + font-weight: normal; + } + + span { + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + font-weight: bold; + } + + a { + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + font-weight: bold; + } + + div { + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + border-radius: 4px; + margin-top: 1px; + } + + label { + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + font-weight: bold; + } + + button { + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + font-weight: bold; + } + +` + +export const DefaultClampTheme = { + fontDanger: '#eb238e', + fontWarning: '#eb238e', + fontLight: '#ffffff', + fontDark: '#888888', + fontHighlight: '#ffff00', + fontNormal: 'black', + + backgroundColor: '#eeeeee', + fontFamily: 'Arial, Sans-serif', + fontSize: '16px', + + loopViewerBackgroundColor: 'white', + loopViewerFontColor: 'yellow', + loopViewerHeaderBackgroundColor: '#337ab7', + loopViewerHeaderFontColor: 'white', + + loopLogsHeaderBackgroundColor: 'white', + loopLogsHeaderFontColor: 'black', + + menuBackgroundColor: 'white', + menuFontColor: 'black', + menuHighlightedBackgroundColor: '#337ab7', + menuHighlightedFontColor: 'white', + + toscaTextareaBackgroundColor: 'white', + toscaTextareaFontSize: '13px', + + policyEditorBackgroundColor: 'white', + policyEditorFontSize: '13px' +}; diff --git a/runtime/ui-react/src/utils/CsvToJson.js b/runtime/ui-react/src/utils/CsvToJson.js new file mode 100644 index 000000000..5ec19c9e2 --- /dev/null +++ b/runtime/ui-react/src/utils/CsvToJson.js @@ -0,0 +1,204 @@ +/*- + * ============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============================================ + * =================================================================== + * + */ + +export default function CsvToJson(rawCsvData, delimiter, internalDelimiter, csvHeaderNames, jsonKeyNames, mandatory) { + + let printDictKeys = ''; + let result = { jsonObjArray: [], errorMessages: '' }; + + // Validate that all parallel arrays passed in have same number of elements; + // this would be a developer error. + + let checkLength = csvHeaderNames.length; + + if (checkLength !== jsonKeyNames.length || checkLength !== mandatory.length) { + result.errorMessages = 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays parameters are not the same length'; + return result; + } + + if (checkLength < 1) { + result.errorMessages = 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays have no entries'; + return result; + } + + // Make a nice string to print in the error case to tell user what is the + // required heaer row format + + for (let i=0; i < csvHeaderNames.length; ++i) { + if (i === 0) { + printDictKeys = csvHeaderNames[i]; + } else { + printDictKeys += ',' + csvHeaderNames[i]; + } + } + + let dictElems = rawCsvData.split('\n'); + let numColumns = 0; + let filteredDictElems = []; + + // The task of the following loop is to convert raw CSV rows into easily parseable + // and streamlined versions of the rows with an internalDelimiter replacing the standard + // comma; it is presumed (and checked) that the internalDelimiter cannot exist as a valid + // sequence of characters in the user's data. + + // This conversion process also strips leading and trailing whitespace from each row, + // discards empty rows, correctly interprets and removes all double quotes that programs like + // Excel use to support user columns that contain special characters, most notably, the comma + // delimiter. A double-quote that is contained within a double-quoted column value + // must appear in this raw data as a sequence of two double quotes. Furthermore, any column + // value in the raw CSV data that does not contain a delimiter may or may not be enclosed in + // double quotes. It is the Excel convention to not use double qoutes unless necessary, and + // there is no reasonable way to tell Excel to surround every column value with double quotes. + // Any files that were directly "exported" by CLAMP itself from the Managing Dictionaries + // capability, surround all columns with double quotes. + + for (let i = 0; i < dictElems.length; i++) { + + let oneRow = dictElems[i].trim(); + let j = 0; + let inQuote = false + let nextChar = undefined; + let prevChar = null; + + + if (oneRow === '') { + continue; // Skip blank rows + } else if (oneRow.indexOf(internalDelimiter) !== -1) { + result.errorMessages += '\nRow #' + i + ' contains illegal sequence of characters (' + internalDelimiter + ')'; + break; + } else { + nextChar = oneRow[1]; + } + + let newStr = ''; + numColumns = 1; + + // This "while loop" performs the very meticulous task of removing double quotes that + // are used by Excel to encase special characters as user string value data, + // and manages to correctly identify columns that are defined with or without + // double quotes and to process the comma delimiter correctly when encountered + // as a user value within a column. Such a column would have to be encased in + // double quotes; a comma found outside double quotes IS a delimiter. + + while (j < oneRow.length) { + if (oneRow[j] === '"') { + if (inQuote === false) { + if (prevChar !== delimiter && prevChar !== null) { + result.errorMessages += '\nMismatched double quotes or illegal whitespace around delimiter at row #' + (i + 1) + ' near column #' + numColumns; + break; + } else { + inQuote = true; + } + } else { + if (nextChar === '"') { + newStr += '"'; + ++j; + } else if ((nextChar !== delimiter) && (nextChar !== undefined)) { + result.errorMessages += '\nRow #' + (i + 1) + ' is badly formatted at column #' + numColumns + '. Perhaps an unescaped double quote.'; + break; + } else if (nextChar === delimiter) { + ++numColumns; + inQuote = false; + newStr += internalDelimiter; + prevChar = delimiter; + j += 2; + nextChar = oneRow[j+1]; + continue; + } else { + ++numColumns; + inQuote = false; + break; + } + } + } else { + if (oneRow[j] === delimiter && inQuote === false) { + newStr += internalDelimiter; + ++numColumns; + } else { + newStr += oneRow[j]; + } + } + prevChar = oneRow[j]; + ++j; + nextChar = oneRow[j+1]; // can result in undefined at the end + } + + if (result.errorMessages === '' && inQuote !== false) { + result.errorMessages += '\nMismatched double quotes at row #' + (i + 1); + break; + } else if (result.errorMessages === '' && numColumns < jsonKeyNames.length) { + result.errorMessages += '\nNot enough columns (' + jsonKeyNames.length + ') at row #' + (i + 1); + break; + } + + filteredDictElems.push(newStr); + } + + if (result.errorMessages !== '') { + return result; + } + + // Perform further checks on data that is now in JSON form + if (filteredDictElems.length < 2) { + result.errorMessages += '\nNot enough row data found in import file. Need at least a header row and one row of data'; + return result; + } + + // Now that we have something reliably parsed into sanitized columns lets run some checks + // and convert it all into an array of JSON objects to push to the back end if all the + // checks pass. + + let headers = filteredDictElems[0].split(internalDelimiter); + + // check that headers are included in proper order + for (let i=0; i < jsonKeyNames.length; ++i) { + if (csvHeaderNames[i] !== headers[i]) { + result.errorMessages += 'Row 1 header key at column #' + (i + 1) + ' is a mismatch. Expected row header must contain at least:\n' + printDictKeys; + return result; + } + } + + // Convert the ASCII rows of data into an array of JSON obects that omit the header + // row which is not sent to the back end. + + for (let i = 1; i < filteredDictElems.length; i++) { + let data = filteredDictElems[i].split(internalDelimiter); + let obj = {}; + for (let j = 0; j < data.length && j < jsonKeyNames.length; j++) { + let value = data[j].trim(); + if (mandatory[j] === true && value === '') { + result.errorMessages += '\n' + csvHeaderNames[j] + ' at row #' + (i+1) + ' is empty but requires a value.'; + } + obj[jsonKeyNames[j]] = value; + } + result.jsonObjArray.push(obj); + } + + if (result.errorMessages !== '') { + // If we have errors, return empty parse result even though some things + // may have parsed properly. We do not want to encourage the caller + // to think the data is good for use. + result.jsonObjArray = []; + } + + return result; +} diff --git a/runtime/ui-react/src/utils/CsvToJson.test.js b/runtime/ui-react/src/utils/CsvToJson.test.js new file mode 100644 index 000000000..88fa7a472 --- /dev/null +++ b/runtime/ui-react/src/utils/CsvToJson.test.js @@ -0,0 +1,268 @@ +/*- + * ============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 CsvToJson from './CsvToJson' + +describe('Verify CsvToJson', () => { + + const hdrNames= [ + "Element Short Name", + "Element Name", + "Element Description", + "Element Type", + "Sub-Dictionary" + ]; + + const jsonKeyNames = [ + "shortName", + "name", + "description", + "type", + "subDictionary" + ]; + + const mandatory = [ true, true, true, true, false ]; + + it('Test CsvToJson No Error Case, Quoted Columns', () => { + + let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; + rawCsv += '"alertType","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"'; + + let expectedResult = { + errorMessages: '', + jsonObjArray: [ + { + description: "Type of Alert", + name: "Alert Type", + shortName: "alertType", + subDictionary: "", + type: "string" + } + ] + }; + + expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult); + }); + + it('Test CsvToJson No Error Case, Unquoted Columns', () => { + + let rawCsv = 'Element Short Name,Element Name,Element Description,Element Type,Sub-Dictionary\n'; + rawCsv += 'alertType,Alert Type,Type of Alert,string,,admin,2020-06-11T13:56:14.927437Z'; + + let expectedResult = { + errorMessages: '', + jsonObjArray: [ + { + description: "Type of Alert", + name: "Alert Type", + shortName: "alertType", + subDictionary: "", + type: "string" + } + ] + }; + + expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult); + }); + + it('Test CsvToJson Properly Escaped Double Quote and Delimiter', () => { + + let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; + rawCsv += '"alertType","Alert ""Type""","Type of Alert, Varies","string","","admin","2020-06-11T13:56:14.927437Z"'; + + let errorMessage = ''; + + let expectedResult = { + errorMessages: errorMessage, + jsonObjArray: [ + { + description: "Type of Alert, Varies", + name: 'Alert "Type"', + shortName: 'alertType', + subDictionary: "", + type: "string", + } + + ] + }; + + expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult); + }); + + + it('Test CsvToJson Error Header Mismatch Error Case', () => { + + let rawCsv = '"Element Short Names","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; + rawCsv += '"alertType","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"'; + + let errorMessage = 'Row 1 header key at column #1 is a mismatch. Expected row header must contain at least:\n'; + errorMessage += 'Element Short Name,Element Name,Element Description,Element Type,Sub-Dictionary'; + + let expectedResult = { + errorMessages: errorMessage, + jsonObjArray: [] + }; + + expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult); + }); + + it('Test CsvToJson Error Mismatched Double Quotes in Column', () => { + + let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; + rawCsv += '"alert"Type","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"'; + + let errorMessage = '\nRow #2 is badly formatted at column #1. Perhaps an unescaped double quote.' + + let expectedResult = { + errorMessages: errorMessage, + jsonObjArray: [] + }; + + expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult); + }); + + it('Test CsvToJson Error Illegal Whitespace', () => { + + let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; + rawCsv += 'alertType , "Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"'; + + let errorMessage = '\nMismatched double quotes or illegal whitespace around delimiter at row #2 near column #2'; + + let expectedResult = { + errorMessages: errorMessage, + jsonObjArray: [] + }; + + expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult); + }); + + it('Test CsvToJson Error Too Few Data Columns', () => { + + let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; + rawCsv += '"alertType","Alert Type","Type of Alert"'; + + let errorMessage = '\nNot enough columns (5) at row #2'; + + let expectedResult = { + errorMessages: errorMessage, + jsonObjArray: [] + }; + + expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult); + }); + + it('Test CsvToJson Error Wrong Header Column Order', () => { + + let rawCsv = '"Element Name","Element Short Name","Element Description","Element Type","Sub-Dictionary"\n'; + rawCsv += '"alertType","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"'; + + let errorMessage = 'Row 1 header key at column #1 is a mismatch. Expected row header must contain at least:\n'; + errorMessage += 'Element Short Name,Element Name,Element Description,Element Type,Sub-Dictionary'; + + let expectedResult = { + errorMessages: errorMessage, + jsonObjArray: [] + }; + + expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult); + }); + + it('Test CsvToJson Error Not Enough Rows', () => { + + let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; + + let errorMessage = '\nNot enough row data found in import file. Need at least a header row and one row of data'; + + let expectedResult = { + errorMessages: errorMessage, + jsonObjArray: [] + }; + + expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult); + }); + + it('Test CsvToJson Error Mandatory Field Is Empty', () => { + + let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; + rawCsv += '"","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"'; + + let expectedResult = { + errorMessages: '\nElement Short Name at row #2 is empty but requires a value.', + jsonObjArray: [] + }; + + expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult); + }); + + it('Test CsvToJson Error Mismatched Double Quotes At End', () => { + + let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; + rawCsv += '"alertType","Alert Type","Alert Type Description","string","admin","2020-06-11T13:56:14.927437Z'; + + let expectedResult = { + errorMessages: '\nMismatched double quotes at row #2', + jsonObjArray: [] + }; + + expect(CsvToJson(rawCsv, ',', '||', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult); + }); + + it('Test CsvToJson Error Mismatched Mandatory Array Parameters', () => { + + let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; + rawCsv += '"alertType","Alert Type","Alert Type Description","string","admin","2020-06-11T13:56:14.927437Z'; + + let expectedResult = { + errorMessages: 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays parameters are not the same length', + jsonObjArray: [] + }; + + expect(CsvToJson(rawCsv, ',', '||', hdrNames, jsonKeyNames, [ true ])).toEqual(expectedResult); + }); + + it('Test CsvToJson Error Empty Mandatory Array Parameters', () => { + + let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; + rawCsv += '"alertType","Alert Type","Alert Type Description","string","admin","2020-06-11T13:56:14.927437Z'; + + let expectedResult = { + errorMessages: 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays have no entries', + jsonObjArray: [] + }; + + expect(CsvToJson(rawCsv, ',', '||', [], [], [])).toEqual(expectedResult); + }); + + it('Test CsvToJson Error Illegal Data Contains Internal Delimiter', () => { + + let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n'; + rawCsv += '"alertType","Alert Type","Alert Type||Description","string","admin","2020-06-11T13:56:14.927437Z'; + + let expectedResult = { + errorMessages: '\nRow #1 contains illegal sequence of characters (||)', + jsonObjArray: [] + }; + + expect(CsvToJson(rawCsv, ',', '||', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult); + }); +}) diff --git a/runtime/ui-react/src/utils/OnapConstants.js b/runtime/ui-react/src/utils/OnapConstants.js new file mode 100644 index 000000000..8460340d1 --- /dev/null +++ b/runtime/ui-react/src/utils/OnapConstants.js @@ -0,0 +1,32 @@ +/*- + * ============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============================================ + * =================================================================== + * + */ + +// Maintain a list of ONAP CLAMP UI "constants" that can be used by any componenet within CLAMP + +const OnapConstants = { + defaultLoopName: "Empty (NO loop loaded yet)", + microServiceType: "MICRO-SERVICE-POLICY", + operationalPolicyType: "OPERATIONAL_POLICY_TYPE" +}; + +export default OnapConstants; diff --git a/runtime/ui-react/src/utils/OnapUtils.js b/runtime/ui-react/src/utils/OnapUtils.js new file mode 100644 index 000000000..316a0d65f --- /dev/null +++ b/runtime/ui-react/src/utils/OnapUtils.js @@ -0,0 +1,65 @@ +/*- + * ============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============================================ + * =================================================================== + * + */ + +export default class OnapUtils { + + constructor() { + this.clickBlocked = false; + } + + static jsonEditorErrorFormatter(errors) { + + let messages = []; + let messagesOutputString = null; + + // errors is an array of JSON Editor "error" objects, where each + // object looks like this: + + // { + // message: "Please populate the required property "Threshold"" + // path: "root.signatures.0" + // property: "required" + // } + + // In this function we concatenate all the messages, removing any duplicates, + // and adding a newline between each message. The result returned is a single + // string that can be displayed to the user in an alert message + + if (!Array.isArray(errors)) { + console.error('jsoneEditorErrorFormatter was passed a non-array argument'); + } else { + for (let ii=0; ii < errors.length; ++ii) { + if (!messages.includes(errors[ii].message)) { + messages.push(errors[ii].message); + if (messagesOutputString) { + messagesOutputString += '\n' + errors[ii].message; + } else { + messagesOutputString = errors[ii].message; + } + } + } + } + + return messagesOutputString; + } +} |
