aboutsummaryrefslogtreecommitdiffstats
path: root/runtime/ui-react/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'runtime/ui-react/src/components')
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js190
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js143
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js173
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js112
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js118
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js108
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js247
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js109
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js137
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js92
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap167
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap88
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap61
-rw-r--r--runtime/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap137
-rw-r--r--runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js631
-rw-r--r--runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js462
-rw-r--r--runtime/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap196
-rw-r--r--runtime/ui-react/src/components/dialogs/PerformActions.js95
-rw-r--r--runtime/ui-react/src/components/dialogs/PerformActions.test.js90
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js109
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js176
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js192
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js71
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js345
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/PolicyModal.test.js135
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js128
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js66
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js54
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js473
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap788
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyModal.test.js.snap159
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/__snapshots__/ToscaViewer.test.js.snap30
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/toscaData.test.json179
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/toscaData.test.yaml13
-rw-r--r--runtime/ui-react/src/components/dialogs/RefreshStatus.js65
-rw-r--r--runtime/ui-react/src/components/dialogs/RefreshStatus.test.js71
-rw-r--r--runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js163
-rw-r--r--runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js162
-rw-r--r--runtime/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap157
-rw-r--r--runtime/ui-react/src/components/dialogs/UserInfoModal.js110
-rw-r--r--runtime/ui-react/src/components/dialogs/UserInfoModal.test.js78
-rw-r--r--runtime/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap119
-rw-r--r--runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js96
-rw-r--r--runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js70
-rw-r--r--runtime/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap62
-rw-r--r--runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js106
-rw-r--r--runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js78
-rw-r--r--runtime/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap66
-rw-r--r--runtime/ui-react/src/components/loop_viewer/svg/SvgGenerator.js246
-rw-r--r--runtime/ui-react/src/components/menu/MenuBar.js123
-rw-r--r--runtime/ui-react/src/components/menu/MenuBar.test.js46
-rw-r--r--runtime/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap1070
52 files changed, 9162 insertions, 0 deletions
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>
+`;