src/app/dashboard/DashboardComponent.ts

   1 /*
   2  Copyright 2020 TATA ELXSI
   3
   4  Licensed under the Apache License, Version 2.0 (the 'License');
   5  you may not use this file except in compliance with the License.
   6  You may obtain a copy of the License at
   7
   8     http://www.apache.org/licenses/LICENSE-2.0
   9
  10  Unless required by applicable law or agreed to in writing, software
  11  distributed under the License is distributed on an "AS IS" BASIS,
  12  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  See the License for the specific language governing permissions and
  14  limitations under the License.
  15
  16  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
  17  */
  18 /**
  19  * @file Dashboard Component
  20  */
  21 import { Component, Injector, OnInit } from '@angular/core';
  22 import { TranslateService } from '@ngx-translate/core';
  23 import { AuthenticationService } from 'AuthenticationService';
  24 import { Chart } from 'chart.js';
  25 import { ERRORDATA } from 'CommonModel';
  26 import { environment } from 'environment';
  27 import { NSDDetails } from 'NSDModel';
  28 import { NSInstanceDetails } from 'NSInstanceModel';
  29 import { ProjectData, ProjectDetails } from 'ProjectModel';
  30 import { ProjectService } from 'ProjectService';
  31 import { RestService } from 'RestService';
  32 import { Observable, Subscription } from 'rxjs';
  33 import { SDNControllerModel } from 'SDNControllerModel';
  34 import { SharedService } from 'SharedService';
  35 import { ProjectRoleMappings, UserDetail } from 'UserModel';
  36 import { VimAccountDetails } from 'VimAccountModel';
  37 import { VNFDDetails } from 'VNFDModel';
  38 import { VNFInstanceDetails } from 'VNFInstanceModel';
  39
  40 /**
  41  * Creating component
  42  * @Component takes DashboardComponent.html as template url
  43  */
  44 @Component({
  45     styleUrls: ['./DashboardComponent.scss'],
  46     templateUrl: './DashboardComponent.html'
  47 })
  48
  49 /**
  50  * This file created during the angular project creation
  51  */
  52
  53 /** Exporting a class @exports DashboardComponent */
  54 export class DashboardComponent implements OnInit {
  55     /** Invoke service injectors @public */
  56     public injector: Injector;
  57
  58     /** handle translate @public */
  59     public translateService: TranslateService;
  60
  61     /** Observable holds logined value  @public */
  62     public username$: Observable<string>;
  63
  64     /** Variables holds admin is logged or not @public */
  65     public isAdmin: boolean;
  66
  67     /** List of NS failed Instances @public */
  68     public nsFailedInstances: {}[] = [];
  69
  70     /** Setting up count for vnfdPackages @public */
  71     public vnfdPackageCount: number;
  72
  73     /** Setting up count for nsdPackage @public */
  74     public nsdPackageCount: number;
  75
  76     /** Setting up count for nsInstance @public */
  77     public nsInstanceCount: number;
  78
  79     /** Setting up count for vnfInstance @public */
  80     public vnfInstanceCount: number;
  81
  82     /** Setting up count for vimAccount @public */
  83     public vimAccountCount: number;
  84
  85     /** Setting up count for sdnController @public */
  86     public sdnControllerCount: number;
  87
  88     /** Variables holds current project details @public */
  89     public currentProjectDetails: {};
  90
  91     /** Array holds all the projects @public */
  92     public projectList: {}[] = [];
  93
  94     /** Array holds all the projects @public */
  95     public allProjectList: {}[] = [];
  96
  97     /** Variables holds the selected project @public */
  98     public selectedProject: Observable<string>;
  99
 100     /** Check the Instances loading results @public */
 101     public isCanvasLoadingResults: boolean = true;
 102
 103     /** Check the Projects loading results @public */
 104     public isProjectsLoadingResults: boolean = true;
 105
 106     /** Give the message for the loading @public */
 107     public message: string = 'PLEASEWAIT';
 108
 109     /** List of NS Success Instances @private */
 110     public nsRunningInstance: string[] = [];
 111
 112     /** Utilizes rest service for any CRUD operations @private */
 113     private restService: RestService;
 114
 115     /** Utilizes auth service for any auth operations @private */
 116     private authService: AuthenticationService;
 117
 118     /** Used to subscribe vnfdPackage @private */
 119     private vnfdPackageCountSub: Subscription;
 120
 121     /** Used to subscribe nsdPackage @private */
 122     private nsdPackageCountSub: Subscription;
 123
 124     /** Used to subscribe nsInstance @private */
 125     private nsInstanceCountSub: Subscription;
 126
 127     /** Used to subscribe vnfInstance @private */
 128     private vnfInstanceCountSub: Subscription;
 129
 130     /** Used to subscribe vimAccount @private */
 131     private vimAccountCountSub: Subscription;
 132
 133     /** Used to subscribe sdnController @private */
 134     private sdnControllerCountSub: Subscription;
 135
 136     /** No of Hours of NS Success Instances @private */
 137     private noOfHours: number[] = [];
 138
 139     /** collects charts objects @private */
 140     private charts: object = [];
 141
 142     /** Contains all methods related to projects @private */
 143     private projectService: ProjectService;
 144
 145     /** Contains all methods related to shared @private */
 146     private sharedService: SharedService;
 147
 148     /** Contains NS Instance Details */
 149     private nsInstancesDataArr: {}[];
 150
 151     /** Container created time array @private */
 152     private createdTimes: string[] = [];
 153
 154     /** Contains slice limit const @private */
 155     private sliceLimit: number = 10;
 156
 157     /** Contians hour converter @private */
 158     private hourConverter: number = 3600;
 159
 160     /** Contians color code for chart @private */
 161     private chartColorPink: string = '#e4397c';
 162
 163     /** Contians color code for chart @private */
 164     private chartColorPurple: string = '#605ca8';
 165
 166     /** Contians color code for chart @private */
 167     private chartColorCyan: string = '#00c0ef';
 168
 169     /** Contians color code for chart @private */
 170     private chartColorBlue: string = '#054C8C';
 171
 172     /** Contians color code for chart @private */
 173     private chartColorYellow: string = '#ffce56';
 174
 175     constructor(injector: Injector) {
 176         this.injector = injector;
 177         this.restService = this.injector.get(RestService);
 178         this.authService = this.injector.get(AuthenticationService);
 179         this.projectService = this.injector.get(ProjectService);
 180         this.sharedService = this.injector.get(SharedService);
 181         this.translateService = this.injector.get(TranslateService);
 182     }
 183
 184     /**
 185      * Lifecyle Hooks the trigger before component is instantiate
 186      */
 187     public ngOnInit(): void {
 188         this.username$ = this.authService.username;
 189         this.isAdmin = (localStorage.getItem('isAdmin') === 'true') ? true : false;
 190         this.selectedProject = this.authService.ProjectName;
 191         this.checkAdminPrivilege();
 192         this.getUserAccessedProjects();
 193         this.getAllProjects();
 194         this.getVnfdPackageCount();
 195         this.getNsdPackageCount();
 196         this.getNsInstanceCount();
 197         this.getVnfInstanceCount();
 198         this.getVimAccountCount();
 199         this.getSDNControllerCount();
 200     }
 201
 202     /** Get all the projects @public */
 203     public getUserAccessedProjects(): void {
 204         this.projectService.getUserProjects().subscribe((projects: UserDetail) => {
 205             const projectList: {}[] = projects.project_role_mappings;
 206             this.projectList = projectList.filter(
 207                 (thing: ProjectRoleMappings, i: number, arr: []) => arr
 208                     .findIndex((t: ProjectRoleMappings) => t.project_name === thing.project_name) === i
 209             );
 210         }, (error: Error) => {
 211             // TODO: Handle failure
 212         });
 213     }
 214
 215     /** Fetching all the Project in dashboard @public */
 216     public getAllProjects(): void {
 217         this.isProjectsLoadingResults = true;
 218         this.restService.getResource(environment.PROJECTS_URL).subscribe((projectsData: ProjectDetails[]) => {
 219             this.allProjectList = [];
 220             projectsData.forEach((projectData: ProjectDetails) => {
 221                 const projectDataObj: ProjectData = this.generateProjectData(projectData);
 222                 this.allProjectList.push(projectDataObj);
 223             });
 224             this.isProjectsLoadingResults = false;
 225         }, (error: ERRORDATA) => {
 226             this.restService.handleError(error, 'get');
 227             this.isProjectsLoadingResults = false;
 228         });
 229     }
 230
 231     /** Generate Projects object from loop and return for the datasource @public */
 232     public generateProjectData(projectData: ProjectDetails): ProjectData {
 233         return {
 234             projectName: projectData.name,
 235             modificationDate: this.sharedService.convertEpochTime(projectData._admin.modified),
 236             creationDate: this.sharedService.convertEpochTime(projectData._admin.created),
 237             id: projectData._id,
 238             project: projectData._id
 239         };
 240     }
 241
 242     /** Function to check admin privilege @public */
 243     public checkAdminPrivilege(): void {
 244         if (!this.isAdmin) {
 245             this.projectService.getCurrentProjectDetails().subscribe((projectDetails: {}) => {
 246                 this.currentProjectDetails = projectDetails;
 247             }, (error: Error) => {
 248                 // TODO: Handle failure
 249             });
 250         }
 251     }
 252
 253     /** Get VNFD Package details @public */
 254     public getVnfdPackageCount(): void {
 255         this.vnfdPackageCountSub = this.restService.getResource(environment.VNFPACKAGESCONTENT_URL)
 256             .subscribe((vnfdPackageData: VNFDDetails[]) => {
 257             this.vnfdPackageCount = vnfdPackageData.length;
 258         }, (error: ERRORDATA) => {
 259             this.restService.handleError(error, 'get');
 260         });
 261     }
 262
 263     /** Get NSD Package details @public */
 264     public getNsdPackageCount(): void {
 265         this.nsdPackageCountSub = this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL)
 266             .subscribe((nsdPackageData: NSDDetails[]) => {
 267             this.nsdPackageCount = nsdPackageData.length;
 268         }, (error: ERRORDATA) => {
 269             this.restService.handleError(error, 'get');
 270         });
 271     }
 272
 273     /** Get NS Instance details @public */
 274     public getNsInstanceCount(): void {
 275         this.isCanvasLoadingResults = true;
 276         this.nsInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL)
 277             .subscribe((nsInstancesData: NSInstanceDetails[]) => {
 278                 this.nsInstancesDataArr = nsInstancesData;
 279                 this.nsInstanceCount = nsInstancesData.length;
 280                 this.nsInstanceChart();
 281                 this.isCanvasLoadingResults = false;
 282             }, (error: ERRORDATA) => {
 283                 this.restService.handleError(error, 'get');
 284                 this.isCanvasLoadingResults = false;
 285             });
 286     }
 287
 288     /** Get NS Instance chart details @public */
 289     public nsInstanceChart(): void {
 290         this.nsInstancesDataArr.forEach((nsdInstanceData: NSDDetails) => {
 291             const operationalStatus: string = nsdInstanceData['operational-status'];
 292             const configStatus: string = nsdInstanceData['config-status'];
 293             if (operationalStatus === 'failed' || configStatus === 'failed') {
 294                 this.nsFailedInstances.push(nsdInstanceData);
 295             } else if (operationalStatus === 'running' && configStatus === 'configured') {
 296                 this.nsRunningInstance.push(nsdInstanceData.name);
 297                 this.createdTimes.push(((nsdInstanceData._admin.created).toString()).slice(0, this.sliceLimit));
 298             }
 299         });
 300         const now: Date = new Date();
 301         const currentTime: number = Number((now.getTime().toString().slice(0, this.sliceLimit)));
 302         this.createdTimes.forEach((createdTime: string) => {
 303             this.noOfHours.push((Math.round((currentTime - Number(createdTime)) / this.hourConverter)));
 304         });
 305         this.drawNsChart();
 306     }
 307
 308     /** Prepare and sketch NS instance chart */
 309     public drawNsChart(): void {
 310         this.charts = new Chart('canvas', {
 311             type: 'bar',
 312             data: {
 313                 labels: this.nsRunningInstance,
 314                 datasets: [{
 315                     data: this.noOfHours,
 316                     label: this.translateService.instant('NOOFHOURS'),
 317                     borderColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan,
 318                     this.chartColorBlue, this.chartColorYellow],
 319                     fill: false,
 320                     backgroundColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan,
 321                     this.chartColorBlue, this.chartColorYellow]
 322                 }]
 323             },
 324             options: {
 325                 legend: { display: false },
 326                 scales: {
 327                     xAxes: [{
 328                         display: true,
 329                         ticks: {
 330                             // tslint:disable-next-line: no-any
 331                             callback: (label: any, index: number, labels: string): string => {
 332                                 const length: number = 20;
 333                                 const ending: string = '...';
 334                                 if (label.length > length) {
 335                                     return label.substring(0, length - ending.length) + ending;
 336                                 } else {
 337                                     return label;
 338                                 }
 339                             }
 340                         },
 341                         scaleLabel: {
 342                             display: true,
 343                             labelString: this.translateService.instant('INSTANCES')
 344                         }
 345                     }],
 346                     yAxes: [{
 347                         ticks: {
 348                             beginAtZero: true
 349                         },
 350                         display: true,
 351                         scaleLabel: {
 352                             display: true,
 353                             labelString: this.translateService.instant('NOOFHOURS')
 354                         }
 355                     }]
 356                 }
 357             }
 358         });
 359     }
 360
 361     /** Get VNFD instance details @public */
 362     public getVnfInstanceCount(): void {
 363         this.vnfInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL)
 364             .subscribe((vnfInstanceData: VNFInstanceDetails[]) => {
 365                 this.vnfInstanceCount = vnfInstanceData.length;
 366             }, (error: ERRORDATA) => {
 367                 this.restService.handleError(error, 'get');
 368             });
 369     }
 370
 371     /** Get VIM account details @public */
 372     public getVimAccountCount(): void {
 373         this.vimAccountCountSub = this.restService.getResource(environment.VIMACCOUNTS_URL)
 374             .subscribe((vimAccountData: VimAccountDetails[]) => {
 375                 this.vimAccountCount = vimAccountData.length;
 376             }, (error: ERRORDATA) => {
 377                 this.restService.handleError(error, 'get');
 378             });
 379     }
 380
 381     /** Get SDN Controller Count  @public */
 382     public getSDNControllerCount(): void {
 383         this.sdnControllerCountSub = this.restService.getResource(environment.SDNCONTROLLER_URL)
 384             .subscribe((sdnControllerData: SDNControllerModel[]) => {
 385                 this.sdnControllerCount = sdnControllerData.length;
 386             }, (error: ERRORDATA) => {
 387                 this.restService.handleError(error, 'get');
 388             });
 389     }
 390
 391     /**
 392      * Lifecyle Hooks the trigger before component is deleted
 393      */
 394     public ngOnDestroy(): void {
 395         this.vnfdPackageCountSub.unsubscribe();
 396         this.nsdPackageCountSub.unsubscribe();
 397         this.nsInstanceCountSub.unsubscribe();
 398         this.vnfInstanceCountSub.unsubscribe();
 399         this.vimAccountCountSub.unsubscribe();
 400         this.sdnControllerCountSub.unsubscribe();
 401     }
 402 }