1 files changed, 33 insertions, 10 deletions

diff --git a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
index 42c03dac..5154a880 100644
--- a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
@@ -37,7 +37,7 @@ import Search from '@material-ui/icons/Search';
 import LoopService from '../../../api/LoopService';
 import Tabs from 'react-bootstrap/Tabs';
 import Tab from 'react-bootstrap/Tab';
-
+import Alert from 'react-bootstrap/Alert';
 
 const ModalStyled = styled(Modal)`
 	background-color: transparent;
@@ -65,6 +65,7 @@ export default class ModifyLoopModal extends React.Component {
 		toscaPolicyModelsData: [],
 		selectedPolicyModelsData: [],
 		key: 'add',
+		showFailAlert: false,
 		toscaColumns: [
 			{ title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
 				cellStyle: cellStyle,
@@ -78,6 +79,10 @@ export default class ModifyLoopModal extends React.Component {
 				cellStyle: cellStyle,
 				headerStyle: headerStyle
 			},
+			{ title: "Policy Name", field: "policyName",
+             	cellStyle: cellStyle,
+                headerStyle: headerStyle
+            },
 			{ title: "Version", field: "version",
 				cellStyle: cellStyle,
 				headerStyle: headerStyle
@@ -90,7 +95,7 @@ export default class ModifyLoopModal extends React.Component {
 				cellStyle: cellStyle,
 				headerStyle: headerStyle
 			},
-             { title: "Add", field: "updatedDate", editable: 'never',
+             { title: "Created Date", field: "createdDate", editable: 'never',
              	cellStyle: cellStyle,
              	headerStyle: headerStyle
              }
@@ -128,7 +133,9 @@ export default class ModifyLoopModal extends React.Component {
 		var operationalPolicies = this.state.loopCache.getOperationalPolicies();
 		var selectedPolicyModels = [];
 		for (var policy in operationalPolicies) {
-			selectedPolicyModels.push(operationalPolicies[policy]["policyModel"]);
+		    var newRow = operationalPolicies[policy]["policyModel"];
+		    newRow["policyName"] = operationalPolicies[policy].name;
+			selectedPolicyModels.push(newRow);
 		}
 
 		PolicyToscaService.getToscaPolicyModels().then(allToscaModels => {
@@ -160,21 +167,36 @@ export default class ModifyLoopModal extends React.Component {
 		this.props.history.push('/');
 	}
 
+	renderAlert() {
+		return (
+			<div>
+				<Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
+					{this.state.showMessage}
+				</Alert>
+			</div>
+		);
+	}
+
 	handleAdd() {
-		LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version);
-		this.props.loadLoopFunction(this.state.loopCache.getLoopName());
-		this.handleClose();
+		LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version)
+		.then(pars => {
+			this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+			this.handleClose();
+		})
+		.catch(error => {
+			this.setState({ showFailAlert: true, showMessage: "Adding failed with error: " + error.message});
+		});
 	}
 
 	handleRemove() {
-		LoopService.removeOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version);
+		LoopService.removeOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version,this.state.selectedRowData.policyName);
 		this.props.loadLoopFunction(this.state.loopCache.getLoopName());
 		this.handleClose();
 	}
 
 	render() {
 		return (
-			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
 				<Modal.Header closeButton>
 					<Modal.Title>Modify Loop Operational Policies</Modal.Title>
 				</Modal.Header>
@@ -192,18 +214,19 @@ export default class ModifyLoopModal extends React.Component {
 								rowStyle: rowData => ({
 									backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined
 									&& this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF'
-								})
+									})
 							}}
 							/>
 							<div>
 								<TextModal value={this.state.content} onChange={this.handleYamlContent}/>
 							</div>
 						</Modal.Body>
+						{this.renderAlert()}
 					</Tab>
 					<Tab eventKey="remove" title="Remove Operational Policies">
 						<Modal.Body>
 							<MaterialTable
-							title={"Already added Tosca Policy Models"}
+							title={"Tosca Policy Models already added"}
 							data={this.state.selectedPolicyModelsData}
 							columns={this.state.toscaColumns}
 							icons={this.state.tableIcons}