dashboard/webapp-frontend/src/app/stats/stats.component.ts

   1 /*-
   2  * ========================LICENSE_START=================================
   3  * O-RAN-SC
   4  * %%
   5  * Copyright (C) 2019 AT&T Intellectual Property
   6  * %%
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ========================LICENSE_END===================================
  19  */
  20 import { Component, OnInit } from '@angular/core';
  21 import { StatsService } from '../services/stats/stats.service';
  22 import { ConfirmDialogService } from '../services/ui/confirm-dialog.service';
  23 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
  24 import { MatDialog } from '@angular/material/dialog';
  25 import { MatTabChangeEvent } from '@angular/material/tabs';
  26 import { NotificationService } from '../services/ui/notification.service';
  27 import { UiService } from '../services/ui/ui.service';
  28 import { InstanceSelectorService } from '../services/instance-selector/instance-selector.service';
  29 import { StatsDataSource } from './stats-datasource';
  30 import { Subscription } from 'rxjs';
  31 import { StatsDialogComponent } from './stats-dialog.component';
  32 import { AppStats } from '../interfaces/e2-mgr.types';
  33 import {FormControl} from '@angular/forms';
  34 import { RicInstance} from '../interfaces/dashboard.types';
  35
  36 @Component({
  37     selector: 'rd-stats',
  38     templateUrl: './stats.component.html',
  39     styleUrls: ['./stats.component.scss']
  40 })
  41 export class StatsComponent implements OnInit {
  42
  43     checked = false;
  44     darkMode: boolean;
  45     panelClass: string;
  46     displayedColumns: string[] = ['appName', 'metricUrl', 'editmetricUrl'];
  47     dataSource: StatsDataSource;
  48     private instanceChange: Subscription;
  49     private instanceKey: string;
  50     metricsUrl: SafeResourceUrl;
  51     tabs = [];
  52     showTabs = false;
  53     selected = new FormControl(0);
  54
  55     constructor(private statsservice: StatsService,
  56         private sanitize: DomSanitizer,
  57         private confirmDialogService: ConfirmDialogService,
  58         private notificationService: NotificationService,
  59         public instanceSelectorService: InstanceSelectorService,
  60         public dialog: MatDialog,
  61         public ui: UiService) {
  62     }
  63
  64     ngOnInit() {
  65         this.dataSource = new StatsDataSource(this.statsservice, this.notificationService);
  66
  67         this.ui.darkModeState.subscribe((isDark) => {
  68             this.darkMode = isDark;
  69         });
  70
  71         this.instanceChange = this.instanceSelectorService.getSelectedInstance().subscribe((instance: RicInstance) => {
  72             if (instance.key) {
  73                 this.instanceKey = instance.key;
  74                 this.dataSource.loadTable(instance.key);
  75               }
  76         });
  77
  78     }
  79
  80     ngOnDestroy() {
  81         this.instanceChange.unsubscribe();
  82     }
  83
  84     setupAppMetrics() {
  85         if (this.darkMode) {
  86           this.panelClass = 'dark-theme';
  87         } else {
  88           this.panelClass = '';
  89         }
  90         const dialogRef = this.dialog.open(StatsDialogComponent, {
  91           panelClass: this.panelClass,
  92           width: '450px',
  93           data: {
  94             instanceKey: this.instanceKey
  95           }
  96         });
  97         dialogRef.afterClosed()
  98           .subscribe((result: boolean) => {
  99             if (result) {
 100               this.dataSource.loadTable(this.instanceKey);
 101             }
 102           });
 103     }
 104
 105     editAppMetrics(stats?) {
 106         const dialogRef = this.dialog.open(StatsDialogComponent, {
 107           hasBackdrop: false,
 108           data: {
 109             instanceKey: this.instanceKey,
 110             appName: stats.statsDetails.appName ? stats.statsDetails.appName : '',
 111             metricUrl: stats.statsDetails.metricUrl ? stats.statsDetails.metricUrl : '',
 112             appId: stats.statsDetails.appId ? stats.statsDetails.appId : 0,
 113             isEdit: 'true'
 114           }
 115         });
 116         dialogRef.afterClosed()
 117           .subscribe((result: boolean) => {
 118             if (result) {
 119               this.dataSource.loadTable(this.instanceKey);
 120             }
 121           });
 122       }
 123
 124       viewAppMetrics(stats?) {
 125         this.statsservice.getAppMetricsById(this.instanceKey, stats.statsDetails.appId)  .subscribe((res: AppStats) => {
 126           this.metricsUrl = this.sanitize.bypassSecurityTrustResourceUrl(res.statsDetails.metricUrl);
 127           let tabNotThere:boolean = true;
 128           if (this.tabs.length <= 0) {
 129             this.tabs.push(res);
 130             this.selected.setValue(this.tabs.length - 1);
 131           }
 132           else {
 133             for(let i=0; i<this.tabs.length; i++){
 134               if (this.tabs[i].statsDetails.appId == res.statsDetails.appId) {
 135                 this.tabs[i].statsDetails.appName = res.statsDetails.appName;
 136                 this.tabs[i].statsDetails.metricUrl = res.statsDetails.metricUrl;
 137                 this.selected.setValue(i);
 138                 tabNotThere  = false;
 139                 break;
 140               }
 141             }
 142             if (tabNotThere) {
 143               this.tabs.push(res);
 144               this.selected.setValue(this.tabs.length - 1);
 145             }
 146           }
 147         });
 148       }
 149
 150       onTabChanged(event: MatTabChangeEvent) {
 151         if (event.index>=0)
 152           this.viewAppMetrics(this.tabs[event.index]);
 153       }
 154
 155       deleteAppMetrics(stats?) {
 156         this.confirmDialogService.openConfirmDialog('Are you sure you want to delete this entry?')
 157       .afterClosed().subscribe((res: boolean) => {
 158         if (res) {
 159
 160         this.statsservice.deleteAppMetrics(this.instanceKey, stats.statsDetails.appId).subscribe(() => {
 161             for(let i=0; i<this.tabs.length; i++){
 162               if (this.tabs[i].instanceKey === this.instanceKey && this.tabs[i].statsDetails.appId == stats.statsDetails.appId) {
 163                 this.tabs.splice(i, 1);
 164                 if (this.tabs.length>0) {
 165                   if (this.tabs[i] == null)
 166                     i=i-1;
 167                   this.viewAppMetrics(this.tabs[i]);
 168                 }
 169                 break;
 170               }
 171             }
 172             this.dataSource.loadTable(this.instanceKey);
 173         });
 174       }
 175     });
 176   }
 177 }