Initial Commit - NG UI
* Roboto and font-awesome fonts are added in package.json
* Replace Nginx alpine varient to stable
* Devops files are added
* Docker file aligned as per community reviews
* Enhancement - NS primitive, Azure inclusion and domain name
* RWD changes
Change-Id: If543efbf127964cbd8f4be4c5a67260c91407fd9
Signed-off-by: kumaran.m <kumaran.m@tataelxsi.co.in>
diff --git a/src/app/dashboard/DashboardComponent.html b/src/app/dashboard/DashboardComponent.html
new file mode 100644
index 0000000..5b09dc9
--- /dev/null
+++ b/src/app/dashboard/DashboardComponent.html
@@ -0,0 +1,167 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="row dashboard">
+ <div class="col-xs-9 col-sm-12 col-md-12 col-lg-9 col-xl-9 p-0">
+ <div class="row instances">
+ <div class="col-xs-8 col-sm-8 col-md-12 col-lg-8 col-xl-8">
+ <div class="custom-card card mb-3 text-center graph-section">
+ <div class="card-title">
+ <h6 class="font-weight-bold" *ngIf="nsRunningInstance.length">
+ {{'PAGE.DASHBOARD.UPTIME' | translate}} {{'PAGE.DASHBOARD.RUNNINGINSTANCES' | translate}}
+ </h6>
+ <h6 *ngIf="!nsRunningInstance.length">
+ <span> {{'PAGE.DASHBOARD.NOINSTANCES' | translate}}</span>
+ </h6>
+ <div [ngClass]="{'show-canvas':nsRunningInstance.length}" class="instances-canvas">
+ <canvas id="canvas"></canvas>
+ </div>
+ </div>
+ </div>
+ <app-loader [waitingMessage]="message" *ngIf="isCanvasLoadingResults"></app-loader>
+ </div>
+ <div class="col-xs-4 col-sm-4 col-md-12 col-lg-4 col-xl-4">
+ <div class="custom-card card card mb-3">
+ <div class="card-header custom-card-header">
+ {{'PAGE.DASHBOARD.FAILEDINSTANCES' | translate}}
+ </div>
+ <div class="card-body list-overflow failed-instances">
+ <ul class="list-group">
+ <li class="list-group-item text-left" *ngIf="!nsFailedInstances.length">
+ {{'PAGE.DASHBOARD.NOINSTANCES' | translate}}</li>
+ <li class="list-group-item text-left d-flex justify-content-between align-items-center"
+ *ngFor="let nsFailedInstance of nsFailedInstances">
+ <span class="text-truncate">{{nsFailedInstance.name}}</span>
+ <ng-template #popTitle>
+ <strong>{{nsFailedInstance.name}}</strong>
+ <button class="button-xs close" type="button" (click)="p.close()">
+ <i class="fas fa-times-circle text-danger"></i>
+ </button>
+ </ng-template>
+ <span class="badge badge-pill">
+ <i placement="left" container="body"
+ ngbPopover="{{'DETAILEDSTATUS' | translate}}: {{nsFailedInstance['detailed-status']}}"
+ triggers="manual" #p="ngbPopover" (click)="p.open()" [autoClose]="'outside'"
+ [popoverTitle]="popTitle"
+ class="fas fa-exclamation-circle text-danger float-left"></i></span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <app-loader [waitingMessage]="message" *ngIf="isCanvasLoadingResults"></app-loader>
+ </div>
+ </div>
+ <div class="row module-counts">
+ <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+ <div class="status-card custom-card card-hover card aqua-card" routerLink="/packages/ns">
+ <i class="fas fa-box-open"></i>
+ <h3>{{ (nsdPackageCount)?nsdPackageCount:0 }}</h3>
+ <h6>{{'NSPACKAGES' | translate}}</h6>
+ <span class="link-icon">
+ <i class="fa fa-link" aria-hidden="true"></i>
+ </span>
+ </div>
+ </div>
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+ <div class="status-card custom-card card-hover card aqua-card" routerLink="/instances/ns">
+ <i class="fas fa-sitemap"></i>
+ <h3>{{ (nsInstanceCount)?nsInstanceCount:0 }}</h3>
+ <h6>{{'NSINSTANCES' | translate}}</h6>
+ <span class="link-icon">
+ <i class="fa fa-link" aria-hidden="true"></i>
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+ <div class="status-card custom-card card-hover card purple-card" routerLink="/packages/vnf">
+ <i class="fas fa-box-open"></i>
+ <h3>{{ (vnfdPackageCount)?vnfdPackageCount:0 }}</h3>
+ <h6>{{'VNFPACKAGES' | translate}}</h6>
+ <span class="link-icon">
+ <i class="fa fa-link" aria-hidden="true"></i>
+ </span>
+ </div>
+ </div>
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+ <div class="status-card custom-card card-hover card purple-card" routerLink="/instances/vnf">
+ <i class="fas fa-hdd"></i>
+ <h3>{{ (vnfInstanceCount)?vnfInstanceCount:0 }}</h3>
+ <h6>{{'VNFINSTANCES' | translate}}</h6>
+ <span class="link-icon">
+ <i class="fa fa-link" aria-hidden="true"></i>
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+ <div class="status-card custom-card card-hover card pink-card" routerLink="/vim/details">
+ <i class="fas fa-server"></i>
+ <h3>{{ (vimAccountCount)?vimAccountCount:0 }}</h3>
+ <h6>{{'VIMACCOUNTS' | translate}}</h6>
+ <span class="link-icon">
+ <i class="fa fa-link" aria-hidden="true"></i>
+ </span>
+ </div>
+ </div>
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+ <div class="status-card custom-card card-hover card pink-card" routerLink="/sdn/details">
+ <i class="fas fa-globe"></i>
+ <h3>{{ (sdnControllerCount)?sdnControllerCount:0 }}</h3>
+ <h6>{{'SDNCONTROLLER' | translate}}</h6>
+ <span class="link-icon">
+ <i class="fa fa-link" aria-hidden="true"></i>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-xs-3 col-sm-12 col-md-12 col-lg-3 col-xl-3 p-0">
+ <div class="custom-card">
+ <div class="card-header p-0 custom-card-header">
+ <a routerLink="/projects">
+ {{'ALL' | translate}} {{'PAGE.DASHBOARD.PROJECTS' | translate}}
+ <span
+ class="badge badge-primary badge-pill bg-white text-body font-weight-bold">{{allProjectList.length}}</span>
+ </a>
+ </div>
+ <div class="card-body list-overflow project-list">
+ <ul class="list-group">
+ <li class="list-group-item text-left d-flex justify-content-between align-items-center selectProject"
+ *ngFor='let list of allProjectList'>
+ {{list.projectName}}
+ <span class="badge badge-pill" *ngFor='let listcheck of projectList' placement="top"
+ container="body"
+ ngbTooltip="{{ (list.projectName === (selectedProject | async) ? 'CURRENTPROJECT' : 'SWITCHPROJECT') | translate}}">
+ <i *ngIf="list.projectName === (selectedProject | async) && listcheck.project === list.project"
+ [ngClass]="list.projectName === (selectedProject | async) ? 'activeProjectLink' : ''"
+ class="fas fa-check-circle text-success"></i>
+ <i *ngIf="list.projectName !== (selectedProject | async) && listcheck.project === list.project"
+ (click)="this.projectService.switchProjectModal(list)"
+ class="fas fa-exchange-alt text-danger selectProjectLink"></i>
+ </span>
+ </li>
+ </ul>
+ </div>
+ <app-loader [waitingMessage]="message" *ngIf="isProjectsLoadingResults"></app-loader>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/dashboard/DashboardComponent.scss b/src/app/dashboard/DashboardComponent.scss
new file mode 100644
index 0000000..df3c6b1
--- /dev/null
+++ b/src/app/dashboard/DashboardComponent.scss
@@ -0,0 +1,160 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+ @import "../../assets/scss/mixins/mixin";
+ @import "../../assets/scss/variable";
+ $min-height-set: 200px;
+ .dashboard {
+ .custom-card {
+ word-wrap: break-word;
+ @include box-shadow(0px, 1px, 15px, 0px, rgba(69, 90, 100, 0.1));
+ @include transition(all, 0.2s, null, null);
+ @include roundedCorners(5);
+ @include border(all, 1, solid, rgba(238, 238, 238, 0.75));
+ color: $white;
+ &.card-hover {
+ @include transition(all, 0.25s, ease, null);
+ &:hover {
+ -moz-transform: translateY(-4px) scale(1.01);
+ -ms-transform: translateY(-4px) scale(1.01);
+ -o-transform: translateY(-4px) scale(1.01);
+ transform: translateY(-4px) scale(1.01);
+ }
+ }
+ &.pink-card {
+ @include background(
+ linear-gradient(to left top, #d81b60, #e0306d, #e7407a, #ee4f87, #f55c94),
+ null,
+ null,
+ null,
+ null
+ );
+ }
+ &.purple-card {
+ @include background(
+ linear-gradient(to left top, #605ca8, #736ebb, #8681ce, #9994e2, #aca7f6),
+ null,
+ null,
+ null,
+ null
+ );
+ }
+ &.aqua-card {
+ @include background(
+ linear-gradient(to left top, #00c0ef, #00cdf5, #00dafa, #00e6fd, #0af3ff),
+ null,
+ null,
+ null,
+ null
+ );
+ }
+ .custom-card-header {
+ @include background(null, $primary, null, null, null);
+ @include roundedTop(5);
+ a {
+ color: $white;
+ @include flexbox(flex, space-between, null, null, center, null);
+ @include padding-value(12, 20, 12, 20);
+ }
+ }
+ .card-body {
+ @include padding-value(5, 5, 5, 10);
+ &.list-overflow {
+ overflow-y: scroll;
+ .list-group {
+ .list-group-item {
+ cursor: default;
+ @include border(all, 0, solid, $black-coral);
+ @include border(bottom, 1, solid, rgba(0, 0, 0, 0.125));
+ @include padding-value(10, 0, 10, 0);
+ @include margin-value(0, 0, 0, 0);
+ color: $gray-600;
+ i {
+ cursor: pointer;
+ @include font(null, 14px, null);
+ &.activeProjectLink {
+ cursor: default;
+ }
+ }
+ &:last-child {
+ @include border(bottom, 0, solid, rgba(0, 0, 0, 0.125));
+ }
+ }
+ }
+ &.failed-instances {
+ max-height: $min-height-set;
+ }
+ &.project-list {
+ max-height: 65vh;
+ }
+ }
+ }
+ }
+ .instances {
+ .graph-section {
+ min-height: $min-height-set;
+ @include flexbox(null, center, null, null, null, null);
+ @include padding-value(10, 10, 10, 10);
+ .card-title {
+ color: $gray-600;
+ }
+ .instances-canvas {
+ @include flexbox(none !important, null, null, null, null, null);
+ &.show-canvas {
+ @include flexbox(block !important, null, null, null, null, null);
+ }
+ #canvas{
+ @include wh-value(100%, $min-height-set);
+ }
+ }
+ }
+ }
+ .module-counts {
+ .status-card {
+ overflow: hidden;
+ @include wh-value(null, 130px);
+ @include roundedCorners(4);
+ @include box-shadow(0px, 5px, 20px, 2px, $transparent-dark-bg);
+ cursor: pointer;
+ @include flexbox(null, null, null, null, center, null);
+ @include padding-value(20, 20, 20, 20);
+ @include border(all, 0, solid, $gray-80);
+ i {
+ @include font(null, 2rem, null);
+ @include margin-value(0, 0, 8, 0);
+ }
+ h6 {
+ @include font(null, 0.8rem, null);
+ }
+ &:hover .link-icon {
+ @include position_value(null, null, -60px, null, null);
+ }
+ .link-icon {
+ @include background(null, rgba(255, 255, 255, 0.5), null, null, null);
+ @include position_value(absolute, 0px, -130px, null, null);
+ @include wh-value(130px, 130px);
+ @include font(null, 30px, null);
+ @include padding-value(40, 20, 40, 20);
+ @include roundedCornersPercentage(50%);
+ @include transition(all, 0.3s, ease-in-out, null);
+ i {
+ @include font(null, 1.875rem, null);
+ }
+ }
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts
new file mode 100644
index 0000000..4ab802f
--- /dev/null
+++ b/src/app/dashboard/DashboardComponent.ts
@@ -0,0 +1,402 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @file Dashboard Component
+ */
+import { Component, Injector, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { AuthenticationService } from 'AuthenticationService';
+import { Chart } from 'chart.js';
+import { ERRORDATA } from 'CommonModel';
+import { environment } from 'environment';
+import { NSDDetails } from 'NSDModel';
+import { NSInstanceDetails } from 'NSInstanceModel';
+import { ProjectData, ProjectDetails } from 'ProjectModel';
+import { ProjectService } from 'ProjectService';
+import { RestService } from 'RestService';
+import { Observable, Subscription } from 'rxjs';
+import { SDNControllerModel } from 'SDNControllerModel';
+import { SharedService } from 'SharedService';
+import { ProjectRoleMappings, UserDetail } from 'UserModel';
+import { VimAccountDetails } from 'VimAccountModel';
+import { VNFDDetails } from 'VNFDModel';
+import { VNFInstanceDetails } from 'VNFInstanceModel';
+
+/**
+ * Creating component
+ * @Component takes DashboardComponent.html as template url
+ */
+@Component({
+ styleUrls: ['./DashboardComponent.scss'],
+ templateUrl: './DashboardComponent.html'
+})
+
+/**
+ * This file created during the angular project creation
+ */
+
+/** Exporting a class @exports DashboardComponent */
+export class DashboardComponent implements OnInit {
+ /** Invoke service injectors @public */
+ public injector: Injector;
+
+ /** handle translate @public */
+ public translateService: TranslateService;
+
+ /** Observable holds logined value @public */
+ public username$: Observable<string>;
+
+ /** Variables holds admin is logged or not @public */
+ public isAdmin: boolean;
+
+ /** List of NS failed Instances @public */
+ public nsFailedInstances: {}[] = [];
+
+ /** Setting up count for vnfdPackages @public */
+ public vnfdPackageCount: number;
+
+ /** Setting up count for nsdPackage @public */
+ public nsdPackageCount: number;
+
+ /** Setting up count for nsInstance @public */
+ public nsInstanceCount: number;
+
+ /** Setting up count for vnfInstance @public */
+ public vnfInstanceCount: number;
+
+ /** Setting up count for vimAccount @public */
+ public vimAccountCount: number;
+
+ /** Setting up count for sdnController @public */
+ public sdnControllerCount: number;
+
+ /** Variables holds current project details @public */
+ public currentProjectDetails: {};
+
+ /** Array holds all the projects @public */
+ public projectList: {}[] = [];
+
+ /** Array holds all the projects @public */
+ public allProjectList: {}[] = [];
+
+ /** Variables holds the selected project @public */
+ public selectedProject: Observable<string>;
+
+ /** Check the Instances loading results @public */
+ public isCanvasLoadingResults: boolean = true;
+
+ /** Check the Projects loading results @public */
+ public isProjectsLoadingResults: boolean = true;
+
+ /** Give the message for the loading @public */
+ public message: string = 'PLEASEWAIT';
+
+ /** List of NS Success Instances @private */
+ public nsRunningInstance: string[] = [];
+
+ /** Utilizes rest service for any CRUD operations @private */
+ private restService: RestService;
+
+ /** Utilizes auth service for any auth operations @private */
+ private authService: AuthenticationService;
+
+ /** Used to subscribe vnfdPackage @private */
+ private vnfdPackageCountSub: Subscription;
+
+ /** Used to subscribe nsdPackage @private */
+ private nsdPackageCountSub: Subscription;
+
+ /** Used to subscribe nsInstance @private */
+ private nsInstanceCountSub: Subscription;
+
+ /** Used to subscribe vnfInstance @private */
+ private vnfInstanceCountSub: Subscription;
+
+ /** Used to subscribe vimAccount @private */
+ private vimAccountCountSub: Subscription;
+
+ /** Used to subscribe sdnController @private */
+ private sdnControllerCountSub: Subscription;
+
+ /** No of Hours of NS Success Instances @private */
+ private noOfHours: number[] = [];
+
+ /** collects charts objects @private */
+ private charts: object = [];
+
+ /** Contains all methods related to projects @private */
+ private projectService: ProjectService;
+
+ /** Contains all methods related to shared @private */
+ private sharedService: SharedService;
+
+ /** Contains NS Instance Details */
+ private nsInstancesDataArr: {}[];
+
+ /** Container created time array @private */
+ private createdTimes: string[] = [];
+
+ /** Contains slice limit const @private */
+ private sliceLimit: number = 10;
+
+ /** Contians hour converter @private */
+ private hourConverter: number = 3600;
+
+ /** Contians color code for chart @private */
+ private chartColorPink: string = '#e4397c';
+
+ /** 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';
+
+ constructor(injector: Injector) {
+ this.injector = injector;
+ this.restService = this.injector.get(RestService);
+ this.authService = this.injector.get(AuthenticationService);
+ this.projectService = this.injector.get(ProjectService);
+ this.sharedService = this.injector.get(SharedService);
+ this.translateService = this.injector.get(TranslateService);
+ }
+
+ /**
+ * Lifecyle Hooks the trigger before component is instantiate
+ */
+ public ngOnInit(): void {
+ this.username$ = this.authService.username;
+ this.isAdmin = (localStorage.getItem('isAdmin') === 'true') ? true : false;
+ this.selectedProject = this.authService.ProjectName;
+ this.checkAdminPrivilege();
+ this.getUserAccessedProjects();
+ this.getAllProjects();
+ this.getVnfdPackageCount();
+ this.getNsdPackageCount();
+ this.getNsInstanceCount();
+ this.getVnfInstanceCount();
+ this.getVimAccountCount();
+ this.getSDNControllerCount();
+ }
+
+ /** Get all the projects @public */
+ public getUserAccessedProjects(): void {
+ this.projectService.getUserProjects().subscribe((projects: UserDetail) => {
+ 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
+ );
+ }, (error: Error) => {
+ // 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.allProjectList = [];
+ projectsData.forEach((projectData: ProjectDetails) => {
+ const projectDataObj: ProjectData = this.generateProjectData(projectData);
+ this.allProjectList.push(projectDataObj);
+ });
+ this.isProjectsLoadingResults = false;
+ }, (error: ERRORDATA) => {
+ this.restService.handleError(error, 'get');
+ this.isProjectsLoadingResults = false;
+ });
+ }
+
+ /** Generate Projects object from loop and return for the datasource @public */
+ public generateProjectData(projectData: ProjectDetails): ProjectData {
+ return {
+ projectName: projectData.name,
+ modificationDate: this.sharedService.convertEpochTime(projectData._admin.modified),
+ creationDate: this.sharedService.convertEpochTime(projectData._admin.created),
+ id: projectData._id,
+ project: projectData._id
+ };
+ }
+
+ /** Function to check admin privilege @public */
+ public checkAdminPrivilege(): void {
+ if (!this.isAdmin) {
+ this.projectService.getCurrentProjectDetails().subscribe((projectDetails: {}) => {
+ this.currentProjectDetails = projectDetails;
+ }, (error: Error) => {
+ // 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');
+ });
+ }
+
+ /** 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');
+ });
+ }
+
+ /** Get NS Instance details @public */
+ public getNsInstanceCount(): void {
+ this.isCanvasLoadingResults = true;
+ this.nsInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL)
+ .subscribe((nsInstancesData: NSInstanceDetails[]) => {
+ this.nsInstancesDataArr = nsInstancesData;
+ this.nsInstanceCount = nsInstancesData.length;
+ this.nsInstanceChart();
+ this.isCanvasLoadingResults = false;
+ }, (error: ERRORDATA) => {
+ this.restService.handleError(error, 'get');
+ this.isCanvasLoadingResults = false;
+ });
+ }
+
+ /** Get NS Instance chart details @public */
+ public nsInstanceChart(): void {
+ this.nsInstancesDataArr.forEach((nsdInstanceData: NSDDetails) => {
+ 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.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.drawNsChart();
+ }
+
+ /** Prepare and sketch NS instance chart */
+ public drawNsChart(): void {
+ this.charts = new Chart('canvas', {
+ type: 'bar',
+ data: {
+ labels: this.nsRunningInstance,
+ datasets: [{
+ data: this.noOfHours,
+ label: this.translateService.instant('NOOFHOURS'),
+ borderColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan,
+ this.chartColorBlue, this.chartColorYellow],
+ fill: false,
+ backgroundColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan,
+ this.chartColorBlue, this.chartColorYellow]
+ }]
+ },
+ options: {
+ legend: { display: false },
+ scales: {
+ xAxes: [{
+ 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: {
+ display: true,
+ labelString: this.translateService.instant('INSTANCES')
+ }
+ }],
+ yAxes: [{
+ ticks: {
+ beginAtZero: true
+ },
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: this.translateService.instant('NOOFHOURS')
+ }
+ }]
+ }
+ }
+ });
+ }
+
+ /** Get VNFD instance details @public */
+ public getVnfInstanceCount(): void {
+ this.vnfInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL)
+ .subscribe((vnfInstanceData: VNFInstanceDetails[]) => {
+ this.vnfInstanceCount = vnfInstanceData.length;
+ }, (error: ERRORDATA) => {
+ this.restService.handleError(error, 'get');
+ });
+ }
+
+ /** Get VIM account details @public */
+ public getVimAccountCount(): void {
+ this.vimAccountCountSub = this.restService.getResource(environment.VIMACCOUNTS_URL)
+ .subscribe((vimAccountData: VimAccountDetails[]) => {
+ this.vimAccountCount = vimAccountData.length;
+ }, (error: ERRORDATA) => {
+ this.restService.handleError(error, 'get');
+ });
+ }
+
+ /** Get SDN Controller Count @public */
+ public getSDNControllerCount(): void {
+ this.sdnControllerCountSub = this.restService.getResource(environment.SDNCONTROLLER_URL)
+ .subscribe((sdnControllerData: SDNControllerModel[]) => {
+ this.sdnControllerCount = sdnControllerData.length;
+ }, (error: ERRORDATA) => {
+ this.restService.handleError(error, 'get');
+ });
+ }
+
+ /**
+ * Lifecyle Hooks the trigger before component is deleted
+ */
+ public ngOnDestroy(): void {
+ this.vnfdPackageCountSub.unsubscribe();
+ this.nsdPackageCountSub.unsubscribe();
+ this.nsInstanceCountSub.unsubscribe();
+ this.vnfInstanceCountSub.unsubscribe();
+ this.vimAccountCountSub.unsubscribe();
+ this.sdnControllerCountSub.unsubscribe();
+ }
+}
diff --git a/src/app/dashboard/DashboardModule.ts b/src/app/dashboard/DashboardModule.ts
new file mode 100644
index 0000000..4d882e2
--- /dev/null
+++ b/src/app/dashboard/DashboardModule.ts
@@ -0,0 +1,61 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+
+/**
+ * @file Dashboard Module
+ */
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FormsModule } from '@angular/forms';
+import { RouterModule, Routes } from '@angular/router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+import { DashboardComponent } from 'DashboardComponent';
+import { LoaderModule } from 'LoaderModule';
+import { ChartsModule } from 'ng2-charts';
+
+/** To halndle project information */
+const projectInfo: {} = { title: '{project}', url: '/' };
+
+/** const values for dashboard Routes */
+const routes: Routes = [
+ {
+ path: '',
+ data: {
+ breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+ projectInfo]
+ },
+ component: DashboardComponent
+ }
+];
+/**
+ * An NgModule is a class adorned with the @NgModule decorator function.
+ * @NgModule takes a metadata object that tells Angular how to compile and run module code.
+ */
+@NgModule({
+ imports: [FormsModule, CommonModule, HttpClientModule, FlexLayoutModule, TranslateModule,
+ ChartsModule, RouterModule.forChild(routes), NgbModule, LoaderModule],
+ declarations: [DashboardComponent]
+})
+/** Exporting a class @exports DashboardModule */
+export class DashboardModule {
+ /** Variables declared to avoid state-less class */
+ private dashboardModule: string;
+}