diff options
Diffstat (limited to 'ui-react/src/components/dialogs/Tosca')
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 |