2 Copyright 2020 TATA ELXSI
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
8 http://www.apache.org/licenses/LICENSE-2.0
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.
16 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
19 * @file Dashboard Component
21 import { isNullOrUndefined } from 'util';
22 import { Component, Injector, OnInit } from '@angular/core';
23 import { TranslateService } from '@ngx-translate/core';
24 import { NotifierService } from 'angular-notifier';
25 import { AuthenticationService } from 'AuthenticationService';
26 import { Chart, ChartType, LineController, LineElement, PointElement, LinearScale, Title, ChartEvent, ActiveElement } from 'chart.js';
27 import ChartDataLabels from 'chartjs-plugin-datalabels';
28 Chart.register(LineController, LineElement, PointElement, LinearScale, Title, ChartDataLabels);
29 import { ERRORDATA, TYPESECTION, VIM_TYPES } from 'CommonModel';
30 import { environment } from 'environment';
31 import { NSDDetails } from 'NSDModel';
32 import { NSInstanceDetails } from 'NSInstanceModel';
33 import { ProjectData, ProjectDetails } from 'ProjectModel';
34 import { ProjectService } from 'ProjectService';
35 import { RestService } from 'RestService';
36 import { Observable, Subscription } from 'rxjs';
37 import { SDNControllerModel } from 'SDNControllerModel';
38 import { SharedService } from 'SharedService';
39 import { ProjectRoleMappings, UserDetail } from 'UserModel';
40 import { VimAccountDetails } from 'VimAccountModel';
41 import { VNFInstanceDetails } from 'VNFInstanceModel';
45 * @Component takes DashboardComponent.html as template url
48 styleUrls: ['./DashboardComponent.scss'],
49 templateUrl: './DashboardComponent.html'
53 * This file created during the angular project creation
56 /** Exporting a class @exports DashboardComponent */
57 export class DashboardComponent implements OnInit {
58 /** Invoke service injectors @public */
59 public injector: Injector;
61 /** Handle translate @public */
62 public translateService: TranslateService;
64 /** Observable holds logined value @public */
65 public username$: Observable<string>;
67 /** Variables holds admin is logged or not @public */
68 public isAdmin: boolean;
70 /** List of NS failed Instances @public */
71 public nsFailedInstances: {}[] = [];
73 /** Setting up count for vnfdPackages @public */
74 public vnfdPackageCount: number;
76 /** Setting up count for nsdPackage @public */
77 public nsdPackageCount: number;
79 /** Setting up count for nsInstance @public */
80 public nsInstanceCount: number;
82 /** Setting up count for vnfInstance @public */
83 public vnfInstanceCount: number;
85 /** Setting up count for vimAccount @public */
86 public vimAccountCount: number;
88 /** Setting up count for sdnController @public */
89 public sdnControllerCount: number;
91 /** Variables holds current project details @public */
92 public currentProjectDetails: {};
94 /** Array holds all the projects @public */
95 public projectList: {}[] = [];
97 /** Array holds all the projects @public */
98 public allProjectList: {}[] = [];
100 /** Variables holds the selected project @public */
101 public selectedProject: Observable<string>;
103 /** Check the Instances loading results @public */
104 public isCanvasLoadingResults: boolean = true;
106 /** Check the Projects loading results @public */
107 public isProjectsLoadingResults: boolean = true;
109 /** Give the message for the loading @public */
110 public message: string = 'PLEASEWAIT';
112 /** List of NS Success Instances @public */
113 public nsRunningInstance: string[] = [];
115 /** Contains VIM Account details @public */
116 public vimData: VimAccountDetails[] = [];
118 /** Contains Selected VIM Details @public */
119 public selectedVIMDetails: VimAccountDetails = null;
121 /** List of VIM_TYPES @public */
122 public vimTypes: TYPESECTION[] = VIM_TYPES;
124 /** Array holds Vim data filtered with selected vimtype */
125 public vimList: VimAccountDetails[] = [];
127 /** Model value used to hold selected vimtype Data @public */
128 public vimListData: string;
130 /** List of color for Instances @private */
131 private backgroundColor: string[] = [];
133 /** Utilizes rest service for any CRUD operations @private */
134 private restService: RestService;
136 /** Utilizes auth service for any auth operations @private */
137 private authService: AuthenticationService;
139 /** Used to subscribe vnfdPackage @private */
140 private vnfdPackageCountSub: Subscription;
142 /** Used to subscribe nsdPackage @private */
143 private nsdPackageCountSub: Subscription;
145 /** Used to subscribe nsInstance @private */
146 private nsInstanceCountSub: Subscription;
148 /** Used to subscribe vnfInstance @private */
149 private vnfInstanceCountSub: Subscription;
151 /** Used to subscribe vimAccount @private */
152 private vimAccountCountSub: Subscription;
154 /** Used to subscribe sdnController @private */
155 private sdnControllerCountSub: Subscription;
157 /** No of Hours of NS Success Instances @private */
158 private noOfHours: number[] = [];
160 /** collects charts objects @private */
161 private charts: object = [];
163 /** Contains all methods related to projects @private */
164 private projectService: ProjectService;
166 /** Contains all methods related to shared @private */
167 private sharedService: SharedService;
169 /** Contains NS Instance Details */
170 private nsInstancesDataArr: {}[];
172 /** Container created time array @private */
173 private createdTimes: string[] = [];
175 /** Contains slice limit const @private */
176 // eslint-disable-next-line @typescript-eslint/no-magic-numbers
177 private sliceLimit: number = 10;
179 /** Contians hour converter @private */
180 // eslint-disable-next-line @typescript-eslint/no-magic-numbers
181 private hourConverter: number = 3600;
183 /** Converter used to round off time to one decimal point @private */
184 // eslint-disable-next-line @typescript-eslint/no-magic-numbers
185 private converter: number = 10;
187 /** Notifier service to popup notification @private */
188 private notifierService: NotifierService;
190 constructor(injector: Injector) {
191 this.injector = injector;
192 this.restService = this.injector.get(RestService);
193 this.authService = this.injector.get(AuthenticationService);
194 this.projectService = this.injector.get(ProjectService);
195 this.sharedService = this.injector.get(SharedService);
196 this.translateService = this.injector.get(TranslateService);
197 this.notifierService = this.injector.get(NotifierService);
201 * Lifecyle Hooks the trigger before component is instantiate
203 public ngOnInit(): void {
204 this.username$ = this.authService.username;
205 this.isAdmin = (sessionStorage.getItem('isAdmin') === 'true') ? true : false;
206 this.selectedProject = this.authService.ProjectName;
207 this.checkAdminPrivilege();
208 this.getUserAccessedProjects();
209 this.getAllProjects();
210 this.getVnfdPackageCount();
211 this.getNsdPackageCount();
212 this.getNsInstanceCount();
213 this.getVnfInstanceCount();
214 this.getVimAccountCount();
215 this.getSDNControllerCount();
218 /** Get all the projects @public */
219 public getUserAccessedProjects(): void {
220 this.projectService.getUserProjects().subscribe((projects: UserDetail): void => {
221 const projectList: {}[] = projects.project_role_mappings;
222 this.projectList = projectList.filter(
223 (thing: ProjectRoleMappings, i: number, arr: []): boolean => arr
224 .findIndex((t: ProjectRoleMappings): boolean => t.project_name === thing.project_name) === i
226 }, (error: Error): void => {
227 // TODO: Handle failure
231 /** Fetching all the Project in dashboard @public */
232 public getAllProjects(): void {
233 this.isProjectsLoadingResults = true;
234 this.restService.getResource(environment.PROJECTS_URL).subscribe((projectsData: ProjectDetails[]): void => {
235 this.allProjectList = [];
236 projectsData.forEach((projectData: ProjectDetails): void => {
237 const projectDataObj: ProjectData = this.generateProjectData(projectData);
238 this.allProjectList.push(projectDataObj);
240 this.isProjectsLoadingResults = false;
241 }, (error: ERRORDATA): void => {
242 this.restService.handleError(error, 'get');
243 this.isProjectsLoadingResults = false;
247 /** Generate Projects object from loop and return for the datasource @public */
248 public generateProjectData(projectData: ProjectDetails): ProjectData {
250 projectName: projectData.name,
251 modificationDate: this.sharedService.convertEpochTime(projectData._admin.modified),
252 creationDate: this.sharedService.convertEpochTime(projectData._admin.created),
254 project: projectData._id
258 /** Function to check admin privilege @public */
259 public checkAdminPrivilege(): void {
261 this.projectService.getCurrentProjectDetails().subscribe((projectDetails: {}): void => {
262 this.currentProjectDetails = projectDetails;
263 }, (error: Error): void => {
264 // TODO: Handle failure
269 /** Get VNFD Package details @public */
270 public getVnfdPackageCount(): void {
271 this.vnfdPackageCountSub = this.restService.getResource(environment.VNFPACKAGESCONTENT_URL)
272 .subscribe((vnfdPackageData: []): void => {
273 this.vnfdPackageCount = vnfdPackageData.length;
274 }, (error: ERRORDATA): void => {
275 this.restService.handleError(error, 'get');
279 /** Get NSD Package details @public */
280 public getNsdPackageCount(): void {
281 this.nsdPackageCountSub = this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL)
282 .subscribe((nsdPackageData: NSDDetails[]): void => {
283 this.nsdPackageCount = nsdPackageData.length;
284 }, (error: ERRORDATA): void => {
285 this.restService.handleError(error, 'get');
289 /** Get NS Instance details @public */
290 public getNsInstanceCount(): void {
291 this.isCanvasLoadingResults = true;
292 this.nsInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL)
293 .subscribe((nsInstancesData: NSInstanceDetails[]): void => {
294 this.nsInstancesDataArr = nsInstancesData;
295 this.nsInstanceCount = nsInstancesData.length;
296 this.nsInstanceChart();
297 this.isCanvasLoadingResults = false;
298 }, (error: ERRORDATA): void => {
299 this.restService.handleError(error, 'get');
300 this.isCanvasLoadingResults = false;
304 /** Get NS Instance chart details @public */
305 public nsInstanceChart(): void {
306 this.nsInstancesDataArr.forEach((nsdInstanceData: NSDDetails): void => {
307 const operationalStatus: string = nsdInstanceData['operational-status'];
308 const configStatus: string = nsdInstanceData['config-status'];
309 if (operationalStatus === 'failed' || configStatus === 'failed') {
310 this.nsFailedInstances.push(nsdInstanceData);
311 } else if (operationalStatus === 'running' && configStatus === 'configured') {
312 this.nsRunningInstance.push(nsdInstanceData.name);
313 this.backgroundColor.push(this.sharedService.generateColor());
314 this.createdTimes.push(((nsdInstanceData._admin.created).toString()).slice(0, this.sliceLimit));
317 const now: Date = new Date();
318 const currentTime: number = Number((now.getTime().toString().slice(0, this.sliceLimit)));
319 this.createdTimes.forEach((createdTime: string): void => {
320 this.noOfHours.push(Math.floor(((currentTime - Number(createdTime)) / this.hourConverter) * (this.converter)) / this.converter);
325 /** Prepare and sketch NS instance chart */
326 public drawNsChart(): void {
327 this.charts = new Chart('canvas', {
328 type: 'bar' as ChartType,
330 labels: this.nsRunningInstance,
332 data: this.noOfHours,
333 label: this.translateService.instant('NOOFHOURS'),
334 borderColor: this.backgroundColor,
336 backgroundColor: this.backgroundColor,
337 hoverBackgroundColor: this.backgroundColor
347 // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
348 onHover(event: ChartEvent, item: ActiveElement[], chart: Chart): void {
349 const el: HTMLElement = document.getElementById('canvas');
350 el.style.cursor = item[0] ? 'pointer' : 'default';
353 legend: { display: false },
367 text: this.translateService.instant('NSINSTANCES')
375 text: this.translateService.instant('NOOFHOURS')
383 /** Get VNFD instance details @public */
384 public getVnfInstanceCount(): void {
385 this.vnfInstanceCountSub = this.restService.getResource(environment.VNFINSTANCES_URL)
386 .subscribe((vnfInstanceData: VNFInstanceDetails[]): void => {
387 this.vnfInstanceCount = vnfInstanceData.length;
388 }, (error: ERRORDATA): void => {
389 this.restService.handleError(error, 'get');
393 /** Get VIM account details @public */
394 public getVimAccountCount(): void {
395 this.vimAccountCountSub = this.restService.getResource(environment.VIMACCOUNTS_URL)
396 .subscribe((vimAccountData: VimAccountDetails[]): void => {
397 this.vimAccountCount = vimAccountData.length;
398 this.vimData = vimAccountData;
399 }, (error: ERRORDATA): void => {
400 this.restService.handleError(error, 'get');
404 /** Get SDN Controller Count @public */
405 public getSDNControllerCount(): void {
406 this.sdnControllerCountSub = this.restService.getResource(environment.SDNCONTROLLER_URL)
407 .subscribe((sdnControllerData: SDNControllerModel[]): void => {
408 this.sdnControllerCount = sdnControllerData.length;
409 }, (error: ERRORDATA): void => {
410 this.restService.handleError(error, 'get');
414 /** Get Vim data filtered by the selected Vim Type @public */
415 public getSelectedVimTypeList(selectedVIMType: string): void {
416 this.vimList = this.vimData.filter((vimData: VimAccountDetails): boolean =>
417 vimData.vim_type === selectedVIMType);
418 if (this.vimList.length === 0) {
419 this.vimListData = null;
423 /** Get Selected VIM details @public */
424 public getSelectedVIMDetails(vimDetails: VimAccountDetails): void {
425 if (!isNullOrUndefined(vimDetails.resources)) {
426 this.selectedVIMDetails = vimDetails;
428 this.notifierService.notify('error', this.translateService.instant('RESOURCESNOTFOUND'));
433 * Lifecyle Hooks the trigger before component is deleted
435 public ngOnDestroy(): void {
436 this.vnfdPackageCountSub.unsubscribe();
437 this.nsdPackageCountSub.unsubscribe();
438 this.nsInstanceCountSub.unsubscribe();
439 this.vnfInstanceCountSub.unsubscribe();
440 this.vimAccountCountSub.unsubscribe();
441 this.sdnControllerCountSub.unsubscribe();