X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=ui-react%2Fsrc%2Fcomponents%2Fdialogs%2FLoop%2FOpenLoopModal.js;h=7c98fab4d6ebd66d0f7654540e94ee8687eb37fb;hb=refs%2Fchanges%2F09%2F103109%2F6;hp=fbfc727eba19fbe458a52ebd3f3b8356d13c6561;hpb=67c76a46e6a96c4c41fddddb9245234063b5306e;p=clamp.git

diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
index fbfc727e..7c98fab4 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -37,6 +37,14 @@ const ModalStyled = styled(Modal)`
 const CheckBoxStyled = styled(FormCheck.Input)`
 	margin-left:3rem;
 `
+const LoopViewSvgDivStyled = styled.div`
+	overflow: hidden;
+	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+	border-color: ${props => (props.theme.loopViewerHeaderColor)};
+	margin-left: auto;
+	margin-right:auto;
+	text-align: center;
+`
 
 export default class OpenLoopModal extends React.Component {
 	constructor(props, context) {
@@ -49,7 +57,8 @@ export default class OpenLoopModal extends React.Component {
 		this.state = {
 			show: true,
 			chosenLoopName: '',
-			loopNames: []
+			loopNames: [],
+			content:''
 		};
 	}
 
@@ -64,25 +73,35 @@ export default class OpenLoopModal extends React.Component {
 
 	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' })
+			}
+		});
 	}
 
 	getLoopNames() {
 		LoopService.getLoopNames().then(loopNames => {
-			const loopOptions = loopNames.map((loopName) => { return { label: loopName, value: loopName } });
-			this.setState({ loopNames: loopOptions })
+		    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.setState({ show: false });
-		this.props.history.push('/');
+        this.handleClose();
 		this.props.loadLoopFunction(this.state.chosenLoopName);
 	}
 
 	render() {
 		return (
-			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
 				<Modal.Header closeButton>
 					<Modal.Title>Open Model</Modal.Title>
 				</Modal.Header>
@@ -90,9 +109,14 @@ 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} options={this.state.loopNames} />
+							<Select onChange={this.handleDropdownListChange}
+							options={this.state.loopNames} />
 						</Col>
 					</Form.Group>
+					<Form.Group controlId="formPlaintextEmail">
+                         <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }}   value={this.state.content} >
+                         </LoopViewSvgDivStyled>
+                    </Form.Group>
 					<Form.Group controlId="formBasicChecbox">
 						<Form.Check>
 							<FormCheck.Label>Read Only</FormCheck.Label>