diff options
author | 2020-05-18 12:31:11 +0200 | |
---|---|---|
committer | 2020-05-20 18:00:03 +0200 | |
commit | c0ec0fc448af1c5d6eacb195e95938c921ba1bce (patch) | |
tree | f294596a5aa001f76fa4cd6f1a3c88d669fadd32 /ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js | |
parent | 061ecec6a6099ad7fb480b0fe67f6e5154f9db23 (diff) |
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 <sebastien.determe@intl.att.com>
Change-Id: Icfa9e107d83bb244ac3d87300d013555bfa0b037
Diffstat (limited to 'ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js')
-rw-r--r-- | ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js | 68 |
1 files changed, 23 insertions, 45 deletions
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> |