X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=src%2Fapp%2Fdashboard%2FDashboardComponent.ts;h=23e928fcd51f7c141d068f5065130db5b6877c6a;hb=0a34dfa32165036b380ec6ac493469b34007df0a;hp=31a85161da21979bbd6e3147132062b499312669;hpb=208bef2cea31da5427861ac81817790e98851fe2;p=osm%2FNG-UI.git diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts index 31a8516..23e928f 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 { Chart } 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'; @@ -34,7 +38,6 @@ import { SDNControllerModel } from 'SDNControllerModel'; import { SharedService } from 'SharedService'; import { ProjectRoleMappings, UserDetail } from 'UserModel'; import { VimAccountDetails } from 'VimAccountModel'; -import { VNFDDetails } from 'VNFDModel'; import { VNFInstanceDetails } from 'VNFInstanceModel'; /** @@ -55,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 */ @@ -107,7 +110,22 @@ export class DashboardComponent implements OnInit { public message: string = 'PLEASEWAIT'; /** List of NS Success Instances @public */ - public nsRunningInstance: {}[] = []; + 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[] = []; @@ -155,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); @@ -167,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); } /** @@ -189,13 +217,13 @@ export class DashboardComponent implements OnInit { /** Get all the projects @public */ public getUserAccessedProjects(): void { - this.projectService.getUserProjects().subscribe((projects: UserDetail) => { + this.projectService.getUserProjects().subscribe((projects: UserDetail): void => { const projectList: {}[] = projects.project_role_mappings; this.projectList = projectList.filter( - (thing: ProjectRoleMappings, i: number, arr: []) => arr - .findIndex((t: ProjectRoleMappings) => t.project_name === thing.project_name) === i + (thing: ProjectRoleMappings, i: number, arr: []): boolean => arr + .findIndex((t: ProjectRoleMappings): boolean => t.project_name === thing.project_name) === i ); - }, (error: Error) => { + }, (error: Error): void => { // TODO: Handle failure }); } @@ -203,14 +231,14 @@ export class DashboardComponent implements OnInit { /** Fetching all the Project in dashboard @public */ public getAllProjects(): void { this.isProjectsLoadingResults = true; - this.restService.getResource(environment.PROJECTS_URL).subscribe((projectsData: ProjectDetails[]) => { + this.restService.getResource(environment.PROJECTS_URL).subscribe((projectsData: ProjectDetails[]): void => { this.allProjectList = []; - projectsData.forEach((projectData: ProjectDetails) => { + projectsData.forEach((projectData: ProjectDetails): void => { const projectDataObj: ProjectData = this.generateProjectData(projectData); this.allProjectList.push(projectDataObj); }); this.isProjectsLoadingResults = false; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); this.isProjectsLoadingResults = false; }); @@ -230,9 +258,9 @@ export class DashboardComponent implements OnInit { /** Function to check admin privilege @public */ public checkAdminPrivilege(): void { if (!this.isAdmin) { - this.projectService.getCurrentProjectDetails().subscribe((projectDetails: {}) => { + this.projectService.getCurrentProjectDetails().subscribe((projectDetails: {}): void => { this.currentProjectDetails = projectDetails; - }, (error: Error) => { + }, (error: Error): void => { // TODO: Handle failure }); } @@ -241,9 +269,9 @@ export class DashboardComponent implements OnInit { /** Get VNFD Package details @public */ public getVnfdPackageCount(): void { this.vnfdPackageCountSub = this.restService.getResource(environment.VNFPACKAGESCONTENT_URL) - .subscribe((vnfdPackageData: VNFDDetails[]) => { + .subscribe((vnfdPackageData: []): void => { this.vnfdPackageCount = vnfdPackageData.length; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } @@ -251,9 +279,9 @@ export class DashboardComponent implements OnInit { /** Get NSD Package details @public */ public getNsdPackageCount(): void { this.nsdPackageCountSub = this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL) - .subscribe((nsdPackageData: NSDDetails[]) => { + .subscribe((nsdPackageData: NSDDetails[]): void => { this.nsdPackageCount = nsdPackageData.length; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } @@ -262,12 +290,12 @@ export class DashboardComponent implements OnInit { public getNsInstanceCount(): void { this.isCanvasLoadingResults = true; this.nsInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL) - .subscribe((nsInstancesData: NSInstanceDetails[]) => { + .subscribe((nsInstancesData: NSInstanceDetails[]): void => { this.nsInstancesDataArr = nsInstancesData; this.nsInstanceCount = nsInstancesData.length; this.nsInstanceChart(); this.isCanvasLoadingResults = false; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); this.isCanvasLoadingResults = false; }); @@ -275,21 +303,21 @@ export class DashboardComponent implements OnInit { /** Get NS Instance chart details @public */ public nsInstanceChart(): void { - this.nsInstancesDataArr.forEach((nsdInstanceData: NSDDetails) => { + this.nsInstancesDataArr.forEach((nsdInstanceData: NSDDetails): void => { const operationalStatus: string = nsdInstanceData['operational-status']; const configStatus: string = nsdInstanceData['config-status']; if (operationalStatus === 'failed' || configStatus === 'failed') { this.nsFailedInstances.push(nsdInstanceData); } else if (operationalStatus === 'running' && configStatus === 'configured') { - this.nsRunningInstance.push({ name: nsdInstanceData.name, id: nsdInstanceData.id }); + this.nsRunningInstance.push(nsdInstanceData.name); this.backgroundColor.push(this.sharedService.generateColor()); this.createdTimes.push(((nsdInstanceData._admin.created).toString()).slice(0, this.sliceLimit)); } }); const now: Date = new Date(); const currentTime: number = Number((now.getTime().toString().slice(0, this.sliceLimit))); - this.createdTimes.forEach((createdTime: string) => { - this.noOfHours.push((Math.round((currentTime - Number(createdTime)) / this.hourConverter))); + this.createdTimes.forEach((createdTime: string): void => { + this.noOfHours.push(Math.floor(((currentTime - Number(createdTime)) / this.hourConverter) * (this.converter)) / this.converter); }); this.drawNsChart(); } @@ -297,7 +325,7 @@ 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: [{ @@ -305,53 +333,48 @@ export class DashboardComponent implements OnInit { label: this.translateService.instant('NOOFHOURS'), borderColor: this.backgroundColor, fill: false, - backgroundColor: this.backgroundColor + backgroundColor: this.backgroundColor, + hoverBackgroundColor: this.backgroundColor }] }, options: { - hover: { - onHover(evt: Event, item: {}): void { - const el: HTMLElement = document.getElementById('canvas'); - el.style.cursor = item[0] ? 'pointer' : 'default'; + layout: { + padding: { + top: 25 } }, - onClick(evt: Event, item: {}): void { - if (item[0] !== undefined) { - const location: string = '/instances/ns/' + item[0]._chart.data.labels[item[0]._index].id; - window.open(location); + 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 = item[0] ? 'pointer' : 'default'; + }, + plugins: { + legend: { display: false }, + datalabels: { + anchor: 'end', + align: 'top', + font: { + weight: 'bold' + } } }, - legend: { display: false }, scales: { - xAxes: [{ + x: { display: true, - ticks: { - // tslint:disable-next-line: no-any - callback: (label: any, index: number, labels: string): string => { - const length: number = 20; - const ending: string = '...'; - if (label.name.length > length) { - return label.name.substring(0, length - ending.length) + ending; - } else { - return label.name; - } - } - }, - scaleLabel: { + title: { display: true, - labelString: this.translateService.instant('INSTANCES') + text: this.translateService.instant('NSINSTANCES') } - }], - yAxes: [{ - ticks: { - beginAtZero: true - }, + }, + y: { + beginAtZero: true, display: true, - scaleLabel: { + title: { display: true, - labelString: this.translateService.instant('NOOFHOURS') + text: this.translateService.instant('NOOFHOURS') } - }] + } } } }); @@ -359,10 +382,10 @@ export class DashboardComponent implements OnInit { /** Get VNFD instance details @public */ public getVnfInstanceCount(): void { - this.vnfInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL) - .subscribe((vnfInstanceData: VNFInstanceDetails[]) => { + this.vnfInstanceCountSub = this.restService.getResource(environment.VNFINSTANCES_URL) + .subscribe((vnfInstanceData: VNFInstanceDetails[]): void => { this.vnfInstanceCount = vnfInstanceData.length; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } @@ -370,9 +393,10 @@ export class DashboardComponent implements OnInit { /** Get VIM account details @public */ public getVimAccountCount(): void { this.vimAccountCountSub = this.restService.getResource(environment.VIMACCOUNTS_URL) - .subscribe((vimAccountData: VimAccountDetails[]) => { + .subscribe((vimAccountData: VimAccountDetails[]): void => { this.vimAccountCount = vimAccountData.length; - }, (error: ERRORDATA) => { + this.vimData = vimAccountData; + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } @@ -380,13 +404,31 @@ export class DashboardComponent implements OnInit { /** Get SDN Controller Count @public */ public getSDNControllerCount(): void { this.sdnControllerCountSub = this.restService.getResource(environment.SDNCONTROLLER_URL) - .subscribe((sdnControllerData: SDNControllerModel[]) => { + .subscribe((sdnControllerData: SDNControllerModel[]): void => { this.sdnControllerCount = sdnControllerData.length; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } + /** 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 */