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

6 files changed, 79 insertions, 101 deletions

diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
index e98b59566..a8e8dee1f 100644
--- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
@@ -30,46 +30,33 @@ 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 LoopViewSvgDivStyled = styled.svg`
-	display: flex;
-	flex-direction: row;
-	overflow-x: scroll;
-	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
-	border-color: ${props => (props.theme.loopViewerHeaderColor)};
-	margin-top: 3em;
-	margin-left: auto;
-	margin-right:auto;
-	margin-bottom: -1em;
-	text-align: center;
-	align-items: center;
-	height: 100%;
-	width: 100%;
-`
 
 export default class CreateLoopModal extends React.Component {
 	constructor(props, context) {
 		super(props, context);
 
-		this.getTemplateNames = this.getTemplateNames.bind(this);
+		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.handleDropDownListChange = this.handleDropDownListChange.bind(this);
 		this.state = {
 			show: true,
-			content: '',
 			chosenTemplateName: '',
 			modelName: '',
-			templateNames: []
+			templateNames: [],
+			fakeLoopCacheWithTemplate: new LoopCache({})
 		};
 	}
 
 	componentWillMount() {
-		this.getTemplateNames();
+		this.getAllLoopTemplates();
 	}
 
 	handleClose() {
@@ -77,21 +64,26 @@ export default class CreateLoopModal extends React.Component {
 		this.props.history.push('/');
 	}
 
-	handleDropdownListChange(e) {
-		this.setState({ chosenTemplateName: e.value });
-		TemplateService.getBlueprintMicroServiceTemplateSvg(e.value).then(svgXml => {
-			if (svgXml.length !== 0) {
-				this.setState({ content: svgXml })
-			} else {
-				this.setState({ content: 'Error1' })
-			}
-		})
+	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({}) })
+        }
 	}
 
-	getTemplateNames() {
-		TemplateService.getTemplateNames().then(templateNames => {
-			const templateOptions = templateNames.map((templateName) => { return { label: templateName, value: templateName } });
-			this.setState({ templateNames: templateOptions })
+	getAllLoopTemplates() {
+		TemplateService.getAllLoopTemplates().then(templatesData => {
+		    const templateOptions = templatesData.map((templateData) => { return { label: templateData.name, value: templateData.name, templateObject: templateData } });
+            this.setState({
+                templateNames: templateOptions })
 		});
 	}
 
@@ -133,17 +125,15 @@ export default class CreateLoopModal extends React.Component {
 					<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} />
+							<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">
-                                                        <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }}
-                                                                value={this.state.content} >
-                                                        </LoopViewSvgDivStyled>
-                                                </Col>
-                                        </Form.Group>
+                    <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
+                    <Form.Label column sm="2">Model Preview:</Form.Label>
+                        <Col sm="10">
+                            <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
+                        </Col>
+                    </Form.Group>
 					<Form.Group as={Row} controlId="formPlaintextEmail">
 						<Form.Label column sm="2">Model Name:</Form.Label>
 						<input type="text" style={{width: '50%', marginLeft: '1em' }}
diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
index 18ec6fdce..5b6ea9e62 100644
--- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
@@ -30,8 +30,8 @@ describe('Verify CreateLoopModal', () => {
 
   it('Test the render method', async () => {
 	const flushPromises = () => new Promise(setImmediate);
-    TemplateService.getTemplateNames = jest.fn().mockImplementation(() => {
-    	return Promise.resolve(["template1","template2"]);
+    TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => {
+    	return Promise.resolve([{"name":"template1"},{"name":"template2"}]);
 	});
 	
 	const component = shallow(<CreateLoopModal/>);
@@ -39,31 +39,26 @@ describe('Verify CreateLoopModal', () => {
 	await flushPromises();
 	component.update();
 		
-    expect(component.state('templateNames')).toStrictEqual([{"label": "template1", "value": "template1"}, {"label": "template2", "value": "template2"}]);
+    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 event = {value: 'template1'};
-    TemplateService.getBlueprintMicroServiceTemplateSvg = jest.fn().mockImplementation(() => {
-		return Promise.resolve("");
-	});
 
     const component = shallow(<CreateLoopModal/>);
-    component.find('StateManager').simulate('change', event);
+    component.find('StateManager').simulate('change', {value: 'template1', templateObject: {"name":"template1"} });
     await flushPromises();
     component.update();
     expect(component.state('chosenTemplateName')).toEqual("template1");
-    expect(component.state('content')).toEqual("Error1");
-    
-    TemplateService.getBlueprintMicroServiceTemplateSvg = jest.fn().mockImplementation(() => {
-		return Promise.resolve("svgContentTest");
-	});
-	component.find('StateManager').simulate('change', {value: 'template2'});
+    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('content')).toEqual("svgContentTest");
+    expect(component.state('fakeLoopCacheWithTemplate').getLoopTemplate()['name']).toEqual("template2");
+    expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop");
   });
 
 
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
index c04883443..7ca90b493 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -30,6 +30,8 @@ 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;
@@ -37,21 +39,6 @@ const ModalStyled = styled(Modal)`
 const CheckBoxStyled = styled(FormCheck.Input)`
 	margin-left:3rem;
 `
-const LoopViewSvgDivStyled = styled.svg`
-	overflow-x: scroll;
-	display: flex;
-	flex-direction: row;
-	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
-	border-color: ${props => (props.theme.loopViewerHeaderColor)};
-	margin-top: 2em;
-	margin-left: auto;
-	margin-right:auto;
-	margin-bottom: -3em;
-	text-align: center;
-	align-items: center;
-	height: 100%;
-	width: 100%;
-`
 
 export default class OpenLoopModal extends React.Component {
 	constructor(props, context) {
@@ -60,13 +47,13 @@ export default class OpenLoopModal extends React.Component {
 		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.handleDropDownListChange = this.handleDropDownListChange.bind(this);
 		this.showReadOnly = props.showReadOnly ? props.showReadOnly : true;
 		this.state = {
 			show: true,
 			chosenLoopName: '',
 			loopNames: [],
-			content:''
+			loopCacheOpened: new LoopCache({})
 		};
 	}
 
@@ -79,14 +66,12 @@ export default class OpenLoopModal extends React.Component {
 		this.props.history.push('/');
 	}
 
-	handleDropdownListChange(e) {
-		this.setState({ chosenLoopName: e.value });
-		LoopService.getSvg(e.value).then(svgXml => {
-			if (svgXml.length !== 0) {
-				this.setState({ content: svgXml })
-			} else {
-				this.setState({ content: 'Error1' })
-			}
+	handleDropDownListChange(e) {
+        LoopService.getLoop(e.value).then(loop => {
+            this.setState({
+                chosenLoopName: e.value,
+                loopCacheOpened: new LoopCache(loop)
+             });
 		});
 	}
 
@@ -95,9 +80,7 @@ export default class OpenLoopModal extends React.Component {
 		    if (Object.entries(loopNames).length !== 0) {
 		        const loopOptions = loopNames.filter(loopName => loopName!=='undefined').map((loopName) => { return { label: loopName, value: loopName } });
             	this.setState({ loopNames: loopOptions })
-
 		    }
-
 		});
 	}
 
@@ -117,20 +100,18 @@ export default class OpenLoopModal extends React.Component {
 					<Form.Group as={Row} controlId="formPlaintextEmail">
 						<Form.Label column sm="2">Model Name:</Form.Label>
 						<Col sm="10">
-							<Select onChange={this.handleDropdownListChange}
+							<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">
-                         				<LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }}
-								value={this.state.content} >
-							</LoopViewSvgDivStyled>
+						    <SvgGenerator loopCache={this.state.loopCacheOpened} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE}/>
 						</Col>
 					</Form.Group>
 					{this.showReadOnly === true ?
-						<Form.Group as={Row} controlId="formBasicChecbox">
+						<Form.Group as={Row} controlId="formBasicCheckbox">
 							<Form.Check>
 								<FormCheck.Label>Read Only Mode:</FormCheck.Label>
 								<CheckBoxStyled style={{marginLeft: '3.5em'}} type="checkbox" />
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
index f362cfaa6..1865869df 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
@@ -23,6 +23,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import OpenLoopModal from './OpenLoopModal';
+import LoopService from '../../../api/LoopService';
 
 describe('Verify OpenLoopModal', () => {
 
@@ -41,10 +42,19 @@ describe('Verify OpenLoopModal', () => {
     expect(component).toMatchSnapshot();
   });
 
-  it('Onchange event', () => {
+  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");
   });
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
index 305c87bf2..e69b809c7 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
@@ -75,13 +75,14 @@ exports[`Verify CreateLoopModal Test the render method 1`] = `
       <Col
         sm="10"
       >
-        <styled.svg
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "",
+        <withRouter(SvgGenerator)
+          clickable={false}
+          generatedFrom="TEMPLATE"
+          loopCache={
+            LoopCache {
+              "loopJsonCache": Object {},
             }
           }
-          value=""
         />
       </Col>
     </FormGroup>
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
index 196854446..477260477 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
@@ -75,13 +75,14 @@ exports[`Verify OpenLoopModal Test the render method 1`] = `
       <Col
         sm="10"
       >
-        <styled.svg
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "",
+        <withRouter(SvgGenerator)
+          clickable={false}
+          generatedFrom="INSTANCE"
+          loopCache={
+            LoopCache {
+              "loopJsonCache": Object {},
             }
           }
-          value=""
         />
       </Col>
     </FormGroup>
@@ -95,7 +96,7 @@ exports[`Verify OpenLoopModal Test the render method 1`] = `
           "render": [Function],
         }
       }
-      controlId="formBasicChecbox"
+      controlId="formBasicCheckbox"
     >
       <FormCheck
         disabled={false}