Create SVG in UI
Remove the SVG generation from the backend and put it in the UI
Issue-ID: CLAMP-854
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: Icfa9e107d83bb244ac3d87300d013555bfa0b037
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index efd02b4..6522cc3 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -29,7 +29,7 @@
import { GlobalClampStyle } from './theme/globalStyle.js';
import OnapConstants from './utils/OnapConstants';
-import LoopSvg from './components/loop_viewer/svg/LoopSvg';
+import SvgGenerator from './components/loop_viewer/svg/SvgGenerator';
import LoopLogs from './components/loop_viewer/logs/LoopLogs';
import LoopStatus from './components/loop_viewer/status/LoopStatus';
import UserService from './api/UserService';
@@ -203,7 +203,7 @@
renderLoopViewBody() {
return (
<LoopViewBodyDivStyled>
- <LoopSvg loopCache={this.state.loopCache} />
+ <SvgGenerator loopCache={this.state.loopCache} clickable={true} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE}/>
<LoopStatus loopCache={this.state.loopCache}/>
<LoopLogs loopCache={this.state.loopCache} />
</LoopViewBodyDivStyled>
diff --git a/ui-react/src/__snapshots__/LoopUI.test.js.snap b/ui-react/src/__snapshots__/LoopUI.test.js.snap
index ff08f7a..d8b2e7b 100644
--- a/ui-react/src/__snapshots__/LoopUI.test.js.snap
+++ b/ui-react/src/__snapshots__/LoopUI.test.js.snap
@@ -180,7 +180,9 @@
)
</styled.div>
<styled.div>
- <withRouter(LoopViewSvg)
+ <withRouter(SvgGenerator)
+ clickable={true}
+ generatedFrom="INSTANCE"
loopCache={
LoopCache {
"loopJsonCache": Object {},
diff --git a/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
index 93dc442..39b5445 100644
--- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap
+++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
@@ -205,7 +205,9 @@
)
</styled.div>
<styled.div>
- <withRouter(LoopViewSvg)
+ <withRouter(SvgGenerator)
+ clickable={true}
+ generatedFrom="INSTANCE"
loopCache={
LoopCache {
"loopJsonCache": Object {},
diff --git a/ui-react/src/api/LoopCache.js b/ui-react/src/api/LoopCache.js
index 4f22dc2..3e19b4f 100644
--- a/ui-react/src/api/LoopCache.js
+++ b/ui-react/src/api/LoopCache.js
@@ -221,9 +221,32 @@
}
getTemplateName() {
- if (this.loopJsonCache["loopTemplate"] !== undefined) {
- return this.loopJsonCache["loopTemplate"].name;
+ if (this.getLoopTemplate() !== undefined) {
+ return this.getLoopTemplate().name;
}
return null;
}
+
+ getLoopTemplate() {
+ return this.loopJsonCache["loopTemplate"];
+ }
+
+ isOpenLoopTemplate() {
+ var loopTemplate = this.getLoopTemplate();
+ if(loopTemplate != null && loopTemplate["allowedLoopType"] === "OPEN") {
+ return true;
+ }
+ return false;
+ }
+
+ getAllLoopElementModels() {
+ var loopTemplate = this.getLoopTemplate();
+ var loopElementModels = [];
+ if(loopTemplate != null) {
+ for (var element of loopTemplate['loopElementModelsUsed']) {
+ loopElementModels.push(element['loopElementModel'])
+ }
+ }
+ return loopElementModels;
+ }
}
diff --git a/ui-react/src/api/TemplateService.js b/ui-react/src/api/TemplateService.js
index eddd58d..3a780dd 100644
--- a/ui-react/src/api/TemplateService.js
+++ b/ui-react/src/api/TemplateService.js
@@ -21,57 +21,24 @@
*/
export default class TemplateService {
- static getTemplateNames() {
- return fetch('/restservices/clds/v2/templates/names', { method: 'GET', credentials: 'same-origin' })
- .then(function (response) {
- console.debug("GetTemplateNames response received: ", response.status);
- if (response.ok) {
- return response.json();
- } else {
- console.error("GetTemplateNames query failed");
- return {};
- }
- })
- .catch(function (error) {
- console.error("GetTemplateNames error received", error);
- return {};
- });
- }
- static getBlueprintMicroServiceTemplates() {
+ static getAllLoopTemplates() {
return fetch('restservices/clds/v2/templates', { method: 'GET', credentials: 'same-origin', })
.then(function (response) {
- console.debug("getBlueprintMicroServiceTemplates response received: ", response.status);
+ console.debug("getAllLoopTemplates response received: ", response.status);
if (response.ok) {
return response.json();
} else {
- console.error("getBlueprintMicroServiceTemplates query failed");
+ console.error("getAllLoopTemplates query failed");
return {};
}
})
.catch(function (error) {
- console.error("getBlueprintMicroServiceTemplates error received", error);
+ console.error("getAllLoopTemplates error received", error);
return {};
});
}
- static getBlueprintMicroServiceTemplateSvg(templateName) {
- return fetch('/restservices/clds/v2/templates/' + templateName + ' /svgRepresentation', { method: 'GET', credentials: 'same-origin', })
- .then(function (response) {
- console.debug("getBlueprintMicroServiceTemplateSvg response received: ", response.status);
- if (response.ok) {
- return response.text();
- } else {
- console.error("getBlueprintMicroServiceTemplateSvg query failed");
- return {};
- }
- })
- .catch(function (error) {
- console.error("getBlueprintMicroServiceTemplateSvg error received", error);
- return {};
- });
- }
-
static getDictionary() {
return fetch('restservices/clds/v2/dictionary/', { method: 'GET', credentials: 'same-origin', })
.then(function (response) {
diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
index e98b595..a8e8dee 100644
--- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
@@ -30,46 +30,33 @@
import styled from 'styled-components';
import LoopService from '../../../api/LoopService';
import TemplateService from '../../../api/TemplateService';
+import LoopCache from '../../../api/LoopCache';
+import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
const ModalStyled = styled(Modal)`
background-color: transparent;
`
-const LoopViewSvgDivStyled = styled.svg`
- display: flex;
- flex-direction: row;
- overflow-x: scroll;
- background-color: ${props => (props.theme.loopViewerBackgroundColor)};
- border-color: ${props => (props.theme.loopViewerHeaderColor)};
- margin-top: 3em;
- margin-left: auto;
- margin-right:auto;
- margin-bottom: -1em;
- text-align: center;
- align-items: center;
- height: 100%;
- width: 100%;
-`
export default class CreateLoopModal extends React.Component {
constructor(props, context) {
super(props, context);
- this.getTemplateNames = this.getTemplateNames.bind(this);
+ this.getAllLoopTemplates = this.getAllLoopTemplates.bind(this);
this.handleCreate = this.handleCreate.bind(this);
this.handleModelName = this.handleModelName.bind(this);
this.handleClose = this.handleClose.bind(this);
- this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
+ this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
this.state = {
show: true,
- content: '',
chosenTemplateName: '',
modelName: '',
- templateNames: []
+ templateNames: [],
+ fakeLoopCacheWithTemplate: new LoopCache({})
};
}
componentWillMount() {
- this.getTemplateNames();
+ this.getAllLoopTemplates();
}
handleClose() {
@@ -77,21 +64,26 @@
this.props.history.push('/');
}
- handleDropdownListChange(e) {
- this.setState({ chosenTemplateName: e.value });
- TemplateService.getBlueprintMicroServiceTemplateSvg(e.value).then(svgXml => {
- if (svgXml.length !== 0) {
- this.setState({ content: svgXml })
- } else {
- this.setState({ content: 'Error1' })
- }
- })
+ handleDropDownListChange(e) {
+ if (typeof e.value !== "undefined") {
+ this.setState({
+ fakeLoopCacheWithTemplate:
+ new LoopCache({
+ "loopTemplate":e.templateObject,
+ "name": "fakeLoop"
+ }),
+ chosenTemplateName: e.value
+ })
+ } else {
+ this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
+ }
}
- getTemplateNames() {
- TemplateService.getTemplateNames().then(templateNames => {
- const templateOptions = templateNames.map((templateName) => { return { label: templateName, value: templateName } });
- this.setState({ templateNames: templateOptions })
+ getAllLoopTemplates() {
+ TemplateService.getAllLoopTemplates().then(templatesData => {
+ const templateOptions = templatesData.map((templateData) => { return { label: templateData.name, value: templateData.name, templateObject: templateData } });
+ this.setState({
+ templateNames: templateOptions })
});
}
@@ -133,17 +125,15 @@
<Form.Group as={Row} controlId="formPlaintextEmail">
<Form.Label column sm="2">Template Name:</Form.Label>
<Col sm="10">
- <Select onChange={this.handleDropdownListChange} options={this.state.templateNames} />
+ <Select onChange={this.handleDropDownListChange} options={this.state.templateNames} />
</Col>
</Form.Group>
- <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
- <Form.Label column sm="2">Model Preview:</Form.Label>
- <Col sm="10">
- <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }}
- value={this.state.content} >
- </LoopViewSvgDivStyled>
- </Col>
- </Form.Group>
+ <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
+ <Form.Label column sm="2">Model Preview:</Form.Label>
+ <Col sm="10">
+ <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
+ </Col>
+ </Form.Group>
<Form.Group as={Row} controlId="formPlaintextEmail">
<Form.Label column sm="2">Model Name:</Form.Label>
<input type="text" style={{width: '50%', marginLeft: '1em' }}
diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
index 18ec6fd..5b6ea9e 100644
--- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
@@ -30,8 +30,8 @@
it('Test the render method', async () => {
const flushPromises = () => new Promise(setImmediate);
- TemplateService.getTemplateNames = jest.fn().mockImplementation(() => {
- return Promise.resolve(["template1","template2"]);
+ TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => {
+ return Promise.resolve([{"name":"template1"},{"name":"template2"}]);
});
const component = shallow(<CreateLoopModal/>);
@@ -39,31 +39,26 @@
await flushPromises();
component.update();
- expect(component.state('templateNames')).toStrictEqual([{"label": "template1", "value": "template1"}, {"label": "template2", "value": "template2"}]);
+ expect(component.state('templateNames')).toStrictEqual([{"label": "template1", "value": "template1", "templateObject": {"name": "template1"}}, {"label": "template2", "value": "template2","templateObject": {"name": "template2"}}]);
});
it('handleDropdownListChange event', async () => {
const flushPromises = () => new Promise(setImmediate);
- const event = {value: 'template1'};
- TemplateService.getBlueprintMicroServiceTemplateSvg = jest.fn().mockImplementation(() => {
- return Promise.resolve("");
- });
const component = shallow(<CreateLoopModal/>);
- component.find('StateManager').simulate('change', event);
+ component.find('StateManager').simulate('change', {value: 'template1', templateObject: {"name":"template1"} });
await flushPromises();
component.update();
expect(component.state('chosenTemplateName')).toEqual("template1");
- expect(component.state('content')).toEqual("Error1");
-
- TemplateService.getBlueprintMicroServiceTemplateSvg = jest.fn().mockImplementation(() => {
- return Promise.resolve("svgContentTest");
- });
- component.find('StateManager').simulate('change', {value: 'template2'});
+ expect(component.state('fakeLoopCacheWithTemplate').getLoopTemplate()['name']).toEqual("template1");
+ expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop");
+
+ component.find('StateManager').simulate('change',{value: 'template2', templateObject: {"name":"template2"} });
await flushPromises();
component.update();
expect(component.state('chosenTemplateName')).toEqual("template2");
- expect(component.state('content')).toEqual("svgContentTest");
+ expect(component.state('fakeLoopCacheWithTemplate').getLoopTemplate()['name']).toEqual("template2");
+ expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop");
});
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
index c048834..7ca90b4 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -30,6 +30,8 @@
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,21 +39,6 @@
const CheckBoxStyled = styled(FormCheck.Input)`
margin-left:3rem;
`
-const LoopViewSvgDivStyled = styled.svg`
- overflow-x: scroll;
- display: flex;
- flex-direction: row;
- background-color: ${props => (props.theme.loopViewerBackgroundColor)};
- border-color: ${props => (props.theme.loopViewerHeaderColor)};
- margin-top: 2em;
- margin-left: auto;
- margin-right:auto;
- margin-bottom: -3em;
- text-align: center;
- align-items: center;
- height: 100%;
- width: 100%;
-`
export default class OpenLoopModal extends React.Component {
constructor(props, context) {
@@ -60,13 +47,13 @@
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.showReadOnly = props.showReadOnly ? props.showReadOnly : true;
this.state = {
show: true,
chosenLoopName: '',
loopNames: [],
- content:''
+ loopCacheOpened: new LoopCache({})
};
}
@@ -79,14 +66,12 @@
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)
+ });
});
}
@@ -95,9 +80,7 @@
if (Object.entries(loopNames).length !== 0) {
const loopOptions = loopNames.filter(loopName => loopName!=='undefined').map((loopName) => { return { label: loopName, value: loopName } });
this.setState({ loopNames: loopOptions })
-
}
-
});
}
@@ -117,20 +100,18 @@
<Form.Group as={Row} controlId="formPlaintextEmail">
<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 as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
<Form.Label column sm="2">Model Preview:</Form.Label>
<Col sm="10">
- <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }}
- value={this.state.content} >
- </LoopViewSvgDivStyled>
+ <SvgGenerator loopCache={this.state.loopCacheOpened} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE}/>
</Col>
</Form.Group>
{this.showReadOnly === true ?
- <Form.Group as={Row} controlId="formBasicChecbox">
+ <Form.Group as={Row} controlId="formBasicCheckbox">
<Form.Check>
<FormCheck.Label>Read Only Mode:</FormCheck.Label>
<CheckBoxStyled style={{marginLeft: '3.5em'}} type="checkbox" />
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
index f362cfa..1865869 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
@@ -23,6 +23,7 @@
import React from 'react';
import { shallow } from 'enzyme';
import OpenLoopModal from './OpenLoopModal';
+import LoopService from '../../../api/LoopService';
describe('Verify OpenLoopModal', () => {
@@ -41,10 +42,19 @@
expect(component).toMatchSnapshot();
});
- it('Onchange event', () => {
+ it('Onchange event', async () => {
+ const flushPromises = () => new Promise(setImmediate);
+ LoopService.getLoop = jest.fn().mockImplementation(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {}
+ });
+ });
const event = {value: 'LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3'};
const component = shallow(<OpenLoopModal/>);
component.find('StateManager').simulate('change', event);
+ await flushPromises();
component.update();
expect(component.state('chosenLoopName')).toEqual("LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3");
});
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
index 305c87b..e69b809 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
@@ -75,13 +75,14 @@
<Col
sm="10"
>
- <styled.svg
- dangerouslySetInnerHTML={
- Object {
- "__html": "",
+ <withRouter(SvgGenerator)
+ clickable={false}
+ generatedFrom="TEMPLATE"
+ loopCache={
+ LoopCache {
+ "loopJsonCache": Object {},
}
}
- value=""
/>
</Col>
</FormGroup>
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
index 1968544..4772604 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
@@ -75,13 +75,14 @@
<Col
sm="10"
>
- <styled.svg
- dangerouslySetInnerHTML={
- Object {
- "__html": "",
+ <withRouter(SvgGenerator)
+ clickable={false}
+ generatedFrom="INSTANCE"
+ loopCache={
+ LoopCache {
+ "loopJsonCache": Object {},
}
}
- value=""
/>
</Col>
</FormGroup>
@@ -95,7 +96,7 @@
"render": [Function],
}
}
- controlId="formBasicChecbox"
+ controlId="formBasicCheckbox"
>
<FormCheck
disabled={false}
diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js
index 5930386..d3b4273 100644
--- a/ui-react/src/components/dialogs/Policy/PolicyModal.js
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js
@@ -33,6 +33,7 @@
import LoopCache from '../../../api/LoopCache';
import JSONEditor from '@json-editor/json-editor';
import Alert from 'react-bootstrap/Alert';
+import OnapConstant from '../../../utils/OnapConstants';
const ModalStyled = styled(Modal)`
background-color: transparent;
@@ -66,6 +67,9 @@
this.createJsonEditor = this.createJsonEditor.bind(this);
this.handleRefresh = this.handleRefresh.bind(this);
this.disableAlert = this.disableAlert.bind(this);
+ this.renderPdpGroupDropDown = this.renderPdpGroupDropDown.bind(this);
+ this.renderOpenLoopMessage = this.renderOpenLoopMessage.bind(this);
+ this.renderModalTitle = this.renderModalTitle.bind(this);
}
handleSave() {
@@ -82,7 +86,7 @@
}
else {
console.info("NO validation errors found in policy data");
- if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') {
+ if (this.state.policyInstanceType === OnapConstant.microServiceType) {
this.state.loopCache.updateMicroServiceProperties(this.state.policyName, editorData);
this.state.loopCache.updateMicroServicePdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup);
LoopService.setMicroServiceProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getMicroServiceForName(this.state.policyName)).then(resp => {
@@ -90,7 +94,7 @@
this.props.history.push('/');
this.props.loadLoopFunction(this.state.loopCache.getLoopName());
});
- } else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') {
+ } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
this.state.loopCache.updateOperationalPolicyProperties(this.state.policyName, editorData);
this.state.loopCache.updateOperationalPolicyPdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup);
LoopService.setOperationalPolicyProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getOperationalPolicies()).then(resp => {
@@ -154,13 +158,13 @@
var editorData = {};
var pdpGroupValues = {};
var chosenPdpGroupValue, chosenPdpSubgroupValue;
- if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') {
+ if (this.state.policyInstanceType === OnapConstant.microServiceType) {
toscaModel = this.state.loopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
editorData = this.state.loopCache.getMicroServicePropertiesForName(this.state.policyName);
pdpGroupValues = this.state.loopCache.getMicroServiceSupportedPdpGroup(this.state.policyName);
chosenPdpGroupValue = this.state.loopCache.getMicroServicePdpGroup(this.state.policyName);
chosenPdpSubgroupValue = this.state.loopCache.getMicroServicePdpSubgroup(this.state.policyName);
- } else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') {
+ } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
toscaModel = this.state.loopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
editorData = this.state.loopCache.getOperationalPolicyPropertiesForName(this.state.policyName);
pdpGroupValues = this.state.loopCache.getOperationalPolicySupportedPdpGroup(this.state.policyName);
@@ -207,7 +211,7 @@
handleRefresh() {
var newLoopCache, toscaModel, editorData;
- if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') {
+ if (this.state.policyInstanceType === OnapConstant.microServiceType) {
LoopService.refreshMicroServicePolicyJson(this.state.loopCache.getLoopName(),this.state.policyName).then(data => {
newLoopCache = new LoopCache(data);
toscaModel = newLoopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
@@ -227,7 +231,7 @@
showMessage: "Refreshing of UI failed"
});
});
- } else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') {
+ } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
LoopService.refreshOperationalPolicyJson(this.state.loopCache.getLoopName(),this.state.policyName).then(data => {
var newLoopCache = new LoopCache(data);
toscaModel = newLoopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
@@ -254,11 +258,60 @@
this.setState ({ showSucAlert: false, showFailAlert: false });
}
+ renderPdpGroupDropDown() {
+ if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
+ return (
+ <Form.Group as={Row} controlId="formPlaintextEmail">
+ <Form.Label column sm="2">Pdp Group Info</Form.Label>
+ <Col sm="3">
+ <Select value={{ label: this.state.chosenPdpGroup, value: this.state.chosenPdpGroup }} onChange={this.handlePdpGroupChange} options={this.state.pdpGroupList} />
+ </Col>
+ <Col sm="3">
+ <Select value={{ label: this.state.chosenPdpSubgroup, value: this.state.chosenPdpSubgroup }} onChange={this.handlePdpSubgroupChange} options={this.state.pdpSubgroupList} />
+ </Col>
+ </Form.Group>
+ );
+ }
+ }
+
+ renderOpenLoopMessage() {
+ if(this.state.policyInstanceType === OnapConstant.operationalPolicyType && this.state.loopCache.isOpenLoopTemplate()) {
+ return (
+ "Operational Policy cannot be configured as only Open Loop is supported for this Template!"
+ );
+ }
+ }
+
+ renderModalTitle() {
+ return (
+ <Modal.Title>Edit the policy</Modal.Title>
+ );
+ }
+
+ renderButton() {
+ var allElement = [(<Button variant="secondary" onClick={this.handleClose}>
+ Close
+ </Button>)];
+ if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
+ allElement.push((
+ <Button variant="primary" disabled={this.readOnly} onClick={this.handleSave}>
+ Save Changes
+ </Button>
+ ));
+ allElement.push((
+ <Button variant="primary" disabled={this.readOnly} onClick={this.handleRefresh}>
+ Refresh
+ </Button>
+ ));
+ }
+ return allElement;
+ }
+
render() {
return (
- <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose } backdrop="static">
+ <ModalStyled size="xl" backdrop="static" keyboard={false} show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
- <Modal.Title>Edit the policy</Modal.Title>
+ {this.renderModalTitle()}
</Modal.Header>
<Alert variant="success" show={this.state.showSucAlert} onClose={this.disableAlert} dismissible>
{this.state.showMessage}
@@ -267,30 +320,14 @@
{this.state.showMessage}
</Alert>
<Modal.Body>
+ {this.renderOpenLoopMessage()}
<div id="editor" />
- <Form.Group as={Row} controlId="formPlaintextEmail">
- <Form.Label column sm="2">Pdp Group Info</Form.Label>
- <Col sm="3">
- <Select value={{ label: this.state.chosenPdpGroup, value: this.state.chosenPdpGroup }} onChange={this.handlePdpGroupChange} options={this.state.pdpGroupList} />
- </Col>
- <Col sm="3">
- <Select value={{ label: this.state.chosenPdpSubgroup, value: this.state.chosenPdpSubgroup }} onChange={this.handlePdpSubgroupChange} options={this.state.pdpSubgroupList} />
- </Col>
- </Form.Group>
+ {this.renderPdpGroupDropDown()}
</Modal.Body>
<Modal.Footer>
- <Button variant="secondary" onClick={this.handleClose}>
- Close
- </Button>
- <Button variant="primary" onClick={this.handleSave}>
- Save Changes
- </Button>
- <Button variant="primary" onClick={this.handleRefresh}>
- Refresh
- </Button>
+ {this.renderButton()}
</Modal.Footer>
</ModalStyled>
-
);
}
}
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.test.js b/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
index d4021c9..cb0a320 100644
--- a/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
@@ -25,6 +25,7 @@
import PolicyModal from './PolicyModal';
import LoopCache from '../../../api/LoopCache';
import LoopService from '../../../api/LoopService';
+import OnapConstant from '../../../utils/OnapConstants';
describe('Verify PolicyModal', () => {
beforeEach(() => {
@@ -54,7 +55,7 @@
const loopCache = new LoopCache(loopCacheStr);
const historyMock = { push: jest.fn() };
const flushPromises = () => new Promise(setImmediate);
- const match = {params: {policyName:"OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", policyInstanceType: "OPERATIONAL-POLICY"}}
+ const match = {params: {policyName:"OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", policyInstanceType: OnapConstant.operationalPolicyType}}
it('Test handleClose', () => {
const handleClose = jest.spyOn(PolicyModal.prototype,'handleClose');
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
index 7cf02f7..962ab4b 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -34,30 +34,12 @@
import LastPage from '@material-ui/icons/LastPage';
import Search from '@material-ui/icons/Search';
import MaterialTable from "material-table";
+import LoopCache from '../../../api/LoopCache';
+import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
const ModalStyled = styled(Modal)`
background-color: transparent;
`
-const LoopViewSvgDivStyled = styled.svg`
- overflow-x: scroll;
- background-color: ${props => (props.theme.loopViewerBackgroundColor)};
- border-color: ${props => (props.theme.loopViewerHeaderColor)};
- margin-top: 3em;
- margin-left: 2em;
- margin-right:auto;
- text-align: center;
- height: 100%;
- width: 100%;
- display: flex;
- flex-direction: row;
- align-items: center;
-
-`
-const SvgContainerDivStyled = styled.div`
- display: flex;
- align-items: center;
- border: 1px solid;
-`
const cellStyle = { border: '1px solid black' };
const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' };
@@ -68,7 +50,8 @@
show: true,
content: 'Please select a loop template to display it',
selectedRow: -1,
- loopTemplateData: [],
+ loopTemplatesData: [],
+ fakeLoopCacheWithTemplate: new LoopCache({}),
loopTemplateColumnsDefinition: [
{ title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
cellStyle: cellStyle,
@@ -109,29 +92,27 @@
constructor(props, context) {
super(props, context);
this.handleClose = this.handleClose.bind(this);
- this.getBlueprintMicroServiceTemplate = this.getBlueprintMicroServiceTemplate.bind(this);
- this.getBlueprintMicroServiceTemplates();
+ this.getLoopTemplate = this.getLoopTemplate.bind(this);
+ this.getAllLoopTemplates();
}
- getBlueprintMicroServiceTemplates() {
- TemplateService.getBlueprintMicroServiceTemplates().then(loopTemplateData => {
- this.setState({ loopTemplateData: loopTemplateData })
+ getAllLoopTemplates() {
+ TemplateService.getAllLoopTemplates().then(templatesData => {
+ this.setState({ loopTemplatesData: templatesData })
});
}
- getBlueprintMicroServiceTemplate(templateName) {
- if (typeof templateName !== "undefined") {
- TemplateService.getBlueprintMicroServiceTemplateSvg(templateName).then(svgXml => {
- if (svgXml.length !== 0) {
- this.setState({ content: svgXml })
- } else {
- this.setState({ content: 'Please select a loop template to view the details' })
-
- }
- });
+ getLoopTemplate(templateIdInDataArray) {
+ if (typeof templateIdInDataArray !== "undefined") {
+ this.setState({ fakeLoopCacheWithTemplate:
+ new LoopCache({
+ "loopTemplate":this.state.loopTemplatesData[templateIdInDataArray],
+ "name": "fakeLoop"
+ })
+ })
} else {
- this.setState({ content: 'Please select a loop template to view the details' })
- }
+ this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
+ }
}
handleClose() {
@@ -147,21 +128,18 @@
<Modal.Body>
<MaterialTable
title={"View Blueprint MicroService Templates"}
- data={this.state.loopTemplateData}
+ data={this.state.loopTemplatesData}
columns={this.state.loopTemplateColumnsDefinition}
icons={this.state.tableIcons}
- onRowClick={(event, rowData) => {this.getBlueprintMicroServiceTemplate(rowData.name);this.setState({selectedRow: rowData.tableData.id})}}
+ onRowClick={(event, rowData) => {this.getLoopTemplate(rowData.tableData.id);this.setState({selectedRow: rowData.tableData.id})}}
options={{
headerStyle:rowHeaderStyle,
rowStyle: rowData => ({
backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
})
}}
- />
- <SvgContainerDivStyled>
- <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} value={this.state.content} >
- </LoopViewSvgDivStyled>
- </SvgContainerDivStyled>
+ />
+ <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>Close</Button>
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
index 1a6cc19..7680ec4 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
@@ -24,6 +24,7 @@
import { shallow } from 'enzyme';
import ViewLoopTemplatesModal from './ViewLoopTemplatesModal';
import { mount } from 'enzyme';
+import { BrowserRouter as Router } from 'react-router-dom';
describe('Verify ViewLoopTemplatesModal', () => {
beforeEach(() => {
@@ -128,7 +129,7 @@
}
});
});
- const component = mount(<ViewLoopTemplatesModal/>);
+ const component = mount(<Router><ViewLoopTemplatesModal/></Router>);
expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
});
diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
index 3f6dc94..ee7b679 100644
--- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
@@ -86,16 +86,7 @@
},
]
}
- data={
- Object {
- "allowedLoopType": "CLOSED",
- "index": "1",
- "maximumInstancesAllowed": 1,
- "modelService.serviceDetails.name": "MTCA",
- "name": "MTCA version 1",
- "updatedDate": "2019-09-06 19:09:42",
- }
- }
+ data={Array []}
icons={
Object {
"FirstPage": Object {
@@ -142,16 +133,15 @@
}
title="View Blueprint MicroService Templates"
/>
- <styled.div>
- <styled.svg
- dangerouslySetInnerHTML={
- Object {
- "__html": "Please select a loop template to display it",
- }
+ <withRouter(SvgGenerator)
+ clickable={false}
+ generatedFrom="TEMPLATE"
+ loopCache={
+ LoopCache {
+ "loopJsonCache": Object {},
}
- value="Please select a loop template to display it"
- />
- </styled.div>
+ }
+ />
</ModalBody>
<ModalFooter>
<Button
diff --git a/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js b/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js
deleted file mode 100644
index 29422a1..0000000
--- a/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default class LoopComponentConverter {
-
- static buildMapOfComponents(loopCache) {
- var componentsMap = new Map([]);
- if (typeof (loopCache.getMicroServicePolicies()) !== "undefined") {
- loopCache.getMicroServicePolicies().forEach(ms => {
- componentsMap.set(ms.name, "/policyModal/MICRO-SERVICE-POLICY/"+ms.name);
- })
- }
- if (typeof (loopCache.getOperationalPolicies()) !== "undefined") {
- loopCache.getOperationalPolicies().forEach(op => {
- componentsMap.set(op.name, "/policyModal/OPERATIONAL-POLICY/"+op.name);
- })
- }
- return componentsMap;
- }
-}
diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
deleted file mode 100644
index 048f630..0000000
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js
+++ /dev/null
@@ -1,110 +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 LoopCache from '../../../api/LoopCache';
-import { withRouter } from "react-router-dom";
-import LoopService from '../../../api/LoopService';
-import LoopComponentConverter from './LoopComponentConverter';
-
-const LoopViewSvgDivStyled = styled.svg`
- display: flex;
- flex-direction: row;
- overflow-x: scroll;
- background-color: ${props => (props.theme.loopViewerBackgroundColor)};
- border: 1px solid;
- border-color: ${props => (props.theme.loopViewerHeaderColor)};
- margin-top: 1em;
- margin-left: auto;
- margin-right:auto;
- margin-bottom: -3em;
- align-items: center;
- height: 100%;
- width: 100%;
-
-`
-
-class LoopViewSvg extends React.Component {
-
- static emptySvg = "<svg><text x=\"20\" y=\"40\">No LOOP (SVG)</text></svg>";
-
- state = {
- svgContent: LoopViewSvg.emptySvg,
- loopCache: new LoopCache({}),
- componentModalMapping: new Map([])
- }
-
- constructor(props) {
- super(props);
- this.handleSvgClick = this.handleSvgClick.bind(this);
- this.getSvg = this.getSvg.bind(this);
- this.state.loopCache = props.loopCache;
- this.state.componentModalMapping = LoopComponentConverter.buildMapOfComponents(props.loopCache);
- this.getSvg(props.loopCache.getLoopName());
- }
-
- shouldComponentUpdate(nextProps, nextState) {
- return this.state.svgContent !== nextState.svgContent;
- }
-
- componentWillReceiveProps(newProps) {
- if (this.state.loopCache !== newProps.loopCache) {
- this.setState({
- loopCache: newProps.loopCache,
- componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache)
- });
- this.getSvg(newProps.loopCache.getLoopName());
- }
- }
-
- getSvg(loopName) {
- if (typeof loopName !== "undefined") {
- LoopService.getSvg(loopName).then(svgXml => {
- if (svgXml.length !== 0) {
- this.setState({ svgContent: svgXml })
- } else {
- this.setState({ svgContent: LoopViewSvg.emptySvg })
- }
- });
- } 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);
- this.props.history.push(this.state.componentModalMapping.get(elementName));
- }
-
- render() {
- return (
- <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
-
- </LoopViewSvgDivStyled>
- );
- }
-}
-
-export default withRouter(LoopViewSvg);
diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.test.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.test.js
deleted file mode 100644
index e54b500..0000000
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.test.js
+++ /dev/null
@@ -1,132 +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 { shallow } from 'enzyme';
-import LoopSvg from './LoopSvg';
-import LoopCache from '../../../api/LoopCache';
-import LoopService from '../../../api/LoopService';
-
-describe('Verify LoopSvg', () => {
- const loopCache = new LoopCache({
- "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
- "microServicePolicies": [{
- "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
- "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
- "properties": {"domain": "measurementsForVfScaling"},
- "shared": false,
- "jsonRepresentation": {"schema": {}}
- }],
- "operationalPolicies": [{
- "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
- "configurationsJson": {
- "operational_policy": {
- "controlLoop": {},
- "policies": []
- }
- }
- }]
- });
-
- it('Test the render method no loopName', () => {
- const localLoopCache = new LoopCache({
- "microServicePolicies": [{
- "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
- "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
- "properties": {"domain": "measurementsForVfScaling"},
- "shared": false,
- "jsonRepresentation": {"schema": {}}
- }]
- });
- const component = shallow(
- <LoopSvg.WrappedComponent loopCache={localLoopCache}/>
- );
-
- expect(component).toMatchSnapshot();
- });
-
- it('Test the render method', () => {
- const component = shallow(
- <LoopSvg.WrappedComponent loopCache={loopCache}/>
- );
-
- expect(component).toMatchSnapshot();
- });
-
- it('Test the render method svg not empty', async () => {
- const flushPromises = () => new Promise(setImmediate);
- LoopService.getSvg = jest.fn().mockImplementation(() => {
- return Promise.resolve("<svg><text test</text></svg>");
- });
- const component = shallow(
- <LoopSvg.WrappedComponent loopCache={loopCache}/>
- );
- await flushPromises();
- expect(component).toMatchSnapshot();
- });
-
- it('Test handleSvgClick', () => {
- const historyMock = { push: jest.fn() };
-
- const component = shallow(
- <LoopSvg.WrappedComponent loopCache={loopCache} history={historyMock}/>
- );
- let dummyElement = document.createElement('div');
- dummyElement.setAttribute("data-element-id","TCA_h2NMX_v1_0_ResourceInstanceName1_tca");
-
- const event = { target: { parentNode: { parentNode:{ parentNode: dummyElement }}}};
-
- component.simulate('click', event);
- component.update();
-
- expect(historyMock.push.mock.calls[0]).toEqual([ '/policyModal/MICRO-SERVICE-POLICY/TCA_h2NMX_v1_0_ResourceInstanceName1_tca']);
-
- //click operational policy
- dummyElement.setAttribute("data-element-id","OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca");
- const event2 = { target: { parentNode: { parentNode:{ parentNode: dummyElement }}}};
-
- component.simulate('click', event2);
- component.update();
-
- expect(historyMock.push.mock.calls[1]).toEqual([ '/policyModal/OPERATIONAL-POLICY/OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca']);
- });
-
- it('Test componentWillReceiveProps method', () => {
- const localLoopCache = new LoopCache({
- "microServicePolicies": [{
- "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
- "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
- "properties": {"domain": "measurementsForVfScaling"},
- "shared": false,
- "jsonRepresentation": {"schema": {}}
- }]
- });
- const component = shallow(
- <LoopSvg.WrappedComponent loopCache={localLoopCache}/>
- );
-
- expect(component.state('componentModalMapping').size).toEqual(1);
-
- component.setProps({loopCache: loopCache});
- expect(component.state('componentModalMapping').size).toEqual(2);
- });
-});
diff --git a/ui-react/src/components/loop_viewer/svg/SvgGenerator.js b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
new file mode 100644
index 0000000..d718c2e
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
@@ -0,0 +1,240 @@
+/*-
+ * ============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-dom";
+import LoopCache from '../../../api/LoopCache';
+import OnapConstant from '../../../utils/OnapConstants';
+
+const DivStyled = styled.div`
+ overflow-x: scroll;
+ width: 100%;
+ height: 100%;
+`
+
+const emptySvg = (<svg> <text x="20" y="40">No LOOP (SVG)</text> </svg>);
+
+class SvgGenerator extends React.Component {
+ boxWidth = 200;
+ boxHeight = 100;
+ boxSpace = 50;
+
+ static GENERATED_FROM_INSTANCE = "INSTANCE";
+ static GENERATED_FROM_TEMPLATE = "TEMPLATE";
+
+ state = {
+ loopCache: new LoopCache({}),
+ clickable: false,
+ generatedFrom: SvgGenerator.GENERATED_FROM_INSTANCE, // INSTANCE / TEMPLATE
+ }
+
+ constructor(props) {
+ super(props);
+ this.state.loopCache = props.loopCache;
+ this.state.clickable = props.clickable;
+ this.state.generatedFrom = props.generatedFrom;
+ this.handleSvgClick = this.handleSvgClick.bind(this);
+ this.renderSvg = this.renderSvg.bind(this);
+ }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ return this.state.loopCache !== nextState.loopCache;
+ }
+
+ componentWillReceiveProps(newProps) {
+ if (this.state.loopCache !== newProps.loopCache) {
+ this.setState({
+ loopCache: newProps.loopCache,
+ });
+ }
+ }
+
+ handleSvgClick(event) {
+ if (this.state.clickable) {
+ console.debug("svg click event received");
+ var elementName = event.target.parentNode.getAttribute('policyId');
+ console.info("SVG element clicked", elementName);
+ if (elementName !== null) {
+ this.props.history.push("/policyModal/"+event.target.parentNode.getAttribute('policyType')+"/"+elementName);
+ }
+ }
+ }
+
+ createVesBox (xPos) {
+ return this.createOneBox(xPos,null,null,'VES Collector','VES',null);
+ }
+
+ createOneArrow(xPos) {
+ return (
+ <svg width={this.boxSpace} height={this.boxHeight} x={xPos}>
+ <defs>
+ <marker viewBox="0 0 20 20" markerWidth="20" markerHeight="20" orient="auto" refX="8.5" refY="5" id="arrow">
+ <path d="m 1 5 l 0 -3 l 7 3 l -7 3 z"
+ stroke-width= "1" stroke-linecap= "butt" stroke-dasharray= "10000, 1"
+ fill="#000000" stroke="#000000" />
+ </marker>
+ </defs>
+ <line x1="0" y1="50%" x2="100%" y2="50%" stroke-width="2" color="black" stroke="black" marker-end="url(#arrow)"/>
+ </svg>
+ );
+ }
+
+ createBeginCircle(xPos, text) {
+ return (
+ <svg width={this.boxWidth} height={this.boxHeight} x={xPos}>
+ <circle cx={this.boxWidth-30} cy="50%" r="30" stroke-width="1" color="black" stroke="black" fill="#27ae60"/>
+ <text x={this.boxWidth-30} y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs" >{text}</text>
+ </svg>
+ );
+ }
+
+ createEndCircle(xPos, text) {
+ return (
+ <svg width={this.boxWidth} height={this.boxHeight} x={xPos}>
+ <circle cx={30} cy="50%" r="30" stroke-width="2" color="black" stroke="black" fill="#27ae60"/>
+ <text x={30} y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs" >{text}</text>
+ </svg>
+ );
+ }
+
+ createOneBox(xPos, policyId, loopElementModelId , name, title, policyType) {
+ return (
+ <svg width={this.boxWidth} height={this.boxHeight} x={xPos} title="test">
+ <g policyId={policyId} loopElementModelId={loopElementModelId} policyType={policyType}>
+ <rect width="100%" height="100%" stroke-width="2" color="black" stroke="black" fill="#1abc9c"/>
+ <text x="50%" y="15%" color="white" fill="white" dominant-baseline="middle" text-anchor="middle" textLength="50%" lengthAdjust="spacingAndGlyphs">{title}</text>
+ <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" textLength="80%" lengthAdjust="spacingAndGlyphs" >{name}</text>
+ <text x="50%" y="80%" text-anchor="middle" dominant-baseline="middle" textLength="110%" lengthAdjust="spacingAndGlyphs" >{policyId}</text>
+ </g>
+ </svg>
+ );
+ }
+
+ createSvgFromTemplate() {
+ const allElements = [];
+ var xPos = 0;
+
+ allElements.push(this.createBeginCircle(xPos,"Start"))
+ xPos+=(this.boxWidth+this.boxSpace);
+
+ allElements.push(this.createOneArrow(xPos-this.boxSpace));
+
+ allElements.push(this.createVesBox(xPos));
+ xPos+=(this.boxWidth+this.boxSpace);
+
+ allElements.push(this.createOneArrow(xPos-this.boxSpace));
+ //createOneBox(xPos, policyId, loopElementModelId , name, title, policyType)
+ for (var loopElement of this.state.loopCache.getAllLoopElementModels()) {
+
+ allElements.push(this.createOneBox(xPos,
+ loopElement['name'],
+ loopElement['name'],
+ loopElement['shortName'],
+ loopElement['loopElementType'],
+ loopElement['loopElementType']))
+ xPos+=(this.boxWidth+this.boxSpace);
+ allElements.push(this.createOneArrow(xPos-this.boxSpace));
+ }
+
+ allElements.push(this.createEndCircle(xPos, "End"))
+ xPos+=(this.boxWidth+this.boxSpace);
+
+ return allElements;
+ }
+
+ createSvgFromInstance() {
+ const allElements = [];
+ var xPos = 0;
+
+ allElements.push(this.createBeginCircle(xPos,"Start"))
+ xPos+=(this.boxWidth+this.boxSpace);
+
+ allElements.push(this.createOneArrow(xPos-this.boxSpace));
+
+ allElements.push(this.createVesBox(xPos));
+ xPos+=(this.boxWidth+this.boxSpace);
+
+ allElements.push(this.createOneArrow(xPos-this.boxSpace));
+
+ for (var msPolicy in this.state.loopCache.getMicroServicePolicies()) {
+ var loopElementModelName = this.state.loopCache.getMicroServicePolicies()[msPolicy]['loopElementModel'];
+ if (loopElementModelName !== undefined) {
+ loopElementModelName = loopElementModelName['name'];
+ }
+ allElements.push(this.createOneBox(xPos,
+ this.state.loopCache.getMicroServicePolicies()[msPolicy]['name'],
+ loopElementModelName,
+ this.state.loopCache.getMicroServicePolicies()[msPolicy]['policyModel']['policyAcronym'],
+ 'microservice',
+ OnapConstant.microServiceType))
+ xPos+=(this.boxWidth+this.boxSpace);
+ allElements.push(this.createOneArrow(xPos-this.boxSpace));
+ }
+
+ for (var opPolicy in this.state.loopCache.getOperationalPolicies()) {
+ loopElementModelName = this.state.loopCache.getOperationalPolicies()[opPolicy]['loopElementModel'];
+ if (loopElementModelName !== undefined) {
+ loopElementModelName = loopElementModelName['name'];
+ }
+ allElements.push(this.createOneBox(xPos,
+ this.state.loopCache.getOperationalPolicies()[opPolicy]['name'],
+ loopElementModelName,
+ this.state.loopCache.getOperationalPolicies()[opPolicy]['policyModel']['policyAcronym'],
+ 'operational',
+ OnapConstant.operationalPolicyType))
+ xPos+=(this.boxWidth+this.boxSpace);
+ allElements.push(this.createOneArrow(xPos-this.boxSpace));
+ }
+
+ allElements.push(this.createEndCircle(xPos, "End"))
+ xPos+=(this.boxWidth+this.boxSpace);
+
+ return allElements;
+ }
+
+ renderSvg() {
+ if (this.state.loopCache.getLoopName() === undefined) {
+ return [emptySvg];
+ }
+ if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_INSTANCE) {
+ return this.createSvgFromInstance();
+ } else if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_TEMPLATE) {
+ return this.createSvgFromTemplate();
+ }
+ }
+
+ render() {
+ var allTheElements = this.renderSvg();
+ var svgWidth = this.boxWidth*allTheElements.length;
+ var svgHeight = this.boxHeight+100;
+ return (
+ <DivStyled onClick={this.handleSvgClick} >
+ <svg height={svgHeight} width={svgWidth} preserveAspectRatio="none">
+ {allTheElements}
+ </svg>
+ </DivStyled>
+ );
+ }
+}
+
+export default withRouter(SvgGenerator);
diff --git a/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap b/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap
deleted file mode 100644
index e05f1c7..0000000
--- a/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap
+++ /dev/null
@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify LoopSvg Test the render method 1`] = `
-<styled.svg
- dangerouslySetInnerHTML={
- Object {
- "__html": "<svg><text x=\\"20\\" y=\\"40\\">No LOOP (SVG)</text></svg>",
- }
- }
- onClick={[Function]}
-/>
-`;
-
-exports[`Verify LoopSvg Test the render method no loopName 1`] = `
-<styled.svg
- dangerouslySetInnerHTML={
- Object {
- "__html": "<svg><text x=\\"20\\" y=\\"40\\">No LOOP (SVG)</text></svg>",
- }
- }
- onClick={[Function]}
-/>
-`;
-
-exports[`Verify LoopSvg Test the render method svg not empty 1`] = `
-<styled.svg
- dangerouslySetInnerHTML={
- Object {
- "__html": "<svg><text test</text></svg>",
- }
- }
- onClick={[Function]}
-/>
-`;
diff --git a/ui-react/src/components/loop_viewer/svg/example.svg b/ui-react/src/components/loop_viewer/svg/example.svg
deleted file mode 100644
index a7c40ee..0000000
--- a/ui-react/src/components/loop_viewer/svg/example.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js
index 64fd7c5..43aa30f 100644
--- a/ui-react/src/theme/globalStyle.js
+++ b/ui-react/src/theme/globalStyle.js
@@ -51,12 +51,6 @@
margin-top: 1px;
}
- svg {
- overflow: hidden;
- width: 100%;
- height: 100%;
- }
-
label {
font-family: ${props => props.theme.fontFamily};
font-size: ${props => props.theme.fontSize};
@@ -68,6 +62,7 @@
font-size: ${props => props.theme.fontSize};
font-weight: bold;
}
+
`
export const DefaultClampTheme = {
diff --git a/ui-react/src/utils/OnapConstants.js b/ui-react/src/utils/OnapConstants.js
index 22460c3..8460340 100644
--- a/ui-react/src/utils/OnapConstants.js
+++ b/ui-react/src/utils/OnapConstants.js
@@ -24,7 +24,9 @@
// Maintain a list of ONAP CLAMP UI "constants" that can be used by any componenet within CLAMP
const OnapConstants = {
- defaultLoopName: "Empty (NO loop loaded yet)"
+ defaultLoopName: "Empty (NO loop loaded yet)",
+ microServiceType: "MICRO-SERVICE-POLICY",
+ operationalPolicyType: "OPERATIONAL_POLICY_TYPE"
};
export default OnapConstants;
