SVG Rendering

SVG rendering draft for Config and operational policies management +
call to back-end

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

3 files changed, 168 insertions, 83 deletions

diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
new file mode 100644
index 000000000..1a8b6e2c5
--- /dev/null
+++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
@@ -0,0 +1,77 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ *                             reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+import React from 'react'
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { LOOP_CACHE } from '../../../api/LoopCache'
+import styled from 'styled-components';
+
+const ModalStyled = styled(Modal)`
+	background-color: transparent;
+`
+
+export default class ConfigurationPolicyModal extends React.Component {
+
+	constructor(props, context) {
+		super(props, context);
+
+		this.handleClose = this.handleClose.bind(this);
+
+		this.state = {
+			show: true,
+		};
+
+	}
+
+	handleClose() {
+		this.setState({ show: false });
+		this.props.history.push('/')
+	}
+
+
+
+	render() {
+		return (
+			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
+				<Modal.Header closeButton>
+					<Modal.Title>Configuration policies</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
+
+
+
+				</Modal.Body>
+				<Modal.Footer>
+					<Button variant="secondary" onClick={this.handleClose}>
+						Close
+	            </Button>
+					<Button variant="primary" onClick={this.handleClose}>
+						Save Changes
+	            </Button>
+				</Modal.Footer>
+			</ModalStyled>
+
+		);
+	}
+}
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/LoopModal.js b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
index 6dc04d19c..6986209d4 100644
--- a/ui-react/src/components/dialogs/LoopModal.js
+++ b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
@@ -29,8 +29,7 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import FormCheck from 'react-bootstrap/FormCheck'
 import styled from 'styled-components';
-import LoopService from '../../api/LoopService';
-import LoopCache from '../../api/LoopCache';
+import LoopService from '../../../api/LoopService';
 
 const ModalStyled = styled(Modal)`
 	background-color: transparent;
@@ -39,46 +38,56 @@ const CheckBoxStyled = styled(FormCheck.Input)`
 	margin-left:3rem;
 `
 
-export default class LoopModal extends React.Component {
+export default class OpenLoopModal extends React.Component {
 	constructor(props, context) {
 		super(props, context);
 
 		this.getLoopNames = this.getLoopNames.bind(this);
-		this.openModel = this.openModel.bind(this);
+		this.handleOpen = this.handleOpen.bind(this);
+		this.getModel = this.getModel.bind(this);
 		this.handleClose = this.handleClose.bind(this);
 		this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
 		this.state = {
 			show: true,
 			chosenLoopName: '',
-			loopNames:[]
+			loopNames: []
 		};
 	}
+
 	componentDidMount() {
-		 this.getLoopNames();
-	 }
+		this.getLoopNames();
+	}
+
 	handleClose() {
 		this.setState({ show: false });
-			this.props.history.push('/');
+		this.props.history.push('/');
 	}
+
 	handleDropdownListChange(e) {
-		this.setState({ chosenLoopName: e.value});
+		this.setState({ chosenLoopName: e.value });
 	}
+
 	getLoopNames() {
 		LoopService.getLoopNames().then(loopNames => {
-			const loopOptions = loopNames.map((loopName) => { return {label: loopName,  value: loopName}});
-			this.setState({loopNames:loopOptions})
+			const loopOptions = loopNames.map((loopName) => { return { label: loopName, value: loopName } });
+			this.setState({ loopNames: loopOptions })
 		});
 	}
-	openModel() {
-		this.setState({ show: false });
-		this.props.history.push('/');
-		// Open selected model
-		console.log("Loop " + this.state.chosenLoopName + " is chosen");
+
+	getModel() {
 		LoopService.getLoop(this.state.chosenLoopName).then(loop => {
-			console.log("Initialize the loop cache");
-			new LoopCache(loop);
+			console.debug("Settingloop cache with json");
+			this.props.updateLoopCacheFunction(loop);
 		});
 	}
+
+	handleOpen() {
+		console.info("Loop " + this.state.chosenLoopName + " is chosen");
+		this.setState({ show: false });
+		this.props.history.push('/');
+		this.getModel();
+	}
+
 	render() {
 		return (
 			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
@@ -89,19 +98,19 @@ export default class LoopModal 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="formBasicChecbox">
-	 					<Form.Check>
+						<Form.Check>
 							<FormCheck.Label>Read Only</FormCheck.Label>
 							<CheckBoxStyled type="checkbox" />
 						</Form.Check>
- 					</Form.Group>
+					</Form.Group>
 				</Modal.Body>
 				<Modal.Footer>
-					<Button variant="secondary" type="null" onClick={this.handleClose}>Cacel</Button>
-					<Button variant="primary" type="submit" onClick={this.openModel}>OK</Button>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
+					<Button variant="primary" type="submit" onClick={this.handleOpen}>OK</Button>
 				</Modal.Footer>
 			</ModalStyled>
 
diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
index fd53300d6..6822f3ff3 100644
--- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
+++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
@@ -24,7 +24,6 @@
 import React from 'react'
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
-import { LOOP_CACHE } from '../../../api/LoopCache'
 import './OperationalPolicy.css'
 import styled from 'styled-components';
 
@@ -34,30 +33,30 @@ const ModalStyled = styled(Modal)`
 
 export default class OperationalPolicyModal extends React.Component {
 
+	state = {
+		show: true,
+		loopCache: this.props.loopCache,
+	};
+
+	allPolicies = [];
+	policyIds = [];
+
 	constructor(props, context) {
 		super(props, context);
 
 		this.handleClose = this.handleClose.bind(this);
 		this.initPolicySelect = this.initPolicySelect.bind(this);
-
-		this.allPolicies = [];
-		this.policyIds = [];
-
 		this.initPolicySelect();
-
-		this.state = {
-			show: true,
-		};
-
 	}
 
 	handleClose() {
 		this.setState({ show: false });
+		this.props.history.push('/')
 	}
 
 	initPolicySelect() {
 		if (this.allPolicies['operational_policy'] === undefined || this.allPolicies['operational_policy'] === null) {
-			this.allPolicies = LOOP_CACHE.getOperationalPolicyProperty();
+			this.allPolicies = this.state.loopCache.getOperationalPolicyConfigurationJson();
 		}
 		// Provision all policies ID first
 		if (this.policyIds.length === 0 && this.allPolicies['operational_policy'] !== undefined) {
@@ -94,7 +93,7 @@ export default class OperationalPolicyModal extends React.Component {
 	}
 
 	// When we change the name of a policy
-	isDuplicatedId (event) {
+	isDuplicatedId(event) {
 		// update policy id structure
 		var formNum = document.getElementById(event.target).closest('.formId').attr('id').substring(6);
 		var policyId = document.getElementById(event.target).val();
@@ -111,51 +110,51 @@ export default class OperationalPolicyModal extends React.Component {
 	}
 
 	configureComponents() {
-		    console.log("Load properties to op policy");
-		    // Set the header
-		    document.getElementsByClassName('form-control').forEach(function() {
-			    this.val(this.allPolicies['operational_policy']['controlLoop'][this.id]);
-		    });
-		    // Set the sub-policies
-		    this.allPolicies['operational_policy']['policies'].forEach(function(opPolicyElemIndex, opPolicyElemValue) {
-
-/*			    var formNum = add_one_more();
-			    forEach(document.getElementsByClassName('policyProperties').find('.form-control'), function(opPolicyPropIndex, opPolicyPropValue) {
-
-				    $("#formId" + formNum + " .policyProperties").find("#" + opPolicyPropValue.id).val(
-				    allPolicies['operational_policy']['policies'][opPolicyElemIndex][opPolicyPropValue.id]);
-			    });
-
-			    // Initial TargetResourceId options
-			    initTargetResourceIdOptions(allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target']['type'], formNum);
-			    $.each($('.policyTarget').find('.form-control'), function(opPolicyTargetPropIndex, opPolicyTargetPropValue) {
-
-				    $("#formId" + formNum + " .policyTarget").find("#" + opPolicyTargetPropValue.id).val(
-				    allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target'][opPolicyTargetPropValue.id]);
-			    });
-
-			    // update the current tab label
-			    $("#go_properties_tab" + formNum).text(
-			    allPolicies['operational_policy']['policies'][opPolicyElemIndex]['id']);
-			    // Check if there is a guard set for it
-			    $.each(allPolicies['guard_policies'], function(guardElemId, guardElemValue) {
-
-				    if (guardElemValue.recipe === $($("#formId" + formNum + " #recipe")[0]).val()) {
-					    // Found one, set all guard prop
-					    $.each($('.guardProperties').find('.form-control'), function(guardPropElemIndex,
-					                                                                 guardPropElemValue) {
-
-						    guardElemValue['id'] = guardElemId;
-						    $("#formId" + formNum + " .guardProperties").find("#" + guardPropElemValue.id).val(
-						    guardElemValue[guardPropElemValue.id]);
-					    });
-					    iniGuardPolicyType(guardElemId, formNum);
-					    // And finally enable the flag
-					    $("#formId" + formNum + " #enableGuardPolicy").prop("checked", true);
-				    }
-			    });*/
-			});
-	    }
+		console.log("Load properties to op policy");
+		// Set the header
+		document.getElementsByClassName('form-control').forEach(function () {
+			this.val(this.allPolicies['operational_policy']['controlLoop'][this.id]);
+		});
+		// Set the sub-policies
+		this.allPolicies['operational_policy']['policies'].forEach(function (opPolicyElemIndex, opPolicyElemValue) {
+
+			/*			    var formNum = add_one_more();
+							forEach(document.getElementsByClassName('policyProperties').find('.form-control'), function(opPolicyPropIndex, opPolicyPropValue) {
+			
+								$("#formId" + formNum + " .policyProperties").find("#" + opPolicyPropValue.id).val(
+								allPolicies['operational_policy']['policies'][opPolicyElemIndex][opPolicyPropValue.id]);
+							});
+			
+							// Initial TargetResourceId options
+							initTargetResourceIdOptions(allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target']['type'], formNum);
+							$.each($('.policyTarget').find('.form-control'), function(opPolicyTargetPropIndex, opPolicyTargetPropValue) {
+			
+								$("#formId" + formNum + " .policyTarget").find("#" + opPolicyTargetPropValue.id).val(
+								allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target'][opPolicyTargetPropValue.id]);
+							});
+			
+							// update the current tab label
+							$("#go_properties_tab" + formNum).text(
+							allPolicies['operational_policy']['policies'][opPolicyElemIndex]['id']);
+							// Check if there is a guard set for it
+							$.each(allPolicies['guard_policies'], function(guardElemId, guardElemValue) {
+			
+								if (guardElemValue.recipe === $($("#formId" + formNum + " #recipe")[0]).val()) {
+									// Found one, set all guard prop
+									$.each($('.guardProperties').find('.form-control'), function(guardPropElemIndex,
+																								 guardPropElemValue) {
+			
+										guardElemValue['id'] = guardElemId;
+										$("#formId" + formNum + " .guardProperties").find("#" + guardPropElemValue.id).val(
+										guardElemValue[guardPropElemValue.id]);
+									});
+									iniGuardPolicyType(guardElemId, formNum);
+									// And finally enable the flag
+									$("#formId" + formNum + " #enableGuardPolicy").prop("checked", true);
+								}
+							});*/
+		});
+	}
 
 	render() {
 		return (
@@ -195,7 +194,7 @@ export default class OperationalPolicyModal extends React.Component {
 										<label className="col-sm-4 control-label" htmlFor="clname">ControlLoopName</label>
 										<div className="col-sm-8">
 											<input type="text" className="form-control" name="controlLoopName"
-												readOnly="readonly" id="clname" value={LOOP_CACHE.getLoopName()} />
+												readOnly="readonly" id="clname" value={this.state.loopCache.getLoopName()} />
 										</div>
 									</div>
 								</form>
@@ -225,7 +224,7 @@ export default class OperationalPolicyModal extends React.Component {
 										<label className="col-sm-4 control-label" htmlFor="id">ID</label>
 										<div className="col-sm-8">
 											<input type="text" className="form-control" name="id" id="id"
-										onKeyUp="updateTabLabel($event)" />
+												onKeyUp="updateTabLabel($event)" />
 											<span >ID must be unique</span>
 										</div>
 									</div>
@@ -550,4 +549,4 @@ export default class OperationalPolicyModal extends React.Component {
 
 		);
 	}
-}
+}
\ No newline at end of file