From 6ae7be6cac43f44625e76ae65007d6372d59afdb Mon Sep 17 00:00:00 2001 From: Nicolas Hu Date: Mon, 20 Jan 2020 11:03:22 -0500 Subject: [PATCH] improve dashboard UI Add instance selector dialog component and service Repair onSidenavClose method Change-Id: I1a5806b170df698caeed9250c79be3e3d0011659 Signed-off-by: Jun (Nicolas) Hu --- docs/release-notes.rst | 2 + .../src/app/ac-xapp/ac-xapp.component.ts | 17 +- .../app-configuration.component.ts | 2 +- .../src/app/app-control/app-control.component.ts | 9 +- .../src/app/caas-ingress/caas-ingress.component.ts | 7 +- .../src/app/catalog/catalog.component.ts | 13 +- .../src/app/footer/footer.component.html | 2 +- .../sidenav-list/sidenav-list.component.ts | 2 +- .../src/app/ran-control/ran-control.component.ts | 9 +- webapp-frontend/src/app/rd.component.html | 179 ++++++++++----------- webapp-frontend/src/app/rd.component.scss | 66 ++++++-- webapp-frontend/src/app/rd.component.ts | 38 ++--- webapp-frontend/src/app/rd.module.ts | 8 +- .../instance-selector/instance-selector.service.ts | 22 +-- .../ui/instance-selector-dialog.service.spec.ts | 31 ++++ .../ui/instance-selector-dialog.service.ts | 52 ++++++ .../instance-selector-dialog.component.html | 39 +++++ .../instance-selector-dialog.component.spec.ts | 45 ++++++ .../instance-selector-dialog.component.ts | 75 +++++++++ 19 files changed, 452 insertions(+), 166 deletions(-) create mode 100644 webapp-frontend/src/app/services/ui/instance-selector-dialog.service.spec.ts create mode 100644 webapp-frontend/src/app/services/ui/instance-selector-dialog.service.ts create mode 100644 webapp-frontend/src/app/ui/instance-selector-dialog/instance-selector-dialog.component.html create mode 100644 webapp-frontend/src/app/ui/instance-selector-dialog/instance-selector-dialog.component.spec.ts create mode 100644 webapp-frontend/src/app/ui/instance-selector-dialog/instance-selector-dialog.component.ts diff --git a/docs/release-notes.rst b/docs/release-notes.rst index 55202c86..87fe784d 100644 --- a/docs/release-notes.rst +++ b/docs/release-notes.rst @@ -19,6 +19,8 @@ Version 2.0.0, 20 Jan 2020 * Upgrade A1 Mediator API and submodule to tag 2.1.0 * Upgrade App Manager API and submodule to tag 0.3.3 * Upgrade E2 Manager API and submodule to tag 3.0.3 +* Add instance selector dialog component and service +* Repair onSidenavClose method Version 1.3.0, 26 Nov 2019 -------------------------- diff --git a/webapp-frontend/src/app/ac-xapp/ac-xapp.component.ts b/webapp-frontend/src/app/ac-xapp/ac-xapp.component.ts index b4e41cef..1f1d61e2 100644 --- a/webapp-frontend/src/app/ac-xapp/ac-xapp.component.ts +++ b/webapp-frontend/src/app/ac-xapp/ac-xapp.component.ts @@ -19,14 +19,15 @@ */ import { HttpErrorResponse } from '@angular/common/http'; -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { Subscription } from 'rxjs'; import { ACAdmissionIntervalControl } from '../interfaces/ac-xapp.types'; +import { RicInstance } from '../interfaces/dashboard.types'; import { ACXappService } from '../services/ac-xapp/ac-xapp.service'; -import { ErrorDialogService } from '../services/ui/error-dialog.service'; -import { NotificationService } from './../services/ui/notification.service'; -import { Subscription } from 'rxjs'; import { InstanceSelectorService } from '../services/instance-selector/instance-selector.service'; +import { ErrorDialogService } from '../services/ui/error-dialog.service'; +import { NotificationService } from '../services/ui/notification.service'; @Component({ selector: 'rd-ac-xapp', @@ -55,11 +56,11 @@ export class AcXappComponent implements OnInit, OnDestroy { trigger_threshold: new FormControl('', [Validators.required, Validators.min(1)]) }); - this.instanceChange = this.instanceSelectorService.getSelectedInstancekey().subscribe((instanceKey: string) => { - if (instanceKey) { + this.instanceChange = this.instanceSelectorService.getSelectedInstance().subscribe((instance: RicInstance) => { + if (instance.key) { // TODO: show pending action indicator - this.instanceKey = instanceKey; - this.acXappService.getPolicy(instanceKey).subscribe((res: ACAdmissionIntervalControl) => { + this.instanceKey = instance.key; + this.acXappService.getPolicy(instance.key).subscribe((res: ACAdmissionIntervalControl) => { this.acForm.controls['class'].setValue(res.class); this.acForm.controls['enforce'].setValue(res.enforce); this.acForm.controls['window_length'].setValue(res.window_length); diff --git a/webapp-frontend/src/app/app-configuration/app-configuration.component.ts b/webapp-frontend/src/app/app-configuration/app-configuration.component.ts index 406c3509..0e734137 100644 --- a/webapp-frontend/src/app/app-configuration/app-configuration.component.ts +++ b/webapp-frontend/src/app/app-configuration/app-configuration.component.ts @@ -26,7 +26,7 @@ import { AppMgrService } from '../services/app-mgr/app-mgr.service'; import { ErrorDialogService } from '../services/ui/error-dialog.service'; import { LoadingDialogService } from '../services/ui/loading-dialog.service'; import { HttpErrorResponse, HttpResponse } from '@angular/common/http'; -import { NotificationService } from './../services/ui/notification.service'; +import { NotificationService } from '../services/ui/notification.service'; @Component({ selector: 'rd-app-configuration', diff --git a/webapp-frontend/src/app/app-control/app-control.component.ts b/webapp-frontend/src/app/app-control/app-control.component.ts index 7b1a1b40..fd2b26c0 100644 --- a/webapp-frontend/src/app/app-control/app-control.component.ts +++ b/webapp-frontend/src/app/app-control/app-control.component.ts @@ -24,6 +24,7 @@ import { Router } from '@angular/router'; import { Subscription } from 'rxjs'; import { finalize } from 'rxjs/operators'; import { XappControlRow } 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'; @@ -59,10 +60,10 @@ export class AppControlComponent implements OnInit, OnDestroy { ngOnInit() { this.dataSource = new AppControlDataSource(this.appMgrSvc, this.sort, this.notificationService); - this.instanceChange = this.instanceSelectorService.getSelectedInstancekey().subscribe((instanceKey: string) => { - if (instanceKey) { - this.instanceKey = instanceKey; - this.dataSource.loadTable(instanceKey); + this.instanceChange = this.instanceSelectorService.getSelectedInstance().subscribe((instance: RicInstance) => { + if (instance.key) { + this.instanceKey = instance.key; + this.dataSource.loadTable(instance.key); } }); } diff --git a/webapp-frontend/src/app/caas-ingress/caas-ingress.component.ts b/webapp-frontend/src/app/caas-ingress/caas-ingress.component.ts index c389cc91..13ff7af8 100644 --- a/webapp-frontend/src/app/caas-ingress/caas-ingress.component.ts +++ b/webapp-frontend/src/app/caas-ingress/caas-ingress.component.ts @@ -21,6 +21,7 @@ import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { MatSort } from '@angular/material/sort'; import { Subscription } from 'rxjs'; +import { RicInstance } from '../interfaces/dashboard.types'; import { CaasIngressService } from '../services/caas-ingress/caas-ingress.service'; import { InstanceSelectorService } from '../services/instance-selector/instance-selector.service'; import { ConfirmDialogService } from '../services/ui/confirm-dialog.service'; @@ -56,9 +57,9 @@ export class CaasIngressComponent implements OnInit, OnDestroy { ngOnInit() { this.dataSource = new CaasIngressDataSource(this.caasIngressSvc, this.sort, this.notificationService); - this.instanceChange = this.instanceSelectorService.getSelectedInstancekey().subscribe((instanceKey: string) => { - if (instanceKey) { - this.dataSource.loadTable(instanceKey, this.cluster, this.namespace); + this.instanceChange = this.instanceSelectorService.getSelectedInstance().subscribe((instance: RicInstance) => { + if (instance.key) { + this.dataSource.loadTable(instance.key, this.cluster, this.namespace); } }); } diff --git a/webapp-frontend/src/app/catalog/catalog.component.ts b/webapp-frontend/src/app/catalog/catalog.component.ts index d46c99f7..ad90b361 100644 --- a/webapp-frontend/src/app/catalog/catalog.component.ts +++ b/webapp-frontend/src/app/catalog/catalog.component.ts @@ -23,14 +23,15 @@ 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 { XMDeployableApp } from '../interfaces/app-mgr.types'; import { AppMgrService } from '../services/app-mgr/app-mgr.service'; import { InstanceSelectorService } from '../services/instance-selector/instance-selector.service'; import { LoadingDialogService } from '../services/ui/loading-dialog.service'; import { UiService } from '../services/ui/ui.service'; import { AppConfigurationComponent } from './../app-configuration/app-configuration.component'; -import { ConfirmDialogService } from './../services/ui/confirm-dialog.service'; -import { NotificationService } from './../services/ui/notification.service'; +import { ConfirmDialogService } from '../services/ui/confirm-dialog.service'; +import { NotificationService } from '../services/ui/notification.service'; import { CatalogDataSource } from './catalog.datasource'; @Component({ @@ -64,10 +65,10 @@ export class CatalogComponent implements OnInit, OnDestroy { this.darkMode = isDark; }); - this.instanceChange = this.instanceSelectorService.getSelectedInstancekey().subscribe((instanceKey: string) => { - if (instanceKey) { - this.instanceKey = instanceKey; - this.dataSource.loadTable(instanceKey); + this.instanceChange = this.instanceSelectorService.getSelectedInstance().subscribe((instance: RicInstance) => { + if (instance.key) { + this.instanceKey = instance.key; + this.dataSource.loadTable(instance.key); } }); } diff --git a/webapp-frontend/src/app/footer/footer.component.html b/webapp-frontend/src/app/footer/footer.component.html index 5dd1c364..7d78f92c 100644 --- a/webapp-frontend/src/app/footer/footer.component.html +++ b/webapp-frontend/src/app/footer/footer.component.html @@ -18,7 +18,7 @@ ========================LICENSE_END=================================== -->
- Copyright (C) 2019 AT&T Intellectual Property. Licensed under the Apache License, Version 2.0. + Copyright (C) 2020 AT&T Intellectual Property. Licensed under the Apache License, Version 2.0.
Version {{dashboardVersion}}
diff --git a/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.ts b/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.ts index c0f05afc..f8b23d0c 100644 --- a/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.ts +++ b/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.ts @@ -27,7 +27,7 @@ import { UiService } from '../../services/ui/ui.service'; }) export class SidenavListComponent implements OnInit { darkMode: boolean; - @Output() sidenavClose = new EventEmitter(); + @Output() sidenavClose: EventEmitter = new EventEmitter(); constructor(public ui: UiService) { } diff --git a/webapp-frontend/src/app/ran-control/ran-control.component.ts b/webapp-frontend/src/app/ran-control/ran-control.component.ts index 1cffdd82..ac995f07 100644 --- a/webapp-frontend/src/app/ran-control/ran-control.component.ts +++ b/webapp-frontend/src/app/ran-control/ran-control.component.ts @@ -22,6 +22,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { Subscription } from 'rxjs'; import { finalize } from 'rxjs/operators'; +import { RicInstance } from '../interfaces/dashboard.types'; import { E2ManagerService } from '../services/e2-mgr/e2-mgr.service'; import { InstanceSelectorService } from '../services/instance-selector/instance-selector.service'; import { ConfirmDialogService } from '../services/ui/confirm-dialog.service'; @@ -62,10 +63,10 @@ export class RanControlComponent implements OnInit, OnDestroy { this.darkMode = isDark; }); - this.instanceChange = this.instanceSelectorService.getSelectedInstancekey().subscribe((instanceKey: string) => { - if (instanceKey) { - this.instanceKey = instanceKey; - this.dataSource.loadTable(instanceKey); + this.instanceChange = this.instanceSelectorService.getSelectedInstance().subscribe((instance: RicInstance) => { + if (instance.key) { + this.instanceKey = instance.key; + this.dataSource.loadTable(instance.key); } }); } diff --git a/webapp-frontend/src/app/rd.component.html b/webapp-frontend/src/app/rd.component.html index 85cbbcd8..61e0b458 100644 --- a/webapp-frontend/src/app/rd.component.html +++ b/webapp-frontend/src/app/rd.component.html @@ -7,9 +7,9 @@ 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. @@ -18,33 +18,32 @@ ========================LICENSE_END=================================== --> - + -
- -
- - - - - - - - - RIC Dashboard - - +
+
+ + + + + + + + + RIC Dashboard + + -
+
demo@o-ran-sc.org
-
- +
+
- + + + link {{selectedInstanceName}} + +
- + - -
+ +
-
+
-
- - - - - - - - - RIC Dashboard - - +
+ + + + + + + + + RIC Dashboard + + -
+
-
- Select RIC Instance - - - - {{instance.name}} - - - -
+
-
- Light - - Dark -
+
+ Light + + Dark +
-
+
- -
-
-
- -
-
+ +
+
+
+ +
+
- -
-
- -
-
+ +
+
+ +
+ +
-
- +
+ diff --git a/webapp-frontend/src/app/rd.component.scss b/webapp-frontend/src/app/rd.component.scss index 7245077b..35fbb1b6 100644 --- a/webapp-frontend/src/app/rd.component.scss +++ b/webapp-frontend/src/app/rd.component.scss @@ -28,15 +28,15 @@ /* Header */ mat-sidenav-container, mat-sidenav-content, mat-sidenav { - height: 100%; + height: 100%; } mat-sidenav { - width: 250px; + width: 250px; } main { - padding: 10px; + padding: 10px; } /* Slide Menu */ @@ -102,6 +102,7 @@ main { .slide-menu-active { transform: none; } + .menu-header.menu-header__dark { background: #2B244D; } @@ -128,7 +129,7 @@ mat-drawer-content { } .menumargin-top { - margin-top: 10px; + margin-top: 10px; } .greeting__text { @@ -183,12 +184,12 @@ mat-drawer-content { max-width: 4rem; } -.home_bg_image{ - height:40em; - background-size:cover; - width:auto; - background-image:url('../assets/intelligence.png'); - background-position:50% 50%; +.home_bg_image { + height: 40em; + background-size: cover; + width: auto; + background-image: url('../assets/intelligence.png'); + background-position: 50% 50%; } /*Header*/ @@ -352,12 +353,28 @@ mat-drawer-content { color: white; } +.main-footer-licence { + float: left; +} + .main-footer__bg-dark { opacity: 1; background: linear-gradient(to bottom, #B290FF, #2E1D65); transition: opacity 300ms linear; } +.main-footer-instance { + margin-right: 10px; + float: right; + color: white; + letter-spacing: 0.1rem; + font-size: 15px; +} + +.main-footer-instance:hover { + color: lightgray; +} + @media only screen and (max-width: 300px) { .slide-menu { width: 100%; @@ -365,5 +382,30 @@ mat-drawer-content { } .selector-label { - margin-right: 20px; -} \ No newline at end of file + margin-right: 20px; +} + +.menu-footer { + display: grid; + width: 100%; + position: absolute; + bottom: 10px; +} + +a { + text-decoration: none; + color: black; +} + +.dark a { + color: white; +} + +a:hover, a:active { + color: lightgray; +} + +.nav-caption { + display: inline-block; + padding-left: 6px; +} diff --git a/webapp-frontend/src/app/rd.component.ts b/webapp-frontend/src/app/rd.component.ts index 16a18495..31bd7646 100644 --- a/webapp-frontend/src/app/rd.component.ts +++ b/webapp-frontend/src/app/rd.component.ts @@ -18,10 +18,10 @@ * ========================LICENSE_END=================================== */ import { Component, OnInit } from '@angular/core'; -import { finalize } from 'rxjs/operators'; +import { Subscription } from 'rxjs'; import { RicInstance } from './interfaces/dashboard.types'; import { InstanceSelectorService } from './services/instance-selector/instance-selector.service'; -import { LoadingDialogService } from './services/ui/loading-dialog.service'; +import { InstanceSelectorDialogService } from './services/ui/instance-selector-dialog.service'; import { UiService } from './services/ui/ui.service'; @Component({ @@ -32,40 +32,40 @@ import { UiService } from './services/ui/ui.service'; export class RdComponent implements OnInit { showMenu = false; darkModeActive: boolean; - private instanceArray: RicInstance[]; - private selectedInstanceKey: string; + + private selectedInstanceName: string = 'Select RIC instance'; + private instanceChange: Subscription; constructor( public ui: UiService, - private instanceSelectorService: InstanceSelectorService, - private loadingDialogService: LoadingDialogService) { + private instanceSelectorDialogService: InstanceSelectorDialogService, + private instanceSelectorService: InstanceSelectorService) { } ngOnInit() { this.ui.darkModeState.subscribe((value) => { this.darkModeActive = value; }); - this.loadingDialogService.startLoading('Loading RIC instances'); - this.instanceSelectorService.getInstanceArray() - .pipe( - finalize(() => this.loadingDialogService.stopLoading()) - ) - .subscribe((instanceArray: RicInstance[]) => { - this.instanceArray = instanceArray; - this.selectedInstanceKey = instanceArray[0].key; - }) + + this.instanceChange = this.instanceSelectorService.getSelectedInstance().subscribe((instance: RicInstance) => { + if (instance.name) { + this.selectedInstanceName = instance.name; + } else { + this.openInstanceSelectorDialog() + } + }); } - toggleMenu() { - this.showMenu = !this.showMenu; + ngOnDestroy() { + this.instanceChange.unsubscribe(); } modeToggleSwitch() { this.ui.darkModeState.next(!this.darkModeActive); } - changeInstance(selectedInstancekey: string) { - this.instanceSelectorService.updateSelectedInstance(selectedInstancekey); + openInstanceSelectorDialog() { + this.instanceSelectorDialogService.openInstanceSelectorDialog(); } } diff --git a/webapp-frontend/src/app/rd.module.ts b/webapp-frontend/src/app/rd.module.ts index 98e50c95..0a1e2bfd 100644 --- a/webapp-frontend/src/app/rd.module.ts +++ b/webapp-frontend/src/app/rd.module.ts @@ -67,6 +67,7 @@ import { ControlComponent } from './control/control.component'; import { EditDashboardUserDialogComponent } from './user/edit-dashboard-user-dialog/edit-dashboard-user-dialog.component'; import { ErrorDialogComponent } from './ui/error-dialog/error-dialog.component'; import { FooterComponent } from './footer/footer.component'; +import { InstanceSelectorDialogComponent } from './ui/instance-selector-dialog/instance-selector-dialog.component'; import { LoadingDialogComponent } from './ui/loading-dialog/loading-dialog.component'; import { MainComponent } from './main/main.component'; import { PlatformComponent } from './platform/platform.component'; @@ -85,8 +86,10 @@ import { DashboardService } from './services/dashboard/dashboard.service'; import { E2ManagerService } from './services/e2-mgr/e2-mgr.service'; import { ErrorDialogService } from './services/ui/error-dialog.service'; import { InstanceSelectorService } from './services/instance-selector/instance-selector.service'; +import { InstanceSelectorDialogService } from './services/ui/instance-selector-dialog.service'; import { UiService } from './services/ui/ui.service'; + @NgModule({ declarations: [ AcXappComponent, @@ -111,7 +114,8 @@ import { UiService } from './services/ui/ui.service'; SidenavListComponent, StatCardComponent, StatsComponent, - UserComponent + UserComponent, + InstanceSelectorDialogComponent ], imports: [ BrowserModule, @@ -174,6 +178,7 @@ import { UiService } from './services/ui/ui.service'; ConfirmDialogComponent, EditDashboardUserDialogComponent, ErrorDialogComponent, + InstanceSelectorDialogComponent, LoadingDialogComponent, RanControlConnectDialogComponent ], @@ -183,6 +188,7 @@ import { UiService } from './services/ui/ui.service'; E2ManagerService, ErrorDialogService, InstanceSelectorService, + InstanceSelectorDialogService, UiService ], bootstrap: [RdComponent] diff --git a/webapp-frontend/src/app/services/instance-selector/instance-selector.service.ts b/webapp-frontend/src/app/services/instance-selector/instance-selector.service.ts index cf004f76..fbc6bbb1 100644 --- a/webapp-frontend/src/app/services/instance-selector/instance-selector.service.ts +++ b/webapp-frontend/src/app/services/instance-selector/instance-selector.service.ts @@ -29,8 +29,9 @@ import { DashboardService } from '../dashboard/dashboard.service'; providedIn: 'root' }) export class InstanceSelectorService { - private selectedInstanceKey: BehaviorSubject = new BehaviorSubject(''); + private instanceArray: Observable; + private selectedInstance: BehaviorSubject = new BehaviorSubject({ key: '', name:''}); constructor( private dashboardSvc: DashboardService, @@ -44,28 +45,19 @@ export class InstanceSelectorService { const path = this.dashboardSvc.buildPath('admin', null, 'instance'); return this.instanceArray = this.httpClient.get(path) .pipe( - tap(ricInstanceArray => { - this.initselectedInstanceKey(ricInstanceArray[0].key); - }), shareReplay(1) ); } - private initselectedInstanceKey(instanceKey: string) { - if (!this.selectedInstanceKey.value) { - this.selectedInstanceKey.next(instanceKey) - } - } - - // This method may return the BehaviorSubject with empty string + // This method may return the BehaviorSubject with empty value // Afther subscribe that BehaviorSubject // Please make sure this BehaviorSubject has non empty value - getSelectedInstancekey(): BehaviorSubject { - return this.selectedInstanceKey; + getSelectedInstance(): BehaviorSubject { + return this.selectedInstance; } - updateSelectedInstance(instanceKey: string) { - this.selectedInstanceKey.next(instanceKey) + updateSelectedInstance(instance: RicInstance) { + this.selectedInstance.next(instance) } } diff --git a/webapp-frontend/src/app/services/ui/instance-selector-dialog.service.spec.ts b/webapp-frontend/src/app/services/ui/instance-selector-dialog.service.spec.ts new file mode 100644 index 00000000..c8126355 --- /dev/null +++ b/webapp-frontend/src/app/services/ui/instance-selector-dialog.service.spec.ts @@ -0,0 +1,31 @@ +/*- + * ========================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 { TestBed } from '@angular/core/testing'; + +import { InstanceSelectorDialogService } from './instance-selector-dialog.service'; + +describe('InstanceSelectorDialogService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: InstanceSelectorDialogService = TestBed.get(InstanceSelectorDialogService); + expect(service).toBeTruthy(); + }); +}); diff --git a/webapp-frontend/src/app/services/ui/instance-selector-dialog.service.ts b/webapp-frontend/src/app/services/ui/instance-selector-dialog.service.ts new file mode 100644 index 00000000..e723916b --- /dev/null +++ b/webapp-frontend/src/app/services/ui/instance-selector-dialog.service.ts @@ -0,0 +1,52 @@ +/*- + * ========================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 { Injectable } from '@angular/core'; +import { MatDialog } from '@angular/material/dialog'; +import { InstanceSelectorDialogComponent } from '../../ui/instance-selector-dialog/instance-selector-dialog.component'; +import { UiService } from './ui.service'; + + +@Injectable({ + providedIn: 'root' +}) +export class InstanceSelectorDialogService { + + darkMode: boolean; + panelClass: string; + + constructor(private dialog: MatDialog, + public ui: UiService) { } + + openInstanceSelectorDialog() { + this.ui.darkModeState.subscribe((isDark) => { + this.darkMode = isDark; + }); + if (this.darkMode) { + this.panelClass = 'dark-theme'; + } else { + this.panelClass = ''; + } + return this.dialog.open(InstanceSelectorDialogComponent, { + panelClass: this.panelClass, + width: '480px', + position: { top: '100px' }, + }); + } +} diff --git a/webapp-frontend/src/app/ui/instance-selector-dialog/instance-selector-dialog.component.html b/webapp-frontend/src/app/ui/instance-selector-dialog/instance-selector-dialog.component.html new file mode 100644 index 00000000..2b9d22aa --- /dev/null +++ b/webapp-frontend/src/app/ui/instance-selector-dialog/instance-selector-dialog.component.html @@ -0,0 +1,39 @@ + + +
+ Select RIC Instance +
+
+
+ + Select an instance + + + {{instance.name}} + + + +
+
+ + +
+
\ No newline at end of file diff --git a/webapp-frontend/src/app/ui/instance-selector-dialog/instance-selector-dialog.component.spec.ts b/webapp-frontend/src/app/ui/instance-selector-dialog/instance-selector-dialog.component.spec.ts new file mode 100644 index 00000000..193d10b2 --- /dev/null +++ b/webapp-frontend/src/app/ui/instance-selector-dialog/instance-selector-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 { InstanceSelectorDialogComponent } from './instance-selector-dialog.component'; + +describe('InstanceSelectorDialogComponent', () => { + let component: InstanceSelectorDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InstanceSelectorDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InstanceSelectorDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/webapp-frontend/src/app/ui/instance-selector-dialog/instance-selector-dialog.component.ts b/webapp-frontend/src/app/ui/instance-selector-dialog/instance-selector-dialog.component.ts new file mode 100644 index 00000000..8c6159c1 --- /dev/null +++ b/webapp-frontend/src/app/ui/instance-selector-dialog/instance-selector-dialog.component.ts @@ -0,0 +1,75 @@ +/*- + * ========================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, OnDestroy, OnInit } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { MatDialogRef } from '@angular/material/dialog'; +import { Subscription } from 'rxjs'; +import { finalize } from 'rxjs/operators'; +import { RicInstance } from '../../interfaces/dashboard.types'; +import { InstanceSelectorService } from '../../services/instance-selector/instance-selector.service'; +import { LoadingDialogService } from '../../services/ui/loading-dialog.service'; + +@Component({ + selector: 'rd-instance-selector-dialog', + templateUrl: './instance-selector-dialog.component.html', +}) +export class InstanceSelectorDialogComponent implements OnInit, OnDestroy { + + private instanceArray: RicInstance[]; + private instanceForm: FormGroup; + private instanceChange: Subscription; + + constructor( + private dialogRef: MatDialogRef, + private instanceSelectorService: InstanceSelectorService, + private loadingDialogService: LoadingDialogService) { } + + ngOnInit() { + this.instanceForm = new FormGroup({ + instance: new FormControl('', [Validators.required]), + }) + + this.loadingDialogService.startLoading('Loading RIC instances'); + this.instanceSelectorService.getInstanceArray() + .pipe( + finalize(() => this.loadingDialogService.stopLoading()) + ) + .subscribe((instanceArray: RicInstance[]) => { + this.instanceArray = instanceArray; + }) + + this.instanceChange = this.instanceSelectorService.getSelectedInstance().subscribe((selectedInstance: RicInstance) => { + if (selectedInstance.key) { + this.instanceForm.setValue({ instance: selectedInstance }) + } + }); + } + + ngOnDestroy() { + this.instanceChange.unsubscribe(); + } + + changeInstance(selectedInstance) { + this.instanceSelectorService.updateSelectedInstance(selectedInstance); + this.dialogRef.close(true); + } + +} -- 2.16.6