aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src/components/dialogs/Loop
diff options
context:
space:
mode:
Diffstat (limited to 'ui-react/src/components/dialogs/Loop')
-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
6 files changed, 79 insertions, 101 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}