/**
* @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';
import { SharedService } from 'SharedService';
import { ProjectRoleMappings, UserDetail } from 'UserModel';
import { VimAccountDetails } from 'VimAccountModel';
-import { VNFDDetails } from 'VNFDModel';
import { VNFInstanceDetails } from 'VNFInstanceModel';
/**
/** Invoke service injectors @public */
public injector: Injector;
- /** handle translate @public */
+ /** Handle translate @public */
public translateService: TranslateService;
/** Observable holds logined value @public */
/** 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[] = [];
+ /** 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[] = [];
+
/** Utilizes rest service for any CRUD operations @private */
private restService: RestService;
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;
- /** Contians color code for chart @private */
- private chartColorPink: string = '#e4397c';
+ /** Converter used to round off time to one decimal point @private */
+ // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+ private converter: number = 10;
- /** 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';
+ /** Notifier service to popup notification @private */
+ private notifierService: NotifierService;
constructor(injector: Injector) {
this.injector = injector;
this.projectService = this.injector.get(ProjectService);
this.sharedService = this.injector.get(SharedService);
this.translateService = this.injector.get(TranslateService);
+ this.notifierService = this.injector.get(NotifierService);
}
/**
/** 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
});
}
/** 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;
});
/** 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
});
}
/** 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;
});
/** 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.noOfHours.push((Math.round((currentTime - Number(createdTime)) / this.hourConverter)));
+ this.createdTimes.forEach((createdTime: string): void => {
+ 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: [{
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,
+ hoverBackgroundColor: this.backgroundColor
}]
},
options: {
- legend: { display: false },
+ 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'
+ }
+ }
+ },
scales: {
- xAxes: [{
+ x: {
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: {
+ 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)
- .subscribe((vnfInstanceData: VNFInstanceDetails[]) => {
+ this.vnfInstanceCountSub = this.restService.getResource(environment.VNFINSTANCES_URL)
+ .subscribe((vnfInstanceData: VNFInstanceDetails[]): void => {
this.vnfInstanceCount = vnfInstanceData.length;
- }, (error: ERRORDATA) => {
+ }, (error: ERRORDATA): void => {
this.restService.handleError(error, 'get');
});
}
/** 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) => {
+ this.vimData = vimAccountData;
+ }, (error: ERRORDATA): void => {
this.restService.handleError(error, 'get');
});
}
/** 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');
});
}
+ /** 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