aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui-react/src/components')
-rw-r--r--ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js2
-rw-r--r--ui-react/src/components/dialogs/Loop/CreateLoopModal.js33
-rw-r--r--ui-react/src/components/dialogs/Loop/DeployLoopModal.js2
-rw-r--r--ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js2
-rw-r--r--ui-react/src/components/dialogs/Loop/ModifyLoopModal.js16
-rw-r--r--ui-react/src/components/dialogs/Loop/OpenLoopModal.js40
-rw-r--r--ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap2
-rw-r--r--ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap2
-rw-r--r--ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap61
-rw-r--r--ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js2
-rw-r--r--ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap2
-rw-r--r--ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js2
-rw-r--r--ui-react/src/components/dialogs/Policy/PolicyModal.js6
-rw-r--r--ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js4
-rw-r--r--ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js18
-rw-r--r--ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js2
-rw-r--r--ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap4
-rw-r--r--ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap2
-rw-r--r--ui-react/src/components/loop_viewer/logs/LoopLogs.js4
-rw-r--r--ui-react/src/components/loop_viewer/svg/LoopSvg.js14
-rw-r--r--ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap6
21 files changed, 163 insertions, 63 deletions
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 6e7437038..2155977f6 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} >
+ <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 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 4c6b6a729..5154a880b 100644
--- a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
@@ -79,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
@@ -91,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
}
@@ -129,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 => {
@@ -183,14 +189,14 @@ export default class ModifyLoopModal extends React.Component {
}
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>
@@ -220,7 +226,7 @@ export default class ModifyLoopModal extends React.Component {
<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 d7beecd02..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"
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 149639cbc..77dce1656 100644
--- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
+++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
@@ -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/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/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>",