From 5447254cb207353b33e6a444cce8a7fd84cfd34a Mon Sep 17 00:00:00 2001 From: Nicolas Hu Date: Wed, 26 Aug 2020 15:18:50 -0400 Subject: [PATCH] Extend Xapp deploy workflow Signed-off-by: Jun (Nicolas) Hu Issue-ID: OAM-109 Change-Id: Ieeef49538102d6596b337942025208d0a92f94c3 --- .../src/app/catalog/catalog.component.ts | 49 +++++----- .../src/app/onboard/onboard.component.ts | 25 ++--- dashboard/webapp-frontend/src/app/rd.module.ts | 4 +- .../src/app/services/app-mgr/app-mgr.service.ts | 3 +- .../ui/deploy-dialog/deploy-dialog.component.html | 50 ++++++++++ .../ui/deploy-dialog/deploy-dialog.component.scss | 22 +++++ .../deploy-dialog/deploy-dialog.component.spec.ts | 45 +++++++++ .../ui/deploy-dialog/deploy-dialog.component.ts | 101 +++++++++++++++++++++ .../src/assets/mockdata/config.json | 2 +- docs/release-notes.rst | 3 +- 10 files changed, 260 insertions(+), 44 deletions(-) create mode 100644 dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.html create mode 100644 dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.scss create mode 100644 dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.spec.ts create mode 100644 dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.ts diff --git a/dashboard/webapp-frontend/src/app/catalog/catalog.component.ts b/dashboard/webapp-frontend/src/app/catalog/catalog.component.ts index ac8e6ec6..df439959 100644 --- a/dashboard/webapp-frontend/src/app/catalog/catalog.component.ts +++ b/dashboard/webapp-frontend/src/app/catalog/catalog.component.ts @@ -17,22 +17,21 @@ * limitations under the License. * ========================LICENSE_END=================================== */ -import { HttpErrorResponse, HttpResponse } from '@angular/common/http'; import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { MatSort } from '@angular/material/sort'; import { Subscription } from 'rxjs'; -import { finalize } from 'rxjs/operators'; -import { RicInstance } from '../interfaces/dashboard.types'; import { XMXapp } from '../interfaces/app-mgr.types'; +import { RicInstance } from '../interfaces/dashboard.types'; import { AppMgrService } from '../services/app-mgr/app-mgr.service'; import { InstanceSelectorService } from '../services/instance-selector/instance-selector.service'; +import { ConfirmDialogService } from '../services/ui/confirm-dialog.service'; import { LoadingDialogService } from '../services/ui/loading-dialog.service'; +import { NotificationService } from '../services/ui/notification.service'; import { UiService } from '../services/ui/ui.service'; +import { DeployDialogComponent } from '../ui/deploy-dialog/deploy-dialog.component'; import { AppConfigurationComponent } from './../app-configuration/app-configuration.component'; -import { ConfirmDialogService } from '../services/ui/confirm-dialog.service'; import { OnboardComponent } from './../onboard/onboard.component'; -import { NotificationService } from '../services/ui/notification.service'; import { CatalogDataSource } from './catalog.datasource'; @Component({ @@ -100,30 +99,24 @@ export class CatalogComponent implements OnInit, OnDestroy { } onDeployApp(app: XMXapp): void { - this.confirmDialogService.openConfirmDialog('Deploy application ' + app.name + '?') - .afterClosed().subscribe((res: boolean) => { - if (res) { - this.loadingDialogService.startLoading('Deploying ' + app.name); - this.appMgrService.deployXapp(this.instanceKey, app.name) - .pipe( - finalize(() => this.loadingDialogService.stopLoading()) - ) - .subscribe( - (response: HttpResponse) => { - this.notificationService.success('App deploy succeeded!'); - }, - ((her: HttpErrorResponse) => { - // the error field should have an ErrorTransport object - let msg = her.message; - if (her.error && her.error.message) { - msg = her.error.message; - } - this.notificationService.warn('App deploy failed: ' + msg); - }) - ); - } + if (this.darkMode) { + this.panelClass = 'dark-theme'; + } else { + this.panelClass = ''; + } + const dialogRef = this.dialog.open(DeployDialogComponent, { + panelClass: this.panelClass, + width: '400px', + maxHeight: '1000px', + position: { + top: '10%' + }, + data: { + xappName: app.name, + instanceKey: this.instanceKey } - ); + + }); } onboard(): void { diff --git a/dashboard/webapp-frontend/src/app/onboard/onboard.component.ts b/dashboard/webapp-frontend/src/app/onboard/onboard.component.ts index 7f609a62..4f843db7 100644 --- a/dashboard/webapp-frontend/src/app/onboard/onboard.component.ts +++ b/dashboard/webapp-frontend/src/app/onboard/onboard.component.ts @@ -117,21 +117,24 @@ export class OnboardComponent implements OnInit { selectConfigFile(event) { - this.configFile = event.target.files[0]; - let fileReader = new FileReader(); - fileReader.onload = (e) => { - this.descriptor["config-file.json"] = JSON.parse(fileReader.result as string); + if (event.target.files.length) { + this.configFile = event.target.files[0]; + let fileReader = new FileReader(); + fileReader.onload = (e) => { + this.descriptor["config-file.json"] = JSON.parse(fileReader.result as string); + } + fileReader.readAsText(this.configFile); } - fileReader.readAsText(this.configFile); } selectControlsSchema(event) { - this.controlsSchema = event.target.files[0]; - let fileReader = new FileReader(); - fileReader.onload = (e) => { - this.descriptor["controls-schema.json"] = JSON.parse(fileReader.result as string); + if (event.target.files.length) { + this.controlsSchema = event.target.files[0]; + let fileReader = new FileReader(); + fileReader.onload = (e) => { + this.descriptor["controls-schema.json"] = JSON.parse(fileReader.result as string); + } + fileReader.readAsText(this.controlsSchema); } - fileReader.readAsText(this.controlsSchema); - } } diff --git a/dashboard/webapp-frontend/src/app/rd.module.ts b/dashboard/webapp-frontend/src/app/rd.module.ts index 9de3bad7..9aa1cb5d 100644 --- a/dashboard/webapp-frontend/src/app/rd.module.ts +++ b/dashboard/webapp-frontend/src/app/rd.module.ts @@ -89,6 +89,7 @@ import { InstanceSelectorService } from './services/instance-selector/instance-s import { InstanceSelectorDialogService } from './services/ui/instance-selector-dialog.service'; import { UiService } from './services/ui/ui.service'; import { XappOnboarderService } from './services/xapp-onboarder/xapp-onboarder.service'; +import { DeployDialogComponent } from './ui/deploy-dialog/deploy-dialog.component'; @NgModule({ @@ -116,7 +117,8 @@ import { XappOnboarderService } from './services/xapp-onboarder/xapp-onboarder.s StatsDialogComponent, UserComponent, InstanceSelectorDialogComponent, - OnboardComponent + OnboardComponent, + DeployDialogComponent ], imports: [ BrowserModule, diff --git a/dashboard/webapp-frontend/src/app/services/app-mgr/app-mgr.service.ts b/dashboard/webapp-frontend/src/app/services/app-mgr/app-mgr.service.ts index 5d89ce46..bddf690c 100644 --- a/dashboard/webapp-frontend/src/app/services/app-mgr/app-mgr.service.ts +++ b/dashboard/webapp-frontend/src/app/services/app-mgr/app-mgr.service.ts @@ -45,8 +45,7 @@ export class AppMgrService { return this.httpClient.get(path); } - deployXapp(instanceKey: string, xappName: string): Observable> { - const xappDescriptor: XMXappDescriptor = { xappName: xappName }; + deployXapp(instanceKey: string, xappDescriptor: XMXappDescriptor): Observable> { const path = this.dashboardSvc.buildPath(this.component, instanceKey, this.xappsPath); return this.httpClient.post(path, xappDescriptor, { observe: 'response' }); } diff --git a/dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.html b/dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.html new file mode 100644 index 00000000..17099b50 --- /dev/null +++ b/dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.html @@ -0,0 +1,50 @@ + + +
+ Deploy Xapp +
+
+ + xappName + + + + helmVersion (Optional) + + + + releaseName (Optional) + + + + namespace (Optional) + + + + + + folder_open + +
+ + +
+
diff --git a/dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.scss b/dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.scss new file mode 100644 index 00000000..b4c68638 --- /dev/null +++ b/dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.scss @@ -0,0 +1,22 @@ +/*- + * ========================LICENSE_START================================= + * O-RAN-SC + * %% + * Copyright (C) 2020 AT&T Intellectual Property + * %% + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================LICENSE_END=================================== + */ +mat-form-field{ + width:90% +} \ No newline at end of file diff --git a/dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.spec.ts b/dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.spec.ts new file mode 100644 index 00000000..08e121d2 --- /dev/null +++ b/dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.spec.ts @@ -0,0 +1,45 @@ +/*- + * ========================LICENSE_START================================= + * O-RAN-SC + * %% + * Copyright (C) 2020 AT&T Intellectual Property + * %% + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================LICENSE_END=================================== + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeployDialogComponent } from './deploy-dialog.component'; + +describe('DeployDialogComponent', () => { + let component: DeployDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DeployDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DeployDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.ts b/dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.ts new file mode 100644 index 00000000..1d173ec4 --- /dev/null +++ b/dashboard/webapp-frontend/src/app/ui/deploy-dialog/deploy-dialog.component.ts @@ -0,0 +1,101 @@ +/*- + * ========================LICENSE_START================================= + * O-RAN-SC + * %% + * Copyright (C) 2020 AT&T Intellectual Property + * %% + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================LICENSE_END=================================== + */ + +import { Component, Inject, OnInit } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { finalize } from 'rxjs/operators'; +import { XMXappDescriptor} from '../../interfaces/app-mgr.types'; +import { AppMgrService } from '../../services/app-mgr/app-mgr.service'; +import { NotificationService } from '../../services/ui/notification.service'; +import { LoadingDialogService } from '../../services/ui/loading-dialog.service'; +import { HttpErrorResponse, HttpResponse } from '@angular/common/http'; + +@Component({ + selector: 'rd-deploy-dialog', + templateUrl: './deploy-dialog.component.html', + styleUrls: ['./deploy-dialog.component.scss'] +}) +export class DeployDialogComponent implements OnInit { + + private loadingSubject = new BehaviorSubject(false); + public loading$ = this.loadingSubject.asObservable(); + public deployForm: FormGroup; + xappDescriptor: XMXappDescriptor ; + overrideFile: File; + + constructor( + private dialogRef: MatDialogRef, + private appMgrService: AppMgrService, + private loadingDialogService: LoadingDialogService, + private notificationService: NotificationService, + @Inject(MAT_DIALOG_DATA) private data + ) { } + + ngOnInit(): void { + this.deployForm = new FormGroup({ + xappName: new FormControl(this.data.xappName, [Validators.required]), + helmVersion: new FormControl(''), + releaseName: new FormControl(''), + namespace: new FormControl(''), + overrideFile: new FormControl({}), + }) + } + + selectoverrideFile(event) { + if (event.target.files.length) { + this.overrideFile = event.target.files[0]; + let fileReader = new FileReader(); + fileReader.onload = (e) => { + this.deployForm.value.overrideFile = JSON.parse(fileReader.result as string); + } + fileReader.readAsText(this.overrideFile); + } + else { + this.deployForm.value.overrideFile =null + } + } + + deploy(xapp: XMXappDescriptor) { + this.xappDescriptor = xapp + this.loadingDialogService.startLoading('Deploying ' + this.xappDescriptor.xappName); + this.appMgrService.deployXapp(this.data.instanceKey, this.xappDescriptor) + .pipe( + finalize(() => { + this.loadingDialogService.stopLoading(); + this.dialogRef.close(); + }) + ) + .subscribe( + (response: HttpResponse) => { + this.notificationService.success('App deploy succeeded!'); + }, + ((her: HttpErrorResponse) => { + // the error field should have an ErrorTransport object + let msg = her.message; + if (her.error && her.error.message) { + msg = her.error.message; + } + this.notificationService.warn('App deploy failed: ' + msg); + }) + ); + } +} diff --git a/dashboard/webapp-frontend/src/assets/mockdata/config.json b/dashboard/webapp-frontend/src/assets/mockdata/config.json index eb397423..f69aef77 100644 --- a/dashboard/webapp-frontend/src/assets/mockdata/config.json +++ b/dashboard/webapp-frontend/src/assets/mockdata/config.json @@ -1,7 +1,7 @@ [ { "metadata": { - "name": "UE Event Collector", + "name": "UE Event Collector i1", "configName": "UEEC-appconfig", "namespace": "ricxapp" }, diff --git a/docs/release-notes.rst b/docs/release-notes.rst index cfbae03b..762fd15f 100644 --- a/docs/release-notes.rst +++ b/docs/release-notes.rst @@ -5,8 +5,9 @@ RIC Dashboard Release Notes =========================== -Version 2.1.0, 17 Aug 2020 +Version 2.1.0, 26 Aug 2020 -------------------------- +* Extend the Dashboard Xapp deploy workflow to accept configuration (`OAM-109 `_) * Add Xapp Onboarder client to backend (`OAM-108 `_) * Add Xapp Onboarder frontend UI (`OAM-108 `_) -- 2.16.6