X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;ds=sidebyside;f=src%2Fapp%2Fdashboard%2FDashboardComponent.ts;h=4660732f80ffefd48309e1e2a69f98ba9c2588bc;hb=cedffeca6ea3cabc282b753c62a849ca273dfb42;hp=4ab802ff6675a312c4b38ce4b2fbac172508cb48;hpb=3b4814aa2d3dec621dadb52f058ba95a3dc3a86a;p=osm%2FNG-UI.git diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts index 4ab802f..4660732 100644 --- a/src/app/dashboard/DashboardComponent.ts +++ b/src/app/dashboard/DashboardComponent.ts @@ -21,7 +21,7 @@ import { Component, Injector, OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { AuthenticationService } from 'AuthenticationService'; -import { Chart } from 'chart.js'; +import { ActiveElement, Chart, ChartEvent } from 'chart.js'; import { ERRORDATA } from 'CommonModel'; import { environment } from 'environment'; import { NSDDetails } from 'NSDModel'; @@ -34,7 +34,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'; /** @@ -106,9 +105,12 @@ export class DashboardComponent implements OnInit { /** Give the message for the loading @public */ public message: string = 'PLEASEWAIT'; - /** List of NS Success Instances @private */ + /** List of NS Success Instances @public */ public nsRunningInstance: string[] = []; + /** List of color for Instances @private */ + private backgroundColor: string[] = []; + /** Utilizes rest service for any CRUD operations @private */ private restService: RestService; @@ -157,21 +159,6 @@ export class DashboardComponent implements OnInit { /** Contians hour converter @private */ private hourConverter: number = 3600; - /** Contians color code for chart @private */ - private chartColorPink: string = '#e4397c'; - - /** Contians color code for chart @private */ - private chartColorPurple: string = '#605ca8'; - - /** Contians color code for chart @private */ - private chartColorCyan: string = '#00c0ef'; - - /** Contians color code for chart @private */ - private chartColorBlue: string = '#054C8C'; - - /** Contians color code for chart @private */ - private chartColorYellow: string = '#ffce56'; - constructor(injector: Injector) { this.injector = injector; this.restService = this.injector.get(RestService); @@ -201,13 +188,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 }); } @@ -215,14 +202,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; }); @@ -242,9 +229,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 }); } @@ -253,33 +240,33 @@ export class DashboardComponent implements OnInit { /** Get VNFD Package details @public */ public getVnfdPackageCount(): void { this.vnfdPackageCountSub = this.restService.getResource(environment.VNFPACKAGESCONTENT_URL) - .subscribe((vnfdPackageData: VNFDDetails[]) => { - this.vnfdPackageCount = vnfdPackageData.length; - }, (error: ERRORDATA) => { - this.restService.handleError(error, 'get'); - }); + .subscribe((vnfdPackageData: []): void => { + this.vnfdPackageCount = vnfdPackageData.length; + }, (error: ERRORDATA): void => { + this.restService.handleError(error, 'get'); + }); } /** Get NSD Package details @public */ public getNsdPackageCount(): void { this.nsdPackageCountSub = this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL) - .subscribe((nsdPackageData: NSDDetails[]) => { - this.nsdPackageCount = nsdPackageData.length; - }, (error: ERRORDATA) => { - this.restService.handleError(error, 'get'); - }); + .subscribe((nsdPackageData: NSDDetails[]): void => { + this.nsdPackageCount = nsdPackageData.length; + }, (error: ERRORDATA): void => { + this.restService.handleError(error, 'get'); + }); } /** Get NS Instance details @public */ 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; }); @@ -287,19 +274,20 @@ 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(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.createdTimes.forEach((createdTime: string): void => { this.noOfHours.push((Math.round((currentTime - Number(createdTime)) / this.hourConverter))); }); this.drawNsChart(); @@ -314,45 +302,30 @@ export class DashboardComponent implements OnInit { datasets: [{ data: this.noOfHours, label: this.translateService.instant('NOOFHOURS'), - borderColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan, - this.chartColorBlue, this.chartColorYellow], - fill: false, - backgroundColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan, - this.chartColorBlue, this.chartColorYellow] + borderColor: this.backgroundColor, + backgroundColor: this.backgroundColor }] }, options: { - legend: { display: false }, + onHover: (evt: ChartEvent, elements):void => { + const el: HTMLElement = document.getElementById('canvas'); + el.style.cursor = elements[0] ? 'pointer' : 'default'; + }, + plugins: { + legend: { display: false }, + }, scales: { - xAxes: [{ + x: { display: true, + labels: [this.translateService.instant('INSTANCES')], + }, + y: { ticks: { - // tslint:disable-next-line: no-any - callback: (label: any, index: number, labels: string): string => { - const length: number = 20; - const ending: string = '...'; - if (label.length > length) { - return label.substring(0, length - ending.length) + ending; - } else { - return label; - } - } - }, - scaleLabel: { - display: true, - labelString: this.translateService.instant('INSTANCES') - } - }], - yAxes: [{ - ticks: { - beginAtZero: true + labelOffset: 0, }, display: true, - scaleLabel: { - display: true, - labelString: this.translateService.instant('NOOFHOURS') - } - }] + labels: [this.translateService.instant('NOOFHOURS')] + }, } } }); @@ -361,9 +334,9 @@ export class DashboardComponent implements OnInit { /** Get VNFD instance details @public */ public getVnfInstanceCount(): void { this.vnfInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL) - .subscribe((vnfInstanceData: VNFInstanceDetails[]) => { + .subscribe((vnfInstanceData: VNFInstanceDetails[]): void => { this.vnfInstanceCount = vnfInstanceData.length; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } @@ -371,9 +344,9 @@ 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) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } @@ -381,9 +354,9 @@ 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'); }); }