aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src/components/dialogs/Tosca
diff options
context:
space:
mode:
Diffstat (limited to 'ui-react/src/components/dialogs/Tosca')
-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
3 files changed, 34 insertions, 65 deletions
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