From c0ec0fc448af1c5d6eacb195e95938c921ba1bce Mon Sep 17 00:00:00 2001 From: sebdet Date: Mon, 18 May 2020 12:31:11 +0200 Subject: Create SVG in UI Remove the SVG generation from the backend and put it in the UI Issue-ID: CLAMP-854 Signed-off-by: sebdet Change-Id: Icfa9e107d83bb244ac3d87300d013555bfa0b037 --- .../dialogs/Tosca/ViewLoopTemplatesModal.js | 68 ++++++++-------------- .../dialogs/Tosca/ViewLoopTemplatesModal.test.js | 3 +- .../ViewLoopTemplatesModal.test.js.snap | 28 +++------ 3 files changed, 34 insertions(+), 65 deletions(-) (limited to 'ui-react/src/components/dialogs/Tosca') 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 { {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' }) }} - /> - - - - + /> + 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(); + const component = mount(); 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" /> - - - + } + />