From 208bef2cea31da5427861ac81817790e98851fe2 Mon Sep 17 00:00:00 2001 From: Barath Kumar R Date: Tue, 7 Jul 2020 12:28:04 +0530 Subject: [PATCH] NG-UI Design Changes * Drop-down action design changes to the display="dynamic" and container="body" * SDN/WIM State label color changed. * Dynamic Metric graph color is implemented. Change-Id: If40f3f087286c8f8a36a0a5702e0116c95ecd956 Signed-off-by: Barath Kumar R --- src/app/dashboard/DashboardComponent.ts | 65 +++++++++---------- src/app/layouts/LayoutComponent.scss | 1 + .../SDNControllerInfoComponent.html | 2 +- .../NetsliceInstancesActionComponent.html | 4 +- .../NSInstancesActionComponent.html | 4 +- .../NsPackagesActionComponent.html | 4 +- .../ProjectsActionComponent.html | 4 +- .../roles-action/RolesActionComponent.html | 4 +- .../users-action/UsersActionComponent.html | 4 +- .../VNFPackagesActionComponent.html | 4 +- .../WIMAccountInfoComponent.html | 2 +- src/assets/scss/app.scss | 51 +++++++++------ src/services/SharedService.ts | 10 +++ 13 files changed, 89 insertions(+), 70 deletions(-) diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts index 4ab802f..31a8516 100644 --- a/src/app/dashboard/DashboardComponent.ts +++ b/src/app/dashboard/DashboardComponent.ts @@ -106,8 +106,11 @@ export class DashboardComponent implements OnInit { /** Give the message for the loading @public */ public message: string = 'PLEASEWAIT'; - /** List of NS Success Instances @private */ - public nsRunningInstance: string[] = []; + /** List of NS Success Instances @public */ + public nsRunningInstance: {}[] = []; + + /** List of color for Instances @private */ + private backgroundColor: string[] = []; /** Utilizes rest service for any CRUD operations @private */ private restService: RestService; @@ -157,21 +160,6 @@ export class DashboardComponent implements OnInit { /** 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); @@ -254,20 +242,20 @@ export class DashboardComponent implements OnInit { 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'); - }); + 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'); - }); + this.nsdPackageCount = nsdPackageData.length; + }, (error: ERRORDATA) => { + this.restService.handleError(error, 'get'); + }); } /** Get NS Instance details @public */ @@ -293,7 +281,8 @@ export class DashboardComponent implements OnInit { if (operationalStatus === 'failed' || configStatus === 'failed') { this.nsFailedInstances.push(nsdInstanceData); } else if (operationalStatus === 'running' && configStatus === 'configured') { - this.nsRunningInstance.push(nsdInstanceData.name); + this.nsRunningInstance.push({ name: nsdInstanceData.name, id: nsdInstanceData.id }); + this.backgroundColor.push(this.sharedService.generateColor()); this.createdTimes.push(((nsdInstanceData._admin.created).toString()).slice(0, this.sliceLimit)); } }); @@ -314,14 +303,24 @@ export class DashboardComponent implements OnInit { 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 }] }, options: { + hover: { + onHover(evt: Event, item: {}): void { + const el: HTMLElement = document.getElementById('canvas'); + el.style.cursor = item[0] ? 'pointer' : 'default'; + } + }, + onClick(evt: Event, item: {}): void { + if (item[0] !== undefined) { + const location: string = '/instances/ns/' + item[0]._chart.data.labels[item[0]._index].id; + window.open(location); + } + }, legend: { display: false }, scales: { xAxes: [{ @@ -331,10 +330,10 @@ export class DashboardComponent implements OnInit { 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; + if (label.name.length > length) { + return label.name.substring(0, length - ending.length) + ending; } else { - return label; + return label.name; } } }, diff --git a/src/app/layouts/LayoutComponent.scss b/src/app/layouts/LayoutComponent.scss index 649387a..19e8ea0 100644 --- a/src/app/layouts/LayoutComponent.scss +++ b/src/app/layouts/LayoutComponent.scss @@ -24,6 +24,7 @@ .content-section { @include wh-value(100%, null); @include transition(all, 0.3s, null, null); + @include flexbox(block, null, null, null, null, null); overflow-x: auto; } } diff --git a/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.html b/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.html index 842d101..28739cf 100644 --- a/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.html +++ b/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.html @@ -31,7 +31,7 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i {{'OPERATIONALSTATE' | translate}}: - {{(sdnDetails._admin.operationalState)?sdnDetails._admin.operationalState:''}} diff --git a/src/app/utilities/netslice-instances-action/NetsliceInstancesActionComponent.html b/src/app/utilities/netslice-instances-action/NetsliceInstancesActionComponent.html index 7fcc812..0f38cea 100644 --- a/src/app/utilities/netslice-instances-action/NetsliceInstancesActionComponent.html +++ b/src/app/utilities/netslice-instances-action/NetsliceInstancesActionComponent.html @@ -24,11 +24,11 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i container="body" ngbTooltip="{{'DELETE' | translate}}"> -
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+