fix bug when updating tags for agent groupings

orb-community · Feb 25, 2022 · fc1a418 · fc1a418
1 parent 4a4ec47
commit fc1a418
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 20 deletions.
diff --git a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.html b/ui/src/app/pages/fleet/groups/add/agent.group.add.component.html
@@ -245,17 +245,18 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
           </div>
           <div *ngIf="expanded" class="d-flex row">
             <div class="tag-table">
-              <ngx-datatable
-                #table
-                [columnMode]="columnMode.standard"
-                [columns]="columns"
-                [footerHeight]="50"
-                [headerHeight]="50"
-                [rows]="matchingAgents"
-                [scrollbarV]="true"
-                [rowHeight]="50"
-                class="orb"
-                style="height: 100%;">
+              <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"

diff --git a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss b/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss
@@ -191,7 +191,8 @@ tr div p {
   position: relative;
   left: 0;
   min-height: 18vw;
-  height: 19vw;
+  height: 25vw;
+  max-height: 30vw;
   width: 57vw;
 }
 

diff --git a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.ts b/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';
@@ -16,7 +16,7 @@ import { NotificationsService } from 'app/common/services/notifications/notifica
   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 };
 
@@ -74,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,
@@ -89,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;
@@ -101,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;
 
@@ -121,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: 4,
+        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,
       },
@@ -144,7 +159,9 @@ export class AgentGroupAddComponent implements AfterViewInit {
         prop: 'ts_last_hb',
         cellTemplate: this.agentLastHBTemplateRef,
         minWidth: 130,
+        width: 140,
         resizeable: false,
+        canAutoResize: true,
         sortable: false,
         flexGrow: 2,
       },
@@ -229,7 +246,8 @@ export class AgentGroupAddComponent implements AfterViewInit {
 
       this.tagMatch = summary;
       this.matchingAgents = matches;
-      this.table.recalculate();
+      this.cdr.markForCheck();
+
     }).catch(reason => console.warn(`Couldn't retrieve data. Reason: ${ reason }`));
   }