X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=ui-react%2Fsrc%2Fcomponents%2Fdialogs%2FLoop%2FOpenLoopModal.js;h=b45df6502293f04fb3c928c66188c4d2aafca4b1;hb=083e5a2aefd76bb1fc25bcb5528b7288b059c1c2;hp=7c98fab4d6ebd66d0f7654540e94ee8687eb37fb;hpb=3173d554371bae1eefafc69b2bc9da5543510dd5;p=clamp.git

diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
index 7c98fab4..b45df650 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,14 +39,6 @@ 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) {
@@ -53,12 +47,14 @@ 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.renderSvg = this.renderSvg.bind(this);
+		this.showReadOnly = props.showReadOnly !== undefined ? props.showReadOnly : true;
 		this.state = {
 			show: true,
 			chosenLoopName: '',
 			loopNames: [],
-			content:''
+			loopCacheOpened: new LoopCache({})
 		};
 	}
 
@@ -71,14 +67,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)
+             });
 		});
 	}
 
@@ -87,9 +81,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 })
-
 		    }
-
 		});
 	}
 
@@ -99,30 +91,40 @@ export default class OpenLoopModal extends React.Component {
 		this.props.loadLoopFunction(this.state.chosenLoopName);
 	}
 
+	renderSvg() {
+		return(
+				<SvgGenerator loopCache={this.state.loopCacheOpened} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE}/>
+		);
+	}
+
 	render() {
 		return (
-			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
 				<Modal.Header closeButton>
 					<Modal.Title>Open Model</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
 					<Form.Group as={Row} controlId="formPlaintextEmail">
-						<Form.Label column sm="2">Model Name</Form.Label>
+						<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 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>
-							<CheckBoxStyled type="checkbox" />
-						</Form.Check>
+					<Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
+						<Form.Label column sm="2">Model Preview:</Form.Label>
+						<Col sm="10">
+						    {this.renderSvg()}
+						</Col>
 					</Form.Group>
+					{this.showReadOnly === true ?
+						<Form.Group as={Row} controlId="formBasicCheckbox">
+							<Form.Check>
+								<FormCheck.Label>Read Only Mode:</FormCheck.Label>
+								<CheckBoxStyled style={{marginLeft: '3.5em'}} type="checkbox" />
+							</Form.Check>
+						</Form.Group>
+					: null}
 				</Modal.Body>
 				<Modal.Footer>
 					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>