Merge "Align ui-react file in policy-clamp and policy-gui"

10 files changed, 908 insertions, 870 deletions

diff --git a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
index 5663360a0..690dcbbdf 100644
--- a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
+++ b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
@@ -34,157 +34,160 @@ import LoopCache from '../../../api/LoopCache';
 import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
 
 const ModalStyled = styled(Modal)`
-	background-color: transparent;
+  background-color: transparent;
 `
 
 const ErrMsgStyled = styled.div`
-	color: red;
+  color: red;
 `
 
 export default class CreateLoopModal extends React.Component {
-	constructor(props, context) {
-		super(props, context);
+  constructor(props, context) {
+    super(props, context);
 
-		this.getAllLoopTemplates = this.getAllLoopTemplates.bind(this);
-		this.handleCreate = this.handleCreate.bind(this);
-		this.handleModelName = this.handleModelName.bind(this);
-		this.handleClose = this.handleClose.bind(this);
-		this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
-		this.renderSvg = this.renderSvg.bind(this);
-		this.state = {
-			show: true,
-			chosenTemplateName: '',
-			modelInputErrMsg: '',
-			modelName: '',
-			templateNames: [],
-			fakeLoopCacheWithTemplate: new LoopCache({})
-		};
-	}
+    this.getAllLoopTemplates = this.getAllLoopTemplates.bind(this);
+    this.handleCreate = this.handleCreate.bind(this);
+    this.handleModelName = this.handleModelName.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
+    this.renderSvg = this.renderSvg.bind(this);
+    this.state = {
+      show: true,
+      chosenTemplateName: '',
+      modelInputErrMsg: '',
+      modelName: '',
+      templateNames: [],
+      fakeLoopCacheWithTemplate: new LoopCache({})
+    };
+  }
 
-	async componentDidMount() {
-		await this.getAllLoopTemplates();
-		await this.getModelNames();
-	}
+  async componentDidMount() {
+    await this.getAllLoopTemplates();
+    await this.getModelNames();
+  }
 
-	handleClose() {
-		this.setState({ show: false });
-		this.props.history.push('/');
-	}
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/');
+  }
 
-	handleDropDownListChange(e) {
-	    if (typeof e.value !== "undefined") {
-	        this.setState({
-	        fakeLoopCacheWithTemplate:
-                new LoopCache({
-                    "loopTemplate":e.templateObject,
-                    "name": "fakeLoop"
-                }),
-                chosenTemplateName: e.value
-	        })
-		} else {
-          	this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
-        }
-	}
+  handleDropDownListChange(e) {
+    if (typeof e.value !== "undefined") {
+      this.setState({
+        fakeLoopCacheWithTemplate:
+          new LoopCache({
+            "loopTemplate": e.templateObject,
+            "name": "fakeLoop"
+          }),
+        chosenTemplateName: e.value
+      })
+    } else {
+      this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
+    }
+  }
 
-	getAllLoopTemplates() {
-		TemplateService.getAllLoopTemplates().then(templatesData => {
-		    const templateOptions = templatesData.map((templateData) => { return { label: templateData.name, value: templateData.name, templateObject: templateData } });
-            this.setState({
-                templateNames: templateOptions })
-		});
-	}
+  getAllLoopTemplates() {
+    TemplateService.getAllLoopTemplates().then(templatesData => {
+      const templateOptions = templatesData.map((templateData) => {
+        return { label: templateData.name, value: templateData.name, templateObject: templateData }
+      });
+      this.setState({
+        templateNames: templateOptions
+      })
+    });
+  }
 
-	getModelNames() {
-		TemplateService.getLoopNames().then(loopNames => {
-			if (!loopNames) {
-				loopNames = [];
-			}
-			// Remove LOOP_ prefix
-			let trimmedLoopNames = loopNames.map(str => str.replace('LOOP_', ''));
-			this.setState({ modelNames: trimmedLoopNames });
-		});
-	}
+  getModelNames() {
+    TemplateService.getLoopNames().then(loopNames => {
+      if (!loopNames) {
+        loopNames = [];
+      }
+      // Remove LOOP_ prefix
+      let trimmedLoopNames = loopNames.map(str => str.replace('LOOP_', ''));
+      this.setState({ modelNames: trimmedLoopNames });
+    });
+  }
 
-	handleCreate() {
-		if (!this.state.modelName) {
-			alert("A model name is required");
-			return;
-		}
-		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);
-			try {
-				this.props.history.push('/');
-				this.props.loadLoopFunction("LOOP_" + this.state.modelName);
-			} catch(err) {
-				alert(text);
-				this.props.history.push('/');
-			}
-		})
-		.catch(error => {
-			console.debug("Create Loop failed");
-		});
-	}
+  handleCreate() {
+    if (!this.state.modelName) {
+      alert("A model name is required");
+      return;
+    }
+    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);
+      try {
+        this.props.history.push('/');
+        this.props.loadLoopFunction("LOOP_" + this.state.modelName);
+      } catch (err) {
+        alert(text);
+        this.props.history.push('/');
+      }
+    })
+      .catch(error => {
+        console.debug("Create Loop failed");
+      });
+  }
 
-	handleModelName(event) {
-		if (this.state.modelNames.includes(event.target.value)) {
-			this.setState({
-				modelInputErrMsg: 'A model named "' + event.target.value + '" already exists. Please pick another name.',
-				modelName: event.target.value
-			});
-			return;
-		} else {
-			this.setState({
-				modelInputErrMsg: '',
-				modelName: event.target.value
-			});
-		}
-	}
+  handleModelName(event) {
+    if (this.state.modelNames.includes(event.target.value)) {
+      this.setState({
+        modelInputErrMsg: 'A model named "' + event.target.value + '" already exists. Please pick another name.',
+        modelName: event.target.value
+      });
+      return;
+    } else {
+      this.setState({
+        modelInputErrMsg: '',
+        modelName: event.target.value
+      });
+    }
+  }
 
-	renderSvg() {
-		return (
-			<SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
-		);
-	}
+  renderSvg() {
+    return (
+      <SvgGenerator loopCache={ this.state.fakeLoopCacheWithTemplate } clickable={ false } generatedFrom={ SvgGenerator.GENERATED_FROM_TEMPLATE }/>
+    );
+  }
 
-	render() {
-		return (
-			<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>
-						<Col sm="10">
-							<Select onChange={this.handleDropDownListChange} options={this.state.templateNames} />
-						</Col>
-					</Form.Group>
-                    <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
-                    <Form.Label column sm="2">Model Preview:</Form.Label>
-                        <Col sm="10">
-                            {this.renderSvg()}
-                        </Col>
-                    </Form.Group>
-					<Form.Group as={Row} controlId="formPlaintextEmail">
-						<Form.Label column sm="2">Model Name:</Form.Label>
-						<input sm="5" type="text" style={{width: '50%', marginLeft: '1em' }}
-							value={this.state.modelName}
-							onChange={this.handleModelName}
-						/>
-						<span sm="5"/>
-					</Form.Group>
-					<Form.Group as={Row} controlId="formPlaintextEmail">
-						<Form.Label column sm="2"> </Form.Label>
-						<ErrMsgStyled>{this.state.modelInputErrMsg}</ErrMsgStyled>
-					</Form.Group>
-				</Modal.Body>
-				<Modal.Footer>
-					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
-					<Button variant="primary" type="submit" onClick={this.handleCreate}>Create</Button>
-				</Modal.Footer>
-			</ModalStyled>
-		);
-	}
+  render() {
+    return (
+      <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>
+            <Col sm="10">
+              <Select onChange={ this.handleDropDownListChange } options={ this.state.templateNames }/>
+            </Col>
+          </Form.Group>
+          <Form.Group as={ Row } style={ { alignItems: 'center' } } controlId="formSvgPreview">
+            <Form.Label column sm="2">Model Preview:</Form.Label>
+            <Col sm="10">
+              { this.renderSvg() }
+            </Col>
+          </Form.Group>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Form.Label column sm="2">Model Name:</Form.Label>
+            <input sm="5" type="text" style={ { width: '50%', marginLeft: '1em' } }
+                   value={ this.state.modelName }
+                   onChange={ this.handleModelName }
+            />
+            <span sm="5"/>
+          </Form.Group>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Form.Label column sm="2"> </Form.Label>
+            <ErrMsgStyled>{ this.state.modelInputErrMsg }</ErrMsgStyled>
+          </Form.Group>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button>
+          <Button variant="primary" type="submit" onClick={ this.handleCreate }>Create</Button>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
 }
diff --git a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
index 8ef53b412..3d9483334 100644
--- a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
+++ b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
@@ -27,7 +27,10 @@ import LoopService from '../../../api/LoopService';
 import TemplateService from '../../../api/TemplateService';
 
 let errorMessage = '';
-window.alert = jest.fn().mockImplementation((mesg) => { errorMessage = mesg ; return });
+window.alert = jest.fn().mockImplementation((mesg) => {
+  errorMessage = mesg;
+  return
+});
 
 
 describe('Verify CreateLoopModal', () => {
@@ -35,7 +38,7 @@ describe('Verify CreateLoopModal', () => {
   it('Test the render method', async () => {
     const flushPromises = () => new Promise(setImmediate);
     TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => {
-      return Promise.resolve([{"name":"template1"},{"name":"template2"}]);
+      return Promise.resolve([{ "name": "template1" }, { "name": "template2" }]);
     });
     TemplateService.getLoopNames = jest.fn().mockImplementation(() => {
       return Promise.resolve([]);
@@ -45,21 +48,25 @@ describe('Verify CreateLoopModal', () => {
     expect(component).toMatchSnapshot();
     await flushPromises();
     component.update();
-    expect(component.state('templateNames')).toStrictEqual([{"label": "template1", "value": "template1", "templateObject": {"name": "template1"}}, {"label": "template2", "value": "template2","templateObject": {"name": "template2"}}]);
+    expect(component.state('templateNames')).toStrictEqual([{ "label": "template1", "value": "template1", "templateObject": { "name": "template1" } }, {
+      "label": "template2",
+      "value": "template2",
+      "templateObject": { "name": "template2" }
+    }]);
   });
 
   it('handleDropdownListChange event', async () => {
-  	const flushPromises = () => new Promise(setImmediate);
+    const flushPromises = () => new Promise(setImmediate);
 
     const component = shallow(<CreateLoopModal/>);
-    component.find('StateManager').simulate('change', {value: 'template1', templateObject: {"name":"template1"} });
+    component.find('StateManager').simulate('change', { value: 'template1', templateObject: { "name": "template1" } });
     await flushPromises();
     component.update();
     expect(component.state('chosenTemplateName')).toEqual("template1");
     expect(component.state('fakeLoopCacheWithTemplate').getLoopTemplate()['name']).toEqual("template1");
     expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop");
 
-	component.find('StateManager').simulate('change',{value: 'template2', templateObject: {"name":"template2"} });
+    component.find('StateManager').simulate('change', { value: 'template2', templateObject: { "name": "template2" } });
     await flushPromises();
     component.update();
     expect(component.state('chosenTemplateName')).toEqual("template2");
@@ -70,12 +77,12 @@ describe('Verify CreateLoopModal', () => {
   it('handleModelName event', async () => {
     const flushPromises = () => new Promise(setImmediate);
     TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => {
-      return Promise.resolve([{"name":"template1"},{"name":"template2"}]);
+      return Promise.resolve([{ "name": "template1" }, { "name": "template2" }]);
     });
     TemplateService.getLoopNames = jest.fn().mockImplementation(() => {
       return Promise.resolve([]);
     });
-    const event = {target: {value : "model1"} };
+    const event = { target: { value: "model1" } };
     const component = shallow(<CreateLoopModal/>);
     await flushPromises();
     component.find('input').simulate('change', event);
@@ -84,21 +91,21 @@ describe('Verify CreateLoopModal', () => {
   });
 
   it('Test handleClose', () => {
-    const historyMock = { push: jest.fn() }; 
-    const handleClose = jest.spyOn(CreateLoopModal.prototype,'handleClose');
-    const component = shallow(<CreateLoopModal history={historyMock} />)
+    const historyMock = { push: jest.fn() };
+    const handleClose = jest.spyOn(CreateLoopModal.prototype, 'handleClose');
+    const component = shallow(<CreateLoopModal history={ historyMock }/>)
 
     component.find('[variant="secondary"]').prop('onClick')();
 
     expect(handleClose).toHaveBeenCalledTimes(1);
     expect(component.state('show')).toEqual(false);
-    expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-    
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+
     handleClose.mockClear();
   });
 
   it('Test handleCreate Fail', () => {
-    const handleCreate = jest.spyOn(CreateLoopModal.prototype,'handleCreate');
+    const handleCreate = jest.spyOn(CreateLoopModal.prototype, 'handleCreate');
     const component = shallow(<CreateLoopModal/>)
 
     component.find('[variant="primary"]').prop('onClick')();
@@ -110,32 +117,33 @@ describe('Verify CreateLoopModal', () => {
   });
 
   it('Test handleCreate Suc', async () => {
-	const flushPromises = () => new Promise(setImmediate);
+    const flushPromises = () => new Promise(setImmediate);
     const historyMock = { push: jest.fn() };
-    const loadLoopFunction = jest.fn();  
-    
+    const loadLoopFunction = jest.fn();
+
     LoopService.createLoop = jest.fn().mockImplementation(() => {
-			return Promise.resolve({
-				ok: true,
-				status: 200,
-				json: () => {}
-			});
-		});
-
-    const handleCreate = jest.spyOn(CreateLoopModal.prototype,'handleCreate');
-    const component = shallow(<CreateLoopModal history={historyMock} loadLoopFunction={loadLoopFunction}/>)
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+        }
+      });
+    });
+
+    const handleCreate = jest.spyOn(CreateLoopModal.prototype, 'handleCreate');
+    const component = shallow(<CreateLoopModal history={ historyMock } loadLoopFunction={ loadLoopFunction }/>)
     component.setState({
-			modelName: "modelNameTest",
-			chosenTemplateName: "template1"
-		});
+      modelName: "modelNameTest",
+      chosenTemplateName: "template1"
+    });
 
     component.find('[variant="primary"]').prop('onClick')();
-	await flushPromises();
-	component.update();
+    await flushPromises();
+    component.update();
 
     expect(handleCreate).toHaveBeenCalledTimes(1);
     expect(component.state('show')).toEqual(false);
-    expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
 
     handleCreate.mockClear();
   });
diff --git a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
index 803cfa9cb..5fff58631 100644
--- a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
+++ b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
@@ -32,142 +32,147 @@ import styled from 'styled-components';
 import Spinner from 'react-bootstrap/Spinner'
 
 const StyledSpinnerDiv = styled.div`
-	justify-content: center !important;
-	display: flex !important;
+  justify-content: center !important;
+  display: flex !important;
 `;
 
 const ModalStyled = styled(Modal)`
-	background-color: transparent;
+  background-color: transparent;
 `
 const FormStyled = styled(Form.Group)`
-	padding: .25rem 1.5rem;
+  padding: .25rem 1.5rem;
 `
 export default class DeployLoopModal extends React.Component {
 
 
-		
-	constructor(props, context) {
-		super(props, context);
-
-		this.handleSave = this.handleSave.bind(this);
-		this.handleClose = this.handleClose.bind(this);
-		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 = {
-			loopCache: this.props.loopCache,
-			temporaryPropertiesJson: propertiesJson,
-			show: true,
-			key: this.getInitialKeyValue(propertiesJson)
-		};
-	}
-	getInitialKeyValue(temporaryPropertiesJson) {
-		const deployJsonList = temporaryPropertiesJson["dcaeDeployParameters"];
-		return Object.keys(deployJsonList).find((obj) => Object.keys(deployJsonList).indexOf(obj) === 0);
-	}
-	componentWillReceiveProps(newProps) {
-		this.setState({
-			loopName: newProps.loopCache.getLoopName(),
-			show: true
-		});
-	}
-
-	handleClose(){
-		this.setState({ show: false });
-		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.showSucAlert("Action deploy successfully performed");
-				// refresh status and update loop logs
-				this.refreshStatus(loopName);
-			})
-			.catch(error => {
-				this.props.showFailAlert("Action deploy failed");
-				// refresh status and update loop logs
-				this.refreshStatus(loopName);
-			});
-		});
-	}
-
-	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.showFailAlert("Refresh status failed");
-			this.setState({ show: false, deploying: false  });
-			this.props.history.push('/');
-		});
-	}
-	handleChange(event) {
-		let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
-		deploymentParam[this.state.key][event.target.name] = event.target.value;
-
-		this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}});
-	}
-	renderDeployParamTabs() {
-		if (typeof (this.state.temporaryPropertiesJson) === "undefined") {
-			 return "";
-		}
-
-		const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
-		var indents = [];
-		Object.keys(deployJsonList).forEach(item =>
-			indents.push(<Tab key={item} eventKey={item} title={item}>
-				{this.renderDeployParam(deployJsonList[item])}
-				</Tab>)
-		);
-		return indents;
-	}
-	renderDeployParam(deployJson) {
-		var indents = [];
-		Object.keys(deployJson).forEach(item =>
-		indents.push(<FormStyled key={item}>
-				<Form.Label>{item}</Form.Label>
-				<Form.Control type="text" name={item} onChange={this.handleChange} defaultValue={deployJson[item]}></Form.Control>
-			</FormStyled>));
-		return indents;
-	}
-	render() {
-		return (
-					<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>
-						</Modal.Footer>
-					</ModalStyled>
-		);
-	}
+  constructor(props, context) {
+    super(props, context);
+
+    this.handleSave = this.handleSave.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    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 = {
+      loopCache: this.props.loopCache,
+      temporaryPropertiesJson: propertiesJson,
+      show: true,
+      key: this.getInitialKeyValue(propertiesJson)
+    };
+  }
+
+  getInitialKeyValue(temporaryPropertiesJson) {
+    const deployJsonList = temporaryPropertiesJson["dcaeDeployParameters"];
+    return Object.keys(deployJsonList).find((obj) => Object.keys(deployJsonList).indexOf(obj) === 0);
+  }
+
+  componentWillReceiveProps(newProps) {
+    this.setState({
+      loopName: newProps.loopCache.getLoopName(),
+      show: true
+    });
+  }
+
+  handleClose() {
+    this.setState({ show: false });
+    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.showSucAlert("Action deploy successfully performed");
+        // refresh status and update loop logs
+        this.refreshStatus(loopName);
+      })
+        .catch(error => {
+          this.props.showFailAlert("Action deploy failed");
+          // refresh status and update loop logs
+          this.refreshStatus(loopName);
+        });
+    });
+  }
+
+  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.showFailAlert("Refresh status failed");
+        this.setState({ show: false, deploying: false });
+        this.props.history.push('/');
+      });
+  }
+
+  handleChange(event) {
+    let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
+    deploymentParam[this.state.key][event.target.name] = event.target.value;
+
+    this.setState({ temporaryPropertiesJson: { dcaeDeployParameters: deploymentParam } });
+  }
+
+  renderDeployParamTabs() {
+    if (typeof (this.state.temporaryPropertiesJson) === "undefined") {
+      return "";
+    }
+
+    const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
+    var indents = [];
+    Object.keys(deployJsonList).forEach(item =>
+      indents.push(<Tab key={ item } eventKey={ item } title={ item }>
+        { this.renderDeployParam(deployJsonList[item]) }
+      </Tab>)
+    );
+    return indents;
+  }
+
+  renderDeployParam(deployJson) {
+    var indents = [];
+    Object.keys(deployJson).forEach(item =>
+      indents.push(<FormStyled key={ item }>
+        <Form.Label>{ item }</Form.Label>
+        <Form.Control type="text" name={ item } onChange={ this.handleChange } defaultValue={ deployJson[item] }></Form.Control>
+      </FormStyled>));
+    return indents;
+  }
+
+  render() {
+    return (
+      <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>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
 }
diff --git a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
index 84dbfd1f6..0c68f237c 100644
--- a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
+++ b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
@@ -28,85 +28,87 @@ import LoopActionService from '../../../api/LoopActionService';
 import LoopService from '../../../api/LoopService';
 
 describe('Verify DeployLoopModal', () => {
-	const loopCache = new LoopCache({
-		"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-		"globalPropertiesJson": {
-			"dcaeDeployParameters": {
-				"testMs": {
-					"location_id": "",
-					"policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-				}
-			}
-		}
-	});
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "globalPropertiesJson": {
+      "dcaeDeployParameters": {
+        "testMs": {
+          "location_id": "",
+          "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+        }
+      }
+    }
+  });
 
-	it('Test the render method', () => {
-		const component = shallow(
-			<DeployLoopModal loopCache={loopCache}/>
-		)
+  it('Test the render method', () => {
+    const component = shallow(
+      <DeployLoopModal loopCache={ loopCache }/>
+    )
 
-	expect(component).toMatchSnapshot();
-	});
-	
-	it('Test handleClose', () => {
-		const historyMock = { push: jest.fn() };
-		const handleClose = jest.spyOn(DeployLoopModal.prototype,'handleClose');
-		const component = shallow(<DeployLoopModal history={historyMock} loopCache={loopCache}/>)
+    expect(component).toMatchSnapshot();
+  });
 
-		component.find('[variant="secondary"]').prop('onClick')();
+  it('Test handleClose', () => {
+    const historyMock = { push: jest.fn() };
+    const handleClose = jest.spyOn(DeployLoopModal.prototype, 'handleClose');
+    const component = shallow(<DeployLoopModal history={ historyMock } loopCache={ loopCache }/>)
 
-		expect(handleClose).toHaveBeenCalledTimes(1);
-		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-	});
+    component.find('[variant="secondary"]').prop('onClick')();
 
-	it('Test handleSave successful', async () => {
-		const flushPromises = () => new Promise(setImmediate);
-		const historyMock = { push: jest.fn() };
-		const updateLoopFunction = 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({
-				ok: true,
-				status: 200,
-				text: () => "OK"
-			});
-		});
-		LoopActionService.performAction = jest.fn().mockImplementation(() => {
-			return Promise.resolve({
-				ok: true,
-				status: 200,
-				json: () => {}
-			});
-		});
-		LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
-			return Promise.resolve({
-				ok: true,
-				status: 200,
-				json: () => {}
-			});
-		});
+    expect(handleClose).toHaveBeenCalledTimes(1);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
 
-		const component = shallow(<DeployLoopModal history={historyMock} 
-						loopCache={loopCache} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />)
+  it('Test handleSave successful', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    const historyMock = { push: jest.fn() };
+    const updateLoopFunction = 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({
+        ok: true,
+        status: 200,
+        text: () => "OK"
+      });
+    });
+    LoopActionService.performAction = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+        }
+      });
+    });
+    LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+        }
+      });
+    });
 
-		component.find('[variant="primary"]').prop('onClick')();
-		await flushPromises();
-		component.update();
+    const component = shallow(<DeployLoopModal history={ historyMock }
+                                               loopCache={ loopCache } updateLoopFunction={ updateLoopFunction } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert }/>)
 
-		expect(handleSave).toHaveBeenCalledTimes(1);
-		expect(component.state('show')).toEqual(false);
-		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-		handleSave.mockClear();
-	});
+    component.find('[variant="primary"]').prop('onClick')();
+    await flushPromises();
+    component.update();
 
-	it('Onchange event', () => {
-		const event = { target: { name: "location_id", value: "testLocation"} };
-		const component = shallow(<DeployLoopModal loopCache={loopCache}/>);
+    expect(handleSave).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+    handleSave.mockClear();
+  });
 
-		component.find('[name="location_id"]').simulate('change', event);
-		component.update();
-		expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.testMs.location_id).toEqual("testLocation");
-	});
-});
\ No newline at end of file
+  it('Onchange event', () => {
+    const event = { target: { name: "location_id", value: "testLocation" } };
+    const component = shallow(<DeployLoopModal loopCache={ loopCache }/>);
+
+    component.find('[name="location_id"]').simulate('change', event);
+    component.update();
+    expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.testMs.location_id).toEqual("testLocation");
+  });
+});
diff --git a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
index acd0acade..69177134b 100644
--- a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
+++ b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
@@ -28,91 +28,91 @@ import styled from 'styled-components';
 import LoopService from '../../../api/LoopService';
 
 const ModalStyled = styled(Modal)`
-	background-color: transparent;
+  background-color: transparent;
 `
 export default class LoopPropertiesModal extends React.Component {
 
-	state = {
-		show: true,
-		loopCache: this.props.loopCache,
-		temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()))
-	};
+  state = {
+    show: true,
+    loopCache: this.props.loopCache,
+    temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()))
+  };
 
-	constructor(props, context) {
-		super(props, context);
+  constructor(props, context) {
+    super(props, context);
 
-		this.handleClose = this.handleClose.bind(this);
-		this.handleSave = this.handleSave.bind(this);
-		this.handleChange = this.handleChange.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleSave = this.handleSave.bind(this);
+    this.handleChange = this.handleChange.bind(this);
 
-		this.renderDcaeParameters = this.renderDcaeParameters.bind(this);
-		this.renderAllParameters = this.renderAllParameters.bind(this);
-		this.getDcaeParameters = this.getDcaeParameters.bind(this);
-		this.readOnly = props.readOnly !== undefined ? props.readOnly : false;
-	}
+    this.renderDcaeParameters = this.renderDcaeParameters.bind(this);
+    this.renderAllParameters = this.renderAllParameters.bind(this);
+    this.getDcaeParameters = this.getDcaeParameters.bind(this);
+    this.readOnly = props.readOnly !== undefined ? props.readOnly : false;
+  }
 
-	componentWillReceiveProps(newProps) {
-		this.setState({
-			loopCache: newProps.loopCache,
-			temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties()))
-		});
-	}
+  componentWillReceiveProps(newProps) {
+    this.setState({
+      loopCache: newProps.loopCache,
+      temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties()))
+    });
+  }
 
-	handleClose() {
-		this.props.history.push('/');
-	}
+  handleClose() {
+    this.props.history.push('/');
+  }
 
-	handleSave(event) {
-		LoopService.updateGlobalProperties(this.state.loopCache.getLoopName(), this.state.temporaryPropertiesJson).then(resp => {
-			this.setState({ show: false });
-			this.props.history.push('/');
-			this.props.loadLoopFunction(this.state.loopCache.getLoopName());
-		});
-	}
+  handleSave(event) {
+    LoopService.updateGlobalProperties(this.state.loopCache.getLoopName(), this.state.temporaryPropertiesJson).then(resp => {
+      this.setState({ show: false });
+      this.props.history.push('/');
+      this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+    });
+  }
 
-	handleChange(event) {
-		this.setState({temporaryPropertiesJson:{[event.target.name]: JSON.parse(event.target.value)}});
-	}
+  handleChange(event) {
+    this.setState({ temporaryPropertiesJson: { [event.target.name]: JSON.parse(event.target.value) } });
+  }
 
-	renderAllParameters() {
-		return (<Modal.Body>
-			<Form>
-				{this.renderDcaeParameters()}
-			</Form>
-		</Modal.Body>
-		);
-	}
+  renderAllParameters() {
+    return (<Modal.Body>
+        <Form>
+          { this.renderDcaeParameters() }
+        </Form>
+      </Modal.Body>
+    );
+  }
 
-	getDcaeParameters() {
-		if (typeof (this.state.temporaryPropertiesJson) !== "undefined") {
-			return JSON.stringify(this.state.temporaryPropertiesJson["dcaeDeployParameters"]);
-		} else {
-			return "";
-		}
+  getDcaeParameters() {
+    if (typeof (this.state.temporaryPropertiesJson) !== "undefined") {
+      return JSON.stringify(this.state.temporaryPropertiesJson["dcaeDeployParameters"]);
+    } else {
+      return "";
+    }
 
-	}
+  }
 
-	renderDcaeParameters() {
-		return (
-			<Form.Group >
-				<Form.Label>Deploy Parameters</Form.Label>
-				<Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={this.handleChange} defaultValue={this.getDcaeParameters()}></Form.Control>
-			</Form.Group>
-		);
-	}
+  renderDcaeParameters() {
+    return (
+      <Form.Group>
+        <Form.Label>Deploy Parameters</Form.Label>
+        <Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={ this.handleChange } defaultValue={ this.getDcaeParameters() }></Form.Control>
+      </Form.Group>
+    );
+  }
 
-	render() {
-		return (
-			<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>
-					{this.renderAllParameters()}
-				<Modal.Footer>
-					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
-					<Button variant="primary" type="submit" disabled={this.readOnly}  onClick={this.handleSave}>Save Changes</Button>
-				</Modal.Footer>
-			</ModalStyled>
-		);
-	}
+  render() {
+    return (
+      <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>
+        { this.renderAllParameters() }
+        <Modal.Footer>
+          <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button>
+          <Button variant="primary" type="submit" disabled={ this.readOnly } onClick={ this.handleSave }>Save Changes</Button>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
 }
diff --git a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js
index 5bbefe228..a9c5903a4 100644
--- a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js
+++ b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js
@@ -27,82 +27,84 @@ import LoopCache from '../../../api/LoopCache';
 import LoopService from '../../../api/LoopService';
 
 describe('Verify LoopPropertiesModal', () => {
-	const loopCache = new LoopCache({
-		"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-		"globalPropertiesJson": {
-			"dcaeDeployParameters": {
-				"location_id": "",
-				"policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-			}
-		}
-	});
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "globalPropertiesJson": {
+      "dcaeDeployParameters": {
+        "location_id": "",
+        "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+      }
+    }
+  });
 
-	it('Test the render method', () => {
-		const component = shallow(
-			<LoopPropertiesModal loopCache={loopCache}/>
-		)
-		component.setState({ show: true,
-			temporaryPropertiesJson: {
-				"dcaeDeployParameters": {
-					"location_id": "",
-					"policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-				}
-			}
-		});
+  it('Test the render method', () => {
+    const component = shallow(
+      <LoopPropertiesModal loopCache={ loopCache }/>
+    )
+    component.setState({
+      show: true,
+      temporaryPropertiesJson: {
+        "dcaeDeployParameters": {
+          "location_id": "",
+          "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+        }
+      }
+    });
 
-	expect(component.state('temporaryPropertiesJson')).toEqual({
-	"dcaeDeployParameters": {
-		"location_id": "",
-		"policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"}
-	});
-	expect(component.state('show')).toEqual(true);
+    expect(component.state('temporaryPropertiesJson')).toEqual({
+      "dcaeDeployParameters": {
+        "location_id": "",
+        "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+      }
+    });
+    expect(component.state('show')).toEqual(true);
 
-	expect(component).toMatchSnapshot();
-	});
+    expect(component).toMatchSnapshot();
+  });
 
-	it('Test handleClose', () => {
-		const historyMock = { push: jest.fn() };
-		const handleClose = jest.spyOn(LoopPropertiesModal.prototype,'handleClose');
-		const component = shallow(<LoopPropertiesModal history={historyMock} loopCache={loopCache}/>)
+  it('Test handleClose', () => {
+    const historyMock = { push: jest.fn() };
+    const handleClose = jest.spyOn(LoopPropertiesModal.prototype, 'handleClose');
+    const component = shallow(<LoopPropertiesModal history={ historyMock } loopCache={ loopCache }/>)
 
-		component.find('[variant="secondary"]').prop('onClick')();
+    component.find('[variant="secondary"]').prop('onClick')();
 
-		expect(handleClose).toHaveBeenCalledTimes(1);
-		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-	});
+    expect(handleClose).toHaveBeenCalledTimes(1);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
 
-	it('Test handleSave successful', async () => {
-		const flushPromises = () => new Promise(setImmediate);
-		const historyMock = { push: jest.fn() };
-		const loadLoopFunction = jest.fn();
-		const handleSave = jest.spyOn(LoopPropertiesModal.prototype,'handleSave');
-		LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => {
-			return Promise.resolve({
-				ok: true,
-				status: 200,
-				text: () => "OK"
-			});
-		});
+  it('Test handleSave successful', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    const historyMock = { push: jest.fn() };
+    const loadLoopFunction = jest.fn();
+    const handleSave = jest.spyOn(LoopPropertiesModal.prototype, 'handleSave');
+    LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        text: () => "OK"
+      });
+    });
 
-		const component = shallow(<LoopPropertiesModal history={historyMock} 
-						loopCache={loopCache} loadLoopFunction={loadLoopFunction} />)
+    const component = shallow(<LoopPropertiesModal history={ historyMock }
+                                                   loopCache={ loopCache } loadLoopFunction={ loadLoopFunction }/>)
 
-		component.find('[variant="primary"]').prop('onClick')();
-		await flushPromises();
-		component.update();
+    component.find('[variant="primary"]').prop('onClick')();
+    await flushPromises();
+    component.update();
 
-		expect(handleSave).toHaveBeenCalledTimes(1);
-		expect(component.state('show')).toEqual(false);
-		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-	});
+    expect(handleSave).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
 
-	it('Onchange event', () => {
-		const event = {target:{name:"dcaeDeployParameters", value:"{\"location_id\": \"testLocation\",\"policy_id\": \"TCA_h2NMX_v1_0_ResourceInstanceName1_tca\"}"}};
-		const component = shallow(<LoopPropertiesModal loopCache={loopCache}/>);
+  it('Onchange event', () => {
+    const event = { target: { name: "dcaeDeployParameters", value: "{\"location_id\": \"testLocation\",\"policy_id\": \"TCA_h2NMX_v1_0_ResourceInstanceName1_tca\"}" } };
+    const component = shallow(<LoopPropertiesModal loopCache={ loopCache }/>);
 
-		component.find('FormControl').simulate('change', event);
-		component.update();
+    component.find('FormControl').simulate('change', event);
+    component.update();
 
-		expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.location_id).toEqual("testLocation");
-	});
+    expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.location_id).toEqual("testLocation");
+  });
 });
diff --git a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
index f6c0d2ede..0d203418b 100644
--- a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
+++ b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
@@ -40,208 +40,223 @@ import Tab from 'react-bootstrap/Tab';
 import Alert from 'react-bootstrap/Alert';
 
 const ModalStyled = styled(Modal)`
-	background-color: transparent;
+  background-color: transparent;
 `
 const TextModal = styled.textarea`
-	margin-top: 20px;
-	white-space:pre;
-	background-color: ${props => props.theme.toscaTextareaBackgroundColor};
-	text-align: justify;
-	font-size: ${props => props.theme.toscaTextareaFontSize};
-	width: 100%;
-	height: 300px;
+  margin-top: 20px;
+  white-space: pre;
+  background-color: ${ props => props.theme.toscaTextareaBackgroundColor };
+  text-align: justify;
+  font-size: ${ props => props.theme.toscaTextareaFontSize };
+  width: 100%;
+  height: 300px;
 `
 const cellStyle = { border: '1px solid black' };
-const headerStyle = { backgroundColor: '#ddd',	border: '2px solid black'	};
-const rowHeaderStyle = {backgroundColor:'#ddd',  fontSize: '15pt', text: 'bold', border: '1px solid black'};
+const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' };
+const rowHeaderStyle = { backgroundColor: '#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black' };
 
 export default class ModifyLoopModal extends React.Component {
 
-	state = {
-		show: true,
-		loopCache: this.props.loopCache,
-		content: 'Please select Tosca model to view the details',
-		selectedRowData: {},
-		toscaPolicyModelsData: [],
-		selectedPolicyModelsData: [],
-		key: 'add',
-		showFailAlert: false,
-		toscaColumns: [
-			{ title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
-				cellStyle: cellStyle,
-				headerStyle: headerStyle
-			},
-			{ title: "Policy Model Type", field: "policyModelType",
-				cellStyle: cellStyle,
-				headerStyle: headerStyle
-			},
-			{ title: "Policy Acronym", field: "policyAcronym",
-				cellStyle: cellStyle,
-				headerStyle: headerStyle
-			},
-			{ title: "Policy Name", field: "policyName",
-             	cellStyle: cellStyle,
-                headerStyle: headerStyle
-            },
-			{ title: "Version", field: "version",
-				cellStyle: cellStyle,
-				headerStyle: headerStyle
-			},
-			{ title: "Uploaded By", field: "updatedBy",
-				cellStyle: cellStyle,
-				headerStyle: headerStyle
-			},
-			{ title: "Uploaded Date", field: "updatedDate", editable: 'never',
-				cellStyle: cellStyle,
-				headerStyle: headerStyle
-			},
-             { title: "Created Date", field: "createdDate", editable: 'never',
-             	cellStyle: cellStyle,
-             	headerStyle: headerStyle
-             }
-		],
-		tableIcons: {
-		    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
-		    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
-		    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
-		    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
-		    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
-		    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
-		    SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />)
-		}
-	};
+  state = {
+    show: true,
+    loopCache: this.props.loopCache,
+    content: 'Please select Tosca model to view the details',
+    selectedRowData: {},
+    toscaPolicyModelsData: [],
+    selectedPolicyModelsData: [],
+    key: 'add',
+    showFailAlert: false,
+    toscaColumns: [
+      {
+        title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Model Type", field: "policyModelType",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Acronym", field: "policyAcronym",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Name", field: "policyName",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Version", field: "version",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Uploaded By", field: "updatedBy",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Uploaded Date", field: "updatedDate", editable: 'never',
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Created Date", field: "createdDate", editable: 'never',
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      }
+    ],
+    tableIcons: {
+      FirstPage: forwardRef((props, ref) => <FirstPage { ...props } ref={ ref }/>),
+      LastPage: forwardRef((props, ref) => <LastPage { ...props } ref={ ref }/>),
+      NextPage: forwardRef((props, ref) => <ChevronRight { ...props } ref={ ref }/>),
+      PreviousPage: forwardRef((props, ref) => <ChevronLeft { ...props } ref={ ref }/>),
+      ResetSearch: forwardRef((props, ref) => <Clear { ...props } ref={ ref }/>),
+      Search: forwardRef((props, ref) => <Search { ...props } ref={ ref }/>),
+      SortArrow: forwardRef((props, ref) => <ArrowUpward { ...props } ref={ ref }/>)
+    }
+  };
 
-	constructor(props, context) {
-		super(props, context);
-		this.handleClose = this.handleClose.bind(this);
-		this.initializeToscaPolicyModelsInfo = this.initializeToscaPolicyModelsInfo.bind(this);
-		this.handleYamlContent = this.handleYamlContent.bind(this);
-		this.getToscaPolicyModelYaml = this.getToscaPolicyModelYaml.bind(this);
-		this.handleAdd = this.handleAdd.bind(this);
-		this.handleRemove = this.handleRemove.bind(this);
-		this.initializeToscaPolicyModelsInfo();
-	}
+  constructor(props, context) {
+    super(props, context);
+    this.handleClose = this.handleClose.bind(this);
+    this.initializeToscaPolicyModelsInfo = this.initializeToscaPolicyModelsInfo.bind(this);
+    this.handleYamlContent = this.handleYamlContent.bind(this);
+    this.getToscaPolicyModelYaml = this.getToscaPolicyModelYaml.bind(this);
+    this.handleAdd = this.handleAdd.bind(this);
+    this.handleRemove = this.handleRemove.bind(this);
+    this.initializeToscaPolicyModelsInfo();
+  }
 
-	initializeToscaPolicyModelsInfo() {
-		var operationalPolicies = this.state.loopCache.getOperationalPolicies();
-		var selectedPolicyModels = [];
-		for (var policy in operationalPolicies) {
-		    var newRow = operationalPolicies[policy]["policyModel"];
-		    newRow["policyName"] = operationalPolicies[policy].name;
-			selectedPolicyModels.push(newRow);
-		}
+  initializeToscaPolicyModelsInfo() {
+    var operationalPolicies = this.state.loopCache.getOperationalPolicies();
+    var selectedPolicyModels = [];
+    for (var policy in operationalPolicies) {
+      var newRow = operationalPolicies[policy]["policyModel"];
+      newRow["policyName"] = operationalPolicies[policy].name;
+      selectedPolicyModels.push(newRow);
+    }
 
-		PolicyToscaService.getToscaPolicyModels().then(allToscaModels => {
-			this.setState({ toscaPolicyModelsData: allToscaModels,
-							selectedPolicyModelsData: selectedPolicyModels});
-		});
-	}
+    PolicyToscaService.getToscaPolicyModels().then(allToscaModels => {
+      this.setState({
+        toscaPolicyModelsData: allToscaModels,
+        selectedPolicyModelsData: selectedPolicyModels
+      });
+    });
+  }
 
-	getToscaPolicyModelYaml(policyModelType, policyModelVersion) {
-		if (typeof policyModelType !== "undefined") {
-			PolicyToscaService.getToscaPolicyModelYaml(policyModelType, policyModelVersion).then(toscaYaml => {
-				if (toscaYaml.length !== 0) {
-					this.setState({content: toscaYaml})
-				} else {
-					this.setState({ content: 'No Tosca model Yaml available' })
-				}
-			});
-		} else {
-			this.setState({ content: 'Please select Tosca model to view the details' })
-		}
-	}
+  getToscaPolicyModelYaml(policyModelType, policyModelVersion) {
+    if (typeof policyModelType !== "undefined") {
+      PolicyToscaService.getToscaPolicyModelYaml(policyModelType, policyModelVersion).then(toscaYaml => {
+        if (toscaYaml.length !== 0) {
+          this.setState({ content: toscaYaml })
+        } else {
+          this.setState({ content: 'No Tosca model Yaml available' })
+        }
+      });
+    } else {
+      this.setState({ content: 'Please select Tosca model to view the details' })
+    }
+  }
 
-	handleYamlContent(event) {
-		this.setState({ content: event.target.value });
-	}
+  handleYamlContent(event) {
+    this.setState({ content: event.target.value });
+  }
 
-	handleClose() {
-		this.setState({ show: false });
-		this.props.history.push('/');
-	}
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/');
+  }
 
-	renderAlert() {
-		return (
-			<div>
-				<Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
-					{this.state.showMessage}
-				</Alert>
-			</div>
-		);
-	}
+  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)
-		.then(pars => {
-			this.props.loadLoopFunction(this.state.loopCache.getLoopName());
-			this.handleClose();
-		})
-		.catch(error => {
-			this.setState({ showFailAlert: true, showMessage: "Adding failed with error: " + error.message});
-		});
-	}
+  handleAdd() {
+    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,this.state.selectedRowData.policyName);
-		this.props.loadLoopFunction(this.state.loopCache.getLoopName());
-		this.handleClose();
-	}
+  handleRemove() {
+    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} backdrop="static" keyboard={false} >
-				<Modal.Header closeButton>
-					<Modal.Title>Modify Loop Operational Policies</Modal.Title>
-				</Modal.Header>
-				<Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key, selectedRowData: {} })}>
-					<Tab eventKey="add" title="Add Operational Policies">
-						<Modal.Body>
-							<MaterialTable
-							title={"View Tosca Policy Models"}
-							data={this.state.toscaPolicyModelsData}
-							columns={this.state.toscaColumns}
-							icons={this.state.tableIcons}
-							onRowClick={(event, rowData) => {this.getToscaPolicyModelYaml(rowData.policyModelType, rowData.version);this.setState({selectedRowData: rowData})}}
-							options={{
-								headerStyle: rowHeaderStyle,
-								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={"Tosca Policy Models already added"}
-							data={this.state.selectedPolicyModelsData}
-							columns={this.state.toscaColumns}
-							icons={this.state.tableIcons}
-							onRowClick={(event, rowData) => {this.setState({selectedRowData: rowData})}}
-							options={{
-								headerStyle: rowHeaderStyle,
-								rowStyle: rowData => ({
-									backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined
-									&& this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF'
-								})
-							}}
-							/>
-						</Modal.Body>
-					</Tab>
-				</Tabs>
-				<Modal.Footer>
-					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
-					<Button variant="primary" disabled={(this.state.key === "remove")} type="submit" onClick={this.handleAdd}>Add</Button>
-					<Button variant="primary" disabled={(this.state.key === "add")} type="submit" onClick={this.handleRemove}>Remove</Button>
-				</Modal.Footer>
+  render() {
+    return (
+      <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>
+        <Tabs id="controlled-tab-example" activeKey={ this.state.key } onSelect={ key => this.setState({ key, selectedRowData: {} }) }>
+          <Tab eventKey="add" title="Add Operational Policies">
+            <Modal.Body>
+              <MaterialTable
+                title={ "View Tosca Policy Models" }
+                data={ this.state.toscaPolicyModelsData }
+                columns={ this.state.toscaColumns }
+                icons={ this.state.tableIcons }
+                onRowClick={ (event, rowData) => {
+                  this.getToscaPolicyModelYaml(rowData.policyModelType, rowData.version);
+                  this.setState({ selectedRowData: rowData })
+                } }
+                options={ {
+                  headerStyle: rowHeaderStyle,
+                  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={ "Tosca Policy Models already added" }
+                data={ this.state.selectedPolicyModelsData }
+                columns={ this.state.toscaColumns }
+                icons={ this.state.tableIcons }
+                onRowClick={ (event, rowData) => {
+                  this.setState({ selectedRowData: rowData })
+                } }
+                options={ {
+                  headerStyle: rowHeaderStyle,
+                  rowStyle: rowData => ({
+                    backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined
+                      && this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF'
+                  })
+                } }
+              />
+            </Modal.Body>
+          </Tab>
+        </Tabs>
+        <Modal.Footer>
+          <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button>
+          <Button variant="primary" disabled={ (this.state.key === "remove") } type="submit" onClick={ this.handleAdd }>Add</Button>
+          <Button variant="primary" disabled={ (this.state.key === "add") } type="submit" onClick={ this.handleRemove }>Remove</Button>
+        </Modal.Footer>
 
-			</ModalStyled>
-		);
-	}
+      </ModalStyled>
+    );
+  }
 }
diff --git a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js
index 055ad0e68..79267af4f 100644
--- a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js
+++ b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js
@@ -28,82 +28,82 @@ import LoopService from '../../../api/LoopService';
 import PolicyToscaService from '../../../api/PolicyToscaService';
 
 describe('Verify ModifyLoopModal', () => {
-    beforeEach(() => {
-        PolicyToscaService.getToscaPolicyModels = jest.fn().mockImplementation(() => {
-            return Promise.resolve([{
-                "policyModelType":"test",
-                "policyAcronym":"test",
-                "version":"1.0.0",
-                "updatedBy":"",
-                "updatedDate":""
-            }]);
-        });
-        PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
-            return Promise.resolve("OK");
-        });
-    })
+  beforeEach(() => {
+    PolicyToscaService.getToscaPolicyModels = jest.fn().mockImplementation(() => {
+      return Promise.resolve([{
+        "policyModelType": "test",
+        "policyAcronym": "test",
+        "version": "1.0.0",
+        "updatedBy": "",
+        "updatedDate": ""
+      }]);
+    });
+    PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
+      return Promise.resolve("OK");
+    });
+  })
 
-    const loopCache = new LoopCache({
-            "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-            "microServicePolicies": [{
-                "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
-                "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
-                "properties": {"domain": "measurementsForVfScaling"},
-                "shared": false,
-                "jsonRepresentation": {"schema": {}}
-            }],
-            "globalPropertiesJson": {
-                "dcaeDeployParameters": {
-                    "testMs": {
-                    "location_id": "",
-                    "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-                }
-            }
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "microServicePolicies": [{
+      "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
+      "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
+      "properties": { "domain": "measurementsForVfScaling" },
+      "shared": false,
+      "jsonRepresentation": { "schema": {} }
+    }],
+    "globalPropertiesJson": {
+      "dcaeDeployParameters": {
+        "testMs": {
+          "location_id": "",
+          "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
         }
-    });
-    const historyMock = { push: jest.fn() };
-    const flushPromises = () => new Promise(setImmediate);
+      }
+    }
+  });
+  const historyMock = { push: jest.fn() };
+  const flushPromises = () => new Promise(setImmediate);
 
-    it('Test handleClose', () => {
-        const handleClose = jest.spyOn(ModifyLoopModal.prototype,'handleClose');
-        const component = mount(<ModifyLoopModal history={historyMock} loopCache={loopCache}/>)
+  it('Test handleClose', () => {
+    const handleClose = jest.spyOn(ModifyLoopModal.prototype, 'handleClose');
+    const component = mount(<ModifyLoopModal history={ historyMock } loopCache={ loopCache }/>)
 
-        component.find('[variant="secondary"]').get(0).props.onClick();
+    component.find('[variant="secondary"]').get(0).props.onClick();
 
-        expect(handleClose).toHaveBeenCalledTimes(1);
-        expect(component.state('show')).toEqual(false);
-        expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-    });
+    expect(handleClose).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
 
-    it('Test getToscaPolicyModelYaml',  async () => {
-        const flushPromises = () => new Promise(setImmediate);
-        const component = mount(<ModifyLoopModal history={historyMock} loopCache={loopCache}/>)
-        component.setState({ 
-                "selectedRowData": {"tableData":{"id":0}}
-        });
-        const instance = component.instance();
+  it('Test getToscaPolicyModelYaml', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    const component = mount(<ModifyLoopModal history={ historyMock } loopCache={ loopCache }/>)
+    component.setState({
+      "selectedRowData": { "tableData": { "id": 0 } }
+    });
+    const instance = component.instance();
 
-        instance.getToscaPolicyModelYaml("","1.0.0");
-        expect(component.state('content')).toEqual("Please select Tosca model to view the details");
+    instance.getToscaPolicyModelYaml("", "1.0.0");
+    expect(component.state('content')).toEqual("Please select Tosca model to view the details");
 
-        instance.getToscaPolicyModelYaml("test","1.0.0");
-        await flushPromises();
-        expect(component.state('content')).toEqual("OK");
+    instance.getToscaPolicyModelYaml("test", "1.0.0");
+    await flushPromises();
+    expect(component.state('content')).toEqual("OK");
 
-        PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
-            return Promise.resolve("");
-        });
-        instance.getToscaPolicyModelYaml("test","1.0.0");
-        await flushPromises();
-        expect(component.state('content')).toEqual("No Tosca model Yaml available");
+    PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
+      return Promise.resolve("");
     });
+    instance.getToscaPolicyModelYaml("test", "1.0.0");
+    await flushPromises();
+    expect(component.state('content')).toEqual("No Tosca model Yaml available");
+  });
 
-    it('Test handleYamlContent',  async () => {
-        const component = mount(<ModifyLoopModal loopCache={loopCache}/>)
-        const instance = component.instance();
+  it('Test handleYamlContent', async () => {
+    const component = mount(<ModifyLoopModal loopCache={ loopCache }/>)
+    const instance = component.instance();
 
-        const event = {"target":{"value":"testValue"}}
-        instance.handleYamlContent(event);
-        expect(component.state('content')).toEqual("testValue");
-    });
-});
\ No newline at end of file
+    const event = { "target": { "value": "testValue" } }
+    instance.handleYamlContent(event);
+    expect(component.state('content')).toEqual("testValue");
+  });
+});
diff --git a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
index b45df6502..b6407fbbb 100644
--- a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -34,104 +34,106 @@ import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
 import LoopCache from '../../../api/LoopCache';
 
 const ModalStyled = styled(Modal)`
-	background-color: transparent;
+  background-color: transparent;
 `
 const CheckBoxStyled = styled(FormCheck.Input)`
-	margin-left:3rem;
+  margin-left: 3rem;
 `
 
 export default class OpenLoopModal extends React.Component {
-	constructor(props, context) {
-		super(props, context);
+  constructor(props, context) {
+    super(props, context);
 
-		this.getLoopNames = this.getLoopNames.bind(this);
-		this.handleOpen = this.handleOpen.bind(this);
-		this.handleClose = this.handleClose.bind(this);
-		this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
-		this.renderSvg = this.renderSvg.bind(this);
-		this.showReadOnly = props.showReadOnly !== undefined ? props.showReadOnly : true;
-		this.state = {
-			show: true,
-			chosenLoopName: '',
-			loopNames: [],
-			loopCacheOpened: new LoopCache({})
-		};
-	}
+    this.getLoopNames = this.getLoopNames.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
+    this.renderSvg = this.renderSvg.bind(this);
+    this.showReadOnly = props.showReadOnly !== undefined ? props.showReadOnly : true;
+    this.state = {
+      show: true,
+      chosenLoopName: '',
+      loopNames: [],
+      loopCacheOpened: new LoopCache({})
+    };
+  }
 
-	componentWillMount() {
-		this.getLoopNames();
-	}
+  componentWillMount() {
+    this.getLoopNames();
+  }
 
-	handleClose() {
-		this.setState({ show: false });
-		this.props.history.push('/');
-	}
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/');
+  }
 
-	handleDropDownListChange(e) {
-        LoopService.getLoop(e.value).then(loop => {
-            this.setState({
-                chosenLoopName: e.value,
-                loopCacheOpened: new LoopCache(loop)
-             });
-		});
-	}
+  handleDropDownListChange(e) {
+    LoopService.getLoop(e.value).then(loop => {
+      this.setState({
+        chosenLoopName: e.value,
+        loopCacheOpened: new LoopCache(loop)
+      });
+    });
+  }
 
-	getLoopNames() {
-		LoopService.getLoopNames().then(loopNames => {
-		    if (Object.entries(loopNames).length !== 0) {
-		        const loopOptions = loopNames.filter(loopName => loopName!=='undefined').map((loopName) => { return { label: loopName, value: loopName } });
-            	this.setState({ loopNames: loopOptions })
-		    }
-		});
-	}
+  getLoopNames() {
+    LoopService.getLoopNames().then(loopNames => {
+      if (Object.entries(loopNames).length !== 0) {
+        const loopOptions = loopNames.filter(loopName => loopName !== 'undefined').map((loopName) => {
+          return { label: loopName, value: loopName }
+        });
+        this.setState({ loopNames: loopOptions })
+      }
+    });
+  }
 
-	handleOpen() {
-		console.info("Loop " + this.state.chosenLoopName + " is chosen");
-        this.handleClose();
-		this.props.loadLoopFunction(this.state.chosenLoopName);
-	}
+  handleOpen() {
+    console.info("Loop " + this.state.chosenLoopName + " is chosen");
+    this.handleClose();
+    this.props.loadLoopFunction(this.state.chosenLoopName);
+  }
 
-	renderSvg() {
-		return(
-				<SvgGenerator loopCache={this.state.loopCacheOpened} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE}/>
-		);
-	}
+  renderSvg() {
+    return (
+      <SvgGenerator loopCache={ this.state.loopCacheOpened } clickable={ false } generatedFrom={ SvgGenerator.GENERATED_FROM_INSTANCE }/>
+    );
+  }
 
-	render() {
-		return (
-			<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>
-						<Col sm="10">
-							<Select onChange={this.handleDropDownListChange}
-							options={this.state.loopNames} />
-						</Col>
-					</Form.Group>
-					<Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
-						<Form.Label column sm="2">Model Preview:</Form.Label>
-						<Col sm="10">
-						    {this.renderSvg()}
-						</Col>
-					</Form.Group>
-					{this.showReadOnly === true ?
-						<Form.Group as={Row} controlId="formBasicCheckbox">
-							<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>
-					<Button variant="primary" type="submit" onClick={this.handleOpen}>Open</Button>
-				</Modal.Footer>
-			</ModalStyled>
+  render() {
+    return (
+      <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>
+            <Col sm="10">
+              <Select onChange={ this.handleDropDownListChange }
+                      options={ this.state.loopNames }/>
+            </Col>
+          </Form.Group>
+          <Form.Group as={ Row } style={ { alignItems: 'center' } } controlId="formSvgPreview">
+            <Form.Label column sm="2">Model Preview:</Form.Label>
+            <Col sm="10">
+              { this.renderSvg() }
+            </Col>
+          </Form.Group>
+          { this.showReadOnly === true ?
+            <Form.Group as={ Row } controlId="formBasicCheckbox">
+              <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>
+          <Button variant="primary" type="submit" onClick={ this.handleOpen }>Open</Button>
+        </Modal.Footer>
+      </ModalStyled>
 
-		);
-	}
+    );
+  }
 }
diff --git a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
index 1865869df..6b2dc4afb 100644
--- a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
+++ b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
@@ -28,15 +28,15 @@ import LoopService from '../../../api/LoopService';
 describe('Verify OpenLoopModal', () => {
 
   beforeEach(() => {
-      fetch.resetMocks();
-      fetch.mockResponse(JSON.stringify([
-        "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca",
-        "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3",
-        "LOOP_gmtAS_v1_0_ResourceInstanceName2_tca_2"
-      ]));
+    fetch.resetMocks();
+    fetch.mockResponse(JSON.stringify([
+      "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca",
+      "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3",
+      "LOOP_gmtAS_v1_0_ResourceInstanceName2_tca_2"
+    ]));
   });
 
-    it('Test the render method', () => {
+  it('Test the render method', () => {
 
     const component = shallow(<OpenLoopModal/>);
     expect(component).toMatchSnapshot();
@@ -45,13 +45,14 @@ describe('Verify OpenLoopModal', () => {
   it('Onchange event', async () => {
     const flushPromises = () => new Promise(setImmediate);
     LoopService.getLoop = jest.fn().mockImplementation(() => {
-  		return Promise.resolve({
-  			ok: true,
-  			status: 200,
-  			json: () => {}
-  		});
-  	});
-    const event = {value: 'LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3'};
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+        }
+      });
+    });
+    const event = { value: 'LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3' };
     const component = shallow(<OpenLoopModal/>);
     component.find('StateManager').simulate('change', event);
     await flushPromises();
@@ -61,30 +62,30 @@ describe('Verify OpenLoopModal', () => {
 
 
   it('Test handleClose', () => {
-    const historyMock = { push: jest.fn() }; 
-    const handleClose = jest.spyOn(OpenLoopModal.prototype,'handleClose');
-    const component = shallow(<OpenLoopModal history={historyMock} />)
+    const historyMock = { push: jest.fn() };
+    const handleClose = jest.spyOn(OpenLoopModal.prototype, 'handleClose');
+    const component = shallow(<OpenLoopModal history={ historyMock }/>)
 
     component.find('[variant="secondary"]').prop('onClick')();
 
     expect(handleClose).toHaveBeenCalledTimes(1);
     expect(component.state('show')).toEqual(false);
-    expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-    
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+
     handleClose.mockClear();
   });
 
-    it('Test handleSubmit', () => {
+  it('Test handleSubmit', () => {
     const historyMock = { push: jest.fn() };
-    const loadLoopFunction = jest.fn();  
-    const handleOpen = jest.spyOn(OpenLoopModal.prototype,'handleOpen');
-    const component = shallow(<OpenLoopModal history={historyMock} loadLoopFunction={loadLoopFunction}/>)
+    const loadLoopFunction = jest.fn();
+    const handleOpen = jest.spyOn(OpenLoopModal.prototype, 'handleOpen');
+    const component = shallow(<OpenLoopModal history={ historyMock } loadLoopFunction={ loadLoopFunction }/>)
 
     component.find('[variant="primary"]').prop('onClick')();
 
     expect(handleOpen).toHaveBeenCalledTimes(1);
     expect(component.state('show')).toEqual(false);
-    expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
 
     handleOpen.mockClear();
   });