From 5f93735378f13e9f99145875e1ab2cbcf901c952 Mon Sep 17 00:00:00 2001
From: "Fuhui Peng (c)" <pengf@vmware.com>
Date: Tue, 28 Nov 2017 20:06:28 +0800
Subject: [PATCH] Modify code about endpoint #3661

---
 .../create-edit-endpoint.component.html.ts    |  14 +-
 .../create-edit-endpoint.component.ts         | 141 ++++++++----------
 src/ui_ng/lib/src/service/endpoint.service.ts |  12 +-
 src/ui_ng/lib/src/service/interface.ts        |   1 +
 src/ui_ng/package.json                        |   2 +-
 5 files changed, 69 insertions(+), 101 deletions(-)

diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts
index 91d924199ff..5cb07640f3a 100644
--- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts
+++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts
@@ -15,7 +15,7 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `
         <div class="form-group">
           <label for="destination_name" class="col-md-4 form-group-label-override required">{{ 'DESTINATION.NAME' | translate }}</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)="changedTargetName($event)"> 
+            <input type="text" id="destination_name" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.name" name="targetName" size="20" #targetName="ngModel" required> 
             <span class="tooltip-content" *ngIf="targetName.errors && targetName.errors.required && (targetName.dirty || targetName.touched)">
               {{ 'DESTINATION.NAME_IS_REQUIRED' | translate }}
             </span>
@@ -24,7 +24,7 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `
         <div class="form-group">
           <label for="destination_url" class="col-md-4 form-group-label-override required">{{ 'DESTINATION.URL' | translate }}</label>
           <label class="col-md-8" for="destination_url" aria-haspopup="true" role="tooltip" [class.invalid]="targetEndpoint.errors && (targetEndpoint.dirty || targetEndpoint.touched)" [class.valid]="targetEndpoint.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
-            <input type="text" id="destination_url" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.endpoint" size="20" name="endpointUrl" #targetEndpoint="ngModel" required (keyup)="clearPassword($event)" placeholder="http(s)://192.168.1.1">
+            <input type="text" id="destination_url" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.endpoint" size="20" name="endpointUrl" #targetEndpoint="ngModel" required placeholder="http(s)://192.168.1.1">
             <span class="tooltip-content" *ngIf="targetEndpoint.errors && targetEndpoint.errors.required && (targetEndpoint.dirty || targetEndpoint.touched)">
               {{ 'DESTINATION.URL_IS_REQUIRED' | translate }}
             </span>
@@ -32,15 +32,15 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `
         </div>
         <div class="form-group">
           <label for="destination_username" class="col-md-4 form-group-label-override">{{ 'DESTINATION.USERNAME' | translate }}</label>
-          <input type="text" class="col-md-8" id="destination_username" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.username" size="20" name="username" #username="ngModel" (keyup)="clearPassword($event)">
+          <input type="text" class="col-md-8" id="destination_username" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.username" size="20" name="username" #username="ngModel">
         </div>
         <div class="form-group">
           <label for="destination_password" class="col-md-4 form-group-label-override">{{ 'DESTINATION.PASSWORD' | translate }}</label>
-          <input type="password" class="col-md-8" id="destination_password" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.password" size="20" name="password" #password="ngModel" (focus)="clearPassword($event)">
+          <input type="password" class="col-md-8" id="destination_password" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.password" size="20" name="password" #password="ngModel">
         </div>
         <div class="form-group">
           <label for="destination_insecure" class="col-md-4 form-group-label-override">{{'CONFIG.VERIFY_REMOTE_CERT' | translate }}</label>
-          <clr-checkbox #insecure  class="col-md-8" name="insecure" id="destination_insecure" [clrDisabled]="testOngoing" [clrChecked]="!target.insecure" (clrCheckedChange)="setInsecureValue($event)">
+          <clr-checkbox #insecure  class="col-md-8" name="insecure" id="destination_insecure" [clrDisabled]="testOngoing || !editable" [clrChecked]="!target.insecure" (clrCheckedChange)="setInsecureValue($event)">
              <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right" style="top:-7px;">
                     <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                     <span class="tooltip-content">{{'CONFIG.TOOLTIP.VERIFY_REMOTE_CERT' | translate}}</span>
@@ -55,8 +55,8 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `
     </form>
   </div>
   <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="testConnection()" [disabled]="testOngoing || onGoing || targetEndpoint.errors">{{ 'DESTINATION.TEST_CONNECTION' | translate }}</button>
-      <button type="button" class="btn btn-outline" (click)="onCancel()"  [disabled]="testOngoing || onGoing">{{ 'BUTTON.CANCEL' | translate }}</button>
+      <button type="button" class="btn btn-outline" (click)="testConnection()" [disabled]="inProgress || targetEndpoint.errors">{{ 'DESTINATION.TEST_CONNECTION' | translate }}</button>
+      <button type="button" class="btn btn-outline" (click)="onCancel()"  [disabled]="inProgress">{{ 'BUTTON.CANCEL' | translate }}</button>
       <button type="submit" class="btn btn-primary" (click)="onSubmit()"  [disabled]="!isValid">{{ 'BUTTON.OK' | translate }}</button>
   </div>
 </clr-modal>`;
\ No newline at end of file
diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
index d2233dfcd1a..38611fa3697 100644
--- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
+++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
@@ -35,7 +35,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { CREATE_EDIT_ENDPOINT_STYLE } from './create-edit-endpoint.component.css';
 import { CREATE_EDIT_ENDPOINT_TEMPLATE } from './create-edit-endpoint.component.html';
 
-import { toPromise, clone, compareValue } from '../utils';
+import { toPromise, clone, compareValue, isEmptyObject } from '../utils';
 
 import { Subscription } from 'rxjs/Subscription';
 
@@ -51,8 +51,6 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
     createEditDestinationOpened: boolean;
     staticBackdrop: boolean = true;
     closable: boolean = false;
-
-    actionType: ActionType;
     editable: boolean;
 
     target: Endpoint = this.initEndpoint();
@@ -62,11 +60,9 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
     @ViewChild('targetForm')
     currentForm: NgForm;
 
-    endpointHasChanged: boolean;
-    targetNameHasChanged: boolean;
-
     testOngoing: boolean;
     onGoing: boolean;
+    endpointId: number | string;
 
     @ViewChild(InlineAlertComponent)
     inlineAlert: InlineAlertComponent;
@@ -84,38 +80,19 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
         private ref: ChangeDetectorRef
     ) { }
 
-    public get hasChanged(): boolean {
-        if (this.actionType === ActionType.ADD_NEW) {
-            //Create new
-            return this.target && (
-                (this.target.endpoint && this.target.endpoint.trim() !== "") ||
-                (this.target.name && this.target.name.trim() !== "") ||
-                (this.target.username && this.target.username.trim() !== "") ||
-                (this.target.password && this.target.password.trim() !== "")) ||
-                this.target.insecure;
-        } else {
-            //Edit
-            return !compareValue(this.target, this.initVal);
-        }
-    }
-
     public get isValid(): boolean {
         return !this.testOngoing &&
             !this.onGoing &&
             this.targetForm &&
             this.targetForm.valid &&
             this.editable &&
-            (this.targetNameHasChanged || this.endpointHasChanged || this.checkboxHasChanged);
+            !compareValue(this.target, this.initVal);
     }
 
     public get inProgress(): boolean {
         return this.onGoing || this.testOngoing;
     }
 
-    public get checkboxHasChanged(): boolean {
-        return (this.target.insecure !== this.initVal.insecure) ? true : false;
-    }
-
     setInsecureValue($event: any) {
         this.target.insecure = !$event;
     }
@@ -147,8 +124,6 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
 
     reset(): void {
         //Reset status variables
-        this.endpointHasChanged = false;
-        this.targetNameHasChanged = false;
         this.testOngoing = false;
         this.onGoing = false;
 
@@ -156,6 +131,7 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
         this.target = this.initEndpoint();
         this.initVal = this.initEndpoint();
         this.formValues = null;
+        this.endpointId = '';
 
         this.inlineAlert.close();
     }
@@ -180,7 +156,7 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
         //reset
         this.reset();
         if (targetId) {
-            this.actionType = ActionType.EDIT;
+            this.endpointId = targetId;
             this.translateService.get('DESTINATION.TITLE_EDIT').subscribe(res => this.modalTitle = res);
             toPromise<Endpoint>(this.endpointService
                 .getEndpoint(targetId))
@@ -198,7 +174,7 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
                 })
                 .catch(error => this.errorHandler.error(error));
         } else {
-            this.actionType = ActionType.ADD_NEW;
+            this.endpointId = '';
             this.translateService.get('DESTINATION.TITLE_ADD').subscribe(res => this.modalTitle = res);
             //Directly open the modal
             this.open();
@@ -207,20 +183,23 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
 
     testConnection() {
         let payload: Endpoint = this.initEndpoint();
-
-        if (this.endpointHasChanged) {
+        if (!this.endpointId) {
             payload.endpoint = this.target.endpoint;
             payload.username = this.target.username;
             payload.password = this.target.password;
             payload.insecure = this.target.insecure;
-        }else if (this.checkboxHasChanged) {
-            payload.insecure = this.target.insecure;
-            payload.id = this.target.id;
-            delete payload.username;
-            delete payload.password;
-            delete payload.name;
-        } else {
+        }else {
+            let changes: {[key: string]: any} = this.getChanges();
+            for (let prop in payload) {
+                delete payload[prop];
+            }
             payload.id = this.target.id;
+            if (!isEmptyObject(changes)) {
+                let changekeys: {[key: string]: any} = Object.keys(this.getChanges());
+                changekeys.forEach((key: string) => {
+                    payload[key] = changes[key];
+                });
+            }
         }
 
         this.testOngoing = true;
@@ -239,27 +218,11 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
             });
     }
 
-    changedTargetName($event: any) {
-        if (this.editable) {
-            this.targetNameHasChanged = true;
-        }
-    }
-
-    clearPassword($event: any) {
-        if (this.editable) {
-            this.target.password = '';
-            this.endpointHasChanged = true;
-        }
-    }
-
     onSubmit() {
-        switch (this.actionType) {
-            case ActionType.ADD_NEW:
-                this.addEndpoint();
-                break;
-            case ActionType.EDIT:
-                this.updateEndpoint();
-                break;
+        if (this.endpointId) {
+            this.updateEndpoint();
+        } else {
+            this.addEndpoint();
         }
     }
 
@@ -293,29 +256,19 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
         if (this.onGoing) {
             return;//Avoid duplicated submitting
         }
-        if (!(this.targetNameHasChanged || this.endpointHasChanged || this.checkboxHasChanged)) {
-            return;//Avoid invalid submitting
-        }
+
         let payload: Endpoint = this.initEndpoint();
-        if (this.targetNameHasChanged) {
-            payload.name = this.target.name;
-        }else {
-            delete payload.name;
+        for (let prop in payload) {
+            delete payload[prop];
         }
-        if (this.endpointHasChanged) {
-            payload.endpoint = this.target.endpoint;
-            payload.username = this.target.username;
-            payload.password = this.target.password;
-        }else {
-            delete payload.endpoint;
-            delete payload.username;
-            delete payload.password;
-        }
-        if (this.checkboxHasChanged) {
-            payload.insecure = this.target.insecure;
-        }else {
-            delete payload.insecure;
+        let changes: {[key: string]: any} = this.getChanges();
+        let changekeys: {[key: string]: any} = Object.keys(this.getChanges());
+        if (isEmptyObject(changes)) {
+            return;
         }
+        changekeys.forEach((key: string) => {
+            payload[key] = changes[key];
+        });
 
         if (!this.target.id) { return; }
 
@@ -355,9 +308,10 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
     }
 
     onCancel() {
-        if (this.hasChanged) {
+        let changes: {[key: string]: any} = this.getChanges();
+        if (!isEmptyObject(changes)) {
             this.inlineAlert.showInlineConfirmation({ message: 'ALERT.FORM_CHANGE_CONFIRMATION' });
-        } else {
+        }else {
             this.close();
             if (this.targetForm) {
                 this.targetForm.reset();
@@ -397,5 +351,28 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
             }
         }
     }
+    getChanges(): { [key: string]: any | any[] } {
+        let changes: { [key: string]: any | any[] } = {};
+        if (!this.target || !this.initVal) {
+            return changes;
+        }
+        for (let prop in this.target) {
+            let field: any = this.initVal[prop];
+                if (!compareValue(field, this.target[prop])) {
+                    changes[prop] = this.target[prop];
+                    //Number
+                    if (typeof field === "number") {
+                        changes[prop] = +changes[prop];
+                    }
+
+                    //Trim string value
+                    if (typeof field === "string") {
+                        changes[prop] = ('' + changes[prop]).trim();
+                    }
+            }
+        }
+
+        return changes;
+    }
 
-}
\ No newline at end of file
+}
diff --git a/src/ui_ng/lib/src/service/endpoint.service.ts b/src/ui_ng/lib/src/service/endpoint.service.ts
index 6eb6090a8d3..053f250b2b1 100644
--- a/src/ui_ng/lib/src/service/endpoint.service.ts
+++ b/src/ui_ng/lib/src/service/endpoint.service.ts
@@ -185,22 +185,12 @@ export class EndpointDefaultService extends EndpointService {
         if(!endpoint) {
            return Promise.reject('Invalid endpoint.'); 
         }
-        let requestUrl: string ;
-        if(endpoint.id) {
-            requestUrl = `${this._endpointUrl}/${endpoint.id}/ping`;
-          return this.http
-                 .post(requestUrl, HTTP_JSON_OPTIONS)
-                 .toPromise()
-                 .then(response=>response.status)
-                 .catch(error=>Promise.reject(error));
-        } else {
-            requestUrl = `${this._endpointUrl}/ping`;
+        let requestUrl: string = `${this._endpointUrl}/ping`;
           return this.http
                  .post(requestUrl, endpoint, HTTP_JSON_OPTIONS)
                  .toPromise()
                  .then(response=>response.status)
                  .catch(error=>Promise.reject(error));
-        }
     }
 
     public getEndpointWithReplicationRules(endpointId: number | string): Observable<any> | Promise<any> | any {
diff --git a/src/ui_ng/lib/src/service/interface.ts b/src/ui_ng/lib/src/service/interface.ts
index 96fc2383d34..6b876154d66 100644
--- a/src/ui_ng/lib/src/service/interface.ts
+++ b/src/ui_ng/lib/src/service/interface.ts
@@ -75,6 +75,7 @@ export interface Endpoint extends Base {
     password?: string;
     insecure: boolean;
     type: number;
+    [key: string]: any;
 }
 
 /**
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index d824ef357f3..e747ff0cd17 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -31,7 +31,7 @@
         "clarity-icons": "^0.9.8",
         "clarity-ui": "^0.9.8",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.5.14",
+        "harbor-ui": "0.5.23",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",