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>
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 0000000..1a8b6e2
--- /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
similarity index 76%
rename from ui-react/src/components/dialogs/LoopModal.js
rename to ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
index 6dc04d1..6986209 100644
--- a/ui-react/src/components/dialogs/LoopModal.js
+++ b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
@@ -29,8 +29,7 @@
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 @@
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() {
+
+ getModel() {
+ LoopService.getLoop(this.state.chosenLoopName).then(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('/');
- // Open selected model
- console.log("Loop " + this.state.chosenLoopName + " is chosen");
- LoopService.getLoop(this.state.chosenLoopName).then(loop => {
- console.log("Initialize the loop cache");
- new LoopCache(loop);
- });
+ this.getModel();
}
+
render() {
return (
<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
@@ -89,19 +98,19 @@
<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 fd53300..6822f3f 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 @@
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 @@
}
// 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 @@
}
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) {
+ 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);
- }
- });*/
- });
- }
+ /* 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 @@
<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 @@
<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 @@
);
}
-}
+}
\ No newline at end of file