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, MatTabChangeEvent } from '@angular/material';
  25 import { NotificationService } from '../services/ui/notification.service';
  26 import { UiService } from '../services/ui/ui.service';
  27 import { InstanceSelectorService } from '../services/instance-selector/instance-selector.service';
  28 import { StatsDataSource } from './stats-datasource';
  29 import { Subscription } from 'rxjs';
  30 import { StatsDialogComponent } from './stats-dialog.component';
  31 import { AppStats } from '../interfaces/e2-mgr.types';
  32 import {FormControl} from '@angular/forms';
  33 import { RicInstance} from '../interfaces/dashboard.types';
  34
  35 @Component({
  36     selector: 'rd-stats',
  37     templateUrl: './stats.component.html',
  38     styleUrls: ['./stats.component.scss']
  39 })
  40 export class StatsComponent implements OnInit {
  41
  42     checked = false;
  43     darkMode: boolean;
  44     panelClass: string;
  45     displayedColumns: string[] = ['appName', 'metricUrl', 'editmetricUrl'];
  46     dataSource: StatsDataSource;
  47     private instanceChange: Subscription;
  48     private instanceKey: string;
  49     metricsUrl: SafeResourceUrl;
  50     tabs = [];
  51     showTabs = false;
  52     selected = new FormControl(0);
  53
  54     constructor(private statsservice: StatsService,
  55         private sanitize: DomSanitizer,
  56         private confirmDialogService: ConfirmDialogService,
  57         private notificationService: NotificationService,
  58         public instanceSelectorService: InstanceSelectorService,
  59         public dialog: MatDialog,
  60         public ui: UiService) {
  61     }
  62
  63     ngOnInit() {
  64         this.dataSource = new StatsDataSource(this.statsservice, this.notificationService);
  65
  66         this.ui.darkModeState.subscribe((isDark) => {
  67             this.darkMode = isDark;
  68         });
  69
  70         this.instanceChange = this.instanceSelectorService.getSelectedInstance().subscribe((instance: RicInstance) => {
  71             if (instance.key) {
  72                 this.instanceKey = instance.key;
  73                 this.dataSource.loadTable(instance.key);
  74               }
  75         });
  76
  77     }
  78
  79     ngOnDestroy() {
  80         this.instanceChange.unsubscribe();
  81     }
  82
  83     setupAppMetrics() {
  84         if (this.darkMode) {
  85           this.panelClass = 'dark-theme';
  86         } else {
  87           this.panelClass = '';
  88         }
  89         const dialogRef = this.dialog.open(StatsDialogComponent, {
  90           panelClass: this.panelClass,
  91           width: '450px',
  92           data: {
  93             instanceKey: this.instanceKey
  94           }
  95         });
  96         dialogRef.afterClosed()
  97           .subscribe((result: boolean) => {
  98             if (result) {
  99               this.dataSource.loadTable(this.instanceKey);
 100             }
 101           });
 102     }
 103
 104     editAppMetrics(stats?) {
 105         const dialogRef = this.dialog.open(StatsDialogComponent, {
 106           hasBackdrop: false,
 107           data: {
 108             instanceKey: this.instanceKey,
 109             appName: stats.statsDetails.appName ? stats.statsDetails.appName : '',
 110             metricUrl: stats.statsDetails.metricUrl ? stats.statsDetails.metricUrl : '',
 111             appId: stats.statsDetails.appId ? stats.statsDetails.appId : 0,
 112             isEdit: 'true'
 113           }
 114         });
 115         dialogRef.afterClosed()
 116           .subscribe((result: boolean) => {
 117             if (result) {
 118               this.dataSource.loadTable(this.instanceKey);
 119             }
 120           });
 121       }
 122
 123       viewAppMetrics(stats?) {
 124         this.statsservice.getAppMetricsById(this.instanceKey, stats.statsDetails.appId)  .subscribe((res: AppStats) => {
 125           this.metricsUrl = this.sanitize.bypassSecurityTrustResourceUrl(res.statsDetails.metricUrl);
 126           let tabNotThere:boolean = true;
 127           if (this.tabs.length <= 0) {
 128             this.tabs.push(res);
 129             this.selected.setValue(this.tabs.length - 1);
 130           }
 131           else {
 132             for(let i=0; i<this.tabs.length; i++){
 133               if (this.tabs[i].statsDetails.appId == res.statsDetails.appId) {
 134                 this.tabs[i].statsDetails.appName = res.statsDetails.appName;
 135                 this.tabs[i].statsDetails.metricUrl = res.statsDetails.metricUrl;
 136                 this.selected.setValue(i);
 137                 tabNotThere  = false;
 138                 break;
 139               }
 140             }
 141             if (tabNotThere) {
 142               this.tabs.push(res);
 143               this.selected.setValue(this.tabs.length - 1);
 144             }
 145           }
 146         });
 147       }
 148
 149       onTabChanged(event: MatTabChangeEvent) {
 150         if (event.index>=0)
 151           this.viewAppMetrics(this.tabs[event.index]);
 152       }
 153
 154       deleteAppMetrics(stats?) {
 155         this.confirmDialogService.openConfirmDialog('Are you sure you want to delete this entry?')
 156       .afterClosed().subscribe((res: boolean) => {
 157         if (res) {
 158
 159         this.statsservice.deleteAppMetrics(this.instanceKey, stats.statsDetails.appId).subscribe(() => {
 160             for(let i=0; i<this.tabs.length; i++){
 161               if (this.tabs[i].instanceKey === this.instanceKey && this.tabs[i].statsDetails.appId == stats.statsDetails.appId) {
 162                 this.tabs.splice(i, 1);
 163                 if (this.tabs.length>0) {
 164                   if (this.tabs[i] == null)
 165                     i=i-1;
 166                   this.viewAppMetrics(this.tabs[i]);
 167                 }
 168                 break;
 169               }
 170             }
 171             this.dataSource.loadTable(this.instanceKey);
 172         });
 173       }
 174     });
 175   }
 176 }