diff options
author | Sébastien Determe <sebastien.determe@intl.att.com> | 2020-04-01 10:01:12 +0000 |
---|---|---|
committer | Gerrit Code Review <gerrit@onap.org> | 2020-04-01 10:01:12 +0000 |
commit | 99f15c6328f77649ccfc7b1b790c98385754fd6a (patch) | |
tree | ec21110a190c391d5f28384f1512287687d92fed /ui-react/src/components/dialogs/Loop/CreateLoopModal.js | |
parent | 1eafc9448d24f5b0eda40f62566bdf93cc4f5a6e (diff) | |
parent | 3173d554371bae1eefafc69b2bc9da5543510dd5 (diff) |
Merge "Update template menu UI"
Diffstat (limited to 'ui-react/src/components/dialogs/Loop/CreateLoopModal.js')
-rw-r--r-- | ui-react/src/components/dialogs/Loop/CreateLoopModal.js | 32 |
1 files changed, 25 insertions, 7 deletions
diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js index d6c5e3579..e38207792 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 |