Skip to content

Commit

Permalink
Merge pull request #3672 from pengpengshui/ping_endpoint
Browse files Browse the repository at this point in the history 
Fix issue about endpoint test connection #3661
  • Loading branch information
@ywk253100
ywk253100 committed Nov 29, 2017
2 parents 03e13af + 5f93735 commit 3534d4d
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 94 deletions.
14 changes: 7 additions & 7 deletions src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts
View file
Expand Up @@ -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>
Expand All @@ -24,23 +24,23 @@ 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>
</label>
</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>
Expand All @@ -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>`;
136 changes: 61 additions & 75 deletions src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
View file
Expand Up @@ -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';

Expand All @@ -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();
Expand All @@ -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;
Expand All @@ -84,41 +80,21 @@ 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;
this.endpointHasChanged = true;
}

ngOnDestroy(): void {
Expand Down Expand Up @@ -148,15 +124,16 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy

reset(): void {
//Reset status variables
this.endpointHasChanged = false;
this.targetNameHasChanged = false;
this.testOngoing = false;
this.onGoing = false;

//Reset data
this.target = this.initEndpoint();
this.initVal = this.initEndpoint();
this.formValues = null;
this.endpointId = '';

this.inlineAlert.close();
}

//Forcely refresh the view
Expand All @@ -179,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))
Expand All @@ -197,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();
Expand All @@ -206,14 +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 {
}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;
Expand All @@ -232,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();
}
}

Expand Down Expand Up @@ -286,27 +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;
}
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; }

Expand Down Expand Up @@ -346,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();
Expand Down Expand Up @@ -388,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;
}

}
}
12 changes: 1 addition & 11 deletions src/ui_ng/lib/src/service/endpoint.service.ts
View file
Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions src/ui_ng/lib/src/service/interface.ts
View file
Expand Up @@ -75,6 +75,7 @@ export interface Endpoint extends Base {
password?: string;
insecure: boolean;
type: number;
[key: string]: any;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion src/ui_ng/package.json
View file
Expand Up @@ -31,7 +31,7 @@
"clarity-icons": "^0.9.8",
"clarity-ui": "^0.9.8",
"core-js": "^2.4.1",
"harbor-ui": "0.5.10",
"harbor-ui": "0.5.23",
"intl": "^1.2.5",
"mutationobserver-shim": "^0.3.2",
"ngx-cookie": "^1.0.0",
Expand Down

0 comments on commit 3534d4d

Please sign in to comment.