X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=blobdiff_plain;f=webapp-frontend%2Fsrc%2Fapp%2Fran-control%2Fran-connection-dialog.component.ts;h=4065f44a9576d1798d7f0959ce7980dac2195b7c;hb=492897ca754d470da3cbbc31eb49caea8fa7fe2c;hp=c146084b856c7e1b5a83e1fbcc95e634e86babcf;hpb=1379dce23d47c42d169ed13a337bbee827714830;p=portal%2Fric-dashboard.git diff --git a/webapp-frontend/src/app/ran-control/ran-connection-dialog.component.ts b/webapp-frontend/src/app/ran-control/ran-connection-dialog.component.ts index c146084b..4065f44a 100644 --- a/webapp-frontend/src/app/ran-control/ran-connection-dialog.component.ts +++ b/webapp-frontend/src/app/ran-control/ran-connection-dialog.component.ts @@ -17,102 +17,108 @@ * limitations under the License. * ========================LICENSE_END=================================== */ -import { Component, OnInit, Inject } from '@angular/core'; -import { FormGroup, FormControl, Validators } from '@angular/forms'; -import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { HttpErrorResponse, HttpResponse } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { MatDialogRef } from '@angular/material/dialog'; +import { Observable } from 'rxjs'; +import { finalize } from 'rxjs/operators'; +import { E2SetupRequest, RanDialogFormData } from '../interfaces/e2-mgr.types'; import { E2ManagerService } from '../services/e2-mgr/e2-mgr.service'; -import { NotificationService } from '../services/ui/notification.service'; import { ErrorDialogService } from '../services/ui/error-dialog.service'; -import { E2SetupRequest } from '../interfaces/e2-mgr.types'; -import { HttpErrorResponse } from '@angular/common/http'; +import { LoadingDialogService } from '../services/ui/loading-dialog.service'; +import { NotificationService } from '../services/ui/notification.service'; @Component({ - selector: 'rd-ran-control-connect-dialog', - templateUrl: './ran-connection-dialog.component.html', - styleUrls: ['./ran-connection-dialog.component.css'] + selector: 'rd-ran-control-connect-dialog', + templateUrl: './ran-connection-dialog.component.html', + styleUrls: ['./ran-connection-dialog.component.scss'] }) export class RanControlConnectDialogComponent implements OnInit { - public ranDialogForm: FormGroup; + public ranDialogForm: FormGroup; + public processing = false; - constructor( - private dialogRef: MatDialogRef, - private service: E2ManagerService, - private errorService: ErrorDialogService, - private notifService: NotificationService, - @Inject(MAT_DIALOG_DATA) public data: E2SetupRequest) { - } + constructor( + private dialogRef: MatDialogRef, + private service: E2ManagerService, + private errorService: ErrorDialogService, + private loadingDialogService: LoadingDialogService, + private notifService: NotificationService) { + // opens with empty fields; accepts no data to display + } - ngOnInit() { - const namePattern = /^([A-Z]){4}([0-9]){6}$/; - // tslint:disable-next-line:max-line-length - const ipPattern = /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))/; - const portPattern = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/; - this.ranDialogForm = new FormGroup({ - ranType: new FormControl('endc'), - ranName: new FormControl('', [Validators.required, Validators.pattern(namePattern)]), - ranIp: new FormControl('', [Validators.required, Validators.pattern(ipPattern)]), - ranPort: new FormControl('', [Validators.required, Validators.pattern(portPattern)]) - }); + ngOnInit() { + const namePattern = /^([A-Z]){4}([0-9]){6}$/; + // tslint:disable-next-line:max-line-length + const ipPattern = /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))/; + const portPattern = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/; + this.ranDialogForm = new FormGroup({ + ranType: new FormControl('endc'), + ranName: new FormControl('', [Validators.required, Validators.pattern(namePattern)]), + ranIp: new FormControl('', [Validators.required, Validators.pattern(ipPattern)]), + ranPort: new FormControl('', [Validators.required, Validators.pattern(portPattern)]) + }); + } - } + onCancel() { + this.dialogRef.close(false); + } - onCancel() { - this.dialogRef.close(); + setupConnection = (ranFormValue: RanDialogFormData) => { + if (!this.ranDialogForm.valid) { + // should never happen + return; } - - public setupConnection = (ranFormValue) => { - if (this.ranDialogForm.valid) { - this.executeSetupConnection(ranFormValue); - } - } - - private executeSetupConnection = (ranFormValue) => { - let httpErrRes: HttpErrorResponse; - const aboutError = 'RAN Connection Failed: '; - const setupRequest: E2SetupRequest = { - ranName: ranFormValue.ranName, - ranIp: ranFormValue.ranIp, - ranPort: ranFormValue.ranPort - }; - if (ranFormValue.ranType === 'endc') { - this.service.endcSetup(setupRequest).subscribe( - (response: any) => { - this.notifService.success('Endc connect succeeded!'); - this.dialogRef.close(); - }, - (error => { - httpErrRes = error; - this.errorService.displayError(aboutError + httpErrRes.message); - }) - ); - } else { - this.service.x2Setup(setupRequest).subscribe( - (response: any) => { - this.notifService.success('X2 connect succeeded!'); - this.dialogRef.close(); - }, - (error => { - httpErrRes = error; - this.errorService.displayError(aboutError + httpErrRes.message); - }) - ); - } + this.processing = true; + const setupRequest: E2SetupRequest = { + ranName: ranFormValue.ranName, + ranIp: ranFormValue.ranIp, + ranPort: ranFormValue.ranPort + }; + this.loadingDialogService.startLoading("Setting up connection "); + let observable: Observable>; + if (ranFormValue.ranType === 'endc') { + observable = this.service.endcSetup(setupRequest); + } else { + observable = this.service.x2Setup(setupRequest); } + observable + .pipe( + finalize(() => this.loadingDialogService.stopLoading()) + ) + .subscribe( + (response: any) => { + this.processing = false; + this.notifService.success('Connect succeeded!'); + this.dialogRef.close(true); + }, + ((her: HttpErrorResponse) => { + this.processing = false; + // the error field carries the server's response + let msg = her.message; + if (her.error && her.error.message) { + msg = her.error.message; + } + this.errorService.displayError('Connect failed: ' + msg); + // keep the dialog open + }) + ); + } - public hasError(controlName: string, errorName: string) { - if (this.ranDialogForm.controls[controlName].hasError(errorName)) { - return true; - } - return false; + hasError(controlName: string, errorName: string) { + if (this.ranDialogForm.controls[controlName].hasError(errorName)) { + return true; } + return false; + } - public validateControl(controlName: string) { - if (this.ranDialogForm.controls[controlName].invalid && this.ranDialogForm.controls[controlName].touched) { - return true; - } - return false; + validateControl(controlName: string) { + if (this.ranDialogForm.controls[controlName].invalid && this.ranDialogForm.controls[controlName].touched) { + return true; } + return false; + } -} // class AppRANConnectDialog +}