Update endpoint interaction of UI.

src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.html

@@ -14,7 +14,7 @@
         <div class="form-group">
           <label for="destination_name" class="col-md-4 form-group-label-override">{{ 'DESTINATION.NAME' | translate }}<span style="color: red">*</span></label>
           <label class="col-md-8" for="destination_name" aria-haspopup="true" role="tooltip" [class.invalid]="targetName.errors && (targetName.dirty || targetName.touched)" [class.valid]="targetName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
-            <input type="text" id="destination_name" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.name" name="targetName" size="20" #targetName="ngModel" required  (keyup)="clearPassword($event)"> 
+            <input type="text" id="destination_name" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.name" name="targetName" size="20" #targetName="ngModel" required  (keyup)="changedTargetName($event)"> 
             <span class="tooltip-content" *ngIf="targetName.errors && targetName.errors.required && (targetName.dirty || targetName.touched)">
               {{ 'DESTINATION.NAME_IS_REQUIRED' | translate }}
             </span>

src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.ts

@@ -44,7 +44,8 @@ export class CreateEditDestinationComponent implements AfterViewChecked {
 
   hasChanged: boolean;
 
-  endpointUrlHasChanged: boolean;
+  endpointHasChanged: boolean;
+  targetNameHasChanged: boolean;
 
   @ViewChild(InlineAlertComponent)
   inlineAlert: InlineAlertComponent;
@@ -63,7 +64,8 @@ export class CreateEditDestinationComponent implements AfterViewChecked {
     this.editable = editable;
 
     this.hasChanged = false;
-    this.endpointUrlHasChanged = false;
+    this.endpointHasChanged = false;
+    this.targetNameHasChanged = false;
 
     this.pingTestMessage = '';
     this.pingStatus = true;
@@ -96,22 +98,17 @@ export class CreateEditDestinationComponent implements AfterViewChecked {
     this.pingStatus = true;
     this.testOngoing = !this.testOngoing;
 
-    let postedTarget: any = {};
+    let payload: Target = new Target();
-
+    if(this.endpointHasChanged) {
-    if(!this.endpointUrlHasChanged) {
+      payload.endpoint = this.target.endpoint;
-       postedTarget = {
+      payload.username = this.target.username;
-         id: this.target.id
+      payload.password = this.target.password;
-       };
     } else {
-      postedTarget = {
+      payload.id = this.target.id;
-        endpoint: this.target.endpoint,
-        username: this.target.username,
-        password: this.target.password
-      };
     }
 
     this.replicationService
-        .pingTarget(postedTarget)
+        .pingTarget(payload)
         .subscribe(
           response=>{
             this.pingStatus = true;
@@ -126,10 +123,16 @@ export class CreateEditDestinationComponent implements AfterViewChecked {
         )
   }
 
+  changedTargetName($event: any) {
+    if(this.editable) {
+      this.targetNameHasChanged = true;
+    }
+  }
+
   clearPassword($event: any) {
     if(this.editable) {
       this.target.password = '';
-      this.endpointUrlHasChanged = true;
+      this.endpointHasChanged = true;
     }
   }
 
@@ -172,12 +175,21 @@ export class CreateEditDestinationComponent implements AfterViewChecked {
           );
         break;
     case ActionType.EDIT:
-      if(!this.endpointUrlHasChanged) {
+      if(!(this.targetNameHasChanged || this.endpointHasChanged)) {
         this.createEditDestinationOpened = false;
         return;
       } 
+      let payload: Target = new Target();
+      if(this.targetNameHasChanged) {
+        payload.name = this.target.name;
+      }
+      if (this.endpointHasChanged) {
+        payload.endpoint = this.target.endpoint;
+        payload.username = this.target.username;
+        payload.password = this.target.password;
+      } 
       this.replicationService
-          .updateTarget(this.target)
+          .updateTarget(payload, this.target.id)
           .subscribe(
             response=>{ 
               this.messageHandlerService.showSuccess('DESTINATION.UPDATED_SUCCESS');

src/ui_ng/src/app/replication/replication.service.ts

@@ -139,22 +139,21 @@ export class ReplicationService {
   }
 
   pingTarget(target: Target): Observable<any> {
-    let body = new URLSearchParams();
     if(target.id) {
-      body.set('id', target.id + '');
-    }
-    body.set('endpoint', target.endpoint);
-    body.set('username', target.username);
-    body.set('password', target.password);
       return this.http
-               .post(`/api/targets/ping`, body)
+               .post(`/api/targets/${target.id}/ping`, {})
+               .map(response=>response.status)
+               .catch(error=>Observable.throw(error));
+    }
+    return this.http
+               .post(`/api/targets/ping`, target)
                .map(response=>response.status)
                .catch(error=>Observable.throw(error));
   }
 
-  updateTarget(target: Target): Observable<any> {
+  updateTarget(target: Target, targetId: number): Observable<any> {
     return this.http
-               .put(`/api/targets/${target.id}`, JSON.stringify(target))
+               .put(`/api/targets/${targetId}`, JSON.stringify(target))
                .map(response=>response.status)
                .catch(error=>Observable.throw(error));
   }