diff options
Diffstat (limited to 'ui-react')
33 files changed, 385 insertions, 157 deletions
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index bc3f2355e..efd02b41f 100644 --- a/ui-react/src/LoopUI.js +++ b/ui-react/src/LoopUI.js @@ -109,7 +109,8 @@ export default class LoopUI extends React.Component { userName: null, loopName: OnapConstants.defaultLoopName, loopCache: new LoopCache({}), - showAlert: false + showSucAlert: false, + showFailAlert: false }; constructor() { @@ -119,7 +120,8 @@ export default class LoopUI extends React.Component { this.updateLoopCache = this.updateLoopCache.bind(this); this.loadLoop = this.loadLoop.bind(this); this.closeLoop = this.closeLoop.bind(this); - this.showAlert = this.showAlert.bind(this); + this.showSucAlert = this.showSucAlert.bind(this); + this.showFailAlert = this.showFailAlert.bind(this); this.disableAlert = this.disableAlert.bind(this); } @@ -168,9 +170,14 @@ export default class LoopUI extends React.Component { renderAlertBar() { return ( - <Alert variant="danger" show={this.state.showAlert} onClose={this.disableAlert} dismissible> + <div> + <Alert variant="success" show={this.state.showSucAlert} onClose={this.disableAlert} dismissible> {this.state.showMessage} </Alert> + <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible> + {this.state.showMessage} + </Alert> + </div> ); } @@ -188,7 +195,7 @@ export default class LoopUI extends React.Component { renderLoopViewHeader() { return ( <LoopViewHeaderDivStyled> - Loop Viewer - {this.state.loopName} + Loop Viewer - {this.state.loopName} - ({this.state.loopCache.getTemplateName()}) </LoopViewHeaderDivStyled> ); } @@ -223,12 +230,16 @@ export default class LoopUI extends React.Component { console.info(this.state.loopName+" loop loaded successfully"); } - showAlert(message) { - this.setState ({ showAlert: true, showMessage:message }); + showSucAlert(message) { + this.setState ({ showSucAlert: true, showMessage:message }); } + showFailAlert(message) { + this.setState ({ showFailAlert: true, showMessage:message }); + } + disableAlert() { - this.setState ({ showAlert: false }); + this.setState ({ showSucAlert: false, showFailAlert: false }); } loadLoop(loopName) { @@ -258,7 +269,7 @@ export default class LoopUI extends React.Component { <Route path="/ViewLoopTemplatesModal" render={(routeProps) => (<ViewLoopTemplatesModal {...routeProps} />)} /> <Route path="/ManageDictionaries" render={(routeProps) => (<ManageDictionaries {...routeProps} />)} /> <Route path="/operationalPolicyModal" - render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} /> + render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} /> <Route path="/policyModal/:policyInstanceType/:policyName" render={(routeProps) => (<PolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} /> <Route path="/configurationPolicyModal/:policyName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} /> <Route path="/createLoop" render={(routeProps) => (<CreateLoopModal {...routeProps} loadLoopFunction={this.loadLoop} />)} /> @@ -268,13 +279,13 @@ export default class LoopUI extends React.Component { <Route path="/userInfo" render={(routeProps) => (<UserInfoModal {...routeProps} />)} /> <Route path="/closeLoop" render={this.closeLoop} /> - <Route path="/submit" render={(routeProps) => (<PerformAction {...routeProps} loopAction="submit" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} /> - <Route path="/stop" render={(routeProps) => (<PerformAction {...routeProps} loopAction="stop" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} /> - <Route path="/restart" render={(routeProps) => (<PerformAction {...routeProps} loopAction="restart" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} /> - <Route path="/delete" render={(routeProps) => (<PerformAction {...routeProps} loopAction="delete" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} /> - <Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps} loopAction="undeploy" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} /> - <Route path="/deploy" render={(routeProps) => (<DeployLoopModal {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} /> - <Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showAlert={this.showAlert}/>)} /> + <Route path="/submit" render={(routeProps) => (<PerformAction {...routeProps} loopAction="submit" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} /> + <Route path="/stop" render={(routeProps) => (<PerformAction {...routeProps} loopAction="stop" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} /> + <Route path="/restart" render={(routeProps) => (<PerformAction {...routeProps} loopAction="restart" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} /> + <Route path="/delete" render={(routeProps) => (<PerformAction {...routeProps} loopAction="delete" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} /> + <Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps} loopAction="undeploy" loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} /> + <Route path="/deploy" render={(routeProps) => (<DeployLoopModal {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} /> + <Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps} loopCache={this.getLoopCache()} updateLoopFunction={this.updateLoopCache} showSucAlert={this.showSucAlert} showFailAlert={this.showFailAlert}/>)} /> <Route path="/logout" render={this.logout} /> <GlobalClampStyle /> {this.renderAlertBar()} diff --git a/ui-react/src/LoopUI.test.js b/ui-react/src/LoopUI.test.js index d1b76aa9a..6885e7932 100644 --- a/ui-react/src/LoopUI.test.js +++ b/ui-react/src/LoopUI.test.js @@ -66,7 +66,8 @@ describe('Verify LoopUI', () => { const component = shallow(<LoopUI />) component.setState({ loopName: "testLoopName", - showAlert: false + showSucAlert: false, + showFailAlert: false }); await flushPromises(); expect(component).toMatchSnapshot(); @@ -158,15 +159,22 @@ describe('Verify LoopUI', () => { test('Test alert methods', () => { const component = shallow(<LoopUI />) - expect(component.state('showAlert')).toEqual(false); + expect(component.state('showSucAlert')).toEqual(false); const instance = component.instance(); - instance.showAlert("testAlert"); - expect(component.state('showAlert')).toEqual(true); + instance.showSucAlert("testAlert"); + expect(component.state('showSucAlert')).toEqual(true); + expect(component.state('showFailAlert')).toEqual(false); expect(component.state('showMessage')).toEqual("testAlert"); instance.disableAlert(); - expect(component.state('showAlert')).toEqual(false); + expect(component.state('showSucAlert')).toEqual(false); + expect(component.state('showFailAlert')).toEqual(false); + + instance.showFailAlert("testAlert2"); + expect(component.state('showSucAlert')).toEqual(false); + expect(component.state('showFailAlert')).toEqual(true); + expect(component.state('showMessage')).toEqual("testAlert2"); }) }); diff --git a/ui-react/src/__snapshots__/LoopUI.test.js.snap b/ui-react/src/__snapshots__/LoopUI.test.js.snap index 9de232dd6..ff08f7afb 100644 --- a/ui-react/src/__snapshots__/LoopUI.test.js.snap +++ b/ui-react/src/__snapshots__/LoopUI.test.js.snap @@ -89,27 +89,50 @@ exports[`Verify LoopUI Test the render method 1`] = ` render={[Function]} /> <GlobalStyleComponent /> - <Alert - closeLabel="Close alert" - dismissible={true} - onClose={[Function]} - show={false} - transition={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "appear": false, - "in": false, - "mountOnEnter": false, - "timeout": 300, - "unmountOnExit": false, - }, - "displayName": "Fade", - "render": [Function], + <div> + <Alert + closeLabel="Close alert" + dismissible={true} + onClose={[Function]} + show={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } } - } - variant="danger" - /> + variant="success" + /> + <Alert + closeLabel="Close alert" + dismissible={true} + onClose={[Function]} + show={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + /> + </div> <Navbar collapseOnSelect={false} expand={true} @@ -153,6 +176,8 @@ exports[`Verify LoopUI Test the render method 1`] = ` <styled.div> Loop Viewer - testLoopName + - ( + ) </styled.div> <styled.div> <withRouter(LoopViewSvg) diff --git a/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/ui-react/src/__snapshots__/OnapClamp.test.js.snap index 91812b7c5..93dc44286 100644 --- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap +++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap @@ -13,6 +13,8 @@ exports[`Verify OnapClamp Test the render method 1`] = ` "fontNormal": "black", "fontSize": "16px", "fontWarning": "#eb238e", + "loopLogsHeaderBackgroundColor": "white", + "loopLogsHeaderFontColor": "black", "loopViewerBackgroundColor": "white", "loopViewerFontColor": "yellow", "loopViewerHeaderBackgroundColor": "#337ab7", @@ -114,27 +116,50 @@ exports[`Verify OnapClamp Test the render method 1`] = ` render={[Function]} /> <GlobalStyleComponent /> - <Alert - closeLabel="Close alert" - dismissible={true} - onClose={[Function]} - show={false} - transition={ - Object { - "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "appear": false, - "in": false, - "mountOnEnter": false, - "timeout": 300, - "unmountOnExit": false, - }, - "displayName": "Fade", - "render": [Function], + <div> + <Alert + closeLabel="Close alert" + dismissible={true} + onClose={[Function]} + show={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } } - } - variant="danger" - /> + variant="success" + /> + <Alert + closeLabel="Close alert" + dismissible={true} + onClose={[Function]} + show={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + /> + </div> <Navbar collapseOnSelect={false} expand={true} @@ -176,6 +201,8 @@ exports[`Verify OnapClamp Test the render method 1`] = ` <styled.div> Loop Viewer - Empty (NO loop loaded yet) + - ( + ) </styled.div> <styled.div> <withRouter(LoopViewSvg) diff --git a/ui-react/src/api/LoopCache.js b/ui-react/src/api/LoopCache.js index c54337f2f..4f22dc2bb 100644 --- a/ui-react/src/api/LoopCache.js +++ b/ui-react/src/api/LoopCache.js @@ -219,4 +219,11 @@ export default class LoopCache { getComponentStates() { return this.loopJsonCache.components; } + + getTemplateName() { + if (this.loopJsonCache["loopTemplate"] !== undefined) { + return this.loopJsonCache["loopTemplate"].name; + } + return null; + } } diff --git a/ui-react/src/api/LoopService.js b/ui-react/src/api/LoopService.js index 698ee28c2..3b9ed86fa 100644 --- a/ui-react/src/api/LoopService.js +++ b/ui-react/src/api/LoopService.js @@ -226,22 +226,21 @@ export default class LoopService { credentials: 'same-origin' }) .then(function (response) { - console.debug("Add Operational Policy response received: ", response.status); + console.debug("Add Operational Policy response received: ", response.status); if (response.ok) { return response.json(); } else { - console.error("Add Operational Policy query failed"); - return {}; + return response.text(); } }) - .catch(function (error) { - console.error("Add Operational Policy error received", error); - return {}; - }); + .then(function (object) { + console.error("Add Operational Policy query failed"); + throw new Error(object); + }) } - static removeOperationalPolicyType(loopName, policyType, policyVersion) { - return fetch('/restservices/clds/v2/loop/removeOperationaPolicy/' + loopName + '/policyModel/' + policyType +'/' + policyVersion , { + static removeOperationalPolicyType(loopName, policyType, policyVersion, policyName) { + return fetch('/restservices/clds/v2/loop/removeOperationaPolicy/' + loopName + '/policyModel/' + policyType +'/' + policyVersion + '/' + policyName , { method: 'PUT', headers: { "Content-Type": "application/json" diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js index da65ac9f1..3ff1ebec7 100644 --- a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js +++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js @@ -104,7 +104,7 @@ export default class ConfigurationPolicyModal extends React.Component { render() { return ( - <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}> + <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} > <Modal.Header closeButton> <Modal.Title>Configuration policies</Modal.Title> </Modal.Header> diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js index c5762a8d4..e98b59566 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}> + <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 d034ee5d7..2155977f6 100644 --- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js @@ -29,6 +29,12 @@ import Form from 'react-bootstrap/Form'; import Tabs from 'react-bootstrap/Tabs'; import Tab from 'react-bootstrap/Tab'; import styled from 'styled-components'; +import Spinner from 'react-bootstrap/Spinner' + +const StyledSpinnerDiv = styled.div` + justify-content: center !important; + display: flex !important; +`; const ModalStyled = styled(Modal)` background-color: transparent; @@ -48,6 +54,7 @@ export default class DeployLoopModal extends React.Component { this.handleChange = this.handleChange.bind(this); this.refreshStatus = this.refreshStatus.bind(this); this.renderDeployParam = this.renderDeployParam.bind(this); + this.renderSpinner = this.renderSpinner.bind(this); const propertiesJson = JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())); this.state = { @@ -79,31 +86,48 @@ export default class DeployLoopModal extends React.Component { this.props.history.push('/'); } + renderSpinner() { + if (this.state.deploying) { + return ( + <StyledSpinnerDiv> + <Spinner animation="border" role="status"> + <span className="sr-only">Loading...</span> + </Spinner> + </StyledSpinnerDiv> + ); + } else { + return (<div></div>); + } + } + handleSave() { const loopName = this.props.loopCache.getLoopName(); // save the global propserties + this.setState({ deploying: true }); LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => { LoopActionService.performAction(loopName, "deploy").then(pars => { - this.props.showAlert("Action deploy successfully performed"); + this.props.showSucAlert("Action deploy successfully performed"); // refresh status and update loop logs this.refreshStatus(loopName); }) .catch(error => { - this.props.showAlert("Action deploy failed"); + this.props.showFailAlert("Action deploy failed"); // refresh status and update loop logs this.refreshStatus(loopName); }); }); - this.setState({ show: false }); - this.props.history.push('/'); } refreshStatus(loopName) { LoopActionService.refreshStatus(loopName).then(data => { this.props.updateLoopFunction(data); + this.setState({ show: false, deploying: false }); + this.props.history.push('/'); }) .catch(error => { - this.props.showAlert("Refresh status failed"); + this.props.showFailAlert("Refresh status failed"); + this.setState({ show: false, deploying: false }); + this.props.history.push('/'); }); } handleChange(event) { @@ -137,13 +161,14 @@ export default class DeployLoopModal extends React.Component { } render() { return ( - <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} > + <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> <Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key })}> {this.renderDeployParamTabs()} </Tabs> + {this.renderSpinner()} <Modal.Footer> <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button> <Button variant="primary" type="submit" onClick={this.handleSave}>Deploy</Button> diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js index 5f1dcd5fc..84dbfd1f6 100644 --- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js +++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js @@ -63,7 +63,8 @@ describe('Verify DeployLoopModal', () => { const flushPromises = () => new Promise(setImmediate); const historyMock = { push: jest.fn() }; const updateLoopFunction = jest.fn(); - const showAlert = jest.fn(); + const showSucAlert = jest.fn(); + const showFailAlert = jest.fn(); const handleSave = jest.spyOn(DeployLoopModal.prototype,'handleSave'); LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => { return Promise.resolve({ @@ -88,7 +89,7 @@ describe('Verify DeployLoopModal', () => { }); const component = shallow(<DeployLoopModal history={historyMock} - loopCache={loopCache} updateLoopFunction={updateLoopFunction} showAlert={showAlert} />) + loopCache={loopCache} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />) component.find('[variant="primary"]').prop('onClick')(); await flushPromises(); diff --git a/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js index 73946f45d..c0a2084f5 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} > + <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 42c03daca..5154a880b 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, @@ -78,6 +79,10 @@ export default class ModifyLoopModal extends React.Component { cellStyle: cellStyle, headerStyle: headerStyle }, + { title: "Policy Name", field: "policyName", + cellStyle: cellStyle, + headerStyle: headerStyle + }, { title: "Version", field: "version", cellStyle: cellStyle, headerStyle: headerStyle @@ -90,7 +95,7 @@ export default class ModifyLoopModal extends React.Component { cellStyle: cellStyle, headerStyle: headerStyle }, - { title: "Add", field: "updatedDate", editable: 'never', + { title: "Created Date", field: "createdDate", editable: 'never', cellStyle: cellStyle, headerStyle: headerStyle } @@ -128,7 +133,9 @@ export default class ModifyLoopModal extends React.Component { var operationalPolicies = this.state.loopCache.getOperationalPolicies(); var selectedPolicyModels = []; for (var policy in operationalPolicies) { - selectedPolicyModels.push(operationalPolicies[policy]["policyModel"]); + var newRow = operationalPolicies[policy]["policyModel"]; + newRow["policyName"] = operationalPolicies[policy].name; + selectedPolicyModels.push(newRow); } PolicyToscaService.getToscaPolicyModels().then(allToscaModels => { @@ -160,21 +167,36 @@ 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() { - LoopService.removeOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version); + LoopService.removeOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version,this.state.selectedRowData.policyName); this.props.loadLoopFunction(this.state.loopCache.getLoopName()); this.handleClose(); } render() { return ( - <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}> + <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> @@ -192,18 +214,19 @@ 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> <MaterialTable - title={"Already added Tosca Policy Models"} + title={"Tosca Policy Models already added"} data={this.state.selectedPolicyModelsData} columns={this.state.toscaColumns} icons={this.state.tableIcons} diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js index 7c98fab4d..c04883443 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}> + <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 0f86aa340..8d0faa5f7 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 @@ -2,6 +2,8 @@ exports[`Verify DeployLoopModal Test the render method 1`] = ` <Styled(Bootstrap(Modal)) + backdrop="static" + keyboard={false} onHide={[Function]} show={true} size="lg" @@ -56,6 +58,7 @@ exports[`Verify DeployLoopModal Test the render method 1`] = ` </Styled(FormGroup)> </Tab> </Tabs> + <div /> <ModalFooter> <Button active={false} 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 fe9aee2ab..233c560ab 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 @@ -2,6 +2,8 @@ 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 1aa0b5ae9..196854446 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 @@ -2,6 +2,8 @@ exports[`Verify OpenLoopModal Test the render method 1`] = ` <Styled(Bootstrap(Modal)) + backdrop="static" + keyboard={false} onHide={[Function]} show={true} size="xl" @@ -32,7 +34,7 @@ exports[`Verify OpenLoopModal Test the render method 1`] = ` sm="2" srOnly={false} > - Model Name + Model Name: </FormLabel> <Col sm="10" @@ -47,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 @@ -70,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> diff --git a/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js index d8065ede6..2af1b7ce4 100644 --- a/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js +++ b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js @@ -376,7 +376,7 @@ export default class ManageDictionaries extends React.Component { render() { return ( - <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}> + <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} > <Modal.Header closeButton> <Modal.Title>Manage Dictionaries</Modal.Title> </Modal.Header> diff --git a/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap b/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap index e78292216..71cc393b8 100644 --- a/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap +++ b/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap @@ -2,6 +2,8 @@ exports[`Verify ManageDictionaries Test API Successful 1`] = ` <Styled(Bootstrap(Modal)) + backdrop="static" + keyboard={false} onHide={[Function]} show={true} size="xl" diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js index 89e70795e..77dce1656 100644 --- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js +++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js @@ -56,7 +56,7 @@ export default class OperationalPolicyModal extends React.Component { if (errors.length !== 0) { console.error("Errors detected during config policy data validation ", errors); - this.props.showAlert(errors); + this.props.showFailAlert(errors); } else { console.info("NO validation errors found in config policy data"); @@ -147,7 +147,7 @@ export default class OperationalPolicyModal extends React.Component { render() { return ( - <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}> + <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} > <Modal.Header closeButton> <Modal.Title>Operational policies</Modal.Title> </Modal.Header> diff --git a/ui-react/src/components/dialogs/PerformActions.js b/ui-react/src/components/dialogs/PerformActions.js index 66b192863..cf5a3c20e 100644 --- a/ui-react/src/components/dialogs/PerformActions.js +++ b/ui-react/src/components/dialogs/PerformActions.js @@ -52,12 +52,12 @@ export default class PerformActions extends React.Component { const loopName = this.state.loopName; LoopActionService.performAction(loopName, action).then(pars => { - this.props.showAlert("Action " + action + " successfully performed"); + this.props.showSucAlert("Action " + action + " successfully performed"); // refresh status and update loop logs this.refreshStatus(loopName); }) .catch(error => { - this.props.showAlert("Action " + action + " failed"); + this.props.showFailAlert("Action " + action + " failed"); // refresh status and update loop logs this.refreshStatus(loopName); }); diff --git a/ui-react/src/components/dialogs/PerformActions.test.js b/ui-react/src/components/dialogs/PerformActions.test.js index 0b0786290..b833a929d 100644 --- a/ui-react/src/components/dialogs/PerformActions.test.js +++ b/ui-react/src/components/dialogs/PerformActions.test.js @@ -36,7 +36,8 @@ describe('Verify PerformActions', () => { const flushPromises = () => new Promise(setImmediate); const historyMock = { push: jest.fn() }; const updateLoopFunction = jest.fn(); - const showAlert = jest.fn(); + const showSucAlert = jest.fn(); + const showFailAlert = jest.fn(); LoopActionService.refreshStatus = jest.fn().mockImplementation(() => { return Promise.resolve({ @@ -46,7 +47,7 @@ describe('Verify PerformActions', () => { }); }); const component = shallow(<PerformActions loopCache={loopCache} - loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showAlert={showAlert} />) + loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />) await flushPromises(); component.update(); @@ -57,7 +58,8 @@ describe('Verify PerformActions', () => { const flushPromises = () => new Promise(setImmediate); const historyMock = { push: jest.fn() }; const updateLoopFunction = jest.fn(); - const showAlert = jest.fn(); + const showSucAlert = jest.fn(); + const showFailAlert = jest.fn(); LoopActionService.performAction = jest.fn().mockImplementation(() => { return Promise.resolve({ @@ -74,7 +76,7 @@ describe('Verify PerformActions', () => { }); }); const component = shallow(<PerformActions loopCache={loopCache} - loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showAlert={showAlert} />) + loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />) await flushPromises(); component.update(); diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js index 8b49d9150..5930386c2 100644 --- a/ui-react/src/components/dialogs/Policy/PolicyModal.js +++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js @@ -74,6 +74,10 @@ export default class PolicyModal extends React.Component { if (errors.length !== 0) { console.error("Errors detected during policy data validation ", errors); + this.setState({ + showFailAlert: true, + showMessage: "Errors detected during policy data validation " + errors + }); return; } else { @@ -252,7 +256,7 @@ export default class PolicyModal extends React.Component { render() { return ( - <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}> + <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose } backdrop="static"> <Modal.Header closeButton> <Modal.Title>Edit the policy</Modal.Title> </Modal.Header> diff --git a/ui-react/src/components/dialogs/RefreshStatus.js b/ui-react/src/components/dialogs/RefreshStatus.js index 64b35d99b..bb0939152 100644 --- a/ui-react/src/components/dialogs/RefreshStatus.js +++ b/ui-react/src/components/dialogs/RefreshStatus.js @@ -44,12 +44,12 @@ export default class RefreshStatus extends React.Component { componentDidMount() { // refresh status and update loop logs LoopActionService.refreshStatus(this.state.loopName).then(data => { - this.props.showAlert("Status successfully refreshed"); + this.props.showSucAlert("Status successfully refreshed"); this.props.updateLoopFunction(data); this.props.history.push('/'); }) .catch(error => { - this.props.showAlert("Status refreshing failed"); + this.props.showFailAlert("Status refreshing failed"); this.props.history.push('/'); }); } diff --git a/ui-react/src/components/dialogs/RefreshStatus.test.js b/ui-react/src/components/dialogs/RefreshStatus.test.js index 3038eb321..e08c50d2e 100644 --- a/ui-react/src/components/dialogs/RefreshStatus.test.js +++ b/ui-react/src/components/dialogs/RefreshStatus.test.js @@ -35,9 +35,10 @@ describe('Verify RefreshStatus', () => { it('Test refresh status failed', async () => { const flushPromises = () => new Promise(setImmediate); const historyMock = { push: jest.fn() }; - const showAlert = jest.fn(); + const showSucAlert = jest.fn(); + const showFailAlert = jest.fn(); - const component = shallow(<RefreshStatus loopCache={loopCache} history={historyMock} showAlert={showAlert} />) + const component = shallow(<RefreshStatus loopCache={loopCache} history={historyMock} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />) await flushPromises(); component.update(); @@ -48,7 +49,8 @@ describe('Verify RefreshStatus', () => { const flushPromises = () => new Promise(setImmediate); const historyMock = { push: jest.fn() }; const updateLoopFunction = jest.fn(); - const showAlert = jest.fn(); + const showSucAlert = jest.fn(); + const showFailAlert = jest.fn(); LoopActionService.refreshStatus = jest.fn().mockImplementation(() => { return Promise.resolve({ @@ -59,7 +61,7 @@ describe('Verify RefreshStatus', () => { }); const component = shallow(<RefreshStatus loopCache={loopCache} - loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showAlert={showAlert} />) + loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />) await flushPromises(); component.update(); diff --git a/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js index 1937485b0..fa95ca977 100644 --- a/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js +++ b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js @@ -86,14 +86,14 @@ export default class UploadToscaPolicyModal extends React.Component { render() { return ( - <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}> + <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} > <Modal.Header closeButton> <Modal.Title>Upload Tosca Model</Modal.Title> </Modal.Header> <Modal.Body> <Form.Group as={Row} controlId="formPlaintextEmail"> <Col sm="10"> - <input style={{display: 'none'}} type="file" name="file" accept=".yaml" onChange={this.fileSelectedHandler} + <input style={{display: 'none'}} type="file" name="file" accept=".yaml,.yml" onChange={this.fileSelectedHandler} ref={fileInput => this.fileInput = fileInput}/> <button onClick={() => this.fileInput.click()}>Pick Tosca File</button> <Alert variant="secondary"> diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js index cec6722d0..7cf02f711 100644 --- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js +++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js @@ -38,16 +38,24 @@ import MaterialTable from "material-table"; const ModalStyled = styled(Modal)` background-color: transparent; ` -const LoopViewSvgDivStyled = styled.div` - overflow: hidden; +const LoopViewSvgDivStyled = styled.svg` + overflow-x: scroll; background-color: ${props => (props.theme.loopViewerBackgroundColor)}; border-color: ${props => (props.theme.loopViewerHeaderColor)}; - margin-left: auto; + margin-top: 3em; + margin-left: 2em; margin-right:auto; text-align: center; - margin-top: 20px; + height: 100%; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + ` const SvgContainerDivStyled = styled.div` + display: flex; + align-items: center; border: 1px solid; ` @@ -133,7 +141,7 @@ export default class ViewLoopTemplatesModal extends React.Component { render() { return ( - <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}> + <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}> <Modal.Header closeButton> </Modal.Header> <Modal.Body> diff --git a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js index 650080520..d49232f2d 100644 --- a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js +++ b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js @@ -139,7 +139,7 @@ export default class ViewToscalPolicyModal extends React.Component { render() { return ( - <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}> + <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}> <Modal.Header closeButton> </Modal.Header> <Modal.Body> 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 253820f86..3f6dc9482 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 @@ -2,6 +2,8 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1`] = ` <Styled(Bootstrap(Modal)) + backdrop="static" + keyboard={false} onHide={[Function]} show={true} size="xl" @@ -141,7 +143,7 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1 title="View Blueprint MicroService Templates" /> <styled.div> - <styled.div + <styled.svg dangerouslySetInnerHTML={ Object { "__html": "Please select a loop template to display it", diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap index fc5eef024..5f19a9b7d 100644 --- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap +++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap @@ -2,6 +2,8 @@ exports[`Verify ViewToscaPolicyModal Test the tosca model view render method 1`] = ` <Styled(Bootstrap(Modal)) + backdrop="static" + keyboard={false} onHide={[Function]} show={true} size="xl" diff --git a/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/ui-react/src/components/loop_viewer/logs/LoopLogs.js index 6abdc4b4f..b3f052626 100644 --- a/ui-react/src/components/loop_viewer/logs/LoopLogs.js +++ b/ui-react/src/components/loop_viewer/logs/LoopLogs.js @@ -26,9 +26,9 @@ import LoopCache from '../../../api/LoopCache'; import styled from 'styled-components'; const LoopLogsHeaderDivStyled = styled.div` - background-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; + background-color: ${props => props.theme.loopLogsHeaderBackgroundColor}; padding: 10px 10px; - color: ${props => props.theme.loopViewerHeaderFontColor}; + color: ${props => props.theme.loopLogsHeaderFontColor}; ` const TableStyled = styled(Table)` diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js index 4bbf608df..048f63044 100644 --- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js +++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js @@ -27,14 +27,20 @@ import { withRouter } from "react-router-dom"; import LoopService from '../../../api/LoopService'; import LoopComponentConverter from './LoopComponentConverter'; -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: 1px solid; border-color: ${props => (props.theme.loopViewerHeaderColor)}; + margin-top: 1em; margin-left: auto; margin-right:auto; - text-align: center; + margin-bottom: -3em; + align-items: center; + height: 100%; + width: 100%; ` @@ -101,4 +107,4 @@ class LoopViewSvg extends React.Component { } } -export default withRouter(LoopViewSvg);
\ No newline at end of file +export default withRouter(LoopViewSvg); diff --git a/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap b/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap index cecfb425a..e05f1c794 100644 --- a/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap +++ b/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Verify LoopSvg Test the render method 1`] = ` -<styled.div +<styled.svg dangerouslySetInnerHTML={ Object { "__html": "<svg><text x=\\"20\\" y=\\"40\\">No LOOP (SVG)</text></svg>", @@ -12,7 +12,7 @@ exports[`Verify LoopSvg Test the render method 1`] = ` `; exports[`Verify LoopSvg Test the render method no loopName 1`] = ` -<styled.div +<styled.svg dangerouslySetInnerHTML={ Object { "__html": "<svg><text x=\\"20\\" y=\\"40\\">No LOOP (SVG)</text></svg>", @@ -23,7 +23,7 @@ exports[`Verify LoopSvg Test the render method no loopName 1`] = ` `; exports[`Verify LoopSvg Test the render method svg not empty 1`] = ` -<styled.div +<styled.svg dangerouslySetInnerHTML={ Object { "__html": "<svg><text test</text></svg>", diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js index 3656f9e98..64fd7c5d9 100644 --- a/ui-react/src/theme/globalStyle.js +++ b/ui-react/src/theme/globalStyle.js @@ -87,6 +87,9 @@ export const DefaultClampTheme = { loopViewerHeaderBackgroundColor: '#337ab7', loopViewerHeaderFontColor: 'white', + loopLogsHeaderBackgroundColor: 'white', + loopLogsHeaderFontColor: 'black', + menuBackgroundColor: 'white', menuFontColor: 'black', menuHighlightedBackgroundColor: '#337ab7', |