Fix Bug to the Chart Js for displaying multiple
[osm/NG-UI.git] / src / app / dashboard / DashboardComponent.ts
index 4ab802f..56b79a4 100644 (file)
@@ -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,30 +302,22 @@ 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],
+                    borderColor: this.backgroundColor,
                     fill: false,
-                    backgroundColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan,
-                    this.chartColorBlue, this.chartColorYellow]
+                    backgroundColor: this.backgroundColor
                 }]
             },
             options: {
+                hover: {
+                    onHover(evt: Event, item: {}): void {
+                        const el: HTMLElement = document.getElementById('canvas');
+                        el.style.cursor = item[0] ? 'pointer' : 'default';
+                    }
+                },
                 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')
@@ -361,9 +341,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 +351,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 +361,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');
             });
     }