diff options
Diffstat (limited to 'ui-react')
8 files changed, 143 insertions, 80 deletions
diff --git a/ui-react/src/api/TemplateService.js b/ui-react/src/api/TemplateService.js index 124d29c2..615a87e9 100644 --- a/ui-react/src/api/TemplateService.js +++ b/ui-react/src/api/TemplateService.js @@ -54,6 +54,23 @@ export default class TemplateService { return {}; }); } + + static getBlueprintMicroServiceTemplate(templateName) { + return fetch('/restservices/clds/v2/templates/' + templateName + ' /svgRepresentation', { method: 'GET', credentials: 'same-origin', }) + .then(function (response) { + console.debug("getBlueprintMicroServiceTemplate response received: ", response.status); + if (response.ok) { + return response.text(); + } else { + console.error("getBlueprintMicroServiceTemplates query failed"); + return {}; + } + }) + .catch(function (error) { + console.error("getBlueprintMicroServiceTemplate error received", error); + return {}; + }); + } static getDictionary() { return fetch('restservices/clds/v2/dictionary/', { method: 'GET', credentials: 'same-origin', }) diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js index d6c5e357..e3820779 100644 --- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js @@ -34,6 +34,14 @@ import TemplateService from '../../../api/TemplateService'; const ModalStyled = styled(Modal)` background-color: transparent; ` +const LoopViewSvgDivStyled = styled.div` + overflow: hidden; + background-color: ${props => (props.theme.loopViewerBackgroundColor)}; + border-color: ${props => (props.theme.loopViewerHeaderColor)}; + margin-left: auto; + margin-right:auto; + text-align: center; +` export default class CreateLoopModal extends React.Component { constructor(props, context) { @@ -46,6 +54,7 @@ export default class CreateLoopModal extends React.Component { this.handleDropdownListChange = this.handleDropdownListChange.bind(this); this.state = { show: true, + content: '', chosenTemplateName: '', modelName: '', templateNames: [] @@ -63,6 +72,13 @@ export default class CreateLoopModal extends React.Component { handleDropdownListChange(e) { this.setState({ chosenTemplateName: e.value }); + TemplateService.getBlueprintMicroServiceTemplates(e.value).then(svgXml => { + if (svgXml.length !== 0) { + this.setState({ content: svgXml }) + } else { + this.setState({ content: 'Error1' }) + } + }) } getTemplateNames() { @@ -77,7 +93,7 @@ export default class CreateLoopModal extends React.Component { alert("A model name is required"); return; } - console.info("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen"); + console.debug("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen"); this.setState({ show: false }); LoopService.createLoop("LOOP_" + this.state.modelName, this.state.chosenTemplateName).then(text => { console.debug("CreateLoop response received: ", text); @@ -92,18 +108,17 @@ export default class CreateLoopModal extends React.Component { .catch(error => { console.debug("Create Loop failed"); }); - } handleModelName = event => { - this.setState({ - modelName: event.target.value - }) + this.setState({ + modelName: event.target.value + }) } render() { return ( - <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}> + <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}> <Modal.Header closeButton> <Modal.Title>Create Model</Modal.Title> </Modal.Header> @@ -115,6 +130,10 @@ export default class CreateLoopModal extends React.Component { </Col> </Form.Group> <Form.Group controlId="formPlaintextEmail"> + <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} value={this.state.content} > + </LoopViewSvgDivStyled> + </Form.Group> + <Form.Group controlId="formPlaintextEmail"> <Form.Label column sm="2">Model Name:</Form.Label> <input type="text" style={{width: '50%'}} value={this.state.modelName} @@ -127,7 +146,6 @@ export default class CreateLoopModal extends React.Component { <Button variant="primary" type="submit" onClick={this.handleCreate}>Create</Button> </Modal.Footer> </ModalStyled> - ); } }
\ No newline at end of file diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js index 4e8d9782..7c98fab4 100644 --- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js @@ -37,6 +37,14 @@ const ModalStyled = styled(Modal)` const CheckBoxStyled = styled(FormCheck.Input)` margin-left:3rem; ` +const LoopViewSvgDivStyled = styled.div` + overflow: hidden; + background-color: ${props => (props.theme.loopViewerBackgroundColor)}; + border-color: ${props => (props.theme.loopViewerHeaderColor)}; + margin-left: auto; + margin-right:auto; + text-align: center; +` export default class OpenLoopModal extends React.Component { constructor(props, context) { @@ -49,7 +57,8 @@ export default class OpenLoopModal extends React.Component { this.state = { show: true, chosenLoopName: '', - loopNames: [] + loopNames: [], + content:'' }; } @@ -64,6 +73,13 @@ export default class OpenLoopModal extends React.Component { 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' }) + } + }); } getLoopNames() { @@ -71,7 +87,9 @@ 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 }) + } + }); } @@ -83,7 +101,7 @@ export default class OpenLoopModal extends React.Component { render() { return ( - <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}> + <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}> <Modal.Header closeButton> <Modal.Title>Open Model</Modal.Title> </Modal.Header> @@ -91,9 +109,14 @@ 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} options={this.state.loopNames} /> + <Select onChange={this.handleDropdownListChange} + options={this.state.loopNames} /> </Col> </Form.Group> + <Form.Group controlId="formPlaintextEmail"> + <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} value={this.state.content} > + </LoopViewSvgDivStyled> + </Form.Group> <Form.Group controlId="formBasicChecbox"> <Form.Check> <FormCheck.Label>Read Only</FormCheck.Label> diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js index 208c947c..f362cfaa 100644 --- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js +++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js @@ -28,12 +28,12 @@ describe('Verify OpenLoopModal', () => { beforeEach(() => { fetch.resetMocks(); - fetch.mockResponseOnce(JSON.stringify([ + fetch.mockResponse(JSON.stringify([ "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca", "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3", "LOOP_gmtAS_v1_0_ResourceInstanceName2_tca_2" ])); - }) + }); it('Test the render method', () => { @@ -44,12 +44,12 @@ describe('Verify OpenLoopModal', () => { it('Onchange event', () => { const event = {value: 'LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3'}; const component = shallow(<OpenLoopModal/>); - component.find('StateManager').simulate('change', event); component.update(); expect(component.state('chosenLoopName')).toEqual("LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3"); }); + it('Test handleClose', () => { const historyMock = { push: jest.fn() }; const handleClose = jest.spyOn(OpenLoopModal.prototype,'handleClose'); 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 9e722241..1aa0b5ae 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 @@ -4,7 +4,7 @@ exports[`Verify OpenLoopModal Test the render method 1`] = ` <Styled(Bootstrap(Modal)) onHide={[Function]} show={true} - size="lg" + size="xl" > <ModalHeader closeButton={true} @@ -47,6 +47,18 @@ exports[`Verify OpenLoopModal Test the render method 1`] = ` </Col> </FormGroup> <FormGroup + controlId="formPlaintextEmail" + > + <styled.div + dangerouslySetInnerHTML={ + Object { + "__html": "", + } + } + value="" + /> + </FormGroup> + <FormGroup controlId="formBasicChecbox" > <FormCheck diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js index 89e5697c..18c44404 100644 --- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js +++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js @@ -38,22 +38,26 @@ import MaterialTable from "material-table"; const ModalStyled = styled(Modal)` background-color: transparent; ` -const TextModal = styled.textarea` -margin-top: 20px; -white-space:pre; -background-color: ${props => props.theme.toscaTextareaBackgroundColor};; -text-align: justify; -font-size: ${props => props.theme.toscaTextareaFontSize};; -width: 100%; -height: 300px; +const LoopViewSvgDivStyled = styled.div` + overflow: hidden; + background-color: ${props => (props.theme.loopViewerBackgroundColor)}; + border-color: ${props => (props.theme.loopViewerHeaderColor)}; + margin-left: auto; + margin-right:auto; + text-align: center; + margin-top: 20px; ` +const SvgContainerDivStyled = styled.div` + border: 1px solid; +` + const cellStyle = { border: '1px solid black' }; const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' }; const rowHeaderStyle = {backgroundColor:'#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black'}; export default class ViewLoopTemplatesModal extends React.Component { state = { - show: true, + show: true, content: 'Please select a loop template to display it', selectedRow: -1, loopTemplateData: [], @@ -97,8 +101,7 @@ export default class ViewLoopTemplatesModal extends React.Component { constructor(props, context) { super(props, context); this.handleClose = this.handleClose.bind(this); - this.getBlueprintMicroServiceTemplates = this.getBlueprintMicroServiceTemplates.bind(this); - this.handleYamlContent = this.handleYamlContent.bind(this); + this.getBlueprintMicroServiceTemplate = this.getBlueprintMicroServiceTemplate.bind(this); this.getBlueprintMicroServiceTemplates(); } @@ -108,11 +111,20 @@ export default class ViewLoopTemplatesModal extends React.Component { }); } - handleYamlContent = event => { - this.setState({ - content: event.target.value - }); - } + getBlueprintMicroServiceTemplate(templateName) { + if (typeof templateName !== "undefined") { + TemplateService.getBlueprintMicroServiceTemplate(templateName).then(svgXml => { + if (svgXml.length !== 0) { + this.setState({ content: svgXml }) + } else { + this.setState({ content: 'Please select a loop template to view the details' }) + + } + }); + } else { + this.setState({ content: 'Please select a loop template to view the details' }) + } + } handleClose() { this.setState({ show: false }); @@ -121,30 +133,31 @@ export default class ViewLoopTemplatesModal extends React.Component { render() { return ( - <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}> - <Modal.Header closeButton> - </Modal.Header> - <Modal.Body> - <MaterialTable - title={"View Blueprint MicroService Templates"} - data={this.state.loopTemplateData} + <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}> + <Modal.Header closeButton> + </Modal.Header> + <Modal.Body> + <MaterialTable + title={"View Blueprint MicroService Templates"} + data={this.state.loopTemplateData} columns={this.state.loopTemplateColumnsDefinition} icons={this.state.tableIcons} - onRowClick={(event, rowData) => {this.setState({content: rowData.name, selectedRow: rowData.tableData.id})}} + onRowClick={(event, rowData) => {this.getBlueprintMicroServiceTemplate(rowData.name);this.setState({selectedRow: rowData.tableData.id})}} options={{ - headerStyle:rowHeaderStyle, - rowStyle: rowData => ({ - backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF' - }) - }} - /> - <div> - <TextModal value={this.state.content} onChange={this.handleYamlContent} /> - </div> - </Modal.Body> - <Modal.Footer> - <Button variant="secondary" onClick={this.handleClose}>Close</Button> - </Modal.Footer> + 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> + </Modal.Body> + <Modal.Footer> + <Button variant="secondary" onClick={this.handleClose}>Close</Button> + </Modal.Footer> </ModalStyled> ); } diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js index 94d4acdc..ddfb2a70 100644 --- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js +++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js @@ -28,8 +28,7 @@ import { mount } from 'enzyme'; describe('Verify ViewLoopTemplatesModal', () => { beforeEach(() => { fetch.resetMocks(); - } - ); + }); it('Test API Successful', () => { fetch.mockImplementationOnce(() => { @@ -133,29 +132,6 @@ describe('Verify ViewLoopTemplatesModal', () => { const component = mount(<ViewLoopTemplatesModal/>); expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy(); }); - - it('Test handleYamlContent', () => { - fetch.mockImplementationOnce(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - return Promise.resolve({ - "index": "1", - "name": "MTCA version 1", - "modelService.serviceDetails.name": "MTCA", - "allowedLoopType" : "CLOSED", - "maximumInstancesAllowed":1, - "updatedDate":"2019-09-06 19:09:42" - }); - } - }); - }); - const yamlContent = 'MTCA version 1'; - const component = shallow(<ViewLoopTemplatesModal/>); - component.find('[value="Please select a loop template to display it"]').prop('onChange')({ target: { value: yamlContent }}); - expect(component.state('content')).toEqual(yamlContent); - }); it('Test handleClose', () => { fetch.mockImplementationOnce(() => { 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 efec96e9..253820f8 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 @@ -140,12 +140,16 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1 } title="View Blueprint MicroService Templates" /> - <div> - <styled.textarea - onChange={[Function]} + <styled.div> + <styled.div + dangerouslySetInnerHTML={ + Object { + "__html": "Please select a loop template to display it", + } + } value="Please select a loop template to display it" /> - </div> + </styled.div> </ModalBody> <ModalFooter> <Button |