feat(orb-ui) #685 All list pages, header checkbox

orb-community · Jun 20, 2023 · 9bcca91 · 9bcca91
1 parent f1bba5b
commit 9bcca91
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 19 deletions.
diff --git a/ui/src/app/common/services/filter.service.ts b/ui/src/app/common/services/filter.service.ts
@@ -90,10 +90,12 @@ export class FilterService {
               const filterDef = filterOptions.find(
                 (_item) => _item.name === _filter.name,
               );
-              const {filter: filterFn, prop, exact} = filterDef;
-              const result =
+              if (filterDef) {
+                const {filter: filterFn, prop, exact} = filterDef;
+                const result =
                 !!filterFn && filterFn(value, prop, paramValue, exact);
-              return result;
+                return result;
+              }
             });
           });
 

diff --git a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.html b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.html
@@ -147,4 +147,8 @@ <h4>All Policies</h4>
 <ng-template #checkboxTemplateCell let-i="index" let-row="row" let-value="value">
   <input type="checkbox" [checked]="getChecked(row)" 
   (change)="onCheckboxChange($event, row)">
-</ng-template>
+</ng-template>
+
+<ng-template #checkboxTemplateHeader>
+  <input type="checkbox" (change)="onHeaderCheckboxChange($event)">
+</ng-template>
diff --git a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts
@@ -28,7 +28,7 @@ import { NotificationsService } from 'app/common/services/notifications/notifica
 import { OrbService } from 'app/common/services/orb.service';
 import { AgentPolicyDeleteComponent } from 'app/pages/datasets/policies.agent/delete/agent.policy.delete.component';
 import { DeleteSelectedComponent } from 'app/shared/components/delete/delete.selected.component';
-import { combineLatest, Observable } from 'rxjs';
+import { combineLatest, Observable, Subscription } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { STRINGS } from '../../../../../assets/text/strings';
 
@@ -50,6 +50,8 @@ export class AgentPolicyListComponent
 
   selected: any[] = [];
 
+  private policiesSubscription: Subscription;
+
   @ViewChild('nameTemplateCell') nameTemplateCell: TemplateRef<any>;
 
   @ViewChild('versionTemplateCell') versionTemplateCell: TemplateRef<any>;
@@ -60,6 +62,8 @@ export class AgentPolicyListComponent
 
   @ViewChild('checkboxTemplateCell') checkboxTemplateCell: TemplateRef<any>;
 
+  @ViewChild('checkboxTemplateHeader') checkboxTemplateHeader: TemplateRef<any>;
+
   tableSorts = [
     {
       prop: 'name',
@@ -92,7 +96,7 @@ export class AgentPolicyListComponent
     private filters: FilterService,
   ) {
     this.filters$ = this.filters.getFilters();
-
+    this.selected = [];
     this.policies$ = combineLatest([
       this.orb.getPolicyListView(),
       this.orb.getDatasetListView()
@@ -165,6 +169,9 @@ export class AgentPolicyListComponent
   }
 
   ngOnDestroy(): void {
+    if (this.policiesSubscription) {
+      this.policiesSubscription.unsubscribe();
+    }
     this.orb.killPolling.next();
   }
 
@@ -193,6 +200,7 @@ export class AgentPolicyListComponent
         canAutoResize: true,
         sortable: false,
         cellTemplate: this.checkboxTemplateCell,
+        headerTemplate: this.checkboxTemplateHeader,
       },
       {
         prop: 'name',
@@ -349,12 +357,31 @@ export class AgentPolicyListComponent
         }
       }
     }
-    console.log(this.selected);
   }
 
   public getChecked(row: any): boolean {
     const item = this.selected.filter((e) => e.id === row.id);
     return item.length > 0 ? true : false;
   }
-}
 
+  onHeaderCheckboxChange(event: any) {
+    if (event.target.checked && this.filteredPolicies$) {
+      this.policiesSubscription = this.filteredPolicies$.subscribe(rows => {
+        this.selected = [];
+        rows.forEach(row => {
+          const policySelected = {
+            id: row.id,
+            name: row.name,
+            usage: row.policy_usage,
+          }
+          this.selected.push(policySelected);
+        });
+      });
+    } else {
+      if (this.policiesSubscription) {
+        this.policiesSubscription.unsubscribe();
+      }
+      this.selected = [];
+    }
+  }
+}
diff --git a/ui/src/app/pages/fleet/agents/list/agent.list.component.html b/ui/src/app/pages/fleet/agents/list/agent.list.component.html
@@ -171,6 +171,10 @@ <h4>All Agents</h4>
   (change)="onCheckboxChange($event, row)">
 </ng-template>
 
+<ng-template #checkboxTemplateHeader>
+  <input type="checkbox" (change)="onHeaderCheckboxChange($event)">
+</ng-template>
+
 <ng-template
         #agentVersionTemplateCell
         let-i="index"
@@ -179,4 +183,4 @@ <h4>All Agents</h4>
 >
   <span [nbTooltip]="value">
     {{ value }}</span>
-</ng-template>
+</ng-template>
diff --git a/ui/src/app/pages/fleet/agents/list/agent.list.component.ts b/ui/src/app/pages/fleet/agents/list/agent.list.component.ts
@@ -30,7 +30,7 @@ import { AgentDeleteComponent } from 'app/pages/fleet/agents/delete/agent.delete
 import { AgentDetailsComponent } from 'app/pages/fleet/agents/details/agent.details.component';
 import { DeleteSelectedComponent } from 'app/shared/components/delete/delete.selected.component';
 import { STRINGS } from 'assets/text/strings';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { AgentResetComponent } from '../reset/agent.reset.component';
 
@@ -53,6 +53,9 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
   canResetAgents: boolean;
 
   isResetting: boolean;
+
+  private agentsSubscription: Subscription;
+
 
   // templates
   @ViewChild('agentNameTemplateCell') agentNameTemplateCell: TemplateRef<any>;
@@ -72,6 +75,8 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
 
   @ViewChild('agentVersionTemplateCell') agentVersionTemplateCell: TemplateRef<any>;
 
+  @ViewChild('checkboxTemplateHeader') checkboxTemplateHeader: TemplateRef<any>;
+
   tableSorts = [
     {
       prop: 'name',
@@ -161,6 +166,9 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
   }
 
   ngOnDestroy() {
+    if (this.agentsSubscription) {
+      this.agentsSubscription.unsubscribe();
+    }
     this.orb.killPolling.next();
   }
 
@@ -188,6 +196,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
         canAutoResize: true,
         sortable: false,
         cellTemplate: this.checkboxTemplateCell,
+        headerTemplate: this.checkboxTemplateHeader,
       },
       {
         prop: 'name',
@@ -283,7 +292,6 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
     }
     const reset = this.selected.filter((e) => e.resetable === false);
     this.canResetAgents = reset.length > 0 ? true : false;
-    console.log(this.selected);
   }
 
 
@@ -382,6 +390,31 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
       this.isResetting = false;
     }
   }
+
+  onHeaderCheckboxChange(event: any) {
+    if (event.target.checked && this.filteredAgents$) {
+      this.agentsSubscription = this.filteredAgents$.subscribe(rows => {
+        this.selected = [];
+        rows.forEach(row => {
+          const policySelected = {
+            id: row.id,
+            name: row.name,
+            state: row.state,
+            resetable: row.state === 'new' || row.state === 'offline' ? false : true,
+          }
+          this.selected.push(policySelected);
+        });
+      });
+    } else {
+      if (this.agentsSubscription) {
+        this.agentsSubscription.unsubscribe();
+      }
+      this.selected = [];
+    }
+    const reset = this.selected.filter((e) => e.resetable === false);
+    this.canResetAgents = reset.length > 0 ? true : false;
+  }
+
   openDetailsModal(row: any) {
     this.dialogService
       .open(AgentDetailsComponent, {

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
@@ -279,7 +279,6 @@ export class AgentGroupAddComponent
     const payload = this.wrapPayload(false);
 
     // // remove line bellow
-    // console.log(payload)
     if (this.isEdit) {
       this.agentGroupsService
         .editAgentGroup({ ...payload, id: this.agentGroupID })

diff --git a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.html b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.html
@@ -137,4 +137,8 @@ <h4>{{ strings.list.header }}</h4>
 <ng-template #checkboxTemplateCell let-i="index" let-row="row" let-value="value">
   <input type="checkbox" [checked]="getChecked(row)" 
   (change)="onCheckboxChange($event, row)">
-</ng-template>
+</ng-template>
+
+<ng-template #checkboxTemplateHeader>
+  <input type="checkbox" (change)="onHeaderCheckboxChange($event)">
+</ng-template>
diff --git a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts
@@ -31,7 +31,7 @@ import { AgentGroupDeleteComponent } from 'app/pages/fleet/groups/delete/agent.g
 import { AgentGroupDetailsComponent } from 'app/pages/fleet/groups/details/agent.group.details.component';
 import { DeleteSelectedComponent } from 'app/shared/components/delete/delete.selected.component';
 import { STRINGS } from 'assets/text/strings';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 
 @Component({
   selector: 'ngx-agent-group-list-component',
@@ -52,6 +52,8 @@ export class AgentGroupListComponent
 
   selected: any[] = [];
 
+  private groupsSubscription: Subscription;
+
   // templates
   @ViewChild('agentGroupNameTemplateCell')
   agentGroupNameTemplateCell: TemplateRef<any>;
@@ -66,6 +68,8 @@ export class AgentGroupListComponent
 
   @ViewChild('checkboxTemplateCell') checkboxTemplateCell: TemplateRef<any>;
 
+  @ViewChild('checkboxTemplateHeader') checkboxTemplateHeader: TemplateRef<any>;
+
   filterValue = null;
 
   tableSorts = [
@@ -139,6 +143,9 @@ export class AgentGroupListComponent
   }
 
   ngOnDestroy(): void {
+    if (this.groupsSubscription) {
+      this.groupsSubscription.unsubscribe();
+    }
     this.orb.killPolling.next();
   }
 
@@ -166,6 +173,7 @@ export class AgentGroupListComponent
         canAutoResize: true,
         sortable: false,
         cellTemplate: this.checkboxTemplateCell,
+        headerTemplate: this.checkboxTemplateHeader,
       },
       {
         prop: 'name',
@@ -317,11 +325,30 @@ export class AgentGroupListComponent
         }
       }
     }
-    console.log(this.selected);
   }
 
   public getChecked(row: any): boolean {
     const item = this.selected.filter((e) => e.id === row.id);
     return item.length > 0 ? true : false;
   }
+
+  onHeaderCheckboxChange(event: any) {
+    if (event.target.checked && this.filteredGroups$) {
+      this.groupsSubscription = this.filteredGroups$.subscribe(rows => {
+        this.selected = [];
+        rows.forEach(row => {
+          const policySelected = {
+            id: row.id,
+            name: row.name,
+          }
+          this.selected.push(policySelected);
+        });
+      });
+    } else {
+      if (this.groupsSubscription) {
+        this.groupsSubscription.unsubscribe();
+      }
+      this.selected = [];
+    }
+  }
 }
diff --git a/ui/src/app/pages/sinks/list/sink.list.component.html b/ui/src/app/pages/sinks/list/sink.list.component.html
@@ -131,3 +131,7 @@ <h4>{{ strings.list.header }}</h4>
   <input type="checkbox" [checked]="getChecked(row)" 
   (change)="onCheckboxChange($event, row)">
 </ng-template>
+
+<ng-template #checkboxTemplateHeader>
+  <input type="checkbox" (change)="onHeaderCheckboxChange($event)">
+</ng-template>
diff --git a/ui/src/app/pages/sinks/list/sink.list.component.ts b/ui/src/app/pages/sinks/list/sink.list.component.ts
@@ -33,7 +33,7 @@ import { SinksService } from 'app/common/services/sinks/sinks.service';
 import { SinkDeleteComponent } from 'app/pages/sinks/delete/sink.delete.component';
 import { SinkDetailsComponent } from 'app/pages/sinks/details/sink.details.component';
 import { STRINGS } from 'assets/text/strings';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { DeleteSelectedComponent } from 'app/shared/components/delete/delete.selected.component';
 
 @Component({
@@ -52,6 +52,8 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
 
   selected: any[] = [];
 
+  private sinksSubscription: Subscription;
+
   // templates
   @ViewChild('sinkNameTemplateCell') sinkNameTemplateCell: TemplateRef<any>;
 
@@ -63,6 +65,8 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
 
   @ViewChild('checkboxTemplateCell') checkboxTemplateCell: TemplateRef<any>;
 
+  @ViewChild('checkboxTemplateHeader') checkboxTemplateHeader: TemplateRef<any>;
+
   tableSorts = [
     {
       prop: 'name',
@@ -139,6 +143,9 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
   }
 
   ngOnDestroy(): void {
+    if (this.sinksSubscription) {
+      this.sinksSubscription.unsubscribe();
+    }
     this.orb.killPolling.next();
   }
 
@@ -166,6 +173,7 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
         canAutoResize: true,
         sortable: false,
         cellTemplate: this.checkboxTemplateCell,
+        headerTemplate: this.checkboxTemplateHeader,
       },
       {
         prop: 'name',
@@ -318,11 +326,30 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
         }
       }
     }
-    console.log(this.selected);
   }
 
   public getChecked(row: any): boolean {
     const item = this.selected.filter((e) => e.id === row.id);
     return item.length > 0 ? true : false;
   }
+  onHeaderCheckboxChange(event: any) {
+    if (event.target.checked && this.filteredSinks$)  {
+      this.sinksSubscription = this.filteredSinks$.subscribe(rows => {
+        this.selected = [];
+        rows.forEach(row => {
+          const sinkSelected = {
+            id: row.id,
+            name: row.name,
+            state: row.state,
+          }
+          this.selected.push(sinkSelected);
+        });
+      });
+    } else {
+      if (this.sinksSubscription) {
+        this.sinksSubscription.unsubscribe();
+      }
+      this.selected = [];
+    }
+  }
 }