RIC Dashboard Release Notes
===========================
-Version 1.2.4, 21 Oct 2019
+Version 1.2.4, 23 Oct 2019
--------------------------
* Revise a1-med-client to use API spec in new submodule ric-plt/a1;
removed cached copy
* Update EPSDK-FW to version 2.6
* Make constructor robust to missing caasingress.insecure property
* Repair bug that omitted slashes in CAAS-Ingress URL builder
+* Improve the dark mode
Version 1.2.3, 4 Oct 2019
-------------------------
limitations under the License.
========================LICENSE_END===================================
-->
-<div class="anr__section">
+<div class="anr__section" >
<h3 class="rd-global-page-title">ANR xApp Neighbor Cell Relation Table</h3>
<mat-form-field class="input-width">
import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { MatSort } from '@angular/material';
+import { MatSort } from '@angular/material/sort';
import { MatDialog } from '@angular/material/dialog';
import { fromEvent } from 'rxjs/observable/fromEvent';
import { debounceTime, distinctUntilChanged, finalize, tap } from 'rxjs/operators';
import { NotificationService } from './../services/ui/notification.service';
import { AnrEditNcrDialogComponent } from './anr-edit-ncr-dialog.component';
import { ANRXappDataSource } from './anr-xapp.datasource';
+import { UiService } from '../services/ui/ui.service';
@Component({
selector: 'rd-anr',
})
export class AnrXappComponent implements AfterViewInit, OnInit {
+ darkMode: boolean;
+ panelClass: string = "";
dataSource: ANRXappDataSource;
gNodeBIds: string[];
@ViewChild('ggNodeB', { static: true }) ggNodeB: ElementRef;
private confirmDialogService: ConfirmDialogService,
private errorDialogService: ErrorDialogService,
private loadingDialogService: LoadingDialogService,
- private notificationService: NotificationService) { }
+ private notificationService: NotificationService,
+ public ui: UiService) { }
ngOnInit() {
this.dataSource = new ANRXappDataSource(this.anrXappService, this.sort, this.notificationService);
this.dataSource.loadTable();
// Empty string occurs first in the array of gNodeBIds
this.anrXappService.getgNodeBs().subscribe((res: string[]) => this.gNodeBIds = res);
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
}
ngAfterViewInit() {
}
modifyNcr(ncr: ANRNeighborCellRelation): void {
+ if (this.darkMode) {
+ this.panelClass = "dark-theme";
+ } else {
+ this.panelClass = "";
+ }
const dialogRef = this.dialog.open(AnrEditNcrDialogComponent, {
+ panelClass: this.panelClass,
width: '300px',
data: ncr
});
import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { HttpErrorResponse } from '@angular/common/http';
-import { MatSort } from '@angular/material';
+import { MatSort } from '@angular/material/sort';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { of } from 'rxjs/observable/of';
}
.config-title {
- height:50px;
text-align: center;
- color: #432c85;
font-size: 30px;
font-weight: 300;
transform: translate(149 56);
import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { HttpErrorResponse } from '@angular/common/http';
-import { MatSort } from '@angular/material';
+import { MatSort } from '@angular/material/sort';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { merge } from 'rxjs';
import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { HttpErrorResponse } from '@angular/common/http';
-import { MatSort } from '@angular/material';
+import { MatSort } from '@angular/material/sort';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { of } from 'rxjs/observable/of';
import { ConfirmDialogService } from './../services/ui/confirm-dialog.service';
import { NotificationService } from './../services/ui/notification.service';
import { CatalogDataSource } from './catalog.datasource';
+import { UiService } from '../services/ui/ui.service';
@Component({
selector: 'rd-app-catalog',
})
export class CatalogComponent implements OnInit {
+ darkMode: boolean;
+ panelClass: string = "";
displayedColumns: string[] = ['name', 'version', 'action'];
dataSource: CatalogDataSource;
@ViewChild(MatSort, { static: true }) sort: MatSort;
private dialog: MatDialog,
private errorDiaglogService: ErrorDialogService,
private loadingDialogService: LoadingDialogService,
- private notificationService: NotificationService) { }
+ private notificationService: NotificationService,
+ public ui: UiService) { }
ngOnInit() {
this.dataSource = new CatalogDataSource(this.appMgrService, this.sort, this.notificationService);
this.dataSource.loadTable();
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
}
onConfigureApp(xapp: XMDeployableApp): void {
+ if (this.darkMode) {
+ this.panelClass = "dark-theme";
+ } else {
+ this.panelClass = "";
+ }
const dialogRef = this.dialog.open(AppConfigurationComponent, {
+ panelClass: this.panelClass,
width: '40%',
maxHeight: '500px',
position: {
top: '10%'
},
data: xapp
- });
-
+ })
}
onDeployApp(app: XMDeployableApp): void {
import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { HttpErrorResponse } from '@angular/common/http';
-import { MatSort } from '@angular/material';
+import { MatSort } from '@angular/material/sort';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { merge } from 'rxjs';
limitations under the License.
========================LICENSE_END===================================
-->
-<div class="copyright__text">
+<div class="copyright__text" [ngClass]="{'footer-dark': darkMode}">
Copyright (C) 2019 AT&T Intellectual Property. Licensed under the Apache License, Version 2.0.
<br/>
Version {{dashboardVersion}}
letter-spacing: 0.1rem;
font-size: 12px;
}
+
+.footer-dark {
+ color: white;
+}
\ No newline at end of file
* ========================LICENSE_END===================================
*/
import { Component, OnInit } from '@angular/core';
-import { DashboardService } from '../services/dashboard/dashboard.service';
import { DashboardSuccessTransport } from '../interfaces/dashboard.types';
+import { DashboardService } from '../services/dashboard/dashboard.service';
+import { UiService } from '../services/ui/ui.service';
@Component({
selector: 'rd-footer',
* Fetches the version on load for display in the footer
*/
export class FooterComponent implements OnInit {
-
+ darkMode: boolean;
dashboardVersion: string;
// Inject the service
- constructor(private dashboardService: DashboardService) { }
+ constructor(private dashboardService: DashboardService,
+ public ui: UiService ) { }
ngOnInit() {
this.dashboardService.getVersion().subscribe((res: DashboardSuccessTransport) => this.dashboardVersion = res.data);
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
}
}
-->
<!-- browse icons at https://material.io/tools/icons/?style=baseline -->
-<mat-nav-list>
+<mat-nav-list [ngClass]="{'dark': darkMode}">
<a mat-list-item routerLink="/" (click)="onSidenavClose()">
<mat-icon>home</mat-icon> <span class="nav-caption">Home</span>
</a>
text-decoration: none;
color: black;
}
-
+
+.dark a {
+ color: white;
+}
+
a:hover, a:active{
color: lightgray;
}
* ========================LICENSE_END===================================
*/
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { UiService } from '../../services/ui/ui.service';
@Component({
selector: 'rd-sidenav-list',
styleUrls: ['./sidenav-list.component.scss']
})
export class SidenavListComponent implements OnInit {
+ darkMode: boolean;
@Output() sidenavClose = new EventEmitter();
- constructor() { }
+ constructor(public ui: UiService) { }
- ngOnInit() { }
+ ngOnInit() {
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
+ }
public onSidenavClose = () => {
this.sidenavClose.emit();
import { NotificationService } from '../services/ui/notification.service';
import { RanControlConnectDialogComponent } from './ran-connection-dialog.component';
import { RANControlDataSource } from './ran-control.datasource';
+import { UiService } from '../services/ui/ui.service';
@Component({
selector: 'rd-ran-control',
styleUrls: ['./ran-control.component.scss']
})
export class RanControlComponent implements OnInit {
+
+ darkMode: boolean;
+ panelClass: string = "";
displayedColumns: string[] = ['nbId', 'nodeType', 'ranName', 'ranIp', 'ranPort', 'connectionStatus'];
dataSource: RANControlDataSource;
private confirmDialogService: ConfirmDialogService,
private notificationService: NotificationService,
private loadingDialogService: LoadingDialogService,
- public dialog: MatDialog) { }
+ public dialog: MatDialog,
+ public ui: UiService) { }
ngOnInit() {
this.dataSource = new RANControlDataSource(this.e2MgrSvc, this.notificationService);
this.dataSource.loadTable();
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
}
setupRANConnection() {
+ if (this.darkMode) {
+ this.panelClass = "dark-theme";
+ } else {
+ this.panelClass = "";
+ }
const dialogRef = this.dialog.open(RanControlConnectDialogComponent, {
+ panelClass: this.panelClass,
width: '450px'
});
- dialogRef.afterClosed().subscribe( (result: boolean) => {
+ dialogRef.afterClosed()
+ .subscribe((result: boolean) => {
if (result) {
this.dataSource.loadTable();
}
========================LICENSE_END===================================
-->
<!-- Slide Menu-->
-<mat-drawer-container autosize>
- <mat-drawer #drawer mode="push">
- <section class="menu-header">
+<mat-drawer-container autosize >
+ <mat-drawer #drawer mode="push" [ngClass]="{'side-menu__dark': darkModeActive}">
+ <section class="menu-header" [ngClass]="{'menu-header__dark': darkModeActive}">
<div class="left__section3Col" *ngIf="drawer.opened" [ngClass]="{'menumargin-top': drawer.opened}">
<svg (click)="drawer.toggle()" class="hamburger__icon" id="Menu_Burger_Icon" data-name="Menu Burger Icon"
<span class="email__text">demo@o-ran-sc.org</span>
</div>
</section>
- <section #sidenav class="menu-body">
- <rd-sidenav-list></rd-sidenav-list>
+ <section #sidenav class="menu-body" >
+ <rd-sidenav-list ></rd-sidenav-list>
</section>
<section class="menu-footer">
</header>
<!-- Main Content -->
- <main class="main__container">
- <div class = main__container__body>
- <div class="main-container__bg" [ngClass]="{'main-container__bg-dark': darkModeActive}"></div>
+ <main class="main__container" [ngClass]="{'main-container__bg-dark': darkModeActive}" >
+ <div class = main__container__body [ngClass]="{'dark-theme': darkModeActive}">
+ <div class="main-container__bg"></div>
<router-outlet></router-outlet>
</div>
</main>
<!-- Footer -->
- <footer class="main__footer">
- <div class="main-footer__bg" [ngClass]="{'main-footer__bg-dark': darkModeActive}">
+ <footer class="main__footer" [ngClass]="{'main-footer__bg-dark': darkModeActive}">
+ <div class="main-footer__bg">
<rd-footer></rd-footer>
</div>
</footer>
Slide Menu
= = = = = = = = =
*/
+.side-menu__dark {
+ color: white;
+ background: gray;
+}
.side-menu__container {
position: fixed;
.slide-menu-active {
transform: none;
}
+.menu-header.menu-header__dark {
+ background: #2B244D;
+}
.menu-header {
background: linear-gradient(to right, #00FF9B, #5f84fb);
*/
.main__footer {
background: transparent;
- margin: 10px;
z-index: 100;
- height: 35px;
}
.main__footer-dark {
* ========================LICENSE_END===================================
*/
import { BrowserModule } from '@angular/platform-browser';
-// tslint:disable-next-line:max-line-length
-import {MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule,
- MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule,
- MatIconModule, MatInputModule, MatListModule, MatPaginatorModule,
- MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSliderModule,
- MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule,
- MatTabsModule} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ToastrModule } from 'ngx-toastr';
-
import { AcXappComponent } from './ac-xapp/ac-xapp.component';
import { AddDashboardUserDialogComponent } from './user/add-dashboard-user-dialog/add-dashboard-user-dialog.component';
import { AnrEditNcrDialogComponent } from './anr-xapp/anr-edit-ncr-dialog.component';
*/
import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
import { ConfirmDialogComponent } from './../../ui/confirm-dialog/confirm-dialog.component';
+import { UiService } from './ui.service';
@Injectable({
providedIn: 'root'
})
-export class ConfirmDialogService {
+export class ConfirmDialogService {
- constructor(private dialog: MatDialog) { }
+ darkMode: boolean;
+ panelClass: string = "";
+
+ constructor(private dialog: MatDialog,
+ public ui: UiService) { }
openConfirmDialog(msg: string) {
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
+ if (this.darkMode) {
+ this.panelClass = "dark-theme";
+ } else {
+ this.panelClass = "";
+ }
return this.dialog.open(ConfirmDialogComponent, {
+ panelClass: this.panelClass,
width: '480px',
position: { top: '100px' },
data: {
import { HttpErrorResponse } from '@angular/common/http';
import { MatDialog } from '@angular/material/dialog';
import { Injectable } from '@angular/core';
-
+import { UiService } from './ui.service';
+
@Injectable()
export class ErrorDialogService {
+ darkMode: boolean;
+ panelClass: string = "";
public errorMessage: string = '';
- constructor(private dialog: MatDialog) { }
- public displayError(error: string){
+
+ constructor(private dialog: MatDialog,
+ public ui: UiService) { }
+
+ public displayError(error: string) {
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
+ if (this.darkMode) {
+ this.panelClass = "dark-theme";
+ } else {
+ this.panelClass = "";
+ }
return this.dialog.open(ErrorDialogComponent, {
- width: '400px',
- position: { top: '100px' },
- disableClose: true,
- data: {'errorMessage': error}
- });
+ panelClass: this.panelClass,
+ width: '400px',
+ position: { top: '100px' },
+ disableClose: true,
+ data: { 'errorMessage': error }
+ });
}
}
import { Injectable } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { LoadingDialogComponent } from './../../ui/loading-dialog/loading-dialog.component';
+import { UiService } from './ui.service';
@Injectable({
providedIn: 'root'
})
export class LoadingDialogService {
- constructor(private dialog: MatDialog) { }
+ darkMode: boolean;
+ panelClass: string = "";
+
+ constructor(private dialog: MatDialog,
+ public ui: UiService) { }
private loadingDialogRef: MatDialogRef<LoadingDialogComponent>;
startLoading(msg: string) {
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
+ if (this.darkMode) {
+ this.panelClass = "dark-theme";
+ } else {
+ this.panelClass = "";
+ }
this.loadingDialogRef = this.dialog.open(LoadingDialogComponent, {
+ panelClass: this.panelClass,
disableClose: true,
width: '480px',
position: { top: '100px' },
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.
<div class="add__card" routerLink="/catalog" [ngClass]="{'add__card-dark': darkMode}">
<div class="header__container">
<span class="card__title">xApp Catalog</span><br><br><br>
- <div style="color: black; size: 1em; text-align: center">
- <mat-icon>wifi</mat-icon> UE Event Collector</div>
- <div style="color: black; size: 1em; text-align: center">
- <mat-icon>check_box</mat-icon> Admission Control</div>
- <div style="color: black; size: 1em; text-align: center">
- <mat-icon>settings_input_antenna</mat-icon> ANR</div>
- <div style="color: black; size: 1em; text-align: center">
- <mat-icon>open_in_new</mat-icon> Deploy</div>
+ <div class="card_item">
+ <mat-icon>wifi</mat-icon> UE Event Collector
+ </div>
+ <div class="card_item">
+ <mat-icon>check_box</mat-icon> Admission Control
+ </div>
+ <div class="card_item">
+ <mat-icon>settings_input_antenna</mat-icon> ANR
+ </div>
+ <div class="card_item">
+ <mat-icon>open_in_new</mat-icon> Deploy
+ </div>
</div>
<div class="body__container">
- <img src="../../../assets/intelligence.png" width="250px"/>
+ <img src="../../../assets/intelligence.png" />
</div>
</div>
width: 10rem;
margin-bottom: 1.15rem;
}
+
+.card_item {
+ font-size: 1em;
+}
+
+img {
+ width: 250px;
+}
\ No newline at end of file
========================LICENSE_END===================================
-->
-
<div mat-dialog-title>
</div>
<div mat-dialog-content>
<div mat-dialog-actions class="modal-footer justify-content-center">
<button mat-button class="mat-raised-button" [mat-dialog-close]="false">Cancel</button>
<button mat-button class="mat-raised-button mat-primary" [mat-dialog-close]="true">OK</button>
- </div>
+ </div>
\ No newline at end of file
*/
import { Component, OnInit, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'rd-confirm-dialog',
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.
<div class="add__card" routerLink="/control" [ngClass]="{'add__card-dark': darkMode}">
<div class="header__container">
<span class="card__title">RIC Control</span><br><br><br>
- <div style="color: black; size: 1em; text-align: center">
- <mat-icon>play_circle_outline</mat-icon> Start</div>
- <div style="color: black; size: 1em; text-align: center">
- <mat-icon>stop</mat-icon> Stop</div>
- <div style="color: black; size: 1em; text-align: center">
- <mat-icon>build</mat-icon>Config</div>
-
-
+ <div class="card_item">
+ <mat-icon>play_circle_outline</mat-icon> Start
+ </div>
+ <div class="card_item">
+ <mat-icon>stop</mat-icon> Stop
+ </div>
+ <div class="card_item">
+ <mat-icon>build</mat-icon>Config
+ </div>
</div>
<div class="body__container">
- <img src="../../../assets/xAppControl.png" width="250px"/>
+ <img src="../../../assets/xAppControl.png"/>
</div>
</div>
width: 10rem;
margin-bottom: 1.15rem;
}
+
+img {
+ width: 250px;
+}
+
+.card_item {
+ font-size: 1em;
+}
* ========================LICENSE_END===================================
*/
import { Component, OnInit, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
export interface ErrorData {
errorMessage: string;
*/
import { Component, OnInit, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'rd-loading-dialog',
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.
<div class="add__card" routerLink="/stats" [ngClass]="{'add__card-dark': darkMode}">
<div class="header__container">
<span class="card__title">xApp Stats</span><br><br><br>
- <div style="color: black; size: 1em; text-align: center">
- <mat-icon>alarm</mat-icon> Control Loop Latency</div>
- <div style="color: black; size: 1em; text-align: center">
- <mat-icon>backup</mat-icon> Load generator</div>
- <div style="color: black; size: 1em; text-align: center">
- <mat-icon>timeline</mat-icon>Performance</div>
-
+ <div class="card_item">
+ <mat-icon>alarm</mat-icon> Control Loop Latency
+ </div>
+ <div class="card_item">
+ <mat-icon>backup</mat-icon> Load generator
+ </div>
+ <div class="card_item">
+ <mat-icon>timeline</mat-icon>Performance
+ </div>
+
</div>
<div class="body__container">
- <img src="../../../assets/latency.png" width="100%" height="100%"/>
+ <img src="../../../assets/latency.png"/>
</div>
</div>
width: 10rem;
margin-bottom: 1.15rem;
}
+
+img {
+ width: 250px;
+}
+
+.card_item div {
+ font-size: 1em;
+}
import { UserDataSource } from './user.datasource';
import { AddDashboardUserDialogComponent } from './add-dashboard-user-dialog/add-dashboard-user-dialog.component';
import { EditDashboardUserDialogComponent } from './edit-dashboard-user-dialog/edit-dashboard-user-dialog.component';
+import { UiService } from '../services/ui/ui.service';
@Component({
selector: 'rd-user',
export class UserComponent implements OnInit {
+ darkMode: boolean;
+ panelClass: string = "";
displayedColumns: string[] = ['loginId', 'firstName', 'lastName', 'active', 'action'];
dataSource: UserDataSource;
@ViewChild(MatSort, {static: true}) sort: MatSort;
private dashboardSvc: DashboardService,
private errorService: ErrorDialogService,
private notificationService: NotificationService,
- public dialog: MatDialog) { }
+ public dialog: MatDialog,
+ public ui: UiService) { }
ngOnInit() {
this.dataSource = new UserDataSource(this.dashboardSvc, this.sort, this.notificationService);
this.dataSource.loadTable();
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
}
editUser(user: EcompUser) {
+ if (this.darkMode) {
+ this.panelClass = "dark-theme"
+ } else {
+ this.panelClass = "";
+ }
const dialogRef = this.dialog.open(EditDashboardUserDialogComponent, {
+ panelClass: this.panelClass,
width: '450px',
data: user
});
}
addUser() {
+ if (this.darkMode) {
+ this.panelClass = "dark-theme"
+ } else {
+ this.panelClass = "";
+ }
const dialogRef = this.dialog.open(AddDashboardUserDialogComponent, {
+ panelClass: this.panelClass,
width: '450px'
});
dialogRef.afterClosed().subscribe(result => {
import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { HttpErrorResponse } from '@angular/common/http';
-import { MatSort } from '@angular/material';
+import { MatSort } from '@angular/material/sort';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { merge } from 'rxjs';
-/* You can add global styles to this file, and also import other style files */
+/*-
+ * ========================LICENSE_START=================================
+ * O-RAN-SC
+ * %%
+ * Copyright (C) 2019 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 '~bootstrap/dist/css/bootstrap.min.css';
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import './styles/dark-theme';
/* for sidenav to take a whole page */
html, body {
color: #432c85;
font-size: 25px;
font-weight: 100;
-}
\ No newline at end of file
+}
--- /dev/null
+/*-
+ * ========================LICENSE_START=================================
+ * O-RAN-SC
+ * %%
+ * Copyright (C) 2019 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 '~@angular/material/theming';
+@include mat-core();
+
+.dark-theme {
+ color: white;
+ $dark-primary: mat-palette($mat-yellow);
+ $dark-accent: mat-palette($mat-amber, A400, A100, A700);
+ $dark-warn: mat-palette($mat-red);
+ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
+ @include angular-material-theme($dark-theme);
+}
+
+.dark-theme .rd-global-page-title {
+ color:white;
+}
\ No newline at end of file
Code Review / portal / ric-dashboard.git / commitdiff