feat: table groups

eslint.config.mjs

@@ -62,7 +62,8 @@ export default tseslint.config(
             "^@components/",
             "^@services/",
             "^@angular/",
-            "^@pipes/"
+            "^@pipes/",
+            "^@shared/",
           ]
         }
       ],

jest.config.ts

@@ -97,7 +97,8 @@ const config: Config = {
     '@components/(.*)': '<rootDir>/src/app/components/$1',
     '@services/(.*)': '<rootDir>/src/app/services/$1',
     '@pipes/(.*)': '<rootDir>/src/app/pipes/$1',
-    '@app/(.*)': '<rootDir>/src/app/$1'
+    '@app/(.*)': '<rootDir>/src/app/$1',
+    '@shared/(.*)': '<rootDir>/src/app/shared/$1',
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

src/app/applications/components/table.component.html

@@ -1,3 +1,7 @@
-<app-table [trackBy]="trackBy" [columns]="columns" [data]="data()" [total]="total()" [options]="options"
-  [lockColumns]="lockColumns" [actions]="actions" [statusesGroups]="statusesGroups" (optionsChange)="onOptionsChange()"
-  (personnalizeTasksByStatus)="personalizeTasksByStatus()" (columnDrop)="onDrop($event)" />
+<app-table
+  [trackBy]="trackBy" [columns]="columns" [data]="data()" [total]="total()"
+  [options]="options" [lockColumns]="lockColumns" [actions]="actions" [groups]="tableDataService.groups"
+  [statusesGroups]="statusesGroups" (optionsChange)="onOptionsChange()"
+  (personnalizeTasksByStatus)="personalizeTasksByStatus()" (columnDrop)="onDrop($event)"
+  (groupPageChange)="updateGroupPage($event)" (groupSettings)="openGroupSettings($event)"  
+/>

src/app/applications/components/table.component.spec.ts

@@ -1,17 +1,20 @@
 import { TaskStatus } from '@aneoconsultingfr/armonik.api.angular';
 import { Clipboard } from '@angular/cdk/clipboard';
+import { ViewContainerRef, signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { ManageGroupsDialogResult, TasksStatusesGroup } from '@app/dashboard/types';
 import { TableColumn } from '@app/types/column.type';
 import { ApplicationData, ColumnKey } from '@app/types/data';
+import { Group } from '@app/types/groups';
 import { IconsService } from '@services/icons.service';
 import { NotificationService } from '@services/notification.service';
 import { TasksByStatusService } from '@services/tasks-by-status.service';
-import { of } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { ApplicationsTableComponent } from './table.component';
 import ApplicationsDataService from '../services/applications-data.service';
+import { ApplicationsFiltersService } from '../services/applications-filters.service';
 import { ApplicationRaw } from '../types';
 
 describe('TasksTableComponent', () => {
@@ -82,10 +85,11 @@ describe('TasksTableComponent', () => {
     ]
   };
 
+  const afterClosedMocked = jest.fn((): Observable<unknown> => of(mockDialogReturn));
   const mockMatDialog = {
     open: jest.fn(() => {
       return {
-        afterClosed: jest.fn(() => of(mockDialogReturn))
+        afterClosed: afterClosedMocked,
       };
     })
   };
@@ -108,6 +112,13 @@ describe('TasksTableComponent', () => {
     refresh$: {
       next: jest.fn()
     },
+    refreshGroup: jest.fn(),
+    groupsConditions: [],
+    manageGroupDialogResult: jest.fn(),
+  };
+
+  const mockApplicationsFilterService = {
+    saveGroups: jest.fn(),
   };
 
   beforeEach(() => {
@@ -120,7 +131,9 @@ describe('TasksTableComponent', () => {
         { provide: MatDialog, useValue: mockMatDialog },
         { provide: TasksByStatusService, useValue: mockTasksByStatusService },
         IconsService,
-        { provide: Router, useValue: mockRouter }
+        { provide: Router, useValue: mockRouter },
+        { provide: ViewContainerRef, useValue: {} },
+        { provide: ApplicationsFiltersService, useValue: mockApplicationsFilterService },
       ]
     }).inject(ApplicationsTableComponent);
 
@@ -207,9 +220,16 @@ describe('TasksTableComponent', () => {
     });
   });
 
-  it('should track an application by its name and version', () => {
-    const application = {raw: { name: 'application', version: '0.1.2'}} as ApplicationData;
-    expect(component.trackBy(0, application)).toEqual(`${application.raw.name}-${application.raw.version}`);
+  describe('track By', () => {
+    it('should track an application by its name and version', () => {
+      const application = {raw: { name: 'application', version: '0.1.2'}} as ApplicationData;
+      expect(component.trackBy(0, application)).toEqual(`${application.raw.name}-${application.raw.version}`);
+    });
+
+    it('should track group by its name', () => {
+      const group = { name: signal('some-name') } as unknown as Group<ApplicationRaw>;
+      expect(component.trackBy(0, group)).toEqual(group.name());
+    });
   });
 
   it('should get data', () => {
@@ -235,4 +255,34 @@ describe('TasksTableComponent', () => {
   it('should get displayedColumns', () => {
     expect(component.columns).toEqual(displayedColumns);
   });
+
+  describe('UpdateGroupPage', () => {
+    const groupName = 'group 1';
+
+    beforeEach(() => {
+      component.updateGroupPage(groupName);
+    });
+
+    it('should refresh the selected group', () => {
+      expect(mockApplicationsDataService.refreshGroup).toHaveBeenCalledWith(groupName);
+    });
+  });
+
+  describe('openGroupSettings', () => {
+    const groupName = 'Group 1';
+    const result = [{name: 'Renamed Group', conditions: []}];
+
+    beforeEach(() => {
+      afterClosedMocked.mockReturnValueOnce(of(result));
+      component.openGroupSettings(groupName);
+    });
+
+    it('should manage the group dialog result', () => {
+      expect(mockApplicationsDataService.manageGroupDialogResult).toHaveBeenCalledWith(result);
+    });
+
+    it('should update the groups in the local storage', () => {
+      expect(mockApplicationsFilterService.saveGroups).toHaveBeenCalledWith(mockApplicationsDataService.groupsConditions);
+    });
+  });
 });

src/app/applications/components/table.component.ts

@@ -4,13 +4,15 @@ import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { AbstractTaskByStatusTableComponent } from '@app/types/components/table';
 import { ArmonikData } from '@app/types/data';
+import { Group } from '@app/types/groups';
 import { ActionTable } from '@app/types/table';
 import { TableComponent } from '@components/table/table.component';
 import { FiltersService } from '@services/filters.service';
 import { IconsService } from '@services/icons.service';
 import { TableTasksByStatus, TasksByStatusService } from '@services/tasks-by-status.service';
 import { Subject } from 'rxjs';
 import ApplicationsDataService from '../services/applications-data.service';
+import { ApplicationsFiltersService } from '../services/applications-filters.service';
 import { ApplicationRaw } from '../types';
 
 @Component({
@@ -31,6 +33,7 @@ export class ApplicationsTableComponent extends AbstractTaskByStatusTableCompone
   table: TableTasksByStatus = 'applications';
 
   readonly tableDataService = inject(ApplicationsDataService);
+  readonly filtersService = inject(ApplicationsFiltersService);
   readonly iconsService = inject(IconsService);
   readonly router = inject(Router);
 
@@ -65,7 +68,11 @@ export class ApplicationsTableComponent extends AbstractTaskByStatusTableCompone
     };
   }
 
-  trackBy(index: number, item: ArmonikData<ApplicationRaw>) {
-    return `${item.raw.name}-${item.raw.version}`;
+  trackBy(index: number, item: ArmonikData<ApplicationRaw> | Group<ApplicationRaw>) {
+    if ((item as ArmonikData<ApplicationRaw>).raw !== undefined) {
+      return `${(item as ArmonikData<ApplicationRaw>).raw.name}-${(item as ArmonikData<ApplicationRaw>).raw.version}`;
+    } else {
+      return (item as Group<ApplicationRaw>).name();
+    }
   }
 }

src/app/applications/index.component.html

@@ -13,13 +13,15 @@
       [displayedColumns]="displayedColumnsKeys"
       [availableColumns]="availableColumns"
       [lockColumns]="lockColumns"
+      [groupsLength]="tableDataService.groupsConditions.length"
       (refresh)="refresh()"
       (intervalValueChange)="onIntervalValueChange($event)"
       (displayedColumnsChange)="onColumnsChange($event)"
       (resetColumns)="onColumnsReset()"
       (resetFilters)="onFiltersReset()"
       (lockColumnsChange)="onLockColumnsChange()"
       (addToDashboard)="onAddToDashboard()"
+      (groupSettings)="openGroupsSettings()"
     >
     </app-table-index-actions-toolbar>
   </mat-toolbar-row>

src/app/applications/index.component.spec.ts

@@ -1,4 +1,5 @@
 import { ApplicationRawEnumField, FilterStringOperator } from '@aneoconsultingfr/armonik.api.angular';
+import { ViewContainerRef } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { MatDialog } from '@angular/material/dialog';
 import { DashboardIndexService } from '@app/dashboard/services/dashboard-index.service';
@@ -129,7 +130,10 @@ describe('Application component', () => {
     saveFilters: jest.fn(),
     resetFilters: jest.fn(() => defaultFilters),
     saveShowFilters: jest.fn(),
-    restoreShowFilters: jest.fn(() => defaultShowFilters)
+    restoreShowFilters: jest.fn(() => defaultShowFilters),
+    restoreGroups: jest.fn(() => []),
+    saveGroups: jest.fn(),
+    resetGroups: jest.fn()
   };
 
 
@@ -152,6 +156,21 @@ describe('Application component', () => {
     refresh$: {
       next: jest.fn()
     },
+    groups: [],
+    groupsConditions: [],
+    initGroups: jest.fn(),
+    manageGroupDialogResult: jest.fn(),
+  };
+
+  const dialogResult: unknown[] = [];
+  const mockmatDialog = {
+    open: () => {
+      return {
+        afterClosed: () => {
+          return of(dialogResult);
+        }
+      };
+    }
   };
 
   beforeEach(() => {
@@ -164,19 +183,10 @@ describe('Application component', () => {
         { provide: ShareUrlService, useValue: mockShareUrlService },
         { provide: ApplicationsIndexService, useValue: mockApplicationIndexService },
         { provide: AutoRefreshService, useValue: mockAutoRefreshService },
-        { provide: MatDialog, useValue:
-          {
-            open: () => {
-              return {
-                afterClosed: () => {
-                  return of([]);
-                }
-              };
-            }
-          }
-        },
+        { provide: MatDialog, useValue: mockmatDialog },
         { provide: DashboardIndexService, useValue: mockDashboardIndexService },
         DefaultConfigService,
+        { provide: ViewContainerRef, useValue: {} },
       ]
     }).inject(IndexComponent);
 
@@ -201,6 +211,11 @@ describe('Application component', () => {
     expect(component.availableColumns).toEqual(displayedColumns.map(col => col.key));
   });
 
+  it('should init groups on init', () => {
+    expect(mockApplicationsDataService.groupsConditions).toEqual(mockApplicationsFilterService.restoreGroups());
+    expect(mockApplicationsDataService.initGroups).toHaveBeenCalled();
+  });
+
   it('should get page icon', () => {
     expect(component.getIcon('applications')).toEqual('apps');
   });
@@ -409,6 +424,7 @@ describe('Application component', () => {
         displayedColumns: component.displayedColumnsKeys,
         options: defaultOptions,
         filters: component.filters,
+        groups: mockApplicationsDataService.groupsConditions,
       });
     });
   });
@@ -426,4 +442,18 @@ describe('Application component', () => {
       expect(mockApplicationsFilterService.saveShowFilters).toHaveBeenCalledWith(newShowFilters);
     });
   });
+
+  describe('openGroupsSettings', () => {
+    beforeEach(() => {
+      component.openGroupsSettings();
+    });
+
+    it('should manage the group dialogResult', () => {
+      expect(mockApplicationsDataService.manageGroupDialogResult).toHaveBeenCalledWith(dialogResult);
+    });
+
+    it('should save the groups', () => {
+      expect(mockApplicationsFilterService.saveGroups).toHaveBeenCalledWith(mockApplicationsDataService.groupsConditions);
+    });
+  });
 });

src/app/applications/index.component.ts

@@ -19,6 +19,7 @@ import { CacheService } from '@services/cache.service';
 import { FiltersService } from '@services/filters.service';
 import { GrpcSortFieldService } from '@services/grpc-sort-field.service';
 import { IconsService } from '@services/icons.service';
+import { InvertFilterService } from '@services/invert-filter.service';
 import { NotificationService } from '@services/notification.service';
 import { QueryParamsService } from '@services/query-params.service';
 import { ShareUrlService } from '@services/share-url.service';
@@ -63,6 +64,7 @@ import { ApplicationRaw } from './types';
     NotificationService,
     FiltersService,
     GrpcSortFieldService,
+    InvertFilterService,
   ],
   imports: [
     PageHeaderComponent,