diff options
Diffstat (limited to 'ui-react/src/components/dialogs/Loop')
8 files changed, 126 insertions, 42 deletions
diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js index 321304a6..e98b5956 100644 --- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js @@ -34,13 +34,20 @@ import TemplateService from '../../../api/TemplateService'; const ModalStyled = styled(Modal)` background-color: transparent; ` -const LoopViewSvgDivStyled = styled.div` - overflow: hidden; +const LoopViewSvgDivStyled = styled.svg` + display: flex; + flex-direction: row; + overflow-x: scroll; background-color: ${props => (props.theme.loopViewerBackgroundColor)}; border-color: ${props => (props.theme.loopViewerHeaderColor)}; + margin-top: 3em; margin-left: auto; margin-right:auto; + margin-bottom: -1em; text-align: center; + align-items: center; + height: 100%; + width: 100%; ` export default class CreateLoopModal extends React.Component { @@ -118,24 +125,28 @@ export default class CreateLoopModal extends React.Component { render() { return ( - <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static"> + <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} > <Modal.Header closeButton> <Modal.Title>Create Model</Modal.Title> </Modal.Header> <Modal.Body> <Form.Group as={Row} controlId="formPlaintextEmail"> - <Form.Label column sm="2">Template Name</Form.Label> + <Form.Label column sm="2">Template Name:</Form.Label> <Col sm="10"> <Select onChange={this.handleDropdownListChange} options={this.state.templateNames} /> </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.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview"> + <Form.Label column sm="2">Model Preview:</Form.Label> + <Col sm="10"> + <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} + value={this.state.content} > + </LoopViewSvgDivStyled> + </Col> + </Form.Group> + <Form.Group as={Row} controlId="formPlaintextEmail"> <Form.Label column sm="2">Model Name:</Form.Label> - <input type="text" style={{width: '50%'}} + <input type="text" style={{width: '50%', marginLeft: '1em' }} value={this.state.modelName} onChange={this.handleModelName} /> @@ -148,4 +159,4 @@ export default class CreateLoopModal extends React.Component { </ModalStyled> ); } -}
\ No newline at end of file +} diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js index 853df1c8..2155977f 100644 --- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js @@ -161,7 +161,7 @@ export default class DeployLoopModal extends React.Component { } render() { return ( - <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static"> + <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} > <Modal.Header closeButton> <Modal.Title>Deployment parameters</Modal.Title> </Modal.Header> diff --git a/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js index 97b78224..c0a2084f 100644 --- a/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js +++ b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js @@ -102,7 +102,7 @@ export default class LoopPropertiesModal extends React.Component { render() { return ( - <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static"> + <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} > <Modal.Header closeButton> <Modal.Title>Model Properties</Modal.Title> </Modal.Header> diff --git a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js index 8886dbfd..5154a880 100644 --- a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js @@ -37,7 +37,7 @@ import Search from '@material-ui/icons/Search'; import LoopService from '../../../api/LoopService'; import Tabs from 'react-bootstrap/Tabs'; import Tab from 'react-bootstrap/Tab'; - +import Alert from 'react-bootstrap/Alert'; const ModalStyled = styled(Modal)` background-color: transparent; @@ -65,6 +65,7 @@ export default class ModifyLoopModal extends React.Component { toscaPolicyModelsData: [], selectedPolicyModelsData: [], key: 'add', + showFailAlert: false, toscaColumns: [ { title: "#", field: "index", render: rowData => rowData.tableData.id + 1, cellStyle: cellStyle, @@ -166,10 +167,25 @@ export default class ModifyLoopModal extends React.Component { this.props.history.push('/'); } + renderAlert() { + return ( + <div> + <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible> + {this.state.showMessage} + </Alert> + </div> + ); + } + handleAdd() { - LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version); - this.props.loadLoopFunction(this.state.loopCache.getLoopName()); - this.handleClose(); + LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version) + .then(pars => { + this.props.loadLoopFunction(this.state.loopCache.getLoopName()); + this.handleClose(); + }) + .catch(error => { + this.setState({ showFailAlert: true, showMessage: "Adding failed with error: " + error.message}); + }); } handleRemove() { @@ -180,7 +196,7 @@ export default class ModifyLoopModal extends React.Component { render() { return ( - <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static"> + <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} > <Modal.Header closeButton> <Modal.Title>Modify Loop Operational Policies</Modal.Title> </Modal.Header> @@ -198,13 +214,14 @@ export default class ModifyLoopModal extends React.Component { rowStyle: rowData => ({ backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined && this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF' - }) + }) }} /> <div> <TextModal value={this.state.content} onChange={this.handleYamlContent}/> </div> </Modal.Body> + {this.renderAlert()} </Tab> <Tab eventKey="remove" title="Remove Operational Policies"> <Modal.Body> diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js index 15a71888..c0488344 100644 --- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js @@ -37,13 +37,20 @@ const ModalStyled = styled(Modal)` const CheckBoxStyled = styled(FormCheck.Input)` margin-left:3rem; ` -const LoopViewSvgDivStyled = styled.div` - overflow: hidden; +const LoopViewSvgDivStyled = styled.svg` + overflow-x: scroll; + display: flex; + flex-direction: row; background-color: ${props => (props.theme.loopViewerBackgroundColor)}; border-color: ${props => (props.theme.loopViewerHeaderColor)}; + margin-top: 2em; margin-left: auto; margin-right:auto; + margin-bottom: -3em; text-align: center; + align-items: center; + height: 100%; + width: 100%; ` export default class OpenLoopModal extends React.Component { @@ -54,6 +61,7 @@ export default class OpenLoopModal extends React.Component { this.handleOpen = this.handleOpen.bind(this); this.handleClose = this.handleClose.bind(this); this.handleDropdownListChange = this.handleDropdownListChange.bind(this); + this.showReadOnly = props.showReadOnly ? props.showReadOnly : true; this.state = { show: true, chosenLoopName: '', @@ -101,28 +109,34 @@ export default class OpenLoopModal extends React.Component { render() { return ( - <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static"> + <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} > <Modal.Header closeButton> <Modal.Title>Open Model</Modal.Title> </Modal.Header> <Modal.Body> <Form.Group as={Row} controlId="formPlaintextEmail"> - <Form.Label column sm="2">Model Name</Form.Label> + <Form.Label column sm="2">Model Name:</Form.Label> <Col sm="10"> <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> - <CheckBoxStyled type="checkbox" /> - </Form.Check> + <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview"> + <Form.Label column sm="2">Model Preview:</Form.Label> + <Col sm="10"> + <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} + value={this.state.content} > + </LoopViewSvgDivStyled> + </Col> </Form.Group> + {this.showReadOnly === true ? + <Form.Group as={Row} controlId="formBasicChecbox"> + <Form.Check> + <FormCheck.Label>Read Only Mode:</FormCheck.Label> + <CheckBoxStyled style={{marginLeft: '3.5em'}} type="checkbox" /> + </Form.Check> + </Form.Group> + : null} </Modal.Body> <Modal.Footer> <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button> diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap index c9acb9e1..8d0faa5f 100644 --- a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap +++ b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap @@ -3,6 +3,7 @@ exports[`Verify DeployLoopModal Test the render method 1`] = ` <Styled(Bootstrap(Modal)) backdrop="static" + keyboard={false} onHide={[Function]} show={true} size="lg" diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap index 0fde7a56..233c560a 100644 --- a/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap +++ b/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap @@ -3,6 +3,7 @@ exports[`Verify LoopPropertiesModal Test the render method 1`] = ` <Styled(Bootstrap(Modal)) backdrop="static" + keyboard={false} onHide={[Function]} show={true} size="lg" 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 1c98195b..19685444 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 @@ -3,6 +3,7 @@ exports[`Verify OpenLoopModal Test the render method 1`] = ` <Styled(Bootstrap(Modal)) backdrop="static" + keyboard={false} onHide={[Function]} show={true} size="xl" @@ -33,7 +34,7 @@ exports[`Verify OpenLoopModal Test the render method 1`] = ` sm="2" srOnly={false} > - Model Name + Model Name: </FormLabel> <Col sm="10" @@ -48,18 +49,52 @@ exports[`Verify OpenLoopModal Test the render method 1`] = ` </Col> </FormGroup> <FormGroup - controlId="formPlaintextEmail" + as={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "noGutters": false, + }, + "render": [Function], + } + } + controlId="formSvgPreview" + style={ + Object { + "alignItems": "center", + } + } > - <styled.div - dangerouslySetInnerHTML={ - Object { - "__html": "", + <FormLabel + column={true} + sm="2" + srOnly={false} + > + Model Preview: + </FormLabel> + <Col + sm="10" + > + <styled.svg + dangerouslySetInnerHTML={ + Object { + "__html": "", + } } - } - value="" - /> + value="" + /> + </Col> </FormGroup> <FormGroup + as={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "noGutters": false, + }, + "render": [Function], + } + } controlId="formBasicChecbox" > <FormCheck @@ -71,9 +106,14 @@ exports[`Verify OpenLoopModal Test the render method 1`] = ` type="checkbox" > <FormCheckLabel> - Read Only + Read Only Mode: </FormCheckLabel> <Styled(FormCheckInput) + style={ + Object { + "marginLeft": "3.5em", + } + } type="checkbox" /> </FormCheck> |