Fix Bug 2121: NG-UI uses unmaintained Chokidar version

	- Upgraded Angular from 11 to 14 version to remove chokidar
	  unmaintained version.
	- Changed linting tool tslint to eslint for angular 14 as tslint
	  is depreacted after angular 12
	- Resolved linting issues from code

Change-Id: I00e908ab651db0f080e0d18a9d1c9711f4e36b91
Signed-off-by: SANDHYA.JS <sandhya.j@tataelxsi.co.in>
diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
index 483fc0b..8c75d25 100644
--- a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
@@ -35,14 +35,14 @@
                 <div class="col-xs-{{12/showData.length}} col-sm-{{12/showData.length}} col-md-{{12/showData.length}} col-lg-{{12/showData.length}} col-xl-{{12/showData.length}}"
                     *ngFor="let list of showData.data;let i = index;">
                     <div class="chartData-card card text-center text-primary">
-                        <canvas class="my-2"
+                        <canvas class="my-2" *ngIf="list.values.total !== 0"
                             baseChart
-                            [data]="list.data"
+                            [datasets]="list.data"
                             [labels]="chartLabels"
-                            [chartType]="chartType"
+                            [type]="chartType"
                             [options]="chartOptions"
                             [legend]="chartLegend"
-                            [colors]="list.colorValues">
+                            [colors]="list.backgroundColor">
                         </canvas>
                          <div class="no-data" *ngIf="list.values.total === 0 || list.values.total === null">
                             <h4><strong>{{'PAGE.VIMDETAILS.NODATA' | translate}}</strong></h4>
diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
index 721e8ad..1ffd10c 100644
--- a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
@@ -15,8 +15,8 @@
 
  Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
 */
-@import "../../../assets/scss/mixins/mixin";
-@import "../../../assets/scss/variable";
+@import "../../../assets/scss/mixins/mixin.scss";
+@import "../../../assets/scss/variable.scss";
 .chartData-card {
     word-wrap: break-word;
     @include box-shadow(0px, 1px, 15px, 0px, rgba(69, 90, 100, 0.1));
@@ -29,7 +29,7 @@
     }
     .no-data {
         margin-bottom: 2.5rem;
-        margin-top: -1.5rem;
+        margin-top: 5rem;
     }
 }
 .switch {
diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.ts b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.ts
index 2d21ade..11d48d7 100644
--- a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.ts
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.ts
@@ -20,13 +20,13 @@
  */
 import { Component, Injector, Input, OnChanges } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { ChartOptions, ChartType } from 'chart.js';
-import 'chartjs-plugin-labels';
+import { ChartOptions, ChartType, Chart } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+Chart.register(ChartDataLabels);
 import { CONSTANTNUMBER } from 'CommonModel';
 import {
     CHARTRANGE,
     CHARTVALUES,
-    Color,
     CONFIGRESOURCESTITLE,
     RANGECOLOR,
     RESOURCESCHARTDATA,
@@ -50,13 +50,7 @@
     public translateService: TranslateService;
     /** Chart Options @public */
     public chartOptions: ChartOptions = {
-        responsive: true,
-        plugins: {
-            labels: {
-                // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
-                render: 'value'
-            }
-        }
+        responsive: true
     };
     /** Chart Lables @public */
     public chartLabels: String[] = [];
@@ -119,6 +113,7 @@
         const range: CHARTRANGE = { percentage: 100, nearlyFull: 75, full: 100 };
         getCompute.forEach((key: string): void => {
             let usedColor: string = RANGECOLOR.used;
+            // eslint-disable-next-line security/detect-object-injection
             const getValuesUsedFree: number[] = Object.values(compute[key]);
             const total: number = key === keyValidate ? getValuesUsedFree[0] / CONSTANTNUMBER.oneGB : getValuesUsedFree[0];
             const used: number = key === keyValidate ? getValuesUsedFree[1] / CONSTANTNUMBER.oneGB : getValuesUsedFree[1];
@@ -130,7 +125,7 @@
             if (usedPercentage === range.full) {
                 usedColor = RANGECOLOR.full;
             }
-            getData.push(this.generateChartData(key, { total, used, remaining }, [{ backgroundColor: [usedColor, '#b9bcc3'] }]));
+            getData.push(this.generateChartData(key, { total, used, remaining }, [usedColor, '#b9bcc3'] ));
         });
         return getData;
     }
@@ -140,12 +135,13 @@
      * @param setValues CHARTVALUES
      * @returns RESOURCESCHARTDATA
      */
-    public generateChartData(setTitle: string, setValues: CHARTVALUES, setColor: Color[]): RESOURCESCHARTDATA {
+    public generateChartData(setTitle: string, setValues: CHARTVALUES, setColor: string[]): RESOURCESCHARTDATA {
         return {
+            // eslint-disable-next-line security/detect-object-injection
             title: CONFIGRESOURCESTITLE[setTitle],
             values: this.generateChartDataValues(setValues.total, setValues.used, setValues.remaining),
-            data: [setValues.used, setValues.remaining],
-            colorValues: setColor
+            data: [{data: [setValues.used, setValues.remaining], backgroundColor: setColor,
+                 hoverBackgroundColor: setColor, hoverBorderColor: setColor}]
         };
     }
     /**
diff --git a/src/app/vim-accounts/Resources-Overview/SharedModule.ts b/src/app/vim-accounts/Resources-Overview/SharedModule.ts
index 1b365f3..5f4d726 100644
--- a/src/app/vim-accounts/Resources-Overview/SharedModule.ts
+++ b/src/app/vim-accounts/Resources-Overview/SharedModule.ts
@@ -21,16 +21,15 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { ChartsModule } from 'ng2-charts';
+import { NgChartsModule } from 'ng2-charts';
 import { ResourcesOverviewComponent } from 'ResourcesOverviewComponent';
 /**
  * Creating @NgModule component for Modules
  */
 @NgModule({
-    imports: [CommonModule, TranslateModule, ChartsModule],
+    imports: [CommonModule, TranslateModule, NgChartsModule],
     declarations: [ResourcesOverviewComponent],
-    exports: [ResourcesOverviewComponent],
-    entryComponents: [ResourcesOverviewComponent]
+    exports: [ResourcesOverviewComponent]
 })
 /** Exporting a class @exports SharedModule */
 export class SharedModule {
diff --git a/src/app/vim-accounts/VimAccountsComponent.ts b/src/app/vim-accounts/VimAccountsComponent.ts
index 9951cfc..b7e930c 100644
--- a/src/app/vim-accounts/VimAccountsComponent.ts
+++ b/src/app/vim-accounts/VimAccountsComponent.ts
@@ -50,7 +50,9 @@
     /** Return to list NS Package List */
     public redirectToList(getURL: string): void {
         if (getURL === '/vim') {
-            this.router.navigate(['/vim/details']).catch();
+            this.router.navigate(['/vim/details']).catch((): void => {
+                // Catch Navigation Error
+            });
         }
     }
 }
diff --git a/src/app/vim-accounts/VimAccountsModule.ts b/src/app/vim-accounts/VimAccountsModule.ts
index c646857..df86659 100644
--- a/src/app/vim-accounts/VimAccountsModule.ts
+++ b/src/app/vim-accounts/VimAccountsModule.ts
@@ -83,8 +83,7 @@
         HttpClientModule, NgSelectModule, Ng2SmartTableModule, TranslateModule, RouterModule.forChild(routes), NgbModule,
         PagePerRowModule, LoaderModule, PageReloadModule, CodemirrorModule],
     declarations: [VimAccountsComponent, InfoVimComponent, VimAccountDetailsComponent, NewVimaccountComponent],
-    providers: [DataService],
-    entryComponents: [InfoVimComponent]
+    providers: [DataService]
 })
 /** Exporting a class @exports VimAccountsModule */
 export class VimAccountsModule {
diff --git a/src/app/vim-accounts/info-vim/InfoVimComponent.ts b/src/app/vim-accounts/info-vim/InfoVimComponent.ts
index 952c1dc..b89a1b9 100644
--- a/src/app/vim-accounts/info-vim/InfoVimComponent.ts
+++ b/src/app/vim-accounts/info-vim/InfoVimComponent.ts
@@ -18,6 +18,7 @@
 /**
  * @file Info VIM Page
  */
+import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -26,7 +27,6 @@
 import { environment } from 'environment';
 import * as HttpStatus from 'http-status-codes';
 import { RestService } from 'RestService';
-import { isNullOrUndefined } from 'util';
 import { CONFIG, VimAccountDetails, VIMData } from 'VimAccountModel';
 
 /**
@@ -95,7 +95,6 @@
    * Lifecyle Hooks the trigger before component is instantiate
    */
   public ngOnInit(): void {
-    // tslint:disable-next-line:no-backbone-get-set-outside-model
     this.paramsID = this.activatedRoute.snapshot.paramMap.get('id');
     this.dataService.currentMessage.subscribe((data: VIMData) => {
       this.vimId = data.identifier;
@@ -117,29 +116,35 @@
       .subscribe((vimAccountsData: VimAccountDetails) => {
         this.showDetails(vimAccountsData);
         if (!isNullOrUndefined(vimAccountsData.config)) {
-        if (vimAccountsData.config.location !== undefined) {
-          const locationArr: string[] = vimAccountsData.config.location.split(',');
-          if (Array.isArray(locationArr)) {
-            vimAccountsData.config.location = locationArr[0];
+          if (vimAccountsData.config.location !== undefined) {
+            const locationArr: string[] = vimAccountsData.config.location.split(',');
+            if (Array.isArray(locationArr)) {
+              vimAccountsData.config.location = locationArr[0];
+            }
           }
+          Object.keys(vimAccountsData.config).forEach((key: string) => {
+            // eslint-disable-next-line security/detect-object-injection
+            if (Array.isArray(vimAccountsData.config[key]) || typeof vimAccountsData.config[key] === 'object') {
+              // eslint-disable-next-line security/detect-object-injection
+              vimAccountsData.config[key] = JSON.stringify(vimAccountsData.config[key]);
+            }
+            const keyArr: string[] = key.split('_');
+            if (keyArr.length > 1) {
+              // eslint-disable-next-line security/detect-object-injection
+              vimAccountsData.config[key.split('_').join(' ')] = vimAccountsData.config[key];
+              // eslint-disable-next-line @typescript-eslint/no-dynamic-delete, security/detect-object-injection
+              delete vimAccountsData.config[key];
+            }
+          });
+          this.configParams = vimAccountsData.config;
         }
-        Object.keys(vimAccountsData.config).forEach((key: string) => {
-          if (Array.isArray(vimAccountsData.config[key]) || typeof vimAccountsData.config[key] === 'object') {
-            vimAccountsData.config[key] = JSON.stringify(vimAccountsData.config[key]);
-          }
-          const keyArr: string[] = key.split('_');
-          if (keyArr.length > 1 ) {
-            vimAccountsData.config[key.split('_').join(' ')] = vimAccountsData.config[key];
-            delete vimAccountsData.config[key];
-          }
-        });
-        this.configParams = vimAccountsData.config;
-      }
         this.isLoadingResults = false;
       }, (error: ERRORDATA) => {
         this.isLoadingResults = false;
         if (error.error.status === HttpStatus.NOT_FOUND || error.error.status === HttpStatus.UNAUTHORIZED) {
-          this.router.navigateByUrl('404', { skipLocationChange: true }).catch();
+          this.router.navigateByUrl('404', { skipLocationChange: true }).catch((): void => {
+            // Catch Navigation Error
+          });
         } else {
           this.restService.handleError(error, 'get');
         }
diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
index daa9332..a57b782 100644
--- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
+++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
@@ -18,6 +18,7 @@
 /**
  * @file Vim Account Component.
  */
+ import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -47,7 +48,6 @@
 import * as jsyaml from 'js-yaml';
 import { RestService } from 'RestService';
 import { SharedService } from 'SharedService';
-import { isNullOrUndefined } from 'util';
 import { VimAccountDetails } from 'VimAccountModel';
 
 /**
@@ -98,6 +98,7 @@
 
   /** options @public */
   public options: {} = {
+    // eslint-disable-next-line no-invalid-this
     mode: this.modeDefault,
     showCursorWhenSelecting: true,
     autofocus: true,
@@ -208,6 +209,7 @@
       } else {
         Object.keys(this.vimNewAccountForm.value.config).forEach((res: string): void => {
           if (res !== 'location') {
+            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete, security/detect-object-injection
             delete this.vimNewAccountForm.value.config[res];
           }
         });
@@ -223,7 +225,9 @@
       }
 
       Object.keys(this.vimNewAccountForm.value.config).forEach((res: string): void => {
+        // eslint-disable-next-line security/detect-object-injection
         if (isNullOrUndefined(this.vimNewAccountForm.value.config[res]) || this.vimNewAccountForm.value.config[res] === '') {
+          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete, security/detect-object-injection
           delete this.vimNewAccountForm.value.config[res];
         }
       });
diff --git a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
index f580e8a..ac0b502 100644
--- a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
+++ b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
@@ -352,7 +352,9 @@
     private arrayOfLocation(): void {
         this.getLocation = [];
         this.locationData.filter((item: VimAccountDetails) => {
+            // eslint-disable-next-line no-prototype-builtins
             if (item.hasOwnProperty('config')) {
+                // eslint-disable-next-line no-prototype-builtins
                 if (item.config.hasOwnProperty('location')) {
                     this.getLocation.push({ name: item.name, location: item.config.location, id: item._id });
                 }
@@ -429,12 +431,10 @@
     }
     /** Add a click handler to the map to render the popup. @private */
     private markerClickEvent(closer: HTMLElement, overlay: Overlay): void {
-        // tslint:disable-next-line: no-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.map.on('singleclick', (evt: any) => {
             const feature: Feature = this.map.forEachFeatureAtPixel(evt.pixel,
-                (f: Feature) => {
-                    return f;
-                });
+                (f: Feature) => f);
             if (feature) {
                 this.setCoordinates(feature, overlay);
             } else {
@@ -449,7 +449,7 @@
         };
     }
     /** Set the coordinates point if the feature is available @private */
-    // tslint:disable-next-line: no-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     private setCoordinates(feature: any, overlay: Overlay): void {
         this.popupData = '';
         this.popupData += '<h3 class="popover-header">' + feature.values_.vimName + '- (' + feature.values_.location + ')</h3>';