diff options
Diffstat (limited to 'ui-react/src')
24 files changed, 460 insertions, 538 deletions
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index efd02b41..6522cc3d 100644 --- a/ui-react/src/LoopUI.js +++ b/ui-react/src/LoopUI.js @@ -29,7 +29,7 @@ import logo from './logo.png'; 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 @@ export default class LoopUI extends React.Component { 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 ff08f7af..d8b2e7be 100644 --- a/ui-react/src/__snapshots__/LoopUI.test.js.snap +++ b/ui-react/src/__snapshots__/LoopUI.test.js.snap @@ -180,7 +180,9 @@ exports[`Verify LoopUI Test the render method 1`] = ` ) </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 93dc4428..39b54455 100644 --- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap +++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap @@ -205,7 +205,9 @@ exports[`Verify OnapClamp Test the render method 1`] = ` ) </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 4f22dc2b..3e19b4fc 100644 --- a/ui-react/src/api/LoopCache.js +++ b/ui-react/src/api/LoopCache.js @@ -221,9 +221,32 @@ export default class LoopCache { } 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 eddd58df..3a780dd6 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 e98b5956..a8e8dee1 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 18ec6fdc..5b6ea9e6 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 c0488344..7ca90b49 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 f362cfaa..1865869d 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 305c87bf..e69b809c 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 19685444..47726047 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 5930386c..d3b42739 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 d4021c97..cb0a3202 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 7cf02f71..962ab4bd 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 1a6cc195..7680ec4b 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 3f6dc948..ee7b679a 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 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 29422a1f..00000000 --- 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 048f6304..00000000 --- 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 e54b500f..00000000 --- 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 00000000..d718c2e4 --- /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 e05f1c79..00000000 --- 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 a7c40ee2..00000000 --- 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 64fd7c5d..43aa30f0 100644 --- a/ui-react/src/theme/globalStyle.js +++ b/ui-react/src/theme/globalStyle.js @@ -51,12 +51,6 @@ export const GlobalClampStyle = createGlobalStyle` 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 @@ export const GlobalClampStyle = createGlobalStyle` 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 22460c3d..8460340d 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; |
