Fix the loop template view
Fix the loop template view modal as the rest api has been changed + the database model as well
Issue-ID: CLAMP-589
Change-Id: I57521bc1c3afaf4ca5a2acf4c59823df06fd4cd9
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
diff --git a/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.test.js
deleted file mode 100644
index 4a8d9c3..0000000
--- a/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.test.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- * reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import ViewBlueprintMicroServiceTemplatesModal from './ViewBlueprintMicroServiceTemplatesModal';
-import { mount } from 'enzyme';
-
-describe('Verify ViewBlueprintMicroServiceTemplatesModal', () => {
- beforeEach(() => {
- fetch.resetMocks();
- }
- );
-
- it('Test API Successful', () => {
- fetch.mockImplementationOnce(() => {
- return Promise.resolve({
- ok: true,
- status: 200,
- json: () => {
- return Promise.resolve({
- "index": "1",
- "content": "MTCA version 1",
- "templateName": "MTCA",
- "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
- "updatedBy":"tester",
- "templateId":"aaaa_bbbb_cccc",
- "timestamp":"2019-09-06 19:09:42"
- });
- }
- });
- });
- const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
- });
-
- it('Test API Exception', () => {
- fetch.mockImplementationOnce(() => {
- return Promise.resolve({
- ok: false,
- status: 500,
- json: () => {
- return Promise.resolve({
- "index": "1",
- "content": "MTCA version 1",
- "templateName": "MTCA",
- "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
- "updatedBy":"tester",
- "templateId":"aaaa_bbbb_cccc",
- "timestamp":"2019-09-06 19:09:42"
- });
- }
- });
- });
- const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
- });
-
- it('Test API Rejection', () => {
- const myMockFunc = fetch.mockImplementationOnce(() => Promise.reject('error'));
- setTimeout( () => myMockFunc().catch(e => {
- console.log(e);
- }),
- 100
- );
- new Promise(resolve => setTimeout(resolve, 200));
- const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
- 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",
- "content": "MTCA version 1",
- "templateName": "MTCA",
- "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
- "updatedBy":"tester",
- "templateId":"aaaa_bbbb_cccc",
- "timestamp":"2019-09-06 19:09:42"
- });
- }
- });
- });
- const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
- component.setState({ bpTemplNames: {
- "index": "1",
- "content": "MTCA version 1",
- "templateName": "MTCA",
- "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
- "updatedBy":"tester",
- "templateId":"aaaa_bbbb_cccc",
- "timestamp":"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",
- "content": "MTCA version 1",
- "templateName": "MTCA",
- "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
- "updatedBy":"tester",
- "templateId":"aaaa_bbbb_cccc",
- "timestamp":"2019-09-06 19:09:42"
- });
- }
- });
- });
- const component = mount(<ViewBlueprintMicroServiceTemplatesModal/>);
- expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
- });
-
- it('Test handleYamlContent', () => {
- fetch.mockImplementationOnce(() => {
- return Promise.resolve({
- ok: true,
- status: 200,
- json: () => {
- return Promise.resolve({
- "index": "1",
- "content": "MTCA version 1",
- "templateName": "MTCA",
- "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
- "updatedBy":"tester",
- "templateId":"aaaa_bbbb_cccc",
- "timestamp":"2019-09-06 19:09:42"
- });
- }
- });
- });
- const yamlContent = 'MTCA Tosca model details';
- const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
- component.find('[value="Please select Blue print template to view the details"]').prop('onChange')({ target: { value: yamlContent }});
- expect(component.state('content')).toEqual(yamlContent);
- });
-
- it('Test handleClose', () => {
- fetch.mockImplementationOnce(() => {
- return Promise.resolve({
- ok: true,
- status: 200,
- json: () => {
- return Promise.resolve({
- "index": "1",
- "content": "MTCA version 1",
- "templateName": "MTCA",
- "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
- "updatedBy":"tester",
- "templateId":"aaaa_bbbb_cccc",
- "timestamp":"2019-09-06 19:09:42"
- });
- }
- });
- });
- const historyMock = { push: jest.fn() };
- const handleClose = jest.spyOn(ViewBlueprintMicroServiceTemplatesModal.prototype,'handleClose');
- const component = shallow(<ViewBlueprintMicroServiceTemplatesModal 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();
- });
- });
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
similarity index 85%
rename from ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.js
rename to ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
index adacbc8..a78d454 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -51,34 +51,34 @@
const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' };
const rowHeaderStyle = {backgroundColor:'#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black'};
-export default class ViewBlueprintMicroServiceTemplatesModal extends React.Component {
+export default class ViewLoopTemplatesModal extends React.Component {
state = {
show: true,
- content: 'Please select Blue print template to view the details',
+ content: 'Please select a loop template to display it',
selectedRow: -1,
- bpTemplNames: [],
- bpTemplColumns: [
+ loopTemplateData: [],
+ loopTemplateColumnsDefinition: [
{ title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
cellStyle: cellStyle,
headerStyle: headerStyle
},
- { title: "Template Name", field: "templateName",
+ { title: "Template Name", field: "name",
cellStyle: cellStyle,
headerStyle: headerStyle
},
- { title: "Policy Model", field: "templatePolicy[0].policyModelId",
+ { title: "Service Model Name", field: "modelService.serviceDetails.name",
cellStyle: cellStyle,
headerStyle: headerStyle
},
- { title: "Template ID", field: "templateId",
+ { title: "Loop Type Allowed", field: "allowedLoopType",
cellStyle: cellStyle,
headerStyle: headerStyle
},
- { title: "Uploaded By", field: "updatedBy",
+ { title: "# Instances Allowed", field: "maximumInstancesAllowed",
cellStyle: cellStyle,
headerStyle: headerStyle
},
- { title: "Uploaded Date", field: "timestamp", editable: 'never',
+ { title: "Modified Date", field: "updatedDate", editable: 'never',
cellStyle: cellStyle,
headerStyle: headerStyle
}
@@ -99,15 +99,12 @@
this.handleClose = this.handleClose.bind(this);
this.getBlueprintMicroServiceTemplates = this.getBlueprintMicroServiceTemplates.bind(this);
this.handleYamlContent = this.handleYamlContent.bind(this);
- }
-
- componentWillMount() {
this.getBlueprintMicroServiceTemplates();
}
getBlueprintMicroServiceTemplates() {
- TemplateMenuService.getBlueprintMicroServiceTemplates().then(bpTemplNames => {
- this.setState({ bpTemplNames: bpTemplNames })
+ TemplateMenuService.getBlueprintMicroServiceTemplates().then(loopTemplateData => {
+ this.setState({ loopTemplateData: loopTemplateData })
});
}
@@ -130,10 +127,10 @@
<Modal.Body>
<MaterialTable
title={"View Blueprint MicroService Templates"}
- data={this.state.bpTemplNames}
- columns={this.state.bpTemplColumns}
+ data={this.state.loopTemplateData}
+ columns={this.state.loopTemplateColumnsDefinition}
icons={this.state.tableIcons}
- onRowClick={(event, rowData) => {this.setState({content: rowData.templateYaml, selectedRow: rowData.tableData.id})}}
+ onRowClick={(event, rowData) => {this.setState({content: rowData.name, selectedRow: rowData.tableData.id})}}
options={{
headerStyle:rowHeaderStyle,
rowStyle: rowData => ({
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
new file mode 100644
index 0000000..94d4acd
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
@@ -0,0 +1,186 @@
+/*-
+ * ============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';
+
+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.log(e);
+ }),
+ 100
+ );
+ new Promise(resolve => setTimeout(resolve, 200));
+ 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(<ViewLoopTemplatesModal/>);
+ expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
+ });
+
+ it('Test handleYamlContent', () => {
+ 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 yamlContent = 'MTCA version 1';
+ const component = shallow(<ViewLoopTemplatesModal/>);
+ component.find('[value="Please select a loop template to display it"]').prop('onChange')({ target: { value: yamlContent }});
+ expect(component.state('content')).toEqual(yamlContent);
+ });
+
+ 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();
+ });
+ });
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewBlueprintMicroServiceTemplatesModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
similarity index 82%
rename from ui-react/src/components/dialogs/Tosca/__snapshots__/ViewBlueprintMicroServiceTemplatesModal.test.js.snap
rename to ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
index 7dd4ee0..efec96e 100644
--- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewBlueprintMicroServiceTemplatesModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Verify ViewBlueprintMicroServiceTemplatesModal Test the tosca model view render method 1`] = `
+exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1`] = `
<Styled(Bootstrap(Modal))
onHide={[Function]}
show={true}
@@ -30,7 +30,7 @@
"cellStyle": Object {
"border": "1px solid black",
},
- "field": "templateName",
+ "field": "name",
"headerStyle": Object {
"backgroundColor": "#ddd",
"border": "2px solid black",
@@ -41,58 +41,57 @@
"cellStyle": Object {
"border": "1px solid black",
},
- "field": "templatePolicy[0].policyModelId",
+ "field": "modelService.serviceDetails.name",
"headerStyle": Object {
"backgroundColor": "#ddd",
"border": "2px solid black",
},
- "title": "Policy Model",
+ "title": "Service Model Name",
},
Object {
"cellStyle": Object {
"border": "1px solid black",
},
- "field": "templateId",
+ "field": "allowedLoopType",
"headerStyle": Object {
"backgroundColor": "#ddd",
"border": "2px solid black",
},
- "title": "Template ID",
+ "title": "Loop Type Allowed",
},
Object {
"cellStyle": Object {
"border": "1px solid black",
},
- "field": "updatedBy",
+ "field": "maximumInstancesAllowed",
"headerStyle": Object {
"backgroundColor": "#ddd",
"border": "2px solid black",
},
- "title": "Uploaded By",
+ "title": "# Instances Allowed",
},
Object {
"cellStyle": Object {
"border": "1px solid black",
},
"editable": "never",
- "field": "timestamp",
+ "field": "updatedDate",
"headerStyle": Object {
"backgroundColor": "#ddd",
"border": "2px solid black",
},
- "title": "Uploaded Date",
+ "title": "Modified Date",
},
]
}
data={
Object {
- "content": "MTCA version 1",
+ "allowedLoopType": "CLOSED",
"index": "1",
- "templateId": "aaaa_bbbb_cccc",
- "templateName": "MTCA",
- "templatePolicy.policyModelId": "onap.policies.monitoring.docker.mtca.app",
- "timestamp": "2019-09-06 19:09:42",
- "updatedBy": "tester",
+ "maximumInstancesAllowed": 1,
+ "modelService.serviceDetails.name": "MTCA",
+ "name": "MTCA version 1",
+ "updatedDate": "2019-09-06 19:09:42",
}
}
icons={
@@ -144,7 +143,7 @@
<div>
<styled.textarea
onChange={[Function]}
- value="Please select Blue print template to view the details"
+ value="Please select a loop template to display it"
/>
</div>
</ModalBody>
diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index 6fae008..98c7bff 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -90,7 +90,7 @@
<StyledNavDropdown title="Template">
<NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Policy Model</NavDropdown.Item>
<NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Policy Models</NavDropdown.Item>
- <NavDropdown.Item as={StyledLink} to="/viewBlueprintMicroServiceTemplatesModal">View Blueprint MicroService Templates</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/ViewLoopTemplatesModal">View Loop Templates</NavDropdown.Item>
</StyledNavDropdown>
<StyledNavDropdown title="Closed Loop">
<NavDropdown.Item as={StyledLink} to="/openLoop">Open CL</NavDropdown.Item>
diff --git a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
index 7ed386f..14030f0 100644
--- a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
+++ b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
@@ -154,9 +154,9 @@
}
}
disabled={false}
- to="/viewBlueprintMicroServiceTemplatesModal"
+ to="/ViewLoopTemplatesModal"
>
- View Blueprint MicroService Templates
+ View Loop Templates
</DropdownItem>
</Styled(NavDropdown)>
<Styled(NavDropdown)