Fix Bug 2121: NG-UI uses unmaintained Chokidar version

[osm/NG-UI.git] / src / app / dashboard / DashboardComponent.ts

diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts
index 2feef7c..23e928f 100644 (file)
--- a/src/app/dashboard/DashboardComponent.ts
+++ b/src/app/dashboard/DashboardComponent.ts
@@ -18,12 +18,14 @@
 /**
  * @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 'chartjs-plugin-labels';
+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';
@@ -35,7 +37,6 @@ import { Observable, Subscription } from 'rxjs';
 import { SDNControllerModel } from 'SDNControllerModel';
 import { SharedService } from 'SharedService';
 import { ProjectRoleMappings, UserDetail } from 'UserModel';
-import { isNullOrUndefined } from 'util';
 import { VimAccountDetails } from 'VimAccountModel';
 import { VNFInstanceDetails } from 'VNFInstanceModel';
 
@@ -57,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 */
@@ -123,6 +124,9 @@ export class DashboardComponent implements OnInit {
     /** 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[] = [];
 
@@ -169,11 +173,17 @@ 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;
 
@@ -307,7 +317,7 @@ export class DashboardComponent implements OnInit {
         const now: Date = new Date();
         const currentTime: number = Number((now.getTime().toString().slice(0, this.sliceLimit)));
         this.createdTimes.forEach((createdTime: string): void => {
-            this.noOfHours.push((Math.round((currentTime - Number(createdTime)) / this.hourConverter)));
+            this.noOfHours.push(Math.floor(((currentTime - Number(createdTime)) / this.hourConverter) * (this.converter)) / this.converter);
         });
         this.drawNsChart();
     }
@@ -315,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: [{
@@ -323,41 +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
                     }
                 },
+                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: {
-                    labels: {
-                        // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
-                        render: 'value'
+                    legend: { display: false },
+                    datalabels: {
+                        anchor: 'end',
+                        align: 'top',
+                        font: {
+                            weight: 'bold'
+                        }
                     }
                 },
-                legend: { display: false },
                 scales: {
-                    xAxes: [{
+                    x: {
                         display: true,
-                        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')
                         }
-                    }]
+                    }
                 }
             }
         });
@@ -365,7 +382,7 @@ export class DashboardComponent implements OnInit {
 
     /** Get VNFD instance details @public */
     public getVnfInstanceCount(): void {
-        this.vnfInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL)
+        this.vnfInstanceCountSub = this.restService.getResource(environment.VNFINSTANCES_URL)
             .subscribe((vnfInstanceData: VNFInstanceDetails[]): void => {
                 this.vnfInstanceCount = vnfInstanceData.length;
             }, (error: ERRORDATA): void => {
@@ -398,7 +415,9 @@ export class DashboardComponent implements OnInit {
     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 */