fix(orb-ui): agent group matching agents list issues

ui/src/app/@theme/styles/themes.scss

@@ -7,7 +7,7 @@
 @import './material/material-light';
 
 $nb-themes: nb-register-theme((
-  layout-padding-top: 2.25rem,
+  layout-padding-top: 1rem,
   menu-item-icon-margin: 0 0.5rem 0 0,
   card-height-tiny: 13.5rem,
   card-height-small: 21.1875rem,
@@ -25,7 +25,7 @@ $nb-themes: nb-register-theme((
 ), default, default);
 
 $nb-themes: nb-register-theme((
-  layout-padding-top: 2.25rem,
+  layout-padding-top: 1rem,
   menu-item-icon-margin: 0 0.5rem 0 0,
   card-height-tiny: 13.5rem,
   card-height-small: 21.1875rem,
@@ -42,7 +42,7 @@ $nb-themes: nb-register-theme((
 ), cosmic, cosmic);
 
 $nb-themes: nb-register-theme((
-  layout-padding-top: 2.25rem,
+  layout-padding-top: 1rem,
   menu-item-icon-margin: 0 0.5rem 0 0,
   card-height-tiny: 13.5rem,
   card-height-small: 21.1875rem,
@@ -59,7 +59,7 @@ $nb-themes: nb-register-theme((
 ), corporate, corporate);
 
 $nb-themes: nb-register-theme((
-  layout-padding-top: 2.25rem,
+  layout-padding-top: 1rem,
   menu-item-icon-margin: 0 0.5rem 0 0,
   card-height-tiny: 13.5rem,
   card-height-small: 21.1875rem,
@@ -76,7 +76,7 @@ $nb-themes: nb-register-theme((
 ), dark, dark);
 
 $nb-themes: nb-register-theme((
-  layout-padding-top: 2.25rem,
+  layout-padding-top: 1rem,
   menu-item-icon-margin: 0 0.5rem 0 0,
   card-height-tiny: 13.5rem,
   card-height-small: 21.1875rem,
@@ -94,7 +94,7 @@ $nb-themes: nb-register-theme((
 ), material-light, material-light);
 
 $nb-themes: nb-register-theme((
-  layout-padding-top: 2.25rem,
+  layout-padding-top: 1rem,
   menu-item-icon-margin: 0 0.5rem 0 0,
   card-height-tiny: 13.5rem,
   card-height-small: 21.1875rem,
@@ -115,7 +115,7 @@ $nb-themes: nb-register-theme((
   // outter layout
   layout-padding-left: 0,
   layout-padding-right: 0,
-  layout-padding-top: 1.75rem,
+  layout-padding-top: 1rem !important,
   // nav menu
   scrollable-padding: 10px 0 12px 0,
   //menu-card-height-tiny: 13.5rem,
@@ -152,6 +152,7 @@ $nb-themes: nb-register-theme((
   slide-out-shadow-color: 0 4px 14px 0 #292929,
   slide-out-shadow-color-rtl: 0 4px 14px 0 #292929,
   // Stepper
+  stepper-step-margin-left: 1rem,
   stepper-step-index-border-color: #969fb9,
   stepper-step-index-active-border-color: #df316f,
   stepper-step-active-text-color: #df316f,

ui/src/app/pages/datasets/add/dataset.add.component.html

@@ -11,7 +11,7 @@ <h4>{{isEdit ? 'Edit Dataset' : 'New Dataset'}}</h4>
   </header>
   <div *ngIf="!isLoading()" class="d-flex row">
     <div class="d-flex col-12 mt-5">
-      <nb-stepper class="stepper w-100 ml-5"
+      <nb-stepper class="stepper w-100 ml-2"
                   disableStepNavigation
                   orientation="vertical">
         <nb-step [label]="firstStepTemplate"

ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.html

@@ -12,7 +12,7 @@ <h4>{{ isEdit ? 'Edit Agent Policy' : 'Create Agent Policy'}}</h4>
   <div *ngIf="!isLoading['backend'] && !isLoading['taps'] && !isLoading['inputs'] && !isLoading['handlers']"
        class="d-flex row">
     <div class="d-flex col-12 mt-5">
-      <nb-stepper class="stepper w-100 ml-5"
+      <nb-stepper class="stepper w-100 ml-2"
                   disableStepNavigation
                   orientation="vertical">
         <nb-step [label]="firstStepTemplate"

ui/src/app/pages/fleet/agents/add/agent.add.component.html

@@ -8,7 +8,7 @@ <h4>{{isEdit ? 'Edit Agent' : 'New Agent'}}</h4>
   <div class="d-flex row">
     <div class="d-flex col-12 mt-5"
          *ngIf="!isLoading">
-      <nb-stepper class="stepper w-100 ml-5"
+      <nb-stepper class="stepper w-100 ml-2"
                   disableStepNavigation
                   orientation="vertical">
         <nb-step [label]="firstStepTemplate"

ui/src/app/pages/fleet/groups/add/agent.group.add.component.html

@@ -5,9 +5,9 @@
     <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
   </header>
   <div class="d-flex row">
-    <div class="d-flex col-12 mt-5">
+    <div class="d-flex col-12 mt-md-0 mt-lg-3">
       <nb-stepper *ngIf="!isLoading"
-                  class="stepper w-100 ml-5"
+                  class="stepper w-100 ml-sm-0 ml-lg-2"
                   disableStepNavigation
                   orientation="vertical">
         <nb-step [label]="firstStepTemplate"
@@ -205,8 +205,8 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
                 <p>{{firstFormGroup.controls.description.value}}</p>
               </div>
             </div>
+            <hr/>
           </div>
-          <hr/>
           <div class="d-flex row">
             <div class="col-12">
               <mat-chip-list>
@@ -243,19 +243,20 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
               </div>
             </div>
           </div>
-          <hr/>
           <div *ngIf="expanded" class="d-flex row">
             <div class="tag-table">
-              <ngx-datatable
-                [columnMode]="columnMode.flex"
-                [columns]="columns"
-                [footerHeight]="50"
-                [headerHeight]="50"
-                [rowHeight]="50"
-                [rows]="matchingAgents"
-                [scrollbarV]="true"
-                class="orb w-100"
-                style="height: 500px;">
+              <ngx-datatable #table
+                             *ngIf="columns"
+                             [columnMode]="columnMode.standard"
+                             [columns]="columns"
+                             [footerHeight]="50"
+                             [headerHeight]="50"
+                             [rowHeight]="50"
+                             [rows]="matchingAgents"
+                             [scrollbarV]="true"
+                             [virtualization]="false"
+                             class="orb"
+                             style="height: 100%;">
               </ngx-datatable>
             </div>
           </div>
@@ -304,7 +305,7 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
 </ng-template>
 
 <ng-template #agentTagsTemplateCell let-i="index" let-row="row" let-value="value">
-  <div class="d-flex">
+  <div class="d-block">
     <mat-chip-list>
       <mat-chip
         *ngFor="let tag of value | keyvalue"
@@ -318,6 +319,6 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
 
 <ng-template #agentLastHBTemplateCell let-i="index" let-row="row" let-value="value">
   <div>
-    {{ row.ts_last_hb | date: 'medium' }}
+    {{ row.ts_last_hb | date: 'short' }}
   </div>
 </ng-template>

ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss

@@ -41,6 +41,10 @@ mat-chip nb-icon {
     }
   }
 
+  nb-layout-column {
+    padding: 1rem 1rem 0.75rem !important;
+  }
+
   .step {
     flex-direction: row-reverse !important;
     align-items: start !important;
@@ -186,7 +190,10 @@ tr div p {
 .tag-table {
   position: relative;
   left: 0;
-  width: 900px;
+  min-height: 18vw;
+  height: 25vw;
+  max-height: 30vw;
+  width: 57vw;
 }
 
 .orb-service- {

ui/src/app/pages/fleet/groups/add/agent.group.add.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, TemplateRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { STRINGS } from 'assets/text/strings';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -8,15 +8,15 @@ import { TagMatch } from 'app/common/interfaces/orb/tag.match.interface';
 import { Agent } from 'app/common/interfaces/orb/agent.interface';
 import { DropdownFilterItem } from 'app/common/interfaces/mainflux.interface';
 import { AgentsService } from 'app/common/services/agents/agents.service';
-import { ColumnMode, TableColumn } from '@swimlane/ngx-datatable';
+import { ColumnMode, DatatableComponent, TableColumn } from '@swimlane/ngx-datatable';
 import { NotificationsService } from 'app/common/services/notifications/notifications.service';
 
 @Component({
   selector: 'ngx-agent-group-add-component',
   templateUrl: './agent.group.add.component.html',
   styleUrls: ['./agent.group.add.component.scss'],
 })
-export class AgentGroupAddComponent implements AfterViewInit {
+export class AgentGroupAddComponent implements OnInit, OnChanges, AfterViewInit {
   // page vars
   strings = { ...STRINGS.agentGroups, stepper: STRINGS.stepper };
 
@@ -26,6 +26,9 @@ export class AgentGroupAddComponent implements AfterViewInit {
 
   columns: TableColumn[];
 
+  // table
+  @ViewChild(DatatableComponent) table: DatatableComponent;
+
   // templates
   @ViewChild('agentTagsTemplateCell') agentTagsTemplateCell: TemplateRef<any>;
 
@@ -71,6 +74,7 @@ export class AgentGroupAddComponent implements AfterViewInit {
   constructor(
     private agentGroupsService: AgentGroupsService,
     private agentsService: AgentsService,
+    private cdr: ChangeDetectorRef,
     private notificationsService: NotificationsService,
     private router: Router,
     private route: ActivatedRoute,
@@ -86,7 +90,9 @@ export class AgentGroupAddComponent implements AfterViewInit {
 
     this.agentGroupID = this.route.snapshot.paramMap.get('id');
     this.isEdit = !!this.agentGroupID;
+  }
 
+  ngOnInit() {
     this.getAgentGroup()
       .then((agentGroup) => {
         this.agentGroup = agentGroup;
@@ -98,6 +104,12 @@ export class AgentGroupAddComponent implements AfterViewInit {
       .catch(reason => console.warn(`Couldn't retrieve data. Reason: ${ reason }`));
   }
 
+  ngOnChanges() {
+    this.table.rows = this.matchingAgents;
+    this.table.recalculate();
+
+  }
+
   initializeForms() {
     const { name, description } = this.agentGroup;
 
@@ -118,21 +130,27 @@ export class AgentGroupAddComponent implements AfterViewInit {
         prop: 'name',
         name: 'Agent Name',
         resizeable: false,
+        canAutoResize: true,
         flexGrow: 1,
-        minWidth: 90,
+        minWidth: 150,
+        width: 175,
       },
       {
         prop: 'orb_tags',
         name: 'Tags',
         resizeable: false,
-        minWidth: 100,
-        flexGrow: 2,
+        minWidth: 250,
+        width: 350,
+        canAutoResize: true,
+        flexGrow: 10,
         cellTemplate: this.agentTagsTemplateCell,
       },
       {
         prop: 'state',
         name: 'Status',
-        minWidth: 90,
+        minWidth: 100,
+        width: 100,
+        canAutoResize: true,
         flexGrow: 1,
         cellTemplate: this.agentStateTemplateRef,
       },
@@ -141,9 +159,11 @@ export class AgentGroupAddComponent implements AfterViewInit {
         prop: 'ts_last_hb',
         cellTemplate: this.agentLastHBTemplateRef,
         minWidth: 130,
+        width: 140,
         resizeable: false,
+        canAutoResize: true,
         sortable: false,
-        flexGrow: 1,
+        flexGrow: 2,
       },
     ];
   }
@@ -226,6 +246,8 @@ export class AgentGroupAddComponent implements AfterViewInit {
 
       this.tagMatch = summary;
       this.matchingAgents = matches;
+      this.cdr.markForCheck();
+
     }).catch(reason => console.warn(`Couldn't retrieve data. Reason: ${ reason }`));
   }
 

ui/src/app/pages/sinks/add/sink.add.component.html

@@ -11,7 +11,7 @@ <h4>{{strings.sink[isEdit ? 'edit' : 'add']['header']}}</h4>
   </header>
   <div *ngIf="!isLoading" class="d-flex row">
     <div class="d-flex col-12 mt-5">
-      <nb-stepper class="stepper w-100 ml-5"
+      <nb-stepper class="stepper w-100 ml-2"
                   disableStepNavigation
                   orientation="vertical">
         <nb-step [label]="firstStepTemplate"

ui/src/app/styles/mainflux.scss

@@ -127,6 +127,8 @@ nb-sidebar {
 }
 
 // Pages padding
-.nb-theme-default nb-layout .layout .layout-container .content .columns nb-layout-column {
-  padding: 1.25rem 2.25rem 0.75rem;
+::ng-deep {
+  .nb-theme-default nb-layout .layout .layout-container .content .columns nb-layout-column {
+    padding: 1rem 1rem 0.75rem !important;
+  }
 }