X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=src%2Fapp%2Fdashboard%2FDashboardComponent.ts;fp=src%2Fapp%2Fdashboard%2FDashboardComponent.ts;h=4ab802ff6675a312c4b38ce4b2fbac172508cb48;hb=3b4814aa2d3dec621dadb52f058ba95a3dc3a86a;hp=0000000000000000000000000000000000000000;hpb=1434673f8f8dc53bce5c350f04ac8df67b2ff84f;p=osm%2FNG-UI.git diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts new file mode 100644 index 0000000..4ab802f --- /dev/null +++ b/src/app/dashboard/DashboardComponent.ts @@ -0,0 +1,402 @@ +/* + Copyright 2020 TATA ELXSI + + Licensed under the Apache License, Version 2.0 (the 'License'); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + + Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in) + */ +/** + * @file Dashboard Component + */ +import { Component, Injector, OnInit } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; +import { AuthenticationService } from 'AuthenticationService'; +import { Chart } from 'chart.js'; +import { ERRORDATA } from 'CommonModel'; +import { environment } from 'environment'; +import { NSDDetails } from 'NSDModel'; +import { NSInstanceDetails } from 'NSInstanceModel'; +import { ProjectData, ProjectDetails } from 'ProjectModel'; +import { ProjectService } from 'ProjectService'; +import { RestService } from 'RestService'; +import { Observable, Subscription } from 'rxjs'; +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'; + +/** + * Creating component + * @Component takes DashboardComponent.html as template url + */ +@Component({ + styleUrls: ['./DashboardComponent.scss'], + templateUrl: './DashboardComponent.html' +}) + +/** + * This file created during the angular project creation + */ + +/** Exporting a class @exports DashboardComponent */ +export class DashboardComponent implements OnInit { + /** Invoke service injectors @public */ + public injector: Injector; + + /** handle translate @public */ + public translateService: TranslateService; + + /** Observable holds logined value @public */ + public username$: Observable; + + /** Variables holds admin is logged or not @public */ + public isAdmin: boolean; + + /** List of NS failed Instances @public */ + public nsFailedInstances: {}[] = []; + + /** Setting up count for vnfdPackages @public */ + public vnfdPackageCount: number; + + /** Setting up count for nsdPackage @public */ + public nsdPackageCount: number; + + /** Setting up count for nsInstance @public */ + public nsInstanceCount: number; + + /** Setting up count for vnfInstance @public */ + public vnfInstanceCount: number; + + /** Setting up count for vimAccount @public */ + public vimAccountCount: number; + + /** Setting up count for sdnController @public */ + public sdnControllerCount: number; + + /** Variables holds current project details @public */ + public currentProjectDetails: {}; + + /** Array holds all the projects @public */ + public projectList: {}[] = []; + + /** Array holds all the projects @public */ + public allProjectList: {}[] = []; + + /** Variables holds the selected project @public */ + public selectedProject: Observable; + + /** Check the Instances loading results @public */ + public isCanvasLoadingResults: boolean = true; + + /** Check the Projects loading results @public */ + public isProjectsLoadingResults: boolean = true; + + /** Give the message for the loading @public */ + public message: string = 'PLEASEWAIT'; + + /** List of NS Success Instances @private */ + public nsRunningInstance: string[] = []; + + /** Utilizes rest service for any CRUD operations @private */ + private restService: RestService; + + /** Utilizes auth service for any auth operations @private */ + private authService: AuthenticationService; + + /** Used to subscribe vnfdPackage @private */ + private vnfdPackageCountSub: Subscription; + + /** Used to subscribe nsdPackage @private */ + private nsdPackageCountSub: Subscription; + + /** Used to subscribe nsInstance @private */ + private nsInstanceCountSub: Subscription; + + /** Used to subscribe vnfInstance @private */ + private vnfInstanceCountSub: Subscription; + + /** Used to subscribe vimAccount @private */ + private vimAccountCountSub: Subscription; + + /** Used to subscribe sdnController @private */ + private sdnControllerCountSub: Subscription; + + /** No of Hours of NS Success Instances @private */ + private noOfHours: number[] = []; + + /** collects charts objects @private */ + private charts: object = []; + + /** Contains all methods related to projects @private */ + private projectService: ProjectService; + + /** Contains all methods related to shared @private */ + private sharedService: SharedService; + + /** Contains NS Instance Details */ + private nsInstancesDataArr: {}[]; + + /** Container created time array @private */ + private createdTimes: string[] = []; + + /** Contains slice limit const @private */ + private sliceLimit: number = 10; + + /** 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); + this.authService = this.injector.get(AuthenticationService); + this.projectService = this.injector.get(ProjectService); + this.sharedService = this.injector.get(SharedService); + this.translateService = this.injector.get(TranslateService); + } + + /** + * Lifecyle Hooks the trigger before component is instantiate + */ + public ngOnInit(): void { + this.username$ = this.authService.username; + this.isAdmin = (localStorage.getItem('isAdmin') === 'true') ? true : false; + this.selectedProject = this.authService.ProjectName; + this.checkAdminPrivilege(); + this.getUserAccessedProjects(); + this.getAllProjects(); + this.getVnfdPackageCount(); + this.getNsdPackageCount(); + this.getNsInstanceCount(); + this.getVnfInstanceCount(); + this.getVimAccountCount(); + this.getSDNControllerCount(); + } + + /** Get all the projects @public */ + public getUserAccessedProjects(): void { + this.projectService.getUserProjects().subscribe((projects: UserDetail) => { + 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 + ); + }, (error: Error) => { + // TODO: Handle failure + }); + } + + /** Fetching all the Project in dashboard @public */ + public getAllProjects(): void { + this.isProjectsLoadingResults = true; + this.restService.getResource(environment.PROJECTS_URL).subscribe((projectsData: ProjectDetails[]) => { + this.allProjectList = []; + projectsData.forEach((projectData: ProjectDetails) => { + const projectDataObj: ProjectData = this.generateProjectData(projectData); + this.allProjectList.push(projectDataObj); + }); + this.isProjectsLoadingResults = false; + }, (error: ERRORDATA) => { + this.restService.handleError(error, 'get'); + this.isProjectsLoadingResults = false; + }); + } + + /** Generate Projects object from loop and return for the datasource @public */ + public generateProjectData(projectData: ProjectDetails): ProjectData { + return { + projectName: projectData.name, + modificationDate: this.sharedService.convertEpochTime(projectData._admin.modified), + creationDate: this.sharedService.convertEpochTime(projectData._admin.created), + id: projectData._id, + project: projectData._id + }; + } + + /** Function to check admin privilege @public */ + public checkAdminPrivilege(): void { + if (!this.isAdmin) { + this.projectService.getCurrentProjectDetails().subscribe((projectDetails: {}) => { + this.currentProjectDetails = projectDetails; + }, (error: Error) => { + // TODO: Handle failure + }); + } + } + + /** 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'); + }); + } + + /** 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'); + }); + } + + /** Get NS Instance details @public */ + public getNsInstanceCount(): void { + this.isCanvasLoadingResults = true; + this.nsInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL) + .subscribe((nsInstancesData: NSInstanceDetails[]) => { + this.nsInstancesDataArr = nsInstancesData; + this.nsInstanceCount = nsInstancesData.length; + this.nsInstanceChart(); + this.isCanvasLoadingResults = false; + }, (error: ERRORDATA) => { + this.restService.handleError(error, 'get'); + this.isCanvasLoadingResults = false; + }); + } + + /** Get NS Instance chart details @public */ + public nsInstanceChart(): void { + this.nsInstancesDataArr.forEach((nsdInstanceData: NSDDetails) => { + 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.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.drawNsChart(); + } + + /** Prepare and sketch NS instance chart */ + public drawNsChart(): void { + this.charts = new Chart('canvas', { + type: 'bar', + data: { + labels: this.nsRunningInstance, + 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] + }] + }, + options: { + legend: { display: false }, + scales: { + xAxes: [{ + 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.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 + }, + display: true, + scaleLabel: { + display: true, + labelString: this.translateService.instant('NOOFHOURS') + } + }] + } + } + }); + } + + /** Get VNFD instance details @public */ + public getVnfInstanceCount(): void { + this.vnfInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL) + .subscribe((vnfInstanceData: VNFInstanceDetails[]) => { + this.vnfInstanceCount = vnfInstanceData.length; + }, (error: ERRORDATA) => { + this.restService.handleError(error, 'get'); + }); + } + + /** Get VIM account details @public */ + public getVimAccountCount(): void { + this.vimAccountCountSub = this.restService.getResource(environment.VIMACCOUNTS_URL) + .subscribe((vimAccountData: VimAccountDetails[]) => { + this.vimAccountCount = vimAccountData.length; + }, (error: ERRORDATA) => { + this.restService.handleError(error, 'get'); + }); + } + + /** Get SDN Controller Count @public */ + public getSDNControllerCount(): void { + this.sdnControllerCountSub = this.restService.getResource(environment.SDNCONTROLLER_URL) + .subscribe((sdnControllerData: SDNControllerModel[]) => { + this.sdnControllerCount = sdnControllerData.length; + }, (error: ERRORDATA) => { + this.restService.handleError(error, 'get'); + }); + } + + /** + * Lifecyle Hooks the trigger before component is deleted + */ + public ngOnDestroy(): void { + this.vnfdPackageCountSub.unsubscribe(); + this.nsdPackageCountSub.unsubscribe(); + this.nsInstanceCountSub.unsubscribe(); + this.vnfInstanceCountSub.unsubscribe(); + this.vimAccountCountSub.unsubscribe(); + this.sdnControllerCountSub.unsubscribe(); + } +}