X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=src%2Fapp%2Fdashboard%2FDashboardComponent.ts;h=d49f7081be0a3cd157ce78d2b04d240ce8ddcdf9;hb=46ea49db958888a91926317adf784252695a9359;hp=4660732f80ffefd48309e1e2a69f98ba9c2588bc;hpb=cedffeca6ea3cabc282b753c62a849ca273dfb42;p=osm%2FNG-UI.git diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts index 4660732..d49f708 100644 --- a/src/app/dashboard/DashboardComponent.ts +++ b/src/app/dashboard/DashboardComponent.ts @@ -18,11 +18,15 @@ /** * @file Dashboard Component */ +import { isNullOrUndefined } from 'util'; import { Component, Injector, OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; +import { NotifierService } from 'angular-notifier'; import { AuthenticationService } from 'AuthenticationService'; -import { ActiveElement, Chart, ChartEvent } from 'chart.js'; -import { ERRORDATA } from 'CommonModel'; +import { Chart, ChartType, LineController, LineElement, PointElement, LinearScale, Title, ChartEvent, ActiveElement } from 'chart.js'; +import ChartDataLabels from 'chartjs-plugin-datalabels'; +Chart.register(LineController, LineElement, PointElement, LinearScale, Title, ChartDataLabels); +import { ERRORDATA, TYPESECTION, VIM_TYPES } from 'CommonModel'; import { environment } from 'environment'; import { NSDDetails } from 'NSDModel'; import { NSInstanceDetails } from 'NSInstanceModel'; @@ -54,7 +58,7 @@ export class DashboardComponent implements OnInit { /** Invoke service injectors @public */ public injector: Injector; - /** handle translate @public */ + /** Handle translate @public */ public translateService: TranslateService; /** Observable holds logined value @public */ @@ -108,6 +112,21 @@ export class DashboardComponent implements OnInit { /** List of NS Success Instances @public */ public nsRunningInstance: string[] = []; + /** Contains VIM Account details @public */ + public vimData: VimAccountDetails[] = []; + + /** Contains Selected VIM Details @public */ + public selectedVIMDetails: VimAccountDetails = null; + + /** List of VIM_TYPES @public */ + public vimTypes: TYPESECTION[] = VIM_TYPES; + + /** Array holds Vim data filtered with selected vimtype */ + public vimList: VimAccountDetails[] = []; + + /** Model value used to hold selected vimtype Data @public */ + public vimListData: string; + /** List of color for Instances @private */ private backgroundColor: string[] = []; @@ -154,11 +173,20 @@ export class DashboardComponent implements OnInit { private createdTimes: string[] = []; /** Contains slice limit const @private */ + // eslint-disable-next-line @typescript-eslint/no-magic-numbers private sliceLimit: number = 10; /** Contians hour converter @private */ + // eslint-disable-next-line @typescript-eslint/no-magic-numbers private hourConverter: number = 3600; + /** Converter used to round off time to one decimal point @private */ + // eslint-disable-next-line @typescript-eslint/no-magic-numbers + private converter: number = 10; + + /** Notifier service to popup notification @private */ + private notifierService: NotifierService; + constructor(injector: Injector) { this.injector = injector; this.restService = this.injector.get(RestService); @@ -166,6 +194,7 @@ export class DashboardComponent implements OnInit { this.projectService = this.injector.get(ProjectService); this.sharedService = this.injector.get(SharedService); this.translateService = this.injector.get(TranslateService); + this.notifierService = this.injector.get(NotifierService); } /** @@ -173,7 +202,7 @@ export class DashboardComponent implements OnInit { */ public ngOnInit(): void { this.username$ = this.authService.username; - this.isAdmin = (localStorage.getItem('isAdmin') === 'true') ? true : false; + this.isAdmin = (sessionStorage.getItem('isAdmin') === 'true') ? true : false; this.selectedProject = this.authService.ProjectName; this.checkAdminPrivilege(); this.getUserAccessedProjects(); @@ -288,7 +317,7 @@ export class DashboardComponent implements OnInit { const now: Date = new Date(); const currentTime: number = Number((now.getTime().toString().slice(0, this.sliceLimit))); this.createdTimes.forEach((createdTime: string): void => { - this.noOfHours.push((Math.round((currentTime - Number(createdTime)) / this.hourConverter))); + this.noOfHours.push(Math.floor(((currentTime - Number(createdTime)) / this.hourConverter) * (this.converter)) / this.converter); }); this.drawNsChart(); } @@ -296,36 +325,56 @@ export class DashboardComponent implements OnInit { /** Prepare and sketch NS instance chart */ public drawNsChart(): void { this.charts = new Chart('canvas', { - type: 'bar', + type: 'bar' as ChartType, data: { labels: this.nsRunningInstance, datasets: [{ data: this.noOfHours, label: this.translateService.instant('NOOFHOURS'), borderColor: this.backgroundColor, - backgroundColor: this.backgroundColor + fill: false, + backgroundColor: this.backgroundColor, + hoverBackgroundColor: this.backgroundColor }] }, options: { - onHover: (evt: ChartEvent, elements):void => { + layout: { + padding: { + top: 25 + } + }, + animation: false, + // eslint-disable-next-line prefer-arrow/prefer-arrow-functions + onHover(event: ChartEvent, item: ActiveElement[], chart: Chart): void { const el: HTMLElement = document.getElementById('canvas'); - el.style.cursor = elements[0] ? 'pointer' : 'default'; + el.style.cursor = item[0] ? 'pointer' : 'default'; }, plugins: { legend: { display: false }, + datalabels: { + anchor: 'end', + align: 'top', + font: { + weight: 'bold' + } + } }, scales: { x: { display: true, - labels: [this.translateService.instant('INSTANCES')], + title: { + display: true, + text: this.translateService.instant('NSINSTANCES') + } }, y: { - ticks: { - labelOffset: 0, - }, + beginAtZero: true, display: true, - labels: [this.translateService.instant('NOOFHOURS')] - }, + title: { + display: true, + text: this.translateService.instant('NOOFHOURS') + } + } } } }); @@ -333,7 +382,7 @@ export class DashboardComponent implements OnInit { /** Get VNFD instance details @public */ public getVnfInstanceCount(): void { - this.vnfInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL) + this.vnfInstanceCountSub = this.restService.getResource(environment.VNFINSTANCES_URL) .subscribe((vnfInstanceData: VNFInstanceDetails[]): void => { this.vnfInstanceCount = vnfInstanceData.length; }, (error: ERRORDATA): void => { @@ -346,6 +395,7 @@ export class DashboardComponent implements OnInit { this.vimAccountCountSub = this.restService.getResource(environment.VIMACCOUNTS_URL) .subscribe((vimAccountData: VimAccountDetails[]): void => { this.vimAccountCount = vimAccountData.length; + this.vimData = vimAccountData; }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); @@ -361,6 +411,24 @@ export class DashboardComponent implements OnInit { }); } + /** Get Vim data filtered by the selected Vim Type @public */ + public getSelectedVimTypeList(selectedVIMType: string): void { + this.vimList = this.vimData.filter((vimData: VimAccountDetails): boolean => + vimData.vim_type === selectedVIMType); + if (this.vimList.length === 0) { + this.vimListData = null; + } + } + + /** Get Selected VIM details @public */ + public getSelectedVIMDetails(vimDetails: VimAccountDetails): void { + if (!isNullOrUndefined(vimDetails.resources)) { + this.selectedVIMDetails = vimDetails; + } else { + this.notifierService.notify('error', this.translateService.instant('RESOURCESNOTFOUND')); + } + } + /** * Lifecyle Hooks the trigger before component is deleted */