Create SVG in UI

Remove the SVG generation from the backend and put it in the UI

Issue-ID: CLAMP-854
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: Icfa9e107d83bb244ac3d87300d013555bfa0b037

3 files changed, 34 insertions, 65 deletions

diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
index 7cf02f711..962ab4bda 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -34,30 +34,12 @@ 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 LoopViewSvgDivStyled = styled.svg`
-	overflow-x: scroll;
-	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
-	border-color: ${props => (props.theme.loopViewerHeaderColor)};
-	margin-top: 3em;
-	margin-left: 2em;
-	margin-right:auto;
-	text-align: center;
-	height: 100%;
-	width: 100%;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	
-`
-const SvgContainerDivStyled = styled.div`
-	display: flex;
-	align-items: center;
-	border: 1px solid;
-`
 
 const cellStyle = { border: '1px solid black' };
 const headerStyle = { backgroundColor: '#ddd',	border: '2px solid black'	};
@@ -68,7 +50,8 @@ export default class ViewLoopTemplatesModal extends React.Component {
         show: true,
 		content: 'Please select a loop template to display it',
 		selectedRow: -1,
-		loopTemplateData: [],
+		loopTemplatesData: [],
+		fakeLoopCacheWithTemplate: new LoopCache({}),
 		loopTemplateColumnsDefinition: [
 			{ title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
 				cellStyle: cellStyle,
@@ -109,29 +92,27 @@ export default class ViewLoopTemplatesModal extends React.Component {
 	constructor(props, context) {
 		super(props, context);
 		this.handleClose = this.handleClose.bind(this);
-		this.getBlueprintMicroServiceTemplate = this.getBlueprintMicroServiceTemplate.bind(this);
-		this.getBlueprintMicroServiceTemplates();
+		this.getLoopTemplate = this.getLoopTemplate.bind(this);
+		this.getAllLoopTemplates();
 	}
 
-	getBlueprintMicroServiceTemplates() {
-		TemplateService.getBlueprintMicroServiceTemplates().then(loopTemplateData => {
-		this.setState({ loopTemplateData: loopTemplateData })
+	getAllLoopTemplates() {
+		TemplateService.getAllLoopTemplates().then(templatesData => {
+		    this.setState({ loopTemplatesData: templatesData })
 		});
 	}
 
-	getBlueprintMicroServiceTemplate(templateName) {
-	    if (typeof templateName !== "undefined") {
-		    TemplateService.getBlueprintMicroServiceTemplateSvg(templateName).then(svgXml => {
-				if (svgXml.length !== 0) {
-					this.setState({ content: svgXml })
-				} else {
-					this.setState({ content: 'Please select a loop template to view the details' })
-
-				}
-			});
+	getLoopTemplate(templateIdInDataArray) {
+	    if (typeof templateIdInDataArray !== "undefined") {
+	        this.setState({ fakeLoopCacheWithTemplate:
+                new LoopCache({
+                    "loopTemplate":this.state.loopTemplatesData[templateIdInDataArray],
+                    "name": "fakeLoop"
+                })
+	        })
 		} else {
-          	this.setState({ content: 'Please select a loop template to view the details' })
-          	}
+          	this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
+        }
     }
 
 	handleClose() {
@@ -147,21 +128,18 @@ export default class ViewLoopTemplatesModal extends React.Component {
     			<Modal.Body>
     			   <MaterialTable
     				  title={"View Blueprint MicroService Templates"}
-    				  data={this.state.loopTemplateData}
+    				  data={this.state.loopTemplatesData}
 					  columns={this.state.loopTemplateColumnsDefinition}
 					  icons={this.state.tableIcons}
-    			      onRowClick={(event, rowData) => {this.getBlueprintMicroServiceTemplate(rowData.name);this.setState({selectedRow: rowData.tableData.id})}}
+    			      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'
                           })
                       }}
-                  />
-	              <SvgContainerDivStyled>
-		            <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} value={this.state.content} >
-					</LoopViewSvgDivStyled>
-	              </SvgContainerDivStyled>
+                />
+	            <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
                 </Modal.Body>
                 <Modal.Footer>
                 	<Button variant="secondary" onClick={this.handleClose}>Close</Button>
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
index 1a6cc1959..7680ec4b9 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
@@ -24,6 +24,7 @@ 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(() => {
@@ -128,7 +129,7 @@ describe('Verify ViewLoopTemplatesModal', () => {
 					}
 				});
 			});
-			const component = mount(<ViewLoopTemplatesModal/>);
+			const component = mount(<Router><ViewLoopTemplatesModal/></Router>);
 			expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
 		});
 		
diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
index 3f6dc9482..ee7b679a5 100644
--- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
@@ -86,16 +86,7 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1
           },
         ]
       }
-      data={
-        Object {
-          "allowedLoopType": "CLOSED",
-          "index": "1",
-          "maximumInstancesAllowed": 1,
-          "modelService.serviceDetails.name": "MTCA",
-          "name": "MTCA version 1",
-          "updatedDate": "2019-09-06 19:09:42",
-        }
-      }
+      data={Array []}
       icons={
         Object {
           "FirstPage": Object {
@@ -142,16 +133,15 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1
       }
       title="View Blueprint MicroService Templates"
     />
-    <styled.div>
-      <styled.svg
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "Please select a loop template to display it",
-          }
+    <withRouter(SvgGenerator)
+      clickable={false}
+      generatedFrom="TEMPLATE"
+      loopCache={
+        LoopCache {
+          "loopJsonCache": Object {},
         }
-        value="Please select a loop template to display it"
-      />
-    </styled.div>
+      }
+    />
   </ModalBody>
   <ModalFooter>
     <Button