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/package.json b/ui-react/package.json
index 1b98d0f..f1ae2bc 100644
--- a/ui-react/package.json
+++ b/ui-react/package.json
@@ -13,7 +13,7 @@
"author": "ONAP Clamp Team",
"license": "Apache-2.0",
"dependencies": {
- "json-editor": "0.7.28",
+ "@json-editor/json-editor": "1.3.5",
"react": "16.8.0",
"react-dom": "16.8.0",
"react-scripts": "3.0.1",
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 997f94b..a1aff3d 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -28,10 +28,16 @@
import logo from './logo.png';
import { GlobalClampStyle } from './theme/globalStyle.js';
-import ClosedLoopSvg from './components/loop_viewer/svg/ClosedLoopSvg';
-import ClosedLoopLogs from './components/loop_viewer/logs/ClosedLoopLogs';
-import ClosedLoopStatus from './components/loop_viewer/status/ClosedLoopStatus';
+import LoopSvg from './components/loop_viewer/svg/LoopSvg';
+import LoopLogs from './components/loop_viewer/logs/LoopLogs';
+import LoopStatus from './components/loop_viewer/status/LoopStatus';
import UserService from './api/UserService';
+import LoopCache from './api/LoopCache';
+
+import { Route } from 'react-router-dom'
+import OpenLoopModal from './components/dialogs/OpenLoop/OpenLoopModal';
+import OperationalPolicyModal from './components/dialogs/OperationalPolicy/OperationalPolicyModal';
+import ConfigurationPolicyModal from './components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal';
const ProjectNameStyled = styled.a`
vertical-align: middle;
@@ -71,26 +77,29 @@
`
export default class LoopUI extends React.Component {
+
state = {
userName: null,
loopName: "Empty (NO loop loaded yet)",
+ loopCache: new LoopCache({}),
};
constructor() {
super();
this.getUser = this.getUser.bind(this);
+ this.updateLoopCache = this.updateLoopCache.bind(this);
}
-
- componentDidMount() {
- this.getUser();
- }
+
+ componentDidMount() {
+ this.getUser();
+ }
getUser() {
- UserService.LOGIN().then(user => {
- this.setState({userName:user})
+ UserService.login().then(user => {
+ this.setState({ userName: user })
});
}
-
+
renderMenuNavBar() {
return (
<MenuBar />
@@ -108,7 +117,7 @@
renderLogoNavBar() {
return (
<Navbar.Brand>
- <img height="50px" width="234px" src={logo} alt=""/>
+ <img height="50px" width="234px" src={logo} alt="" />
<ProjectNameStyled>CLAMP</ProjectNameStyled>
</Navbar.Brand>
);
@@ -116,48 +125,56 @@
renderNavBar() {
return (
- <Navbar expand="lg">
- {this.renderLogoNavBar()}
- {this.renderMenuNavBar()}
- {this.renderUserLoggedNavBar()}
- </Navbar>
- );
+ <Navbar expand="lg">
+ {this.renderLogoNavBar()}
+ {this.renderMenuNavBar()}
+ {this.renderUserLoggedNavBar()}
+ </Navbar>
+ );
}
-
+
renderLoopViewHeader() {
return (
<LoopViewHeaderDivStyled>
- Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled>
+ Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled>
</LoopViewHeaderDivStyled>
);
}
-
+
renderLoopViewBody() {
return (
<LoopViewBodyDivStyled>
- <ClosedLoopSvg />
- <ClosedLoopLogs />
- <ClosedLoopStatus />
+ <LoopSvg loopCache={this.state.loopCache} />
+ <LoopLogs />
+ <LoopStatus />
</LoopViewBodyDivStyled>
);
}
-
+
renderLoopViewer() {
return (
<LoopViewDivStyled>
- {this.renderLoopViewHeader()}
- {this.renderLoopViewBody()}
+ {this.renderLoopViewHeader()}
+ {this.renderLoopViewBody()}
</LoopViewDivStyled>
- );
+ );
}
-
+
+ updateLoopCache(loopJson) {
+ this.setState({ loopCache: new LoopCache(loopJson) });
+ }
+
render() {
return (
<div id="main_div">
- <GlobalClampStyle />
- {this.renderNavBar()}
- {this.renderLoopViewer()}
- </div>
+ <GlobalClampStyle />
+ {this.renderNavBar()}
+ {this.renderLoopViewer()}
+ <Route path="/operationalPolicyModal"
+ render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
+ <Route path="/configurationPolicyModal" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
+ <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} updateLoopCacheFunction={this.updateLoopCache} />)} />
+ </div>
);
}
}
diff --git a/ui-react/src/api/LoopCache.js b/ui-react/src/api/LoopCache.js
index d44b5cf..4c8f68c 100644
--- a/ui-react/src/api/LoopCache.js
+++ b/ui-react/src/api/LoopCache.js
@@ -21,15 +21,14 @@
*
*/
-class LoopCache {
+export default class LoopCache {
loopJsonCache;
constructor(loopJson) {
this.loopJsonCache=loopJson;
- //LoopCache.SET_LOOP_JSON_CACHE(require('./example.json');
}
- updateMsProperties(type, newMsProperties) {
+ updateMicroServiceProperties(type, newMsProperties) {
if (newMsProperties["name"] === type) {
for (var policy in this.loopJsonCache["microServicePolicies"]) {
if (this.loopJsonCache["microServicePolicies"][policy]["name"] === type) {
@@ -43,7 +42,7 @@
this.loopJsonCache["globalPropertiesJson"] = newGlobalProperties;
}
- updateOpPolicyProperties(newOpProperties) {
+ updateOperationalPolicyProperties(newOpProperties) {
this.loopJsonCache["operationalPolicies"] = newOpProperties;
}
@@ -51,7 +50,7 @@
return this.loopJsonCache["name"];
}
- getOperationalPolicyProperty() {
+ getOperationalPolicyConfigurationJson() {
return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]["0"]["configurationsJson"]));
}
@@ -59,15 +58,15 @@
return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]));
}
- getGlobalProperty() {
+ getGlobalProperties() {
return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"]));
}
- getDeploymentProperties() {
+ getDcaeDeploymentProperties() {
return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"]["dcaeDeployParameters"]));
}
- getMsJson(type) {
+ getMicroServicesJsonForType(type) {
var msProperties = this.loopJsonCache["microServicePolicies"];
for (var policy in msProperties) {
if (msProperties[policy]["name"] === type) {
@@ -77,7 +76,7 @@
return null;
}
- getMsProperty(type) {
+ getMicroServiceProperties(type) {
var msProperties = this.loopJsonCache["microServicePolicies"];
for (var policy in msProperties) {
if (msProperties[policy]["name"] === type) {
@@ -89,7 +88,7 @@
return null;
}
- getMsUI(type) {
+ getMicroServiceJsonRepresentationForType(type) {
var msProperties = this.loopJsonCache["microServicePolicies"];
for (var policy in msProperties) {
if (msProperties[policy]["name"] === type) {
@@ -114,16 +113,4 @@
getComponentStates() {
return this.loopJsonCache.components;
}
-
- get getLoopJsonCache() {
- return this.loopJsonCache;
- }
-
- set setLoopJsonCache(newJson) {
- this.loopJsonCache = newJson;
- }
}
-
-export const LOOP_CACHE = new LoopCache(require('./example.json'));
-
-export default LoopCache;
diff --git a/ui-react/src/api/LoopService.js b/ui-react/src/api/LoopService.js
index f59f457..2813a7c 100644
--- a/ui-react/src/api/LoopService.js
+++ b/ui-react/src/api/LoopService.js
@@ -22,55 +22,62 @@
export default class LoopService {
static getLoopNames() {
- const url = '/restservices/clds/v2/loop/getAllNames';
- const options = {
- method: 'GET'
- };
- return fetch(url,options)
- .then(function (response) {
- if (response.ok) {
- console.log("GetLoopNames response received: ", response.status);
- return response.json();
- } else {
- let errorMsg = "GetLoopNames failed with status code: " + response.status;
- console.error(errorMsg);
- return Promise.reject(errorMsg);
- }
- })
- .then(function (data) {
- return data;
- })
- .catch(function(error) {
- console.error("GetLoopNames error received",error);
- return Promise.reject(error);
- });
+ return fetch('/restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'include', })
+ .then(function (response) {
+ console.debug("GetLoopNames response received: ", response.status);
+ if (response.ok) {
+ return response.json();
+ } else {
+ console.error("GetLoopNames query failed");
+ return {};
+ }
+ })
+ .catch(function (error) {
+ console.error("GetLoopNames error received", error);
+ return {};
+ });
}
static getLoop(loopName) {
- const url = '/restservices/clds/v2/loop/' + loopName;
- const options = {
+ return fetch('/restservices/clds/v2/loop/' + loopName, {
method: 'GET',
headers: {
"Content-Type": "application/json"
- }
- };
- return fetch(url,options)
- .then(function (response) {
- if (response.ok) {
- console.log("GetLoop response received: ", response.status);
- return response.json();
- } else {
- let errorMsg = "GetLoop failed with status code: " + response.status;
- console.error(errorMsg);
- return Promise.reject(errorMsg);
- }
+ },
+ credentials: 'include',
})
- .then(function (data) {
- return data;
+ .then(function (response) {
+ console.debug("GetLoop response received: ", response.status);
+ if (response.ok) {
+ return response.json();
+ } else {
+ console.error("GetLoop query failed");
+ return {};
+ }
+ })
+ .catch(function (error) {
+ console.error("GetLoop error received", error);
+ return {};
+ });
+ }
+
+ static getSvg(loopName) {
+ return fetch('/restservices/clds/v2/loop/svgRepresentation/' + loopName, {
+ method: 'GET',
+ credentials: 'include',
})
- .catch(function(error) {
- console.error("GetLoop error received",error);
- return Promise.reject(error);
- });
+ .then(function (response) {
+ console.debug("svgRepresentation response received: ", response.status);
+ if (response.ok) {
+ return response.text();
+ } else {
+ console.error("svgRepresentation query failed");
+ return "";
+ }
+ })
+ .catch(function (error) {
+ console.error("svgRepresentation error received", error);
+ return "";
+ });
}
}
diff --git a/ui-react/src/api/UserService.js b/ui-react/src/api/UserService.js
index 8145395..8f53d7b 100644
--- a/ui-react/src/api/UserService.js
+++ b/ui-react/src/api/UserService.js
@@ -22,28 +22,29 @@
*/
export default class UserService {
-
- static LOGIN() {
+ static notLoggedUserName='Anonymous';
+ static login() {
return fetch('/restservices/clds/v1/user/getUser', {
method: 'GET',
credentials: 'include',
})
.then(function (response) {
+ console.debug("getUser response received, status code:", response.status);
if (response.ok) {
- console.log("getUser response received: ", response.status);
return response.text();
} else {
- console.error("getUser failed with status code: ",response.status);
- return "Anonymous";
+ console.error("getUser response is nok");
+ return UserService.notLoggedUserName;
}
})
.then(function (data) {
- console.log ("User connected:",data)
+ console.info ("User connected:",data)
return data;
})
.catch(function(error) {
- console.error("getUser error received",error);
- return "Anonymous";
+ console.warn("getUser error received, user set to: ",UserService.notLoggedUserName);
+ console.error("getUser error:",error);
+ return UserService.notLoggedUserName;
});
}
}
diff --git a/ui-react/src/api/example.json b/ui-react/src/api/example.json
index f3cc9e1..108cf78 100644
--- a/ui-react/src/api/example.json
+++ b/ui-react/src/api/example.json
@@ -1,5 +1,5 @@
{
- "name": "LOOP_h2NMX_v1_0_ResourceInstanceName1_tca",
+ "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
"dcaeBlueprintId": "typeId-3a942643-a8f7-4e54-b2c1-eea8daba2b17",
"globalPropertiesJson": {
"dcaeDeployParameters": {
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
diff --git a/ui-react/src/components/loop_viewer/logs/ClosedLoopLogs.js b/ui-react/src/components/loop_viewer/logs/ClosedLoopLogs.js
deleted file mode 100644
index ef7a3ae..0000000
--- a/ui-react/src/components/loop_viewer/logs/ClosedLoopLogs.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/*-
- * ============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 Table from 'react-bootstrap/Table';
-
-export default class ClosedLoopViewLogs extends React.Component {
- render() {
- return (
- <div className="log_div">
- <div className="log_table">
- <label className="table_header">Loop Logs</label>
- <Table striped hover id="loop-log-div">
- <thead>
- <tr>
- <th><span align="left" className="text">Date</span></th>
- <th><span align="left" className="text">Type</span></th>
- <th><span align="left" className="text">Component</span></th>
- <th><span align="right" className="text">Log</span></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td className="row_10_per">test</td>
- <td className="row_10_per">test</td>
- <td className="row_10_per">test</td>
- <td className="row_70_per">test</td>
- </tr>
- </tbody>
- </Table>
- </div>
- </div>
- );
- }
-}
diff --git a/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.css b/ui-react/src/components/loop_viewer/status/LoopStatus.css
similarity index 100%
rename from ui-react/src/components/loop_viewer/status/ClosedLoopStatus.css
rename to ui-react/src/components/loop_viewer/status/LoopStatus.css
diff --git a/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.js b/ui-react/src/components/loop_viewer/status/LoopStatus.js
similarity index 95%
rename from ui-react/src/components/loop_viewer/status/ClosedLoopStatus.js
rename to ui-react/src/components/loop_viewer/status/LoopStatus.js
index da5969e..f904d67 100644
--- a/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.js
+++ b/ui-react/src/components/loop_viewer/status/LoopStatus.js
@@ -22,9 +22,9 @@
*/
import React from 'react';
import Table from 'react-bootstrap/Table';
-import './ClosedLoopStatus.css';
+import './LoopStatus.css';
-export default class ClosedLoopStatus extends React.Component {
+export default class LoopStatus extends React.Component {
render() {
return (
<div>
diff --git a/ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js b/ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js
deleted file mode 100644
index d9f5eaf..0000000
--- a/ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*-
- * ============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 styled from 'styled-components';
-import { ReactComponent as SvgExample } from './example.svg';
-const LoopViewSvgDivStyle = styled.div`
-
- overflow: hidden;
- background-color: ${props => (props.theme.loopViewerBackgroundColor)};
- border: 1px solid transparent;
- border-color: ${props => (props.theme.loopViewerHeaderColor)};
-`
-
-export default class ClosedLoopViewSvg extends React.Component {
- render() {
- return (
- <LoopViewSvgDivStyle id="loop_svg">
- <SvgExample />
- </LoopViewSvgDivStyle>
- );
- }
-}
-
diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
new file mode 100644
index 0000000..2858ccd
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
@@ -0,0 +1,100 @@
+/*-
+ * ============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 styled from 'styled-components';
+import { withRouter } from "react-router";
+import LoopCache from '../../../api/LoopCache'
+import LoopService from '../../../api/LoopService'
+
+const LoopViewSvgDivStyled = styled.div`
+ overflow: hidden;
+ background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+ border: 1px solid;
+ border-color: ${props => (props.theme.loopViewerHeaderColor)};
+ height: 50%;
+`
+
+class LoopViewSvg extends React.Component {
+
+ static emptySvg = "<svg><text x=\"20\" y=\"40\">No LOOP (SVG)</text></svg>";
+ static operationalPolicyDataElementId = "OperationalPolicy";
+
+
+ state = {
+ svgContent: LoopViewSvg.emptySvg,
+ loopCache: this.props.loopCache,
+ }
+
+ constructor(props) {
+ super(props);
+ this.state.loopCache = props.loopCache;
+ this.handleSvgClick = this.handleSvgClick.bind(this);
+ this.getSvg = this.getSvg.bind(this);
+ }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ return this.state.svgContent !== nextState.svgContent;
+ }
+
+ componentWillReceiveProps(newProps) {
+ this.state.loopCache = newProps.loopCache;
+ this.getSvg();
+ }
+
+ componentDidMount() {
+ this.getSvg();
+ }
+
+ getSvg() {
+ LoopService.getSvg(this.state.loopCache.getLoopName()).then(svgXml => {
+ if (svgXml.length != 0) {
+ this.setState({ svgContent: svgXml })
+ } else {
+ this.setState({ svgContent: LoopViewSvg.emptySvg })
+ }
+ });
+ }
+
+ handleSvgClick(event) {
+ console.debug("svg click event received");
+ var elementName = event.target.parentNode.parentNode.parentNode.getAttribute('data-element-id');
+ console.info("SVG element clicked", elementName);
+ if (typeof elementName === "undefined" || elementName === "VES") {
+ return;
+ } else if (elementName === LoopViewSvg.operationalPolicyDataElementId) {
+ this.props.history.push('/operationalPolicyModal');
+ } else {
+ this.props.history.push('/configurationPolicyModal');
+ }
+ }
+
+ render() {
+ return (
+ <LoopViewSvgDivStyled id="loop_svg" dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
+
+ </LoopViewSvgDivStyled>
+ );
+ }
+}
+
+export default withRouter(LoopViewSvg);
\ No newline at end of file
diff --git a/ui-react/src/components/loop_viewer/svg/example.svg b/ui-react/src/components/loop_viewer/svg/example.svg
index 2f5ebd0..a7c40ee 100644
--- a/ui-react/src/components/loop_viewer/svg/example.svg
+++ b/ui-react/src/components/loop_viewer/svg/example.svg
@@ -1,444 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg">
- <g
- fill-opacity="1"
- color-rendering="auto"
- color-interpolation="auto"
- text-rendering="auto"
- stroke="black"
- stroke-linecap="square"
- stroke-miterlimit="10"
- shape-rendering="auto"
- stroke-opacity="1"
- fill="black"
- stroke-dasharray="none"
- font-weight="normal"
- stroke-width="1"
- font-family="'Dialog'"
- font-style="normal"
- data-element-id="start-circle"
- stroke-linejoin="miter"
- font-size="12px"
- image-rendering="auto"
- stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
- <defs id="genericDefs" />
- <g>
- <g
- shape-rendering="geometricPrecision"
- text-rendering="optimizeQuality"
- stroke-width="2">
- <circle
- fill="none"
- r="17"
- cx="18"
- cy="41" />
- </g>
- </g>
- </g>
- <g
- fill-opacity="1"
- color-rendering="auto"
- color-interpolation="auto"
- text-rendering="auto"
- stroke="black"
- stroke-linecap="square"
- stroke-miterlimit="10"
- shape-rendering="auto"
- stroke-opacity="1"
- fill="black"
- stroke-dasharray="none"
- font-weight="normal"
- stroke-width="1"
- font-family="'Dialog'"
- font-style="normal"
- data-element-id="Arrow-411c11ec-37fe-40bc-8544-417c2c05e4a7"
- stroke-linejoin="miter"
- font-size="12px"
- image-rendering="auto"
- stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
- <defs id="genericDefs" />
- <g>
- <g
- shape-rendering="geometricPrecision"
- text-rendering="optimizeQuality"
- stroke-width="2">
- <line
- y2="41"
- fill="none"
- x1="35"
- x2="123"
- y1="41" />
- <polygon
- fill="none"
- points=" 121 39 121 43 125 41" />
- <polygon
- points=" 121 39 121 43 125 41"
- stroke="none" />
- </g>
- </g>
- </g>
- <g
- fill-opacity="1"
- color-rendering="auto"
- color-interpolation="auto"
- text-rendering="auto"
- stroke="black"
- stroke-linecap="square"
- stroke-miterlimit="10"
- shape-rendering="auto"
- stroke-opacity="1"
- fill="black"
- stroke-dasharray="none"
- font-weight="normal"
- stroke-width="1"
- font-family="'Dialog'"
- font-style="normal"
- data-element-id="VES"
- stroke-linejoin="miter"
- font-size="12px"
- image-rendering="auto"
- stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
- <defs id="genericDefs" />
- <g>
- <g
- shape-rendering="geometricPrecision"
- text-rendering="optimizeQuality"
- stroke-width="2">
- <rect
- fill="none"
- x="127"
- width="123"
- y="1"
- height="82" />
- </g>
- <g
- fill-opacity="0"
- fill="rgb(0,0,0)"
- text-rendering="optimizeQuality"
- shape-rendering="geometricPrecision"
- stroke="rgb(0,0,0)"
- stroke-opacity="0"
- stroke-width="2">
- <rect
- x="127"
- width="123"
- y="1"
- height="82"
- stroke="none" />
- </g>
- <g
- text-rendering="optimizeQuality"
- stroke-width="2"
- shape-rendering="geometricPrecision"
- font-family="sans-serif">
- <text
- x="176.5"
- xml:space="preserve"
- y="46.5"
- stroke="none">VES</text>
- <line
- y2="83"
- fill="none"
- x1="147"
- x2="147"
- y1="1" />
- </g>
- </g>
- </g>
- <g
- fill-opacity="1"
- color-rendering="auto"
- color-interpolation="auto"
- text-rendering="auto"
- stroke="black"
- stroke-linecap="square"
- stroke-miterlimit="10"
- shape-rendering="auto"
- stroke-opacity="1"
- fill="black"
- stroke-dasharray="none"
- font-weight="normal"
- stroke-width="1"
- font-family="'Dialog'"
- font-style="normal"
- data-element-id="Arrow-17086665-1142-4cbf-9681-cf4462954c96"
- stroke-linejoin="miter"
- font-size="12px"
- image-rendering="auto"
- stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
- <defs id="genericDefs" />
- <g>
- <g
- shape-rendering="geometricPrecision"
- text-rendering="optimizeQuality"
- stroke-width="2">
- <line
- y2="41"
- fill="none"
- x1="250"
- x2="338"
- y1="41" />
- <polygon
- fill="none"
- points=" 336 39 336 43 340 41" />
- <polygon
- points=" 336 39 336 43 340 41"
- stroke="none" />
- </g>
- </g>
- </g>
- <g
- fill-opacity="1"
- color-rendering="auto"
- color-interpolation="auto"
- text-rendering="auto"
- stroke="black"
- stroke-linecap="square"
- stroke-miterlimit="10"
- shape-rendering="auto"
- stroke-opacity="1"
- fill="black"
- stroke-dasharray="none"
- font-weight="normal"
- stroke-width="1"
- font-family="'Dialog'"
- font-style="normal"
- data-element-id="tca_k8s_aLs74_v1_0_ResourceInstanceName2_tca_2"
- stroke-linejoin="miter"
- font-size="12px"
- image-rendering="auto"
- stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
- <defs id="genericDefs" />
- <g>
- <g
- shape-rendering="geometricPrecision"
- text-rendering="optimizeQuality"
- stroke-width="2">
- <rect
- fill="none"
- x="342"
- width="123"
- y="1"
- height="82" />
- </g>
- <g
- fill-opacity="0"
- fill="rgb(0,0,0)"
- text-rendering="optimizeQuality"
- shape-rendering="geometricPrecision"
- stroke="rgb(0,0,0)"
- stroke-opacity="0"
- stroke-width="2">
- <rect
- x="342"
- width="123"
- y="1"
- height="82"
- stroke="none" />
- </g>
- <g
- text-rendering="optimizeQuality"
- stroke-width="2"
- shape-rendering="geometricPrecision"
- font-family="sans-serif">
- <text
- x="379.5"
- xml:space="preserve"
- y="46.5"
- stroke="none">tca_k8s</text>
- <line
- y2="61"
- fill="none"
- x1="342"
- x2="465"
- y1="61" />
- </g>
- </g>
- </g>
- <g
- fill-opacity="1"
- color-rendering="auto"
- color-interpolation="auto"
- text-rendering="auto"
- stroke="black"
- stroke-linecap="square"
- stroke-miterlimit="10"
- shape-rendering="auto"
- stroke-opacity="1"
- fill="black"
- stroke-dasharray="none"
- font-weight="normal"
- stroke-width="1"
- font-family="'Dialog'"
- font-style="normal"
- data-element-id="Arrow-d48a7f5f-643d-4550-8045-ee46bb05ddfa"
- stroke-linejoin="miter"
- font-size="12px"
- image-rendering="auto"
- stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
- <defs id="genericDefs" />
- <g>
- <g
- shape-rendering="geometricPrecision"
- text-rendering="optimizeQuality"
- stroke-width="2">
- <line
- y2="41"
- fill="none"
- x1="465"
- x2="553"
- y1="41" />
- <polygon
- fill="none"
- points=" 551 39 551 43 555 41" />
- <polygon
- points=" 551 39 551 43 555 41"
- stroke="none" />
- </g>
- </g>
- </g>
- <g
- fill-opacity="1"
- color-rendering="auto"
- color-interpolation="auto"
- text-rendering="auto"
- stroke="black"
- stroke-linecap="square"
- stroke-miterlimit="10"
- shape-rendering="auto"
- stroke-opacity="1"
- fill="black"
- stroke-dasharray="none"
- font-weight="normal"
- stroke-width="1"
- font-family="'Dialog'"
- font-style="normal"
- data-element-id="OperationalPolicy"
- stroke-linejoin="miter"
- font-size="12px"
- image-rendering="auto"
- stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
- <defs id="genericDefs" />
- <g>
- <g
- shape-rendering="geometricPrecision"
- text-rendering="optimizeQuality"
- stroke-width="2">
- <rect
- fill="none"
- x="557"
- width="123"
- y="1"
- height="82" />
- </g>
- <g
- fill-opacity="0"
- fill="rgb(0,0,0)"
- text-rendering="optimizeQuality"
- shape-rendering="geometricPrecision"
- stroke="rgb(0,0,0)"
- stroke-opacity="0"
- stroke-width="2">
- <rect
- x="557"
- width="123"
- y="1"
- height="82"
- stroke="none" />
- </g>
- <g
- text-rendering="optimizeQuality"
- stroke-width="2"
- shape-rendering="geometricPrecision"
- font-family="sans-serif">
- <text
- x="564.5"
- xml:space="preserve"
- y="46.5"
- stroke="none">OperationalPolicy</text>
- <line
- y2="1"
- fill="none"
- x1="557"
- x2="618"
- y1="42" />
- </g>
- </g>
- </g>
- <g
- fill-opacity="1"
- color-rendering="auto"
- color-interpolation="auto"
- text-rendering="auto"
- stroke="black"
- stroke-linecap="square"
- stroke-miterlimit="10"
- shape-rendering="auto"
- stroke-opacity="1"
- fill="black"
- stroke-dasharray="none"
- font-weight="normal"
- stroke-width="1"
- font-family="'Dialog'"
- font-style="normal"
- data-element-id="Arrow-79f11b91-5a48-4945-9d2c-18a423105a7d"
- stroke-linejoin="miter"
- font-size="12px"
- image-rendering="auto"
- stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
- <defs id="genericDefs" />
- <g>
- <g
- shape-rendering="geometricPrecision"
- text-rendering="optimizeQuality"
- stroke-width="2">
- <line
- y2="41"
- fill="none"
- x1="680"
- x2="768"
- y1="41" />
- <polygon
- fill="none"
- points=" 766 39 766 43 770 41" />
- <polygon
- points=" 766 39 766 43 770 41"
- stroke="none" />
- </g>
- </g>
- </g>
- <g
- fill-opacity="1"
- color-rendering="auto"
- color-interpolation="auto"
- text-rendering="auto"
- stroke="black"
- stroke-linecap="square"
- stroke-miterlimit="10"
- shape-rendering="auto"
- stroke-opacity="1"
- fill="black"
- stroke-dasharray="none"
- font-weight="normal"
- stroke-width="1"
- font-family="'Dialog'"
- font-style="normal"
- data-element-id="stop-circle"
- stroke-linejoin="miter"
- font-size="12px"
- image-rendering="auto"
- stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
- <defs id="genericDefs" />
- <g>
- <g
- shape-rendering="geometricPrecision"
- text-rendering="optimizeQuality"
- stroke-width="4">
- <circle
- fill="none"
- r="17"
- cx="789"
- cy="41" />
- </g>
- </g>
- </g>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="start-circle" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><circle fill="none" r="17" cx="18" cy="41"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="Arrow-82c14603-02fc-4df7-8977-9b10e4c775d1" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><line y2="41" fill="none" x1="35" x2="123" y1="41"/><polygon fill="none" points=" 121 39 121 43 125 41"/><polygon points=" 121 39 121 43 125 41" stroke="none"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="VES" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><rect fill="none" x="127" width="123" y="1" height="82"/></g><g fill-opacity="0" fill="rgb(0,0,0)" text-rendering="optimizeQuality" shape-rendering="geometricPrecision" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="2"><rect x="127" width="123" y="1" height="82" stroke="none"/></g><g text-rendering="optimizeQuality" stroke-width="2" shape-rendering="geometricPrecision" font-family="sans-serif"><text x="176.5" xml:space="preserve" y="46.5" stroke="none">VES</text><line y2="83" fill="none" x1="147" x2="147" y1="1"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="Arrow-dbbb2d5a-e9c4-446d-92b9-c71908854434" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><line y2="41" fill="none" x1="250" x2="338" y1="41"/><polygon fill="none" points=" 336 39 336 43 340 41"/><polygon points=" 336 39 336 43 340 41" stroke="none"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="TCA_Jbv1z_v1_0_ResourceInstanceName1_tca" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><rect fill="none" x="342" width="123" y="1" height="82"/></g><g fill-opacity="0" fill="rgb(0,0,0)" text-rendering="optimizeQuality" shape-rendering="geometricPrecision" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="2"><rect x="342" width="123" y="1" height="82" stroke="none"/></g><g text-rendering="optimizeQuality" stroke-width="2" shape-rendering="geometricPrecision" font-family="sans-serif"><text x="392" xml:space="preserve" y="46.5" stroke="none">TCA</text><line y2="61" fill="none" x1="342" x2="465" y1="61"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="Arrow-3892abbc-c49c-40df-984b-8959b6df44e6" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><line y2="41" fill="none" x1="465" x2="553" y1="41"/><polygon fill="none" points=" 551 39 551 43 555 41"/><polygon points=" 551 39 551 43 555 41" stroke="none"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="OperationalPolicy" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><rect fill="none" x="557" width="123" y="1" height="82"/></g><g fill-opacity="0" fill="rgb(0,0,0)" text-rendering="optimizeQuality" shape-rendering="geometricPrecision" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="2"><rect x="557" width="123" y="1" height="82" stroke="none"/></g><g text-rendering="optimizeQuality" stroke-width="2" shape-rendering="geometricPrecision" font-family="sans-serif"><text x="564.5" xml:space="preserve" y="46.5" stroke="none">OperationalPolicy</text><line y2="1" fill="none" x1="557" x2="618" y1="42"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="Arrow-44a8b77e-d0eb-4c0d-82b6-0822ff35573f" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><line y2="41" fill="none" x1="680" x2="768" y1="41"/><polygon fill="none" points=" 766 39 766 43 770 41"/><polygon points=" 766 39 766 43 770 41" stroke="none"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="stop-circle" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="4"><circle fill="none" r="17" cx="789" cy="41"/></g></g></g></svg>
\ No newline at end of file
diff --git a/ui-react/src/index.js b/ui-react/src/index.js
index eed3935..8a62b5a 100644
--- a/ui-react/src/index.js
+++ b/ui-react/src/index.js
@@ -24,14 +24,11 @@
import ReactDOM from 'react-dom';
import OnapClamp from './OnapClamp';
import { Route, BrowserRouter } from 'react-router-dom'
-import LoopModal from './components/dialogs/LoopModal';
-import OperationalPolicyModal from './components/dialogs/OperationalPolicy/OperationalPolicyModal';
+
const routing = (
<BrowserRouter >
- <OnapClamp />
- <Route path="/operationalPolicyModal" render={() => <OperationalPolicyModal />} />
- <Route path="/openLoop" component={ LoopModal } />
+ <Route path="/" component={OnapClamp}/>
</BrowserRouter>
);
diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js
index df91262..1630c50 100644
--- a/ui-react/src/theme/globalStyle.js
+++ b/ui-react/src/theme/globalStyle.js
@@ -58,6 +58,14 @@
color: ${props => props.theme.fontNormal};
background-color: ${props => (props.theme.backgroundColor)};
}
+
+ svg {
+ padding: 10px;
+ overflow: hidden;
+ background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+ width: 100%;
+ height: 100%;
+ }
`
export const DefaultClampTheme = {
