Unverified Commit 3534d4d0 authored by Wenkai Yin's avatar Wenkai Yin Committed by GitHub
Browse files

Merge pull request #3672 from pengpengshui/ping_endpoint

Fix issue about endpoint test connection #3661
No related merge requests found
Showing with 71 additions and 94 deletions
+71 -94
......@@ -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
......@@ -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,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 {
......@@ -148,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;
......@@ -157,6 +131,9 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
this.target = this.initEndpoint();
this.initVal = this.initEndpoint();
this.formValues = null;
this.endpointId = '';
this.inlineAlert.close();
}
//Forcely refresh the view
......@@ -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))
......@@ -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();
......@@ -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;
......@@ -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();
}
}
......@@ -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; }
......@@ -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();
......@@ -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;
}
}
\ No newline at end of file
}
......@@ -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 {
......
......@@ -75,6 +75,7 @@ export interface Endpoint extends Base {
password?: string;
insecure: boolean;
type: number;
[key: string]: any;
}
/**
......
......@@ -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",
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment