aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src/components/dialogs
diff options
context:
space:
mode:
authorsebdet <sebastien.determe@intl.att.com>2020-05-18 12:31:11 +0200
committersebdet <sebastien.determe@intl.att.com>2020-05-20 18:00:03 +0200
commitc0ec0fc448af1c5d6eacb195e95938c921ba1bce (patch)
treef294596a5aa001f76fa4cd6f1a3c88d669fadd32 /ui-react/src/components/dialogs
parent061ecec6a6099ad7fb480b0fe67f6e5154f9db23 (diff)
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
Diffstat (limited to 'ui-react/src/components/dialogs')
-rw-r--r--ui-react/src/components/dialogs/Loop/CreateLoopModal.js74
-rw-r--r--ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js25
-rw-r--r--ui-react/src/components/dialogs/Loop/OpenLoopModal.js45
-rw-r--r--ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js12
-rw-r--r--ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap11
-rw-r--r--ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap13
-rw-r--r--ui-react/src/components/dialogs/Policy/PolicyModal.js91
-rw-r--r--ui-react/src/components/dialogs/Policy/PolicyModal.test.js3
-rw-r--r--ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js68
-rw-r--r--ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js3
-rw-r--r--ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap28
11 files changed, 179 insertions, 194 deletions
diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
index e98b59566..a8e8dee1f 100644
--- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
@@ -30,46 +30,33 @@ import Col from 'react-bootstrap/Col';
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 @@ export default class CreateLoopModal extends React.Component {
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 @@ export default class CreateLoopModal extends React.Component {
<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 18ec6fdce..5b6ea9e62 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 @@ describe('Verify CreateLoopModal', () => {
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 @@ describe('Verify CreateLoopModal', () => {
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 c04883443..7ca90b493 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -30,6 +30,8 @@ import Col from 'react-bootstrap/Col';
import FormCheck from 'react-bootstrap/FormCheck'
import styled from 'styled-components';
import LoopService from '../../../api/LoopService';
+import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
+import LoopCache from '../../../api/LoopCache';
const ModalStyled = styled(Modal)`
background-color: transparent;
@@ -37,21 +39,6 @@ const ModalStyled = styled(Modal)`
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 @@ export default class OpenLoopModal extends React.Component {
this.getLoopNames = this.getLoopNames.bind(this);
this.handleOpen = this.handleOpen.bind(this);
this.handleClose = this.handleClose.bind(this);
- this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
+ this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
this.showReadOnly = props.showReadOnly ? props.showReadOnly : true;
this.state = {
show: true,
chosenLoopName: '',
loopNames: [],
- content:''
+ loopCacheOpened: new LoopCache({})
};
}
@@ -79,14 +66,12 @@ export default class OpenLoopModal extends React.Component {
this.props.history.push('/');
}
- handleDropdownListChange(e) {
- this.setState({ chosenLoopName: e.value });
- LoopService.getSvg(e.value).then(svgXml => {
- if (svgXml.length !== 0) {
- this.setState({ content: svgXml })
- } else {
- this.setState({ content: 'Error1' })
- }
+ handleDropDownListChange(e) {
+ LoopService.getLoop(e.value).then(loop => {
+ this.setState({
+ chosenLoopName: e.value,
+ loopCacheOpened: new LoopCache(loop)
+ });
});
}
@@ -95,9 +80,7 @@ export default class OpenLoopModal extends React.Component {
if (Object.entries(loopNames).length !== 0) {
const loopOptions = loopNames.filter(loopName => loopName!=='undefined').map((loopName) => { return { label: loopName, value: loopName } });
this.setState({ loopNames: loopOptions })
-
}
-
});
}
@@ -117,20 +100,18 @@ export default class OpenLoopModal extends React.Component {
<Form.Group as={Row} controlId="formPlaintextEmail">
<Form.Label column sm="2">Model Name:</Form.Label>
<Col sm="10">
- <Select onChange={this.handleDropdownListChange}
+ <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 f362cfaa6..1865869df 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 @@ describe('Verify OpenLoopModal', () => {
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 305c87bf2..e69b809c7 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 @@ exports[`Verify CreateLoopModal Test the render method 1`] = `
<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 196854446..477260477 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 @@ exports[`Verify OpenLoopModal Test the render method 1`] = `
<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 @@ exports[`Verify OpenLoopModal Test the render method 1`] = `
"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 5930386c2..d3b427396 100644
--- a/ui-react/src/components/dialogs/Policy/PolicyModal.js
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js
@@ -33,6 +33,7 @@ import LoopService from '../../../api/LoopService';
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 @@ export default class PolicyModal extends React.Component {
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 @@ export default class PolicyModal extends React.Component {
}
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 @@ export default class PolicyModal extends React.Component {
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 @@ export default class PolicyModal extends React.Component {
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 @@ export default class PolicyModal extends React.Component {
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 @@ export default class PolicyModal extends React.Component {
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 @@ export default class PolicyModal extends React.Component {
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 @@ export default class PolicyModal extends React.Component {
{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 d4021c97c..cb0a32020 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 { mount } from 'enzyme';
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 @@ describe('Verify PolicyModal', () => {
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 7cf02f711..962ab4bda 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -34,30 +34,12 @@ import FirstPage from '@material-ui/icons/FirstPage';
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 @@ export default class ViewLoopTemplatesModal extends React.Component {
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 @@ export default class ViewLoopTemplatesModal extends React.Component {
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 @@ export default class ViewLoopTemplatesModal extends React.Component {
<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 1a6cc1959..7680ec4b9 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 React from 'react';
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 @@ describe('Verify ViewLoopTemplatesModal', () => {
}
});
});
- 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 3f6dc9482..ee7b679a5 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 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1
},
]
}
- 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 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1
}
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