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 (file)
--- 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 (file)
--- 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 (file)
--- 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
     <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 (file)
--- 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}}">
         <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 (file)
--- a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
+++ b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
@@ -28,11 +28,11 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
         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 (file)
--- a/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html
+++ b/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html
@@ -28,11 +28,11 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
     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 (file)
--- a/src/app/utilities/projects-action/ProjectsActionComponent.html
+++ b/src/app/utilities/projects-action/ProjectsActionComponent.html
@@ -16,11 +16,11 @@ 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="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 (file)
--- a/src/app/utilities/roles-action/RolesActionComponent.html
+++ b/src/app/utilities/roles-action/RolesActionComponent.html
@@ -16,11 +16,11 @@ 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="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 (file)
--- a/src/app/utilities/users-action/UsersActionComponent.html
+++ b/src/app/utilities/users-action/UsersActionComponent.html
@@ -16,11 +16,11 @@ 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="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 (file)
--- a/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html
+++ b/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html
@@ -24,11 +24,11 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
     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 (file)
--- a/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html
+++ b/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html
@@ -35,7 +35,7 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
     </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:''}}

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index bc8a216..457d940 100644 (file)
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -22,10 +22,11 @@ $customnavbar-padding-x: ($spacer / 0.5) !default;
 * {
   outline: 0;
 }
-button[type=submit]:focus, .sidebar-body button[type=button]:focus {
+button[type="submit"]:focus,
+.sidebar-body button[type="button"]:focus {
   @include box-shadow(0, 0, 0, 0.2rem, lighten($primary, 50%) !important);
 }
-.btn-danger:focus{
+.btn-danger:focus {
   @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
 }
 body,
@@ -33,7 +34,10 @@ body,
 .scroll-box,
 .smarttable-style,
 .modal-body-custom-height,
-.layout-wrapper, .CodeMirror-vscrollbar, .ng-sidebar, .runninginstances .popover-body {
+.layout-wrapper,
+.CodeMirror-vscrollbar,
+.ng-sidebar,
+.runninginstances .popover-body {
   &::-webkit-scrollbar {
     @include wh-value(10px, null);
   }
@@ -214,12 +218,12 @@ body {
     @include background(null, $theme-bg-color, null, null, null);
   }
   /** Vim Show running instance Details **/
-  .runninginstances{
-     width:200px;
-     .popover-body{
+  .runninginstances {
+    width: 200px;
+    .popover-body {
       max-height: 200px;
       overflow-y: scroll;
-     }
+    }
   }
   /****************************************************************************/
   /************************** Smart table custom design ***********************/
@@ -412,20 +416,24 @@ body {
         }
       }
     }
-    .dropdown-menu {
-      @include border(all, 1, solid, $primary);
-      @include padding-value(0, 0, 0, 0);
-      button.btn.btn-primary {
-        @include background(null, transparent, null, null, null);
-        @include padding-value(8, 8, 8, 8);
-        @include roundedCorners(0);
-        &:hover {
-          @include background(null, $primary, null, null, null);
-          color: $white;
-        }
-        &:not(:last-child) {
-          @include border(bottom, 1, solid, $primary);
-        }
+  }
+  /****************************************************************************/
+  /*********************** List Action Dropdown section ***********************/
+  /****************************************************************************/
+  .list-action-dropdown {
+    @include border(all, 1, solid, $primary);
+    @include padding-value(0, 0, 0, 0);
+    button.btn.btn-primary {
+      @include background(null, transparent, null, null, null);
+      @include padding-value(8, 8, 8, 8);
+      @include roundedCorners(0);
+      color: $primary;
+      &:hover {
+        @include background(null, $primary, null, null, null);
+        color: $white;
+      }
+      &:not(:last-child) {
+        @include border(bottom, 1, solid, $primary);
       }
     }
   }
@@ -682,6 +690,7 @@ body {
 /****************************************************************************/
 @media (max-width: map-get($grid-breakpoints, md)) {
   .smarttable-style {
+    @include flexbox(block, null, null, null, null, null);
     overflow-x: auto;
     white-space: nowrap;
   }

diff --git a/src/services/SharedService.ts b/src/services/SharedService.ts
index 3a138e5..bc4e71a 100644 (file)
--- a/src/services/SharedService.ts
+++ b/src/services/SharedService.ts
@@ -88,6 +88,9 @@ export class SharedService {
     /** Service holds the router information @private */
     private router: Router;
 
+    /** Random color string generator length @private */
+    private colorStringLength: number = 256;
+
     /** Check for the root directory @private */
     private directoryCount: number = 2;
 
@@ -274,6 +277,13 @@ export class SharedService {
             this.restService.handleError(error, 'get');
         });
     }
+    /** Random RGB color code generator @public */
+    public generateColor(): string {
+        const x: number = Math.floor(Math.random() * this.colorStringLength);
+        const y: number = Math.floor(Math.random() * this.colorStringLength);
+        const z: number = Math.floor(Math.random() * this.colorStringLength);
+        return 'rgb(' + x + ',' + y + ',' + z + ')';
+    }
     /** Method to validate file extension and size @private */
     private vaildataFileInfo(fileInfo: File, fileType: string): boolean {
         const extension: string = fileInfo.name.substring(fileInfo.name.lastIndexOf('.') + 1);