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 <barath.r@tataelxsi.co.in>
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 @@
/** 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 @@
/** 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 @@
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 @@
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 @@
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 @@
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 @@
<tr>
<td>
<b>{{'OPERATIONALSTATE' | translate}}:</b>
- <span class="badge ml-1" [ngClass]="{'badge-info':sdnDetails._admin.operationalState === operationalStateFirstStep,
+ <span class="badge ml-1" [ngClass]="{'badge-warning text-white':sdnDetails._admin.operationalState === operationalStateFirstStep,
'badge-success':sdnDetails._admin.operationalState === operationalStateSecondStep,
'badge-danger':sdnDetails._admin.operationalState === operationalStateThirdStep}">
{{(sdnDetails._admin.operationalState)?sdnDetails._admin.operationalState:''}}</span>
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 @@
container="body" ngbTooltip="{{'DELETE' | translate}}">
<i class="far fa-trash-alt icons"></i>
</button>
- <div ngbDropdown class="btn-group">
+ <div class="btn-group" ngbDropdown display="dynamic" container="body">
<button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
{{'ACTION' | translate}}
</button>
- <div class="dropdown-menu" ngbDropdownMenu>
+ <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
<button type="button" class="btn btn-primary dropdown-item" (click)="historyOfOperations()" placement="left"
container="body" ngbTooltip="{{'HISTORYOFOPERATIONS' | translate}}">
<i class="fas fa-history"></i> {{'HISTORYOFOPERATIONS' | translate}}
diff --git a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
index 41a58f5..2879d8b 100644
--- a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
+++ b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
@@ -28,11 +28,11 @@
ngbTooltip="{{'DELETE' | translate}}">
<i class="far fa-trash-alt icons"></i>
</button>
- <div ngbDropdown class="btn-group">
+ <div class="btn-group" ngbDropdown display="dynamic" container="body">
<button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
{{'ACTION' | translate}}
</button>
- <div class="dropdown-menu" ngbDropdownMenu>
+ <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
<button type="button" class="btn btn-primary dropdown-item" (click)="infoNs()" placement="left"
container="body" ngbTooltip="{{'INFO' | translate}}">
<i class="fas fa-info icons list" title="info"></i> {{'INFO' | translate}}
diff --git a/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html b/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html
index 6e33d0d..b6c0fe7 100644
--- a/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html
+++ b/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html
@@ -28,11 +28,11 @@
ngbTooltip="{{'DELETE' | translate}}">
<i class="far fa-trash-alt icons"></i>
</button>
- <div ngbDropdown class="btn-group">
+ <div class="btn-group" ngbDropdown display="dynamic" container="body">
<button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
{{'ACTION' | translate}}
</button>
- <div class="dropdown-menu" ngbDropdownMenu>
+ <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
<button type="button" class="btn btn-primary dropdown-item" (click)="nsdEdit()" placement="left"
container="body" ngbTooltip="{{'EDIT' | translate}}">
<i class="fa fa-edit icons"></i> {{'EDIT' | translate}}
diff --git a/src/app/utilities/projects-action/ProjectsActionComponent.html b/src/app/utilities/projects-action/ProjectsActionComponent.html
index a5d4d4e..d105846 100644
--- a/src/app/utilities/projects-action/ProjectsActionComponent.html
+++ b/src/app/utilities/projects-action/ProjectsActionComponent.html
@@ -16,11 +16,11 @@
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="btn-group list action" role="group">
- <div ngbDropdown class="btn-group">
+ <div class="btn-group" ngbDropdown display="dynamic" container="body">
<button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
{{'ACTION' | translate}}
</button>
- <div class="dropdown-menu" ngbDropdownMenu>
+ <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
<button type="button" class="btn btn-primary dropdown-item" (click)="projectEdit()" placement="left"
container="body" ngbTooltip="{{'RENAME' | translate}}">
<i class="fa fa-edit icons"></i> {{'RENAME' | translate}}
diff --git a/src/app/utilities/roles-action/RolesActionComponent.html b/src/app/utilities/roles-action/RolesActionComponent.html
index 5a7453d..522ba83 100644
--- a/src/app/utilities/roles-action/RolesActionComponent.html
+++ b/src/app/utilities/roles-action/RolesActionComponent.html
@@ -16,11 +16,11 @@
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="btn-group list action" role="group">
- <div ngbDropdown class="btn-group">
+ <div class="btn-group" ngbDropdown display="dynamic" container="body">
<button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
{{'ACTION' | translate}}
</button>
- <div class="dropdown-menu" ngbDropdownMenu>
+ <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
<button type="button" class="btn btn-primary dropdown-item" (click)="editRole()" placement="left"
container="body" ngbTooltip="{{'EDIT' | translate}}">
<i class="fa fa-edit icons"></i> {{'EDIT' | translate}}
diff --git a/src/app/utilities/users-action/UsersActionComponent.html b/src/app/utilities/users-action/UsersActionComponent.html
index 9ce546e..90559f9 100644
--- a/src/app/utilities/users-action/UsersActionComponent.html
+++ b/src/app/utilities/users-action/UsersActionComponent.html
@@ -16,11 +16,11 @@
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="btn-group list action" role="group">
- <div ngbDropdown class="btn-group">
+ <div class="btn-group" ngbDropdown display="dynamic" container="body">
<button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
{{'ACTION' | translate}}
</button>
- <div class="dropdown-menu" ngbDropdownMenu>
+ <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
<button type="button" class="btn btn-primary dropdown-item" (click)="editUserModal('editPassword')" placement="left" container="body"
ngbTooltip="{{'PAGE.USERS.EDITCREDENTIALS' | translate}}">
<i class="fa fa-edit icons"></i> {{'PAGE.USERS.EDITCREDENTIALS' | translate}}
diff --git a/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html b/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html
index df3aa52..0f46919 100644
--- a/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html
+++ b/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html
@@ -24,11 +24,11 @@
ngbTooltip="{{'DELETE' | translate}}">
<i class="far fa-trash-alt icons"></i>
</button>
- <div ngbDropdown class="btn-group">
+ <div class="btn-group" ngbDropdown display="dynamic" container="body">
<button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
{{'ACTION' | translate}}
</button>
- <div class="dropdown-menu" ngbDropdownMenu>
+ <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
<button type="button" class="btn btn-primary dropdown-item" (click)="vnfdEdit()" placement="left"
container="body" ngbTooltip="{{'EDIT' | translate}}">
<i class="fa fa-edit icons"></i> {{'EDIT' | translate}}
diff --git a/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html b/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html
index 25126b8..930b63d 100644
--- a/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html
+++ b/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html
@@ -35,7 +35,7 @@
</tr>
<tr>
<td>
- <b>{{'OPERATIONALSTATE' | translate}}:</b><span class="ml-1 badge" [ngClass]="{'badge-info':wimDetails._admin.operationalState === operationalStateFirstStep,
+ <b>{{'OPERATIONALSTATE' | translate}}:</b><span class="ml-1 badge" [ngClass]="{'badge-warning text-white':wimDetails._admin.operationalState === operationalStateFirstStep,
'badge-success':wimDetails._admin.operationalState === operationalStateSecondStep,
'badge-danger':wimDetails._admin.operationalState === operationalStateThirdStep}">
{{(wimDetails._admin.operationalState)?wimDetails._admin.operationalState:''}}