/**
* @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 { ERRORDATA } from 'CommonModel';
+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';
import { NSInstanceDetails } from 'NSInstanceModel';
/** Invoke service injectors @public */
public injector: Injector;
- /** handle translate @public */
+ /** Handle translate @public */
public translateService: TranslateService;
/** Observable holds logined value @public */
/** List of NS Success Instances @public */
public nsRunningInstance: string[] = [];
+ /** Contains VIM Account details @public */
+ public vimData: VimAccountDetails[] = [];
+
+ /** Contains Selected VIM Details @public */
+ public selectedVIMDetails: VimAccountDetails = null;
+
+ /** List of VIM_TYPES @public */
+ public vimTypes: TYPESECTION[] = VIM_TYPES;
+
+ /** 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[] = [];
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;
+
constructor(injector: Injector) {
this.injector = injector;
this.restService = this.injector.get(RestService);
this.projectService = this.injector.get(ProjectService);
this.sharedService = this.injector.get(SharedService);
this.translateService = this.injector.get(TranslateService);
+ this.notifierService = this.injector.get(NotifierService);
}
/**
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();
}
/** 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: [{
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: {
+ 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')
}
- }]
+ }
}
}
});
/** 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 => {
this.vimAccountCountSub = this.restService.getResource(environment.VIMACCOUNTS_URL)
.subscribe((vimAccountData: VimAccountDetails[]): void => {
this.vimAccountCount = vimAccountData.length;
+ this.vimData = vimAccountData;
}, (error: ERRORDATA): void => {
this.restService.handleError(error, 'get');
});
});
}
+ /** Get Vim data filtered by the selected Vim Type @public */
+ 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 */
+ public getSelectedVIMDetails(vimDetails: VimAccountDetails): void {
+ if (!isNullOrUndefined(vimDetails.resources)) {
+ this.selectedVIMDetails = vimDetails;
+ } else {
+ this.notifierService.notify('error', this.translateService.instant('RESOURCESNOTFOUND'));
+ }
+ }
+
/**
* Lifecyle Hooks the trigger before component is deleted
*/
projects / osm / NG-UI.git / blobdiff