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>

8 files changed, 89 insertions, 100 deletions

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 19b0814db..b76f26400 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -45,7 +45,7 @@ import UserInfoModal from './components/dialogs/UserInfoModal';
 import LoopService from './api/LoopService';
 import UploadToscaPolicyModal from './components/dialogs/Tosca/UploadToscaPolicyModal';
 import ViewToscaPolicyModal from './components/dialogs/Tosca/ViewToscaPolicyModal';
-import ViewBlueprintMicroServiceTemplatesModal from './components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal';
+import ViewLoopTemplatesModal from './components/dialogs/Tosca/ViewLoopTemplatesModal';
 import PerformAction from './components/dialogs/PerformActions';
 import RefreshStatus from './components/dialogs/RefreshStatus';
 import DeployLoopModal from './components/dialogs/Loop/DeployLoopModal';
@@ -251,7 +251,7 @@ export default class LoopUI extends React.Component {
 				<StyledMainDiv id="main_div">
 				<Route path="/uploadToscaPolicyModal" render={(routeProps) => (<UploadToscaPolicyModal {...routeProps} />)} />
 				<Route path="/viewToscaPolicyModal" render={(routeProps) => (<ViewToscaPolicyModal {...routeProps} />)} />
-				<Route path="/viewBlueprintMicroServiceTemplatesModal" render={(routeProps) => (<ViewBlueprintMicroServiceTemplatesModal {...routeProps} />)} />
+				<Route path="/ViewLoopTemplatesModal" render={(routeProps) => (<ViewLoopTemplatesModal {...routeProps} />)} />
 				<Route path="/operationalPolicyModal"
 					render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} />
 				<Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
diff --git a/ui-react/src/__snapshots__/LoopUI.test.js.snap b/ui-react/src/__snapshots__/LoopUI.test.js.snap
index 5f7611bbc..98f1a460b 100644
--- a/ui-react/src/__snapshots__/LoopUI.test.js.snap
+++ b/ui-react/src/__snapshots__/LoopUI.test.js.snap
@@ -13,7 +13,7 @@ exports[`Verify LoopUI Test the render method 1`] = `
     render={[Function]}
   />
   <Route
-    path="/viewBlueprintMicroServiceTemplatesModal"
+    path="/ViewLoopTemplatesModal"
     render={[Function]}
   />
   <Route
diff --git a/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
index 5961cd2fc..59a6fd45e 100644
--- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap
+++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
@@ -38,7 +38,7 @@ exports[`Verify OnapClamp Test the render method 1`] = `
       render={[Function]}
     />
     <Route
-      path="/viewBlueprintMicroServiceTemplatesModal"
+      path="/ViewLoopTemplatesModal"
       render={[Function]}
     />
     <Route
diff --git a/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
index adacbc8c6..a78d454ff 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -51,34 +51,34 @@ 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 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 @@ export default class ViewBlueprintMicroServiceTemplatesModal extends React.Compo
 		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 @@ export default class ViewBlueprintMicroServiceTemplatesModal extends React.Compo
 				<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/ViewBlueprintMicroServiceTemplatesModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
index 4a8d9c3ff..94d4acdc8 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.test.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
@@ -22,10 +22,10 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import ViewBlueprintMicroServiceTemplatesModal from './ViewBlueprintMicroServiceTemplatesModal';
+import ViewLoopTemplatesModal from './ViewLoopTemplatesModal';
 import { mount } from 'enzyme';
 
-describe('Verify ViewBlueprintMicroServiceTemplatesModal', () => {
+describe('Verify ViewLoopTemplatesModal', () => {
 	beforeEach(() => {
 		fetch.resetMocks();
 		}
@@ -39,17 +39,16 @@ describe('Verify ViewBlueprintMicroServiceTemplatesModal', () => {
 				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"
+						"name": "MTCA version 1",
+						"modelService.serviceDetails.name": "MTCA",
+						"allowedLoopType" : "CLOSED",
+						"maximumInstancesAllowed":1,
+						"updatedDate":"2019-09-06 19:09:42"
 					});
 				}
 			});
 		});
-		const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
+		const component = shallow(<ViewLoopTemplatesModal/>);
 	});
   	
 	it('Test API Exception', () => {
@@ -60,17 +59,16 @@ describe('Verify ViewBlueprintMicroServiceTemplatesModal', () => {
 				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"
+						"name": "MTCA version 1",
+						"modelService.serviceDetails.name": "MTCA",
+						"allowedLoopType" : "CLOSED",
+						"maximumInstancesAllowed":1,
+						"updatedDate":"2019-09-06 19:09:42"
 					});
 				}
 			});
 		});
-		const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
+		const component = shallow(<ViewLoopTemplatesModal/>);
 	});
 
 	it('Test API Rejection', () => {
@@ -81,7 +79,7 @@ describe('Verify ViewBlueprintMicroServiceTemplatesModal', () => {
 		100
 		);
 		new Promise(resolve => setTimeout(resolve, 200));
-		const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
+		const component = shallow(<ViewLoopTemplatesModal/>);
 		expect(myMockFunc.mock.calls.length).toBe(1);
 	});
 
@@ -93,25 +91,23 @@ describe('Verify ViewBlueprintMicroServiceTemplatesModal', () => {
 				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"
+						"name": "MTCA version 1",
+						"modelService.serviceDetails.name": "MTCA",
+						"allowedLoopType" : "CLOSED",
+						"maximumInstancesAllowed":1,
+						"updatedDate":"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"
+		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();
@@ -124,18 +120,17 @@ describe('Verify ViewBlueprintMicroServiceTemplatesModal', () => {
 					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"
+						"index": "1",
+						"name": "MTCA version 1",
+						"modelService.serviceDetails.name": "MTCA",
+						"allowedLoopType" : "CLOSED",
+						"maximumInstancesAllowed":1,
+						"updatedDate":"2019-09-06 19:09:42"
 						});
 					}
 				});
 			});
-			const component = mount(<ViewBlueprintMicroServiceTemplatesModal/>);
+			const component = mount(<ViewLoopTemplatesModal/>);
 			expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
 		});
 
@@ -146,20 +141,19 @@ describe('Verify ViewBlueprintMicroServiceTemplatesModal', () => {
 					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"
+						"index": "1",
+						"name": "MTCA version 1",
+						"modelService.serviceDetails.name": "MTCA",
+						"allowedLoopType" : "CLOSED",
+						"maximumInstancesAllowed":1,
+						"updatedDate":"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 }});
+			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);
 		});
 		
@@ -170,20 +164,19 @@ describe('Verify ViewBlueprintMicroServiceTemplatesModal', () => {
 					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"
+						"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(ViewBlueprintMicroServiceTemplatesModal.prototype,'handleClose');
-			const component = shallow(<ViewBlueprintMicroServiceTemplatesModal history={historyMock} />)
+			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);
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
index 7dd4ee0d9..efec96e94 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 @@ exports[`Verify ViewBlueprintMicroServiceTemplatesModal Test the tosca model vie
             "cellStyle": Object {
               "border": "1px solid black",
             },
-            "field": "templateName",
+            "field": "name",
             "headerStyle": Object {
               "backgroundColor": "#ddd",
               "border": "2px solid black",
@@ -41,58 +41,57 @@ exports[`Verify ViewBlueprintMicroServiceTemplatesModal Test the tosca model vie
             "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 @@ exports[`Verify ViewBlueprintMicroServiceTemplatesModal Test the tosca model vie
     <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 6fae008ef..98c7bffcf 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -90,7 +90,7 @@ export default class MenuBar extends React.Component {
 					<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 7ed386ff2..14030f012 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 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/viewBlueprintMicroServiceTemplatesModal"
+      to="/ViewLoopTemplatesModal"
     >
-      View Blueprint MicroService Templates
+      View Loop Templates
     </DropdownItem>
   </Styled(NavDropdown)>
   <Styled(NavDropdown)