From 843c46f598a407ead0554ccc3b17a4114779b536 Mon Sep 17 00:00:00 2001
From: assimbly <r.meester@caesar.nl>
Date: Fri, 11 Dec 2020 14:33:23 +0100
Subject: [PATCH] Fixes some bugs in edit all page

---
 .../flow/flow-edit-all.component.html         | 404 ++---------
 .../entities/flow/flow-edit-all.component.ts  | 648 +++++++-----------
 2 files changed, 284 insertions(+), 768 deletions(-)

diff --git a/src/main/webapp/app/entities/flow/flow-edit-all.component.html b/src/main/webapp/app/entities/flow/flow-edit-all.component.html
index d1e0be1c..bc2581f3 100644
--- a/src/main/webapp/app/entities/flow/flow-edit-all.component.html
+++ b/src/main/webapp/app/entities/flow/flow-edit-all.component.html
@@ -15,6 +15,7 @@ <h2 *ngIf="!flow.id">
 				<div class="border-bottom my-3">
 					<h3>General</h3>
 				</div>
+
 				<div>
 					<jhi-alert-error></jhi-alert-error>
 					<div class="form-group" [style.display]="'none'">
@@ -105,10 +106,7 @@ <h3>General</h3>
 								</option>
 
 			            </select>
-			            <!--
-							<select class="form-control" id="field_logLevel" formControlName="logLevel">
-									<option *ngFor="let id of logLevelListType" [ngValue]="logLevel[id]">{{logLevel[id]}}</option>
-							</select>-->
+			            
 						</div>
 						<div class="form-group" *ngIf="!singleGateway">
 							<label class="form-control-label" for="field_gateway">Gateway</label>
@@ -130,14 +128,8 @@ <h3>General</h3>
 					<ng-template #servicePopover let-message="message">
 								<div [innerHtml]="servicePopoverMessage"></div>
 					</ng-template>
-					<ng-template #fromPopover let-message="message">
-						<div [innerHtml]="fromPopoverMessage"></div>
-					</ng-template>
-					<ng-template #toPopover let-message="message">
-						<div [innerHtml]="toPopoverMessage"></div>
-					</ng-template>
-					<ng-template #errorPopover let-message="message">
-						<div [innerHtml]="errorPopoverMessage"></div>
+					<ng-template #popover let-message="message">
+						<div [innerHtml]="popoverMessage"></div>
 					</ng-template>
 					<ng-template #hostnamePopover let-message="message">
 								<div [innerHtml]="hostnamePopoverMessage"></div>
@@ -189,171 +181,25 @@ <h4 class="modal-title">Test Connection</h4>
 
 
 
-					<!-- styling of tabset is in global.scss -->
-					<ngb-accordion [closeOthers]="true" activeIds="From" formArrayName="endpointsData" (tabChange)="next(false, false, $event)" #tabs>
-						<ngb-panel ngbPanelTitle id="fromTab">
-							 <ng-template ngbPanelTitle>
-								<span><b>From</b></span>
-						      <i triggers="mouseenter:mouseleave"
-							placement="right" triggers="mouseenter:mouseleave"
-							popoverTitle="Info"
-							 [popover]="fromPopover"
-							class="fa fa-info-circle"></i>
-						    </ng-template>
-							<ng-template ngbPanelContent>
-								<jhi-alert-error></jhi-alert-error>
-									<div class="col-12" style="padding-left: 20px;" [formGroupName]="'0'">
-										<div class="input-group">
-											<a class="col-11"></a>
-											<a class="col-1">
-												 <div ngbDropdown class="d-inline-block" placement="bottom-right">
-								      				<a class="btn" id="dropdownBasic1" ngbDropdownToggle><i class="fa fa-ellipsis-h" style="color:#FFFFFF;"></i></a>
-								      				<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-											        <a ngbDropdownItem role="button" href="{{fromComponentTypeCamelLink}}" [ngClass]="{'disabled': !fromComponentTypeCamelLink}" target="_blank" title="Apache Camel online documentation on the component used for scheme: {{fromEndpoint?.componentType}}.">
-														<span>Camel Documentation</span>
-													</a>
-													<a ngbDropdownItem role="button" href="{{fromComponentTypeAssimblyLink}}" target="_blank" title="Assimbly Gateway online documentation on the component used for scheme: {{fromEndpoint?.componentType}}.">
-														<span>Assimbly Documentation</span>
-													</a>
-													<a ngbDropdownItem role="button" (click)="openTestConnectionModal(testConnectionModal)" title="Test if connection is available">
-														<span>Test Connection</span>
-													</a>
-											      </div>
-											   </div>
-											</a>
-										</div>
-										<div class="form-group" [style.display]="'none'">
-											<label for="id">ID</label>
-											<input type="text" class="form-control" id="id" readonly formControlName="id" />
-										</div>
-										<ng-template #uriPopover let-message="message">
-													<div [innerHtml]="fromUriPopoverMessage"></div>
-										</ng-template>
-										<ng-template #uriFromEditor>
-												<div class="modal-header">
-											      <h4 class="modal-title">URI (context path)</h4>
-											      <button type="button" class="close" aria-label="Close" (click)="cancelModal()">
-											        <span aria-hidden="true">&times;</span>
-											      </button>
-											    </div>
-											    <div class="modal-body">
-											    	 <textarea class="form-control" id="field_uri" formControlName="uri" placeholder="{{fromUriPlaceholder}}" rows="5" [(ngModel)]="fromEndpoint.uri"></textarea>
-											    </div>
-											    <div class="modal-footer">
-											      <button type="button" class="btn btn-outline-dark"  (click)="cancelModal()">Close</button>
-											    </div>
-										</ng-template>
-
-										<div class="form-group">
-											<div class="input-group border-bottom my-3">
-												<h5>URI&ensp;</h5>
-												<i triggers="mouseenter:mouseleave" popoverTitle="Info" container="body" [popover]="uriPopover" class="fa fa-info-circle"></i>
-											</div>
-											<div class="input-group" style="margin-left: -14px;">
-												<ng-select class="col-3" [items]="components.fromTypes" [clearable]="false" formControlName="componentType" id="field_from_type" (change)="setTypeLinks(fromEndpoint, 0, $event)"></ng-select>
-												<a>:</a><span style="display:inline-block; width: 14px;"></span>
-												<input type="text" class="form-control col-6.5" id="field_uri" formControlName="uri" placeholder="{{fromUriPlaceholder}}" [(ngModel)]="fromEndpoint.uri"/>
-												<button type="button" class="col-2 btn btn-primary left-border-radius-0" title="Enlarge" (click)="openModal(uriFromEditor)">
-													<span class="fa fa-pencil padding-button"></span>&nbsp;
-												</button>
-											</div>
-										</div>
-										<div *ngIf="editFlowForm['controls'].endpointsData['controls'][0]['controls'].componentType.errors && (editFlowForm['controls'].endpointsData['controls'][0]['controls'].componentType.dirty || editFlowForm['controls'].endpointsData['controls'][0]['controls'].componentType.touched)">
-											<div *ngIf="editFlowForm['controls'].endpointsData['controls'][0]['controls'].componentType.errors.required" class="invalid-field-message">ComponentType is required. Please select one.</div>
-										</div>
-										<div *ngIf="editFlowForm['controls'].endpointsData['controls'][0]['controls'].uri.errors && (editFlowForm['controls'].endpointsData['controls'][0]['controls'].uri.dirty || editFlowForm['controls'].endpointsData['controls'][0]['controls'].uri.touched)">
-											<div *ngIf="editFlowForm['controls'].endpointsData['controls'][0]['controls'].uri.errors.required" class="invalid-field-message">Context path is required.</div>
-										</div>
-										<div class="form-group" formArrayName="options">
-											<label class="form-control-label" for="field_options">Options</label>
-											<i triggers="mouseenter:mouseleave" popoverTitle="Info" [popover]="optionsPopover"  container="body" placement="right" class="fa fa-info-circle"></i>
-											<div class="row mx-0 mb-1" *ngFor="let fromOption of fromEndpointOptions; let idx = index" [formGroupName]="idx">
-												<ng-select [items]="fromComponentOptions" bindLabel="displayName" bindValue="name" [addTag]="true" [ngStyle]="{'display':'block', 'width': '300px'}" formControlName="key" id="field_options-key-{{idx}}" (focusout)="validateOptions(editFlowForm['controls'].endpointsData['controls'][0]['controls'].options['controls'][idx])">
-												    <ng-template ng-option-tmp let-item="item">
-													    <div [ngbTooltip]="fromOptionTooltip" tooltipClass="option-tooltip" [openDelay]="1000" placement="bottom" data-container="body">{{item.displayName}}</div>
-													     <ng-template #fromOptionTooltip>
-													     	<div>
-													     		<b>Description: </b>{{item.description}}<br/><br/><b>Group: </b>{{item.group}}<br/><b>DataType: </b>{{item.type}}<br/><span *ngIf="item.hasOwnProperty('defaultValue')"><b>DefaultValue:</b> {{item.defaultValue}}</span>
-													     	</div>
-													     </ng-template>
-												    </ng-template>
-												</ng-select>
-												<input type="text" class="col-5 rounded-0 d-inline-block form-control" id="field_options-value-{{idx}}" formControlName="value" (focusout)="validateOptions(editFlowForm['controls'].endpointsData['controls'][0]['controls'].options['controls'][idx])"/>
-												<button title="Add option" type="button" class="col-1 rounded-0 btn btn-primary" (click)="addOption(fromEndpointOptions, '0')"><span class="fa fa-plus"></span></button>
-												<button title="Remove option" type="button" class="col-1 left-border-radius-0 btn btn-danger" (click)="removeOption(fromEndpointOptions, fromOption, '0')" [disabled]="fromEndpointOptions.length === 1"><span class="fa fa-remove"></span></button>
-												<div class="col-5 d-inline-block px-0">
-													<div *ngIf="editFlowForm['controls'].endpointsData['controls'][0]['controls'].options['controls'][idx]['controls'].key.errors && (editFlowForm['controls'].endpointsData['controls'][0]['controls'].options['controls'][idx]['controls'].key.dirty || editFlowForm['controls'].endpointsData['controls'][0]['controls'].options['controls'][idx]['controls'].key.touched)">
-														<div *ngIf="editFlowForm['controls'].endpointsData['controls'][0]['controls'].options['controls'][idx]['controls'].key.errors.required" class="invalid-field-message">Option key is required.</div>
-													</div>
-												</div>
-												<div class="col-5 d-inline-block px-0">
-													<div *ngIf="editFlowForm['controls'].endpointsData['controls'][0]['controls'].options['controls'][idx]['controls'].value.errors && (editFlowForm['controls'].endpointsData['controls'][0]['controls'].options['controls'][idx]['controls'].value.dirty || editFlowForm['controls'].endpointsData['controls'][0]['controls'].options['controls'][idx]['controls'].value.touched)">
-														<div *ngIf="editFlowForm['controls'].endpointsData['controls'][0]['controls'].options['controls'][idx]['controls'].value.errors.required" class="invalid-field-message">Option value is required.</div>
-													</div>
-												</div>
-											</div>
-										</div>
-										<br/>
-										<div class="border-bottom my-3"><h5>Header & Service </h5></div>
-										<div class="form-group">
-											<label class="form-control-label" for="field_header">Header</label>
-											<i triggers="mouseenter:mouseleave" popoverTitle="Info" [popover]="headerPopover"  container="body" placement="right" class="fa fa-info-circle"></i>
-											<div class="input-group">
-												<ng-select [items]="headers" bindLabel="name" bindValue="id" formControlName="header" id="field_header" dropdownPosition="top"></ng-select>
-												<button type="button" *ngIf="headerCreated && editFlowForm['controls'].endpointsData['controls'][0]['controls'].header.value" class="col-2 btn btn-primary left-border-radius-0" title="Edit header" (click)="createOrEditHeader(fromEndpoint, editFlowForm['controls'].endpointsData['controls'][0]['controls'].header)">
-													<span class="fa fa-pencil padding-button"></span>&nbsp;
-												</button>
-												<button type="button" *ngIf="headerCreated && !editFlowForm['controls'].endpointsData['controls'][0]['controls'].header.value" class="col-2 btn btn-primary left-border-radius-0 flow-header-button" title="New header" (click)="createOrEditHeader(fromEndpoint, editFlowForm['controls'].endpointsData['controls'][0]['controls'].header)">
-												</button>
-												<button type="button" *ngIf="!headerCreated" class="col-2 btn btn-primary left-border-radius-0" title="Create header" (click)="createOrEditHeader(fromEndpoint, editFlowForm['controls'].endpointsData['controls'][0]['controls'].header)">
-													<span class="fa fa-plus padding-button"></span>&nbsp;
-												</button>
-											</div>
-										</div>
-										<div class="form-group">
-											<label class="form-control-label" for="field_service">Service</label>
-											<i triggers="mouseenter:mouseleave" popoverTitle="Info" [popover]="servicePopover" container="body" placement="right" class="fa fa-info-circle"></i>
-											<div class="input-group">
-												<ng-select [items]="fromFilterService" bindLabel="name" bindValue="id" formControlName="service" id="field_service" dropdownPosition="top"></ng-select>
-												<button type="button" *ngIf="serviceCreated && editFlowForm['controls'].endpointsData['controls'][0]['controls'].service.value" class="col-2 btn btn-primary left-border-radius-0" title="Edit service" (click)="createOrEditService(fromEndpoint, fromServiceType, editFlowForm['controls'].endpointsData['controls'][0]['controls'].service)">
-													<span class="fa fa-pencil padding-button"></span>&nbsp;
-												</button>
-												<button type="button" *ngIf="serviceCreated && !editFlowForm['controls'].endpointsData['controls'][0]['controls'].service.value" class="col-2 btn btn-primary left-border-radius-0 flow-header-button" title="New service" (click)="createOrEditService(fromEndpoint, fromServiceType, editFlowForm['controls'].endpointsData['controls'][0]['controls'].service)" [disabled]="editFlowForm['controls'].endpointsData['controls'][0]['controls'].service.disabled">
-												</button>
-												<button type="button" *ngIf="!serviceCreated" class="col-2 btn btn-primary left-border-radius-0" title="Create service" (click)="createOrEditService(fromEndpoint, fromServiceType, editFlowForm['controls'].endpointsData['controls'][0]['controls'].service)" [disabled]="editFlowForm['controls'].endpointsData['controls'][0]['controls'].service.disabled">
-													<span class="fa fa-plus padding-button"></span>&nbsp;
-												</button>
-											</div>
-										</div>
-										<div *ngIf="editFlowForm['controls'].endpointsData['controls'][0]['controls'].service.errors && (editFlowForm['controls'].endpointsData['controls'][0]['controls'].service.dirty || editFlowForm['controls'].endpointsData['controls'][0]['controls'].service.touched)">
-											<div *ngIf="editFlowForm['controls'].endpointsData['controls'][0]['controls'].service.errors.required" class="invalid-field-message">Service is required for this component</div>
-										</div>
-									</div>
-							</ng-template>
-						</ngb-panel>
+					<ngb-accordion [closeOthers]="false" activeIds="tab" formArrayName="endpointsData" (tabChange)="next(false, false, $event)" #tabs>
 
-						<ngb-panel ngbPanelTitle id="toTab" *ngFor="let toEndpoint of toEndpoints; index as toIndex">
-							 <ng-template ngbPanelTitle>
-								<span><b>To ({{toIndex+1}})</b></span>
-						      	<i triggers="mouseenter:mouseleave"
-							placement="right" triggers="mouseenter:mouseleave"
-							popoverTitle="Info"
-							 [popover]="toPopover"
-							class="fa fa-info-circle"></i>
+						<ngb-panel ngbPanelTitle id="tab" *ngFor="let endpoint of endpoints; index as index">
+ 						   <ng-template ngbPanelTitle>
+								<span><b>{{endpoint.endpointType}}</b></span>
 						    </ng-template>
 							<ng-template ngbPanelContent>
 								<jhi-alert-error></jhi-alert-error>
-									<div  class="col-12" style="padding-left: 20px;" [formGroupName]="toIndex+2">
+									<div  class="col-12" style="padding-left: 20px;" [formGroupName]="index" id="{{ 'tab' + index }}">
 										<div class="input-group">
 											<a class="col-11"></a>
 											<a class="col-1">
 												 <div ngbDropdown class="d-inline-block" placement="bottom-right">
-								      				<a class="btn" id="dropdownBasic1" ngbDropdownToggle><i class="fa fa-ellipsis-h" style="color:#FFFFFF;"></i></a>
+								      				<a class="btn" id="dropdownBasic1" ngbDropdownToggle><i class="fa fa-ellipsis-h" style="color:#000000;"></i></a>
 								      				<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-											        <a ngbDropdownItem role="button" href="{{toComponentTypeCamelLinks[toIndex]}}" [ngClass]="{'disabled': !toComponentTypeCamelLinks[toIndex]}" target="_blank" title="Apache Camel online documentation on the component used for scheme: {{toEndpoint?.componentType}}.">
+											        <a ngbDropdownItem role="button" href="{{componentTypeCamelLinks[index]}}" [ngClass]="{'disabled': !componentTypeCamelLinks[index]}" target="_blank" title="Apache Camel online documentation on the component used for scheme: {{endpoint?.componentType}}.">
 														<span>Camel Documentation</span>
 													</a>
-													<a ngbDropdownItem role="button" href="{{toComponentTypeAssimblyLinks[toIndex]}}" target="_blank" title="Assimbly Gateway online documentation on the component used for scheme: {{toEndpoint?.componentType}}.">
+													<a ngbDropdownItem role="button" href="{{componentTypeAssimblyLinks[index]}}" target="_blank" title="Assimbly Gateway online documentation on the component used for scheme: {{endpoint?.componentType}}.">
 														<span>Assimbly Documentation</span>
 													</a>
 													<a ngbDropdownItem role="button" (click)="openTestConnectionModal(testConnectionModal)" title="Test if connection is available">
@@ -368,9 +214,9 @@ <h5>URI&ensp;</h5>
 											<input type="text" class="form-control" id="id" formControlName="id" readonly />
 										</div>
 										<ng-template #uriPopover let-message="message">
-											<div style="min-width:300px;" [innerHtml]="toUriPopoverMessages[toIndex]"></div>
+											<div style="min-width:300px;" [innerHtml]="uriPopoverMessages[index]"></div>
 										</ng-template>
-										<ng-template #uriToEditor>
+										<ng-template #uriEditor>
 												<div class="modal-header">
 											      <h4 class="modal-title">URI (context path)</h4>
 											      <button type="button" class="close" aria-label="Close" (click)="cancelModal()">
@@ -378,252 +224,108 @@ <h4 class="modal-title">URI (context path)</h4>
 											      </button>
 											    </div>
 											    <div class="modal-body">
-											    	 <textarea class="form-control" id="field_uri" formControlName="uri" placeholder="{{toUriPlaceholders[toIndex]}}" rows="5" [(ngModel)]="toEndpoint.uri"></textarea>
+											    	 <textarea class="form-control" id="field_uri" formControlName="uri" placeholder="{{uriPlaceholders[index]}}" rows="5" [(ngModel)]="endpoint.uri"></textarea>
 											    </div>
 											    <div class="modal-footer">
 											      <button type="button" class="btn btn-outline-dark"  (click)="cancelModal()">Close</button>
 											    </div>
 										</ng-template>
+																			
+										
 										<div class="form-group">
 											<div class="input-group border-bottom my-3">
 												<h5>URI&ensp;</h5>
 												<i triggers="mouseenter:mouseleave" popoverTitle="Info" container="body" [popover]="uriPopover" class="fa fa-info-circle"></i>
 												</div>
 											<div class="input-group" style="margin-left: -14px;">
-												<ng-select class="col-3" [items]="components.toTypes" [clearable]="false" formControlName="componentType" id="field_to_type" (change)="setTypeLinks(toEndpoint, toIndex+2, $event)"></ng-select>
-												<a>:</a><span style="display:inline-block; width: 14px;"></span>
-												<input type="text" class="form-control" id="field_uri" formControlName="uri" placeholder="{{toUriPlaceholders[toIndex]}}"  [(ngModel)]="toEndpoint.uri"/>
-												<button type="button" class="col-2 btn btn-primary left-border-radius-0" title="Enlarge" (click)="openModal(uriToEditor)">
+												<ng-select  *ngIf="endpoint.endpointType==='FROM'" class="col-3" [items]="components.fromTypes" [clearable]="false" formControlName="componentType" id="field_component_type" (change)="setTypeLinks(endpoint, index, $event)"></ng-select>
+												<ng-select  *ngIf="endpoint.endpointType==='TO'" class="col-3" [items]="components.toTypes" [clearable]="false" formControlName="componentType" id="field_component_type" (change)="setTypeLinks(endpoint, index, $event)"></ng-select>
+												<ng-select  *ngIf="endpoint.endpointType==='ERROR'" class="col-3" [items]="components.errorTypes" [clearable]="false" formControlName="componentType" id="field_component_type" (change)="setTypeLinks(endpoint, index, $event)"></ng-select>												<a>:</a><span style="display:inline-block; width: 14px;"></span>
+												<input type="text" class="form-control" id="field_uri" formControlName="uri" placeholder="{{uriPlaceholders[index]}}"  [(ngModel)]="endpoint.uri"/>
+												<button type="button" class="col-2 btn btn-primary left-border-radius-0" title="Enlarge" (click)="openModal(uriEditor)">
 													<span class="fa fa-pencil padding-button"></span>&nbsp;
 												</button>
 											</div>
 										</div>
-										<div *ngIf="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].componentType.errors && (editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].componentType.dirty || editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].componentType.touched)">
-											<div *ngIf="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].componentType.errors.required" class="invalid-field-message">ComponentType is required. Please select one.</div>
+										<div *ngIf="editFlowForm['controls'].endpointsData['controls'][index]['controls'].componentType.errors && (editFlowForm['controls'].endpointsData['controls'][index]['controls'].componentType.dirty || editFlowForm['controls'].endpointsData['controls'][index]['controls'].componentType.touched)">
+											<div *ngIf="editFlowForm['controls'].endpointsData['controls'][index]['controls'].componentType.errors.required" class="invalid-field-message">ComponentType is required. Please select one.</div>
 										</div>
-										<div *ngIf="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].uri.errors && (editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].uri.dirty || editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].uri.touched)">
-											<div *ngIf="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].uri.errors.required" class="invalid-field-message">Context path is required.</div>
+										<div *ngIf="editFlowForm['controls'].endpointsData['controls'][index]['controls'].uri.errors && (editFlowForm['controls'].endpointsData['controls'][index]['controls'].uri.dirty || editFlowForm['controls'].endpointsData['controls'][index]['controls'].uri.touched)">
+											<div *ngIf="editFlowForm['controls'].endpointsData['controls'][index]['controls'].uri.errors.required" class="invalid-field-message">Context path is required.</div>
 										</div>
 										<div class="form-group" formArrayName="options">
 											<label class="form-control-label" for="field_options">Options</label>
 											<i triggers="mouseenter:mouseleave"	popoverTitle="Info" [popover]="optionsPopover" container="body" placement="right" class="fa fa-info-circle"></i>
-											<div class="row mx-0 mb-1" *ngFor="let toOption of toEndpointsOptions[toIndex]; index as idx" [formGroupName]="idx">
-												<ng-select [items]="toComponentOptions[toIndex]" bindLabel="displayName" bindValue="name" [addTag]="true" [ngStyle]="{'display':'block', 'width': '300px'}" formControlName="key" id="field_options-key-{{idx}}" (focusout)="validateOptions(editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].options['controls'][idx])">
+											<div class="row mx-0 mb-1" *ngFor="let option of endpointsOptions[index]; index as idx" [formGroupName]="idx">
+												<ng-select [items]="componentOptions[index]" bindLabel="displayName" bindValue="name" [addTag]="true" [ngStyle]="{'display':'block', 'width': '300px'}" formControlName="key" id="field_options-key-{{idx}}" (focusout)="validateOptions(editFlowForm['controls'].endpointsData['controls'][index]['controls'].options['controls'][idx])">
 												    <ng-template ng-option-tmp let-item="item">
-													    <div [ngbTooltip]="toOptionTooltip" tooltipClass="option-tooltip" [openDelay]="1000" placement="bottom" data-container="body">{{item.displayName}}</div>
-													     <ng-template #toOptionTooltip>
+													    <div [ngbTooltip]="optionTooltip" tooltipClass="option-tooltip" [openDelay]="1000" placement="bottom" data-container="body">{{item.displayName}}</div>
+													     <ng-template #optionTooltip>
 													     	<div>
 													     		<b>Description: </b>{{item.description}}<br/><br/><b>Group: </b>{{item.group}}<br/><b>DataType: </b>{{item.type}}<br/><span *ngIf="item.hasOwnProperty('defaultValue')"><b>DefaultValue:</b> {{item.defaultValue}}</span>
 													     	</div>
 													     </ng-template>
 												    </ng-template>
 												</ng-select>
-												<!-- <ng-select [items]="toComponentOptions[toIndex]" [addTag]="true" [ngStyle]="{'display':'block', 'width': '300px'}" formControlName="key" id="field_options-key-{{idx}}" (focusout)="validateOptions(editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].options['controls'][idx])"></ng-select> -->
-												<input type="text" class="col-5 rounded-0 d-inline-block form-control" id="field_options-value-{{idx}}" formControlName="value" (focusout)="validateOptions(editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].options['controls'][idx])" data-toggle="tooltip" title="Value of the option. Click the Camel component button for documentation on valid options."/>
-												<button title="Add option" type="button" class="col-1 rounded-0 btn btn-primary" (click)="addOption(toEndpointsOptions[toIndex], toIndex+2)" [disabled]="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].componentType.value === 'WASTEBIN'"><span class="fa fa-plus"></span></button>
-												<button title="Remove option" type="button" class="col-1 left-border-radius-0 btn btn-danger" (click)="removeOption(toEndpointsOptions[toIndex], toOption, toIndex+2)" [disabled]="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].componentType.value === 'WASTEBIN' || toEndpointsOptions[toIndex].length === 1"><span class="fa fa-remove"></span></button>
+												<input type="text" class="col-5 rounded-0 d-inline-block form-control" id="field_options-value-{{idx}}" formControlName="value" (focusout)="validateOptions(editFlowForm['controls'].endpointsData['controls'][index]['controls'].options['controls'][idx])" data-toggle="tooltip" title="Value of the option. Click the Camel component button for documentation on valid options."/>
+												<button title="Add option" type="button" class="col-1 rounded-0 btn btn-primary" (click)="addOption(endpointsOptions[index], index)" [disabled]="editFlowForm['controls'].endpointsData['controls'][index]['controls'].componentType.value === 'WASTEBIN'"><span class="fa fa-plus"></span></button>
+												<button title="Remove option" type="button" class="col-1 left-border-radius-0 btn btn-danger" (click)="removeOption(endpointsOptions[index], option, index)" [disabled]="editFlowForm['controls'].endpointsData['controls'][index]['controls'].componentType.value === 'WASTEBIN' || endpointsOptions[index].length === 1"><span class="fa fa-remove"></span></button>
 												<div class="col-5 d-inline-block px-0">
-													<div *ngIf="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].options['controls'][idx]['controls'].key.errors && (editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].options['controls'][idx]['controls'].key.dirty || editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].options['controls'][idx]['controls'].key.touched)">
-														<div *ngIf="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].options['controls'][idx]['controls'].key.errors.required" class="invalid-field-message">Option key is required.</div>
+													<div *ngIf="editFlowForm['controls'].endpointsData['controls'][index]['controls'].options['controls'][idx]['controls'].key.errors && (editFlowForm['controls'].endpointsData['controls'][index]['controls'].options['controls'][idx]['controls'].key.dirty || editFlowForm['controls'].endpointsData['controls'][index]['controls'].options['controls'][idx]['controls'].key.touched)">
+														<div *ngIf="editFlowForm['controls'].endpointsData['controls'][index]['controls'].options['controls'][idx]['controls'].key.errors.required" class="invalid-field-message">Option key is required.</div>
 													</div>
 												</div>
 												<div class="col-5 d-inline-block px-0">
-													<div *ngIf="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].options['controls'][idx]['controls'].value.errors && (editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].options['controls'][idx]['controls'].value.dirty || editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].options['controls'][idx]['controls'].value.touched)">
-														<div *ngIf="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].options['controls'][idx]['controls'].value.errors.required" class="invalid-field-message">Option value is required.</div>
+													<div *ngIf="editFlowForm['controls'].endpointsData['controls'][index]['controls'].options['controls'][idx]['controls'].value.errors && (editFlowForm['controls'].endpointsData['controls'][index]['controls'].options['controls'][idx]['controls'].value.dirty || editFlowForm['controls'].endpointsData['controls'][index]['controls'].options['controls'][idx]['controls'].value.touched)">
+														<div *ngIf="editFlowForm['controls'].endpointsData['controls'][index]['controls'].options['controls'][idx]['controls'].value.errors.required" class="invalid-field-message">Option value is required.</div>
 													</div>
 												</div>
 											</div>
 										</div>
 										<br/>
-										<div class="border-bottom my-3"><h5>Header & Service</h5></div>
+										<div class="border-bottom my-3"><h5>Header</h5></div>
 										<div class="form-group">
-											<label class="form-control-label" for="field_header">Header</label>
-											<i triggers="mouseenter:mouseleave"	popoverTitle="Info" [popover]="headerPopover" container="body" placement="right" class="fa fa-info-circle"></i>
 											<div class="input-group">
-												<ng-select  [items]="headers" bindLabel="name" bindValue="id" formControlName="header" id="field_header" dropdownPosition="top"></ng-select>
-												<button type="button" *ngIf="headerCreated && editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].header.value" title="Edit header" class="col-2 btn btn-primary left-border-radius-0" (click)="createOrEditHeader(toEndpoint, editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].header)" [disabled]="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].componentType.value === 'WASTEBIN'">
+												<ng-select [items]="headers" bindLabel="name" bindValue="id" formControlName="header" id="field_header" dropdownPosition="top"></ng-select>
+												<button type="button" *ngIf="headerCreated && editFlowForm['controls'].endpointsData['controls'][index]['controls'].header.value" title="Edit header" class="col-2 btn btn-primary left-border-radius-0" (click)="createOrEditHeader(endpoint, editFlowForm['controls'].endpointsData['controls'][index]['controls'].header)" [disabled]="editFlowForm['controls'].endpointsData['controls'][index]['controls'].componentType.value === 'WASTEBIN'">
 													<span class="fa fa-pencil  padding-button"></span>&nbsp;
 												</button>
-												<button type="button" *ngIf="headerCreated && !editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].header.value" class="col-2 btn btn-primary left-border-radius-0 flow-header-button" title="New header" (click)="createOrEditHeader(toEndpoint, editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].header)" [disabled]="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].componentType.value === 'WASTEBIN'">
+												<button type="button" *ngIf="headerCreated && !editFlowForm['controls'].endpointsData['controls'][index]['controls'].header.value" class="col-2 btn btn-primary left-border-radius-0 flow-header-button" title="New header" (click)="createOrEditHeader(endpoint, editFlowForm['controls'].endpointsData['controls'][index]['controls'].header)" [disabled]="editFlowForm['controls'].endpointsData['controls'][index]['controls'].componentType.value === 'WASTEBIN'">
 												</button>
-												<button type="button" *ngIf="!headerCreated" class="col-2 btn btn-primary left-border-radius-0" title="Create header" (click)="createOrEditHeader(toEndpoint, editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].header)" [disabled]="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].componentType.value === 'WASTEBIN'">
+												<button type="button" *ngIf="!headerCreated" class="col-2 btn btn-primary left-border-radius-0" title="Create header" (click)="createOrEditHeader(endpoint, editFlowForm['controls'].endpointsData['controls'][index]['controls'].header)" [disabled]="editFlowForm['controls'].endpointsData['controls'][index]['controls'].componentType.value === 'WASTEBIN'">
 													<span class="fa fa-plus padding-button"></span>&nbsp;
 												</button>
 											</div>
 										</div>
 
+										<div class="border-bottom my-3"><h5>Header</h5></div>
 										<div class="form-group">
-											<label class="form-control-label" for="field_service">Service</label>
-											<i triggers="mouseenter:mouseleave"	popoverTitle="Info" [popover]="servicePopover" container="body" placement="right" class="fa fa-info-circle"></i>
 											<div class="input-group">
-												<ng-select [items]="toFilterService[toIndex]" bindLabel="name" bindValue="id" formControlName="service" id="field_service" dropdownPosition="top"></ng-select>
-												<button type="button" *ngIf="serviceCreated && editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].service.value" class="col-2 btn btn-primary left-border-radius-0" title="Edit service" (click)="createOrEditService(toEndpoint, toServiceType[toIndex], editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].service)" [disabled]="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].componentType.value === 'WASTEBIN'">
+												<ng-select [items]="filterService[index]" bindLabel="name" bindValue="id" formControlName="service" id="field_service" dropdownPosition="top"></ng-select>
+												<button type="button" *ngIf="serviceCreated && editFlowForm['controls'].endpointsData['controls'][index]['controls'].service.value" class="col-2 btn btn-primary left-border-radius-0" title="Edit service" (click)="createOrEditService(endpoint, serviceType[index], editFlowForm['controls'].endpointsData['controls'][index]['controls'].service)" [disabled]="editFlowForm['controls'].endpointsData['controls'][index]['controls'].componentType.value === 'WASTEBIN'">
 													<span class="fa fa-pencil padding-button"></span>&nbsp;
 												</button>
-												<button type="button" *ngIf="serviceCreated && !editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].service.value" class="col-2 btn btn-primary left-border-radius-0 flow-header-button" title="New service" (click)="createOrEditService(toEndpoint, toServiceType[toIndex], editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].service)" [disabled]="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].service.disabled">
+												<button type="button" *ngIf="serviceCreated && !editFlowForm['controls'].endpointsData['controls'][index]['controls'].service.value" class="col-2 btn btn-primary left-border-radius-0 flow-header-button" title="New service" (click)="createOrEditService(endpoint, serviceType[index], editFlowForm['controls'].endpointsData['controls'][index]['controls'].service)" [disabled]="editFlowForm['controls'].endpointsData['controls'][index]['controls'].service.disabled">
 												</button>
-												<button type="button" *ngIf="!serviceCreated" class="col-2 btn btn-primary left-border-radius-0" title="Create service" (click)="createOrEditService(toEndpoint, toServiceType[toIndex], editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].service)" [disabled]="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].componentType.value === 'WASTEBIN'">
+												<button type="button" *ngIf="!serviceCreated" class="col-2 btn btn-primary left-border-radius-0" title="Create service" (click)="createOrEditService(endpoint, serviceType[index], editFlowForm['controls'].endpointsData['controls'][index]['controls'].service)" [disabled]="editFlowForm['controls'].endpointsData['controls'][index]['controls'].componentType.value === 'WASTEBIN'">
 													<span class="fa fa-plus padding-button"></span>&nbsp;
 												</button>
 											</div>
 										</div>
-										<div *ngIf="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].service.errors && (editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].service.dirty || editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].service.touched)">
-											<div *ngIf="editFlowForm['controls'].endpointsData['controls'][toIndex+2]['controls'].service.errors.required" class="invalid-field-message">Service is required for this component</div>
+										<div *ngIf="editFlowForm['controls'].endpointsData['controls'][index]['controls'].service.errors && (editFlowForm['controls'].endpointsData['controls'][index]['controls'].service.dirty || editFlowForm['controls'].endpointsData['controls'][index]['controls'].service.touched)">
+											<div *ngIf="editFlowForm['controls'].endpointsData['controls'][index]['controls'].service.errors.required" class="invalid-field-message">Service is required for this component</div>
 										</div>
-										<div class="text-right form-group" role="group">
-											<button type="button" class="btn btn-danger" (click)="removeToEndpoint(toEndpoint, 'toEndpointData'+toIndex)" [disabled]="toEndpoints.length === 1">
+										<div class="text-right form-group" role="group" *ngIf="endpoint.endpointType==='TO'">
+											<button type="button" class="btn btn-danger" (click)="removeEndpoint(endpoint, 'endpointData'+index)" [disabled]="numberOfToEndpoints === 1">
 												<span class="fa fa-remove"></span>&nbsp;
 												<span>Remove To endpoint</span>
 											</button>
-											<button type="button" class="btn btn-primary" (click)="addNewToEndpoint()" [disabled]="toEndpoints.length > 2">
+											<button type="button" class="btn btn-primary" (click)="addEndpoint(endpoint, index)">
 												<span class="fa fa-pencil"></span>&nbsp;
 												<span>Add To endpoint</span>
 											</button>
 										</div>
-									</div>
-							</ng-template>
-						</ngb-panel>
-
-						<ngb-panel ngbPanelTitle id="errorTab">
-							 <ng-template ngbPanelTitle>
-								<span><b>Error</b></span>
-						      <i triggers="mouseenter:mouseleave"
-							placement="right" triggers="mouseenter:mouseleave"
-							popoverTitle="Info"
-							 [popover]="errorPopover"
-							class="fa fa-info-circle"></i>
-						    </ng-template>
-							<ng-template ngbPanelContent>
-									<div  class="col-12" style="padding-left: 20px;" [formGroupName]="'1'">
-										<div class="input-group">
-											<a class="col-11"></a>
-											<a class="col-1">
-												 <div ngbDropdown class="d-inline-block" placement="bottom-right">
-								      				<a class="btn" id="dropdownBasic1" ngbDropdownToggle><i class="fa fa-ellipsis-h" style="color:#FFFFFF;"></i></a>
-								      				<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-											        <a ngbDropdownItem role="button" href="{{errorComponentTypeCamelLink}}" [ngClass]="{'disabled': !errorComponentTypeCamelLink}" target="_blank" title="Apache Camel online documentation on the component used for scheme: {{errorEndpoint?.componentType}}.">
-														<span>Camel Documentation</span>
-													</a>
-													<a ngbDropdownItem role="button" href="{{errorComponentTypeAssimblyLink}}" target="_blank" title="Assimbly Gateway online documentation on the component used for scheme: {{errorEndpoint?.componentType}}.">
-														<span>Assimbly Documentation</span>
-													</a>
-													<a ngbDropdownItem role="button" (click)="openTestConnectionModal(testConnectionModal)" title="Test if connection is available">
-														<span>Test Connection</span>
-													</a>
-											      </div>
-											   </div>
-											</a>
-										</div>
-										<div class="form-group" [style.display]="'none'">
-											<label for="id">ID</label>
-											<input type="text" class="form-control" id="id" formControlName="id" readonly />
-										</div>
-										<ng-template #uriPopover let-message="message">
-											<div style="min-width:300px;" [innerHtml]="errorUriPopoverMessage"></div>
-										</ng-template>
-										<ng-template #uriErrorEditor>
-												<div class="modal-header">
-											      <h4 class="modal-title">URI (context path)</h4>
-											      <button type="button" class="close" aria-label="Close" (click)="cancelModal()">
-											        <span aria-hidden="true">&times;</span>
-											      </button>
-											    </div>
-											    <div class="modal-body">
-											    	 <textarea class="form-control" id="field_uri" formControlName="uri" placeholder="{{errorUriPlaceholder}}" rows="5" [(ngModel)]="errorEndpoint.uri"></textarea>
-											    </div>
-											    <div class="modal-footer">
-											      <button type="button" class="btn btn-outline-dark"  (click)="cancelModal()">Close</button>
-											    </div>
-										</ng-template>
-
-										<div class="form-group">
-											<div class="input-group border-bottom my-3">
-												<h5>URI&ensp;</h5>
-												<i triggers="mouseenter:mouseleave" popoverTitle="Info" container="body" [popover]="uriPopover" class="fa fa-info-circle"></i>
-											</div>
-											<div class="input-group" style="margin-left: -14px;">
-												<ng-select class="col-3" [items]="components.errorTypes" [clearable]="false" formControlName="componentType" id="field_error_type" (change)="setTypeLinks(errorEndpoint, 1, $event)"></ng-select>
-												<a>:</a><span style="display:inline-block; width: 14px;"></span>
-												<input type="text" class="form-control" id="field_uri" formControlName="uri" placeholder="{{errorUriPlaceholder}}" [(ngModel)]="errorEndpoint.uri"/>
-												<button type="button" class="col-2 btn btn-primary left-border-radius-0" title="Enlarge" (click)="openModal(uriErrorEditor)">
-													<span class="fa fa-pencil padding-button"></span>&nbsp;
-												</button>
-											</div>
-										</div>
-										<div *ngIf="editFlowForm['controls'].endpointsData['controls'][1]['controls'].componentType.errors && (editFlowForm['controls'].endpointsData['controls'][1]['controls'].componentType.dirty || editFlowForm['controls'].endpointsData['controls'][1]['controls'].componentType.touched)">
-											<div *ngIf="editFlowForm['controls'].endpointsData['controls'][1]['controls'].componentType.errors.required" class="invalid-field-message">Type is required. Please select one.</div>
-										</div>
-										<div *ngIf="editFlowForm['controls'].endpointsData['controls'][1]['controls'].uri.errors && (editFlowForm['controls'].endpointsData['controls'][1]['controls'].uri.dirty || editFlowForm['controls'].endpointsData['controls'][1]['controls'].uri.touched)">
-											<div *ngIf="editFlowForm['controls'].endpointsData['controls'][1]['controls'].uri.errors.required" class="invalid-field-message">Context path is required.</div>
-										</div>
-										<div class="form-group" formArrayName="options">
-											<label class="form-control-label" for="field_options">Options</label>
-											<i triggers="mouseenter:mouseleave"	popoverTitle="Info" [popover]="optionsPopover" container="body" placement="right" class="fa fa-info-circle"></i>
-											<div class="row mx-0 mb-1" *ngFor="let errOption of errorEndpointOptions; let idx = index" [formGroupName]="idx">
-												<!-- <input type="text" class="col-5 right-border-radius-0 d-inline-block form-control" id="field_options-key-{{idx}}" formControlName="key" (focusout)="validateOptions(editFlowForm['controls'].endpointsData['controls'][1]['controls'].options['controls'][idx])"  data-toggle="tooltip" title="Name of the option. Click the Camel component button for documentation on valid options."/>-->
-
-												<ng-select [items]="errorComponentOptions" bindLabel="displayName" bindValue="name" [addTag]="true" [ngStyle]="{'display':'block', 'width': '300px'}"  formControlName="key" id="field_options-key-{{idx}}" (focusout)="validateOptions(editFlowForm['controls'].endpointsData['controls'][1]['controls'].options['controls'][idx])">
-												    <ng-template ng-option-tmp let-item="item">
-													    <div [ngbTooltip]="errorOptionTooltip" tooltipClass="option-tooltip" [openDelay]="1000" placement="bottom" data-container="body">{{item.displayName}}</div>
-													     <ng-template #errorOptionTooltip>
-													     	<div>
-													     		<b>Description: </b>{{item.description}}<br/><br/><b>Group: </b>{{item.group}}<br/><b>DataType: </b>{{item.type}}<br/><span *ngIf="item.hasOwnProperty('defaultValue')"><b>DefaultValue:</b> {{item.defaultValue}}</span>
-													     	</div>
-													     </ng-template>
-												    </ng-template>
-												</ng-select>
-												<!-- <ng-select [items]="errorComponentOptions" [addTag]="true" [ngStyle]="{'display':'block', 'width': '300px'}" formControlName="key" id="field_options-key-{{idx}}" (focusout)="validateOptions(editFlowForm['controls'].endpointsData['controls'][1]['controls'].options['controls'][idx])"></ng-select> -->
-												<input type="text" class="col-5 rounded-0 d-inline-block form-control" id="field_options-value-{{idx}}" formControlName="value" (focusout)="validateOptions(editFlowForm['controls'].endpointsData['controls'][1]['controls'].options['controls'][idx])"  data-toggle="tooltip" title="Value of the option. Click the Camel component button for documentation on valid options."/>
-												<button title="Add option" type="button" class="col-1 rounded-0 btn btn-primary" (click)="addOption(errorEndpointOptions, '1')"><span class="fa fa-plus"></span></button>
-												<button title="Remove option" type="button" class="col-1 left-border-radius-0 btn btn-danger" (click)="removeOption(errorEndpointOptions, errOption, '1')" [disabled]="errorEndpointOptions.length === 1"><span class="fa fa-remove"></span></button>
-												<div class="col-5 d-inline-block px-0">
-													<div *ngIf="editFlowForm['controls'].endpointsData['controls'][1]['controls'].options['controls'][idx]['controls'].key.errors && (editFlowForm['controls'].endpointsData['controls'][1]['controls'].options['controls'][idx]['controls'].key.dirty || editFlowForm['controls'].endpointsData['controls'][1]['controls'].options['controls'][idx]['controls'].key.touched)">
-														<div *ngIf="editFlowForm['controls'].endpointsData['controls'][1]['controls'].options['controls'][idx]['controls'].key.errors.required" class="invalid-field-message">Option key is required.</div>
-													</div>
-												</div>
-												<div class="col-5 d-inline-block px-0">
-													<div *ngIf="editFlowForm['controls'].endpointsData['controls'][1]['controls'].options['controls'][idx]['controls'].value.errors && (editFlowForm['controls'].endpointsData['controls'][1]['controls'].options['controls'][idx]['controls'].value.dirty || editFlowForm['controls'].endpointsData['controls'][1]['controls'].options['controls'][idx]['controls'].value.touched)">
-														<div *ngIf="editFlowForm['controls'].endpointsData['controls'][1]['controls'].options['controls'][idx]['controls'].value.errors.required" class="invalid-field-message">Option value is required.</div>
-													</div>
-												</div>
-											</div>
-										</div>
-										<br/>
-										<div class="border-bottom my-3"><h5>Header & Service</h5></div>
-										<div class="form-group">
-											<label class="form-control-label" for="field_header">Header</label>
-											<i triggers="mouseenter:mouseleave"	popoverTitle="Info" [popover]="headerPopover" container="body" placement="right" class="fa fa-info-circle"></i>
-											<div class="input-group">
-												<ng-select [items]="headers" bindLabel="name" bindValue="id" formControlName="header" id="field_header" dropdownPosition="top"></ng-select>
-												<button type="button" *ngIf="headerCreated && editFlowForm['controls'].endpointsData['controls'][1]['controls'].header.value" class="col-2 btn btn-primary left-border-radius-0" title="Edit header" (click)="createOrEditHeader(errorEndpoint, editFlowForm['controls'].endpointsData['controls'][1]['controls'].header)">
-													<span class="fa fa-pencil padding-button"></span>&nbsp;
-												</button>
-												<button type="button" *ngIf="headerCreated && !editFlowForm['controls'].endpointsData['controls'][1]['controls'].header.value" class="col-2 btn btn-primary left-border-radius-0 flow-header-button" title="New header" (click)="createOrEditHeader(errorEndpoint, editFlowForm['controls'].endpointsData['controls'][1]['controls'].header)">
-												</button>
-												<button type="button" *ngIf="!headerCreated" class="col-2 btn btn-primary left-border-radius-0" title="Create header" (click)="createOrEditHeader(errorEndpoint, editFlowForm['controls'].endpointsData['controls'][1]['controls'].header)">
-													<span class="fa fa-plus padding-button"></span>&nbsp;
-												</button>
-											</div>
-										</div>
-										<div class="form-group">
-											<label class="form-control-label" for="field_service">Service</label>
-											<i triggers="mouseenter:mouseleave"	popoverTitle="Info" [popover]="servicePopover" container="body" placement="right" class="fa fa-info-circle"></i>
-											<div class="input-group">
-												<ng-select [items]="errorFilterService" bindLabel="name" bindValue="id" formControlName="service" id="field_service" dropdownPosition="top"></ng-select>
-												<button type="button" *ngIf="serviceCreated && editFlowForm['controls'].endpointsData['controls'][1]['controls'].service.value" class="col-2 btn btn-primary left-border-radius-0" title="Edit service" (click)="createOrEditService(errorEndpoint, errorServiceType, editFlowForm['controls'].endpointsData['controls'][1]['controls'].service)">
-													<span class="fa fa-pencil padding-button"></span>&nbsp;
-												</button>
-												<button type="button" *ngIf="serviceCreated && !editFlowForm['controls'].endpointsData['controls'][1]['controls'].service.value" class="col-2 btn btn-primary left-border-radius-0 flow-header-button" title="New service" (click)="createOrEditService(errorEndpoint, errorServiceType, editFlowForm['controls'].endpointsData['controls'][1]['controls'].service)" [disabled]="editFlowForm['controls'].endpointsData['controls'][1]['controls'].service.disabled">
-												</button>
-												<button type="button" *ngIf="!serviceCreated" class="col-2 btn btn-primary left-border-radius-0" title="Create service" (click)="createOrEditService(errorEndpoint, errorServiceType, editFlowForm['controls'].endpointsData['controls'][1]['controls'].service)" [disabled]="editFlowForm['controls'].endpointsData['controls'][1]['controls'].service.disabled">
-													<span class="fa fa-plus padding-button"></span>&nbsp;
-												</button>
-											</div>
-										</div>
-										<div *ngIf="editFlowForm['controls'].endpointsData['controls'][1]['controls'].service.errors && (editFlowForm['controls'].endpointsData['controls'][1]['controls'].service.dirty || editFlowForm['controls'].endpointsData['controls'][1]['controls'].service.touched)">
-											<div *ngIf="editFlowForm['controls'].endpointsData['controls'][1]['controls'].service.errors.required" class="invalid-field-message">Service is required for this component</div>
-										</div>
-									</div>
+									</div> 
 							</ng-template>
 						</ngb-panel>
 					</ngb-accordion>
diff --git a/src/main/webapp/app/entities/flow/flow-edit-all.component.ts b/src/main/webapp/app/entities/flow/flow-edit-all.component.ts
index 358e4b3f..5c0b6f39 100644
--- a/src/main/webapp/app/entities/flow/flow-edit-all.component.ts
+++ b/src/main/webapp/app/entities/flow/flow-edit-all.component.ts
@@ -35,17 +35,14 @@ import * as moment from 'moment';
 export class FlowEditAllComponent implements OnInit, OnDestroy {
 
     flow: IFlow;
-	endpoints: IEndpoint[] = new Array<Endpoint>();
     services: Service[];
     headers: IHeader[];
 
-    fromEndpoint: IEndpoint;
-    fromEndpointOptions: Array<Option> = [];
-    errorEndpoint: IEndpoint;
-    errorEndpointOptions: Array<Option> = [];
-    toEndpoints: IEndpoint[] = new Array<Endpoint>();
-    toEndpointsOptions: Array<Array<Option>> = [[]];
-    toEndpoint: IEndpoint;
+    endpointsOptions: Array<Array<Option>> = [[]];
+	endpoints: IEndpoint[] = new Array<Endpoint>();
+    endpoint: IEndpoint;
+
+    public endpointTypes = ['FROM','TO','ERROR'];
 
     public logLevelListType = [
         LogLevelType.OFF,
@@ -90,29 +87,14 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
     optionsPopoverMessage: string;
     headerPopoverMessage: string;
     servicePopoverMessage: string;
-    fromPopoverMessage: string;
-    toPopoverMessage: string;
-    errorPopoverMessage: string;
-
-    fromComponentTypeAssimblyLink: string;
-    fromComponentTypeCamelLink: string;
-    fromUriPlaceholder: string;
-    fromUriPopoverMessage: string;
-
-    componentOptions: any;
-    fromComponentOptions: any;
-    toComponentOptions: Array<any> = [];
-    errorComponentOptions: any;
-
-    toComponentTypeAssimblyLinks: Array<string> = new Array<string>();
-    toComponentTypeCamelLinks: Array<string> = new Array<string>();
-    toUriPlaceholders: Array<string> = new Array<string>();
-    toUriPopoverMessages: Array<string> = new Array<string>();
-
-    errorComponentTypeAssimblyLink: string;
-    errorComponentTypeCamelLink: string;
-    errorUriPlaceholder: string;
-    errorUriPopoverMessage: string;
+    popoverMessage: string;
+
+    componentOptions: Array<any> = [];
+
+    componentTypeAssimblyLinks: Array<string> = new Array<string>();
+    componentTypeCamelLinks: Array<string> = new Array<string>();
+    uriPlaceholders: Array<string> = new Array<string>();
+    uriPopoverMessages: Array<string> = new Array<string>();
 
     typesLinks: Array<TypeLinks>;
     editFlowForm: FormGroup;
@@ -129,15 +111,14 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
     timeoutPopoverMessage: string;
     
     
-    fromFilterService: Array<Service> = [];
-    fromServiceType: string;
-    toFilterService: Array<Array<Service>> = [[]];
-    toServiceType: Array<string> = [];
-    errorFilterService: Array<Service> = [];
-    errorServiceType: string;
+    filterService: Array<Array<Service>> = [[]];
+    serviceType: Array<string> = [];
     selectedService: Service = new Service();
     closeResult: string;
 
+    numberOfFromEndpoints: number = 1;
+    numberOfToEndpoints: number = 1;
+
     errorSetHeader = false;
 
     private subscription: Subscription;
@@ -147,7 +128,10 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
 
     modalRef: NgbModalRef | null;
 
-    @ViewChild('tabs', { static: false }) ngbTabset: NgbTabset;
+    @ViewChild('tab', { static: false }) ngbTabset: NgbTabset;
+	//@ViewChildren("user", { read: ElementRef }) renderedUsers: QueryList<ElementRef>;
+
+
 
     constructor(
         private eventManager: JhiEventManager,
@@ -168,6 +152,7 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit() {
+
         this.isSaving = false;
         this.createRoute = 0;
         this.setPopoverMessages();
@@ -181,6 +166,7 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
         });
 
         this.registerChangeInFlows();
+
     }
 
     load(id, isCloning?: boolean) {
@@ -192,6 +178,7 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
             this.gatewayService.query(),
             this.flowService.getGatewayName()
         ).subscribe(([wikiDocUrl, camelDocUrl, services, headers, gateways, gatewayName]) => {
+	
             this.wikiDocUrl = wikiDocUrl.body;
 
             this.camelDocUrl = camelDocUrl.body;
@@ -223,132 +210,81 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
 	            this.flowService.find(id).subscribe(flow => {
 		
                     if (flow) {
-                        this.flow = flow.body;
-                        if (this.singleGateway) {
-                            this.flow.gatewayId = this.gateways[this.indexGateway].id;
-                        }
-
-                        this.initializeForm(this.flow);
-
-                        this.endpointService.findByFlowId(id).subscribe(endpointsData => {
-
-                            let endpoints = endpointsData.body;
+	
+	                        this.flow = flow.body;
+	                        if (this.singleGateway) {
+	                            this.flow.gatewayId = this.gateways[this.indexGateway].id;
+	                        }
+	
+	                        this.initializeForm(this.flow);
+	
+							
+	                        this.endpointService.findByFlowId(id).subscribe(flowEndpointsData => {
+
+															   let endpoints = flowEndpointsData.body;
+							   let index = 0;
+							   this.endpoints = [];
+								
+								this.endpointTypes.forEach((endpointType, j) => {
+								
+									let filteredEndpoints = endpoints.filter((endpoint) => endpoint.endpointType === endpointType)
+		
+								
+									filteredEndpoints.forEach((endpoint, i) => {
+								
+						                        if (typeof this.endpointsOptions[index] === 'undefined') {
+						                            this.endpointsOptions.push([]);
+						                        }
+					
+						                        this.endpoint = new Endpoint(
+						                            endpoint.id,
+													endpoint.endpointType,
+						                            endpoint.componentType,
+						                            endpoint.uri,
+						                            endpoint.options,
+						                            endpoint.flowId,
+						                            endpoint.serviceId,
+						                            endpoint.headerId
+						                        );
+					
+												if (isCloning) {this.endpoint.id = null}
+
+							    				this.endpoints.push(this.endpoint);
+
+
+												let endpointX = this.endpoint;
+												let formgroup = this.initializeEndpointData(endpoint);
+					                        	(<FormArray>this.editFlowForm.controls.endpointsData).insert(index, formgroup);
+						
+												this.getOptions(
+					                                this.endpoint,
+					                                this.editFlowForm.controls.endpointsData.get((index).toString()),
+					                                this.endpointsOptions[index]
+					                            );
+					
+					                            this.setTypeLinks(endpoint, index);
+						
+												index = index + 1;	
+											}, this);
+									}, this);
+		
+								if (isCloning) {
+		                                //reset id and flow name to null
+		                                this.flow.id = null;
+		                                this.flow.name = null;
+		                                
+										this.flow.endpoints = null;
+		
+		                                this.endpoint.id = null;
+		                                this.updateForm();
+		                        }
+		                        this.finished = true;
 
-                            if (endpoints.length === 0) {
-                                this.endpoints = [new Endpoint()];
-                            }
+	                        });
 
-                            this.endpoints = [];
+						}
 
-                            endpoints.forEach((endpoint, i) => {
-	
-								if(endpoint.endpointType.valueOf()==='FROM'){
-
-	                                this.fromEndpoint = new Endpoint(
-	                                    endpoint.id,
-										endpoint.endpointType,
-	                                    endpoint.componentType,
-	                                    endpoint.uri,
-	                                    endpoint.options,
-	                                    endpoint.flowId,
-	                                    endpoint.serviceId,
-	                                    endpoint.headerId
-	                                );
-
-	                                (<FormArray>this.editFlowForm.controls.endpointsData).insert(
-	                                    0,
-	                                    this.initializeEndpointData(this.fromEndpoint)
-	                                );
-	                                setTimeout(() => {
-	                                    this.getOptions(
-	                                        this.fromEndpoint,
-	                                        this.editFlowForm.controls.endpointsData.get('0'),
-	                                        this.fromEndpointOptions
-	                                    );
-	                                    this.setTypeLinks(this.fromEndpoint, 0);
-	                                    this.finished = true;
-	                                }, 50);
-									
-									
-								}else if(endpoint.endpointType.valueOf()==='ERROR'){
-
-	                                this.errorEndpoint = new Endpoint(
-	                                    endpoint.id,
-										endpoint.endpointType,
-	                                    endpoint.componentType,
-	                                    endpoint.uri,
-	                                    endpoint.options,
-	                                    endpoint.flowId,
-	                                    endpoint.serviceId,
-	                                    endpoint.headerId
-	                                );
-
-	                            (<FormArray>this.editFlowForm.controls.endpointsData).insert(
-	                                1,
-	                                this.initializeEndpointData(this.errorEndpoint)
-	                            );
-	                            setTimeout(() => {
-	                                this.getOptions(
-	                                    this.errorEndpoint,
-	                                    this.editFlowForm.controls.endpointsData.get('1'),
-	                                    this.errorEndpointOptions
-	                                );
-	                                this.setTypeLinks(this.errorEndpoint, 1);
-	                            }, 50);
-							}else if(endpoint.endpointType.valueOf()==='TO'){
-
-	                                if (typeof this.toEndpointsOptions[i] === 'undefined') {
-	                                    this.toEndpointsOptions.push([]);
-	                                }
-			
-	                                this.toEndpoint = new Endpoint(
-	                                    endpoint.id,
-										endpoint.endpointType,
-	                                    endpoint.componentType,
-	                                    endpoint.uri,
-	                                    endpoint.options,
-	                                    endpoint.flowId,
-	                                    endpoint.serviceId,
-	                                    endpoint.headerId
-	                                );
-
-	                                this.toEndpoints.push(this.toEndpoint);
-
-	                                (<FormArray>this.editFlowForm.controls.endpointsData).insert(
-	                                    i + 1,
-	                                    this.initializeEndpointData(this.toEndpoint)
-	                                );
-
-	                                setTimeout(() => {
-	                                    this.getOptions(
-	                                        endpoint,
-	                                        this.editFlowForm.controls.endpointsData.get((i + 1).toString()),
-	                                        this.toEndpointsOptions[i]
-	                                    );
-	                                    this.setTypeLinks(this.toEndpoint, i + 1);
-	                                }, 50);
-									
-									
-								}
-
-                            if (isCloning) {
-                                //reset id and flow name to null
-                                this.flow.id = null;
-                                this.flow.name = null;
-                                this.flow.endpoints = null;
-
-                                this.fromEndpoint.id = null;
-                                this.toEndpoints.forEach(toEndpoint => {
-                                    toEndpoint.id = null;
-                                });
-                                this.errorEndpoint.id = null;
-
-                                this.updateForm();
-                            }
-                        });
 					});
-					}
-                });
 		    } else if (!this.finished) {
                 setTimeout(() => {
                     this.flow = new Flow();
@@ -367,47 +303,53 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
                     }
                     this.initializeForm(this.flow);
 
-                    this.fromEndpoint = new Endpoint();
-				    this.fromEndpoint.endpointType = EndpointType.FROM;
-                    this.fromEndpoint.componentType = ComponentType[this.gateways[this.indexGateway].defaultFromComponentType];
-                    (<FormArray>this.editFlowForm.controls.endpointsData).push(this.initializeEndpointData(this.fromEndpoint));
-                    this.fromEndpointOptions = [new Option()];
-                    this.setTypeLinks(this.fromEndpoint, 0);
-
-                    this.errorEndpoint = new Endpoint();
-					this.errorEndpoint.endpointType = EndpointType.ERROR;
-                    this.errorEndpoint.componentType = ComponentType[this.gateways[this.indexGateway].defaultErrorComponentType];
-                    (<FormArray>this.editFlowForm.controls.endpointsData).push(this.initializeEndpointData(this.errorEndpoint));
-                    this.errorEndpointOptions = [new Option()];
-                    this.setTypeLinks(this.errorEndpoint, 1);
-
-                    this.toEndpoints = new Array<Endpoint>(new Endpoint());
-                    this.toEndpoints.forEach((endpoint, i) => {
-				        endpoint.endpointType = EndpointType.TO;
-                        endpoint.componentType = ComponentType[this.gateways[this.indexGateway].defaultToComponentType];
-                    });
-                    (<FormArray>this.editFlowForm.controls.endpointsData).push(this.initializeEndpointData(this.toEndpoints[0]));
-                    this.toEndpointsOptions = [[new Option()]];
-                    this.setTypeLinks(this.toEndpoints[0], 2);
+                    this.endpoint = new Endpoint();
+				    this.endpoint.endpointType = EndpointType.FROM;
+                    this.endpoint.componentType = ComponentType[this.gateways[this.indexGateway].defaultFromComponentType];
+                    (<FormArray>this.editFlowForm.controls.endpointsData).push(this.initializeEndpointData(this.endpoint));
+                    this.endpointsOptions[0] = [new Option()];
+                    this.setTypeLinks(this.endpoint, 0);
+
+				    this.endpoints.push(this.endpoint);
+
+                    this.endpoint = new Endpoint();
+				    this.endpoint.endpointType = EndpointType.TO;
+                    this.endpoint.componentType = ComponentType[this.gateways[this.indexGateway].defaultToComponentType];
+                    (<FormArray>this.editFlowForm.controls.endpointsData).push(this.initializeEndpointData(this.endpoint));
+                    this.endpointsOptions[1] = [new Option()];
+                    this.setTypeLinks(this.endpoint, 1);
+
+				    this.endpoints.push(this.endpoint);
+
+                    this.endpoint = new Endpoint();
+				    this.endpoint.endpointType = EndpointType.ERROR;
+                    this.endpoint.componentType = ComponentType[this.gateways[this.indexGateway].defaultErrorComponentType];
+                    (<FormArray>this.editFlowForm.controls.endpointsData).push(this.initializeEndpointData(this.endpoint));
+                    this.endpointsOptions[2] = [new Option()];
+                    this.setTypeLinks(this.endpoint, 2);
+
+				    this.endpoints.push(this.endpoint);
 
                     this.finished = true;
                     this.displayNextButton = true;
                 }, 0);
             }
+
         });
+
     }
 
+	
+
     clone() {
         //reset id and flow name to null
         this.flow.id = null;
         this.flow.name = null;
         this.flow.endpoints = null;
 
-        this.fromEndpoint.id = null;
-        this.toEndpoints.forEach(toEndpoint => {
-            toEndpoint.id = null;
-        });
-        this.errorEndpoint.id = null;
+		this.endpoints.forEach((endpoint, i) => {
+			endpoint.id = null;	
+		});        
 
         this.updateForm();
 
@@ -423,28 +365,13 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
 
     //this filters services not of the correct type
     filterServices(endpoint: any, formService: FormControl) {
-	
-		if(endpoint.endpointType.valueOf()==='TO'){
-            this.toServiceType[this.toEndpoints.indexOf(endpoint)] = this.returnServiceType(endpoint.componentType);
-            this.toFilterService[this.toEndpoints.indexOf(endpoint)] = this.services.filter(
-                f => f.type === this.toServiceType[this.toEndpoints.indexOf(endpoint)]
+            this.serviceType[this.endpoints.indexOf(endpoint)] = this.returnServiceType(endpoint.componentType);
+            this.filterService[this.endpoints.indexOf(endpoint)] = this.services.filter(
+                f => f.type === this.serviceType[this.endpoints.indexOf(endpoint)]
             );
-            if (this.toFilterService[this.toEndpoints.indexOf(endpoint)].length > 0 && endpoint.serviceId) {
-                formService.setValue(this.toFilterService[this.toEndpoints.indexOf(endpoint)].find(fs => fs.id === endpoint.serviceId).id);
+            if (this.filterService[this.endpoints.indexOf(endpoint)].length > 0 && endpoint.serviceId) {
+                formService.setValue(this.filterService[this.endpoints.indexOf(endpoint)].find(fs => fs.id === endpoint.serviceId).id);
             }		
-		}else if(endpoint.endpointType.valueOf()==='FROM'){
-			this.fromServiceType = this.returnServiceType(endpoint.componentType);
-            this.fromFilterService = this.services.filter(f => f.type === this.fromServiceType);
-            if (this.fromFilterService.length > 0 && endpoint.serviceId) {
-                formService.setValue(this.fromFilterService.find(fs => fs.id === endpoint.serviceId).id);
-            }	
-		}else if(endpoint.endpointType.valueOf()==='ERROR'){
-            this.errorServiceType = this.returnServiceType(endpoint.componentType);
-            this.errorFilterService = this.services.filter(f => f.type === this.errorServiceType);
-            if (this.errorFilterService.length > 0 && endpoint.serviceId) {
-                formService.setValue(this.errorFilterService.find(fs => fs.id === endpoint.serviceId).id);
-            }
-    	}
     }
 
     returnServiceType(componentType: any) {
@@ -495,66 +422,27 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
         endpointForm.controls.service.setValue('');
         this.filterServices(endpoint, endpointForm.controls.service as FormControl);
 
+		this.componentTypeAssimblyLinks[endpointFormIndex] = this.wikiDocUrl + type.assimblyTypeLink;
+        this.componentTypeCamelLinks[endpointFormIndex] = this.camelDocUrl + type.camelTypeLink;
+        
+		this.uriPlaceholders[endpointFormIndex] = type.uriPlaceholder;
+        this.uriPopoverMessages[endpointFormIndex] = type.uriPopoverMessage;
 
-		if(endpoint.endpointType.valueOf()==='FROM'){
-				
-            this.fromComponentTypeAssimblyLink = this.wikiDocUrl + type.assimblyTypeLink;
-            this.fromComponentTypeCamelLink = this.camelDocUrl + type.camelTypeLink;
-            this.fromUriPlaceholder = type.uriPlaceholder;
-            this.fromUriPopoverMessage = type.uriPopoverMessage;
-
-            // get options keys
-            this.getComponentOptions(componentType).subscribe(data => {
-
-                let componentOptions = data.properties;
-                
-                this.fromComponentOptions = Object.keys(componentOptions).map(key => ({...componentOptions[key],...{name: key}}));                
-                this.fromComponentOptions.sort(function(a, b) {
-                     return a.displayName.toLowerCase().localeCompare(b.displayName.toLowerCase());
-                });                
-            });
-
-		}else if(endpoint.endpointType.valueOf()==='TO'){
-				
-            this.toComponentTypeAssimblyLinks[this.toEndpoints.indexOf(endpoint)] = this.wikiDocUrl + type.assimblyTypeLink;
-            this.toComponentTypeCamelLinks[this.toEndpoints.indexOf(endpoint)] = this.camelDocUrl + type.camelTypeLink;
+        // set options keys
+        this.getComponentOptions(componentType).subscribe(data => {
             
-			this.toUriPlaceholders[this.toEndpoints.indexOf(endpoint)] = type.uriPlaceholder;
-            this.toUriPopoverMessages[this.toEndpoints.indexOf(endpoint)] = type.uriPopoverMessage;
-
-            // set options keys
-            this.getComponentOptions(componentType).subscribe(data => {
-                
-                let componentOptions = data.properties;
-                
-                this.toComponentOptions[this.toEndpoints.indexOf(endpoint)] = Object.keys(componentOptions).map(key => ({...componentOptions[key],...{name: key}}));                
-                this.toComponentOptions[this.toEndpoints.indexOf(endpoint)].sort(function(a, b) {
-                     return a.displayName.toLowerCase().localeCompare(b.displayName.toLowerCase());
-                });
+            let componentOptions = data.properties;
+            
+            this.componentOptions[this.endpoints.indexOf(endpoint)] = Object.keys(componentOptions).map(key => ({...componentOptions[key],...{name: key}}));                
+            this.componentOptions[this.endpoints.indexOf(endpoint)].sort(function(a, b) {
+                 return a.displayName.toLowerCase().localeCompare(b.displayName.toLowerCase());
             });
+        });
 
-		}else if(endpoint.endpointType.valueOf()==='ERROR'){
-		
-            this.errorComponentTypeAssimblyLink = this.wikiDocUrl + type.assimblyTypeLink;
-            this.errorComponentTypeCamelLink = this.camelDocUrl + type.camelTypeLink;
-            this.errorUriPlaceholder = type.uriPlaceholder;
-            this.errorUriPopoverMessage = type.uriPopoverMessage;
-
-            // set options keys
-            this.getComponentOptions(componentType).subscribe(data => {
-                
-                let componentOptions = data.properties;
-                
-                this.errorComponentOptions = Object.keys(componentOptions).map(key => ({...componentOptions[key],...{name: key}}));                
-                this.errorComponentOptions.sort(function(a, b) {
-                     return a.displayName.toLowerCase().localeCompare(b.displayName.toLowerCase());
-                });
-            });
-       	}
 	
         endpointForm.patchValue({ componentType: componentType.toUpperCase() });
 
-        switch (endpointForm.controls.componentType.value) {
+		switch (endpointForm.controls.componentType.value) {
             case 'WASTEBIN': {
                 endpointForm.controls.uri.disable();
                 endpointForm.controls.options.disable();
@@ -609,9 +497,7 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
         this.headerPopoverMessage = `A group of key/value pairs to add to the message header.<br/><br/> Use the button on the right to create or edit a header.`;
         this.servicePopoverMessage = `If available then a service can be selected. For example a service that sets up a connection.<br/><br/>
                                      Use the button on the right to create or edit services.`;
-        this.fromPopoverMessage = `Source of messages.`;
-        this.toPopoverMessage = `Destination of messages. Multiple destinations can be configured.`;
-        this.errorPopoverMessage = `Fault destination of messages.`;
+        this.popoverMessage = `Destination`;
         this.hostnamePopoverMessage = `URL, IP-address or DNS Name. For example camel.apache.org or 127.0.0.1`;
         this.portPopoverMessage = `Number of the port. Range between 1 and 65536`;
         this.timeoutPopoverMessage = `Timeout in seconds to wait for connection.`;
@@ -631,7 +517,7 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
         });
     }
 
-    initializeEndpointData(endpoint?: any): FormGroup {
+    initializeEndpointData(endpoint: Endpoint): FormGroup {
         return new FormGroup({
             id: new FormControl(endpoint.id),
             componentType: new FormControl(endpoint.componentType, Validators.required),
@@ -660,10 +546,8 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
     updateForm() {
         this.updateFlowData(this.flow);
         let endpointsData = this.editFlowForm.controls.endpointsData as FormArray;
-        this.updateEndpointData(this.fromEndpoint, endpointsData.controls[0] as FormControl);
-        this.updateEndpointData(this.errorEndpoint, endpointsData.controls[1] as FormControl);
-        this.toEndpoints.forEach((toEndpoint, i) => {
-            this.updateEndpointData(toEndpoint, endpointsData.controls[i + 2] as FormControl);
+        this.endpoints.forEach((endpoint, i) => {
+            this.updateEndpointData(endpoint, endpointsData.controls[i] as FormControl);
         });
     }
 
@@ -700,18 +584,18 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
     }
 
     getOptions(endpoint: any, endpointForm: any, endpointOptions: Array<Option>) {
-	
         if (!endpoint.options) {
             endpoint.options = '';
         }
+
         const options = endpoint.options.split('&');
 
         options.forEach((option, index) => {
-            
-			const kv = option.split('=');
+
             const o = new Option();
-            o.key = kv[0];
-            o.value = kv[1];
+            o.key = option.split('=')[0];
+            o.value = option.substring(option.lastIndexOf("=") + 1);
+
             if (typeof endpointForm.controls.options.controls[index] === 'undefined') {
                 endpointForm.controls.options.push(this.initializeOption());
             }
@@ -722,20 +606,17 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
             });
 
             endpointOptions.push(o);
+
         });
+
     }
 
     setOptions() {
-        this.fromEndpoint.options = '';
-        this.setEndpointOptions(this.fromEndpointOptions, this.fromEndpoint, this.selectOptions(0));
-
-        this.toEndpoints.forEach((toEndpoint, i) => {
-            toEndpoint.options = '';
-            this.setEndpointOptions(this.toEndpointsOptions[i], toEndpoint, this.selectOptions(i + 2));
+        this.endpoints.forEach((endpoint, i) => {
+            endpoint.options = '';
+            this.setEndpointOptions(this.endpointsOptions[i], endpoint, this.selectOptions(i));
         });
 
-        this.errorEndpoint.options = '';
-        this.setEndpointOptions(this.errorEndpointOptions, this.errorEndpoint, this.selectOptions(1));
     }
 
     setEndpointOptions(endpointOptions: Array<Option>, endpoint, formOptions: FormArray) {
@@ -780,28 +661,45 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
         return <FormArray>(<FormGroup>endpointData).controls.options;
     }
 
-    addNewToEndpoint() {
-
-        this.toEndpoints.push(new Endpoint());
-        this.toEndpointsOptions.push([new Option()]);
+    addEndpoint(endpoint, index) {
+        this.endpoints.splice(index + 1,0,new Endpoint());
+        this.endpointsOptions.splice(index + 1,0,[new Option()]);
+ 
+		if(endpoint.endpointType === 'FROM'){
+			this.numberOfFromEndpoints = this.numberOfFromEndpoints + 1;
+		}else if(endpoint.endpointType === 'TO'){
+			this.numberOfToEndpoints = this.numberOfToEndpoints + 1;
+		}
 
-        const toEndpoint = this.toEndpoints.find((e, i) => i === this.toEndpoints.length - 1);
+       const newEndpoint = this.endpoints.find((e, i) => i === index + 1);
+		
+        newEndpoint.endpointType = endpoint.endpointType;
+		newEndpoint.componentType = ComponentType[this.gateways[this.indexGateway].defaultToComponentType];
+		
+        (<FormArray>this.editFlowForm.controls.endpointsData).insert(index + 1,this.initializeEndpointData(newEndpoint));
+	
+        this.setTypeLinks(endpoint, index + 1);
 
-        toEndpoint.endpointType = EndpointType.TO;
-		toEndpoint.componentType = ComponentType[this.gateways[this.indexGateway].defaultToComponentType];
-        (<FormArray>this.editFlowForm.controls.endpointsData).push(this.initializeEndpointData(toEndpoint));
-        this.setTypeLinks(toEndpoint, 2 + this.toEndpoints.indexOf(toEndpoint));
+		const currentScrollPosition = this.findPos(document.getElementById("tab" + index))
+		window.scroll(0, currentScrollPosition + 420);
 
     }
 
-    removeToEndpoint(toEndpoint, endpointDataName) {
-        const i = this.toEndpoints.indexOf(toEndpoint);
-        this.toEndpoints.splice(i, 1);
-        this.toEndpointsOptions.splice(i, 1);
+    removeEndpoint(endpoint, endpointDataName) {
+	
+		if(endpoint.endpointType === 'FROM'){
+			this.numberOfFromEndpoints = this.numberOfFromEndpoints - 1;
+		}else if(endpoint.endpointType === 'TO'){
+			this.numberOfToEndpoints = this.numberOfToEndpoints - 1;
+		}
+	
+        const i = this.endpoints.indexOf(endpoint);
+        this.endpoints.splice(i, 1);
+        this.endpointsOptions.splice(i, 1);
         this.editFlowForm.removeControl(endpointDataName);
-        (<FormArray>this.editFlowForm.controls.endpointsData).removeAt(i + 2);
+        (<FormArray>this.editFlowForm.controls.endpointsData).removeAt(i);
         setTimeout(() => {
-            this.ngbTabset.select(`toTab${this.toEndpoints.length - 1}`);
+            this.ngbTabset.select(`tab${this.endpoints.length - 1}`);
         }, 0);
     }
 
@@ -823,7 +721,6 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
     }
 
     testConnection() {
-
         this.testConnectionMessage = '<i class="fa fa-refresh fa-spin fa-fw"></i><span class="sr-only"></span>Testing...';
         this.connectionHost = (<FormGroup>this.testConnectionForm.controls.connectionHost.value);
         this.connectionPort = (<FormGroup>this.testConnectionForm.controls.connectionPort.value);
@@ -940,18 +837,12 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
         );
     }
 
-    handleErrorWhileCreatingFlow(flowId?: number, fromEndpointId?: number, errorEndpointId?: number, toEndpointId?: number) {
+    handleErrorWhileCreatingFlow(flowId?: number, endpointId?: number) {
         if (flowId !== null) {
             this.flowService.delete(flowId);
         }
-        if (fromEndpointId !== null) {
-            this.endpointService.delete(fromEndpointId);
-        }
-        if (errorEndpointId !== null) {
-            this.endpointService.delete(errorEndpointId);
-        }
-        if (toEndpointId !== null) {
-            this.endpointService.delete(toEndpointId);
+        if (endpointId !== null) {
+            this.endpointService.delete(endpointId);
         }
         this.savingFlowFailed = true;
         this.isSaving = false;
@@ -962,6 +853,7 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
     }
 
     save(goToOverview: boolean) {
+
         this.isSaving = true;
         this.setDataFromForm();
         this.setOptions();
@@ -970,31 +862,26 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
         this.savingFlowSuccess = false;
         
         
-        if (!!this.fromEndpoint.id && !!this.errorEndpoint.id && !!this.flow.id) {
+        if (!!this.flow.id) {
             
-			this.fromEndpoint.flowId = this.flow.id;
-            this.toEndpoints.forEach(toEndpoint => {
-                toEndpoint.flowId = this.flow.id;
+            this.endpoints.forEach(endpoint => {
+                endpoint.flowId = this.flow.id;
             });
             
             this.flowService.update(this.flow).subscribe(flow => {
                 this.flow = flow.body;
-                const updateFromEndpoint = this.endpointService.update(this.fromEndpoint);
-                const updateErrorEndpoint = this.endpointService.update(this.errorEndpoint);
-                const updateToEndpoints = this.endpointService.updateMultiple(this.toEndpoints);
+                const updateEndpoints = this.endpointService.updateMultiple(this.endpoints);
 
-                forkJoin([updateFromEndpoint, updateErrorEndpoint, updateToEndpoints]).subscribe(results => {
-                    this.fromEndpoint = results[0].body;
-                    this.errorEndpoint = results[1].body;
-                    this.toEndpoints = results[2].body.concat();
+                updateEndpoints.subscribe(results => {
+                    this.endpoints = results.body.concat();
 
                     if (!goToOverview) {
                         this.updateForm();
                     }
                     this.endpointService.findByFlowId(this.flow.id).subscribe(data => {
-                        let toEndpoints = data.body;
-                        toEndpoints = toEndpoints.filter(e => {
-                            const s = this.toEndpoints.find(t => t.id === e.id);
+                        let endpoints = data.body;
+                        endpoints = endpoints.filter(e => {
+                            const s = this.endpoints.find(t => t.id === e.id);
                             if (typeof s === 'undefined') {
                                 return true;
                             } else {
@@ -1002,8 +889,8 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
                             }
                         });
 
-                        if (toEndpoints.length > 0) {
-                            toEndpoints.forEach(element => {
+                        if (endpoints.length > 0) {
+                            endpoints.forEach(element => {
                                 this.endpointService.delete(element.id).subscribe(
                                     r => {
                                         const y = r;
@@ -1031,33 +918,13 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
                 flowUpdated => {
                     this.flow = flowUpdated.body;
 
-                    this.fromEndpoint.flowId = this.flow.id;
-
-		            this.endpointService.create(this.fromEndpoint).subscribe(
-		                fromRes => {
-		                    this.fromEndpoint = fromRes.body;
-	                        },
-	                        () => {
-	                            this.handleErrorWhileCreatingFlow(this.flow.id, this.fromEndpoint.id, null, null);
-		            })
-
-				    this.errorEndpoint.flowId = this.flow.id;
-	
-		            this.endpointService.create(this.errorEndpoint).subscribe(
-		                errorRes => {
-		                    this.errorEndpoint = errorRes.body;
-	                        },
-	                        () => {
-	                            this.handleErrorWhileCreatingFlow(this.flow.id, this.errorEndpoint.id, null, null);
-	                })
-
-                    this.toEndpoints.forEach(toEndpoint => {
-                        toEndpoint.flowId = this.flow.id;
+                    this.endpoints.forEach(endpoint => {
+                        endpoint.flowId = this.flow.id;
                     });
 
-                    this.endpointService.createMultiple(this.toEndpoints).subscribe(
+                    this.endpointService.createMultiple(this.endpoints).subscribe(
                         toRes => {
-                            this.toEndpoints = toRes.body;
+                            this.endpoints = toRes.body;
                             this.updateForm();
                             this.finished = true;
                             this.savingFlowSuccess = true;
@@ -1069,19 +936,16 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
                         () => {
                             this.handleErrorWhileCreatingFlow(
                                 this.flow.id,
-                                this.fromEndpoint.id,
-                                this.errorEndpoint.id,
-                                null
+                                this.endpoint.id
                             );
                         }
                     );
                 },
                 () => {
-                    this.handleErrorWhileCreatingFlow(this.flow.id, this.fromEndpoint.id, null, null);
+                    this.handleErrorWhileCreatingFlow(this.flow.id, this.endpoint.id);
                 }
             );
-        }
-    	
+        }    	
 	}
 	
     setDataFromForm() {
@@ -1096,13 +960,7 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
         this.flow.gatewayId = flowControls.gateway.value;
 
         (<FormArray>flowControls.endpointsData).controls.forEach((endpoint, index) => {
-            if (index === 0) {
-                this.setDataFromFormOnEndpoint(this.fromEndpoint, (<FormGroup>endpoint).controls);
-            } else if (index === 1) {
-                this.setDataFromFormOnEndpoint(this.errorEndpoint, (<FormGroup>endpoint).controls);
-            } else if (index > 1) {
-                this.setDataFromFormOnEndpoint(this.toEndpoints[index - 2], (<FormGroup>endpoint).controls);
-            }
+              this.setDataFromFormOnEndpoint(this.endpoints[index], (<FormGroup>endpoint).controls);
         });
     }
 
@@ -1128,6 +986,17 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
         }
         
     }
+
+	//Get currrent scroll position
+	findPos(obj) {
+	    var curtop = 0;
+	    if (obj.offsetParent) {
+	        do {
+	            curtop += obj.offsetTop;
+	        } while (obj = obj.offsetParent);
+	    return curtop;
+	    }
+	}
     
     goBack() {
         window.history.back();
@@ -1139,68 +1008,13 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
         const index = this.ngbTabset.tabs['_results'].indexOf(activeTab);
         const endpoints = (<FormArray>this.editFlowForm.controls.endpointsData).controls;
 
-        if (index === 0) {
-            let endpoint = <FormGroup>endpoints[index];
+             let endpoint = <FormGroup>endpoints[index];
             this.validateTypeAndUri(endpoint);
             if (endpoints[index].valid) {
                 this.flowService
                     .validateFlowsUri(
                         this.editFlowForm.controls.gateway.value,
-                        this.formatUri(this.fromEndpointOptions, this.fromEndpoint, endpoint)
-                    )
-                    .subscribe(
-                        () => {
-                            if (nextClicked) {
-                                this.goToNextTab(endpoints, index + 1);
-                            }
-                        },
-                        () => {
-                            this.setInvalidUriMessage('FromEndpoint');
-                            if (nextClicked) {
-                                this.goToNextTab(endpoints, index + 1);
-                            }
-                        }
-                    );
-            } else if (isNextTab) {
-                this.markAsUntouchedTypeAndUri(<FormGroup>endpoints[index]);
-            } else {
-                e.preventDefault();
-            }
-        } else if (index === this.ngbTabset.tabs.length - 1) {
-            let formEndpoint = <FormGroup>endpoints[index];
-            this.validateTypeAndUri(formEndpoint);
-            if (endpoints[1].valid) {
-                this.flowService
-                    .validateFlowsUri(
-                        this.editFlowForm.controls.gateway.value,
-                        this.formatUri(this.errorEndpointOptions, this.errorEndpoint, formEndpoint)
-                    )
-                    .subscribe(
-                        () => {
-                            if (nextClicked) {
-                                this.goToNextTab(endpoints, 0);
-                            }
-                        },
-                        () => {
-                            this.setInvalidUriMessage('ErrorEndpoint');
-                            if (nextClicked) {
-                                this.goToNextTab(endpoints, 0);
-                            }
-                        }
-                    );
-            } else if (isNextTab) {
-                this.markAsUntouchedTypeAndUri(<FormGroup>endpoints[index]);
-            } else {
-                e.preventDefault();
-            }
-        } else {
-            let endpoint = <FormGroup>endpoints[index + 1];
-            this.validateTypeAndUri(endpoint);
-            if (endpoints[index + 1].valid) {
-                this.flowService
-                    .validateFlowsUri(
-                        this.editFlowForm.controls.gateway.value,
-                        this.formatUri(this.toEndpointsOptions[index - 1], this.toEndpoints[index - 1], endpoint)
+                        this.formatUri(this.endpointsOptions[index], this.endpoints[index], endpoint)
                     )
                     .subscribe(
                         () => {
@@ -1220,7 +1034,7 @@ export class FlowEditAllComponent implements OnInit, OnDestroy {
             } else {
                 e.preventDefault();
             }
-        }
+
     }
 
     setInvalidUriMessage(endpointName: string) {