114 filter by backup id is broken

apps/frontend/src/app/backups-overview/backups/backups/backupfilter.ts

@@ -8,25 +8,29 @@ export class CustomFilter implements ClrDatagridFilterInterface<Backup> {
     toDate: string | null;
     fromSizeMB: number | null;
     toSizeMB: number | null;
+    id: string | null;
   } = {
     fromDate: null,
     toDate: null,
     fromSizeMB: null,
     toSizeMB: null,
+    id: null,
   };
 
   public changes = new Subject<any>();
-  public filterType: 'date' | 'size';
+  public filterType: 'date' | 'size' | 'id';
 
-  constructor(filterType: 'date' | 'size') {
+  constructor(filterType: 'date' | 'size' | 'id') {
     this.filterType = filterType;
   }
 
   isActive(): boolean {
     if (this.filterType === 'date') {
       return !!(this.ranges.fromDate || this.ranges.toDate);
-    } else {
+    } else if (this.filterType === 'size') {
       return !!(this.ranges.fromSizeMB || this.ranges.toSizeMB);
+    } else {
+      return !!this.ranges.id;
     }
   }
 

apps/frontend/src/app/backups-overview/backups/backups/backups.component.html

@@ -6,20 +6,29 @@ <h1 class="header">Backups Overview</h1>
       <div class="card-text">
         <p>On this page, you can:</p>
         <ul>
-          <li><strong>See Alerts</strong>: View the current status and details of any alerts that have been triggered.
-            Alerts are categorized by their severity.
+          <li>
+            <strong>See Alerts</strong>: View the current status and details of
+            any alerts that have been triggered. Alerts are categorized by their
+            severity.
           </li>
-          <li><strong>See all backups with basic data</strong>: Browse through a list of all backups, including
-            essential information such as Backup ID, size and creation date.
+          <li>
+            <strong>See all backups with basic data</strong>: Browse through a
+            list of all backups, including essential information such as Backup
+            ID, size and creation date.
           </li>
-          <li><strong>See how the size of the backup evolved over time</strong>: Visualize the changes in backup sizes
-            over time through the <strong>Recent Backup Timeline</strong> chart, helping you understand the growth and
-            trends in your backup data.
+          <li>
+            <strong>See how the size of the backup evolved over time</strong>:
+            Visualize the changes in backup sizes over time through the
+            <strong>Recent Backup Timeline</strong> chart, helping you
+            understand the growth and trends in your backup data.
           </li>
-          <li><strong>See Recent Backup Size Distribution</strong>: Analyze the recent distribution of backup sizes
-            through the
+          <li>
+            <strong>See Recent Backup Size Distribution</strong>: Analyze the
+            recent distribution of backup sizes through the
             <strong>Recent Backup Size Distribution</strong> chart.
+          </li>
         </ul>
+
         <p>More insights will follow.</p>
       </div>
     </div>
@@ -54,8 +63,6 @@ <h4>Recent Backup Size Distribution:</h4>
       <div id="backupSizeChart" style="width: 100%; height: 400px"></div>
     </div>
   </div>
-
-
 </div>
 <div class="clr-row">
   <div class="clr-col-lg-12 clr-col-lg-12">
@@ -65,7 +72,21 @@ <h3>All Backups:</h3>
       (clrDgRefresh)="refresh($event)"
       [clrDgLoading]="loading"
     >
-      <clr-dg-column [clrDgField]="'id'">Backup ID</clr-dg-column>
+      <clr-dg-column [clrDgField]="'id'">
+        <ng-container *clrDgHideableColumn>
+          Backup ID
+          <clr-dg-filter [clrDgFilter]="backupIdFilter">
+            <clr-input-container>
+              <label>ID:</label>
+              <input
+                clrInput
+                type="string"
+                [(ngModel)]="backupIdFilter.ranges.id"
+                (ngModelChange)="backupSizeFilter.updateRanges({ id: $event })"
+              />
+            </clr-input-container>
+          </clr-dg-filter> </ng-container
+      ></clr-dg-column>
       <clr-dg-column [clrDgField]="'sizeMB'">
         <ng-container *clrDgHideableColumn>
           Size (MB)
@@ -165,4 +186,4 @@ <h3>All Backups:</h3>
       </clr-dg-footer>
     </clr-datagrid>
   </div>
-</div>
+</div>

apps/frontend/src/app/backups-overview/backups/backups/backups.component.spec.ts

@@ -123,6 +123,7 @@ describe('BackupsComponent', () => {
       dateFilter.ranges = {
         fromDate: new Date('2023-01-01').toISOString(),
         toDate: new Date('2023-12-31').toISOString(),
+        id: null,
         fromSizeMB: null,
         toSizeMB: null,
       };
@@ -143,6 +144,7 @@ describe('BackupsComponent', () => {
         toDate: null,
         fromSizeMB: 100,
         toSizeMB: 500,
+        id: null,
       };
       (sizeFilter.ranges as any)['_isActive'] = true;
 
@@ -153,6 +155,24 @@ describe('BackupsComponent', () => {
       expect(params.fromSizeMB).toBe(sizeFilter.ranges.fromSizeMB);
       expect(params.toSizeMB).toBe(sizeFilter.ranges.toSizeMB);
     });
+
+    it('should build filter params with active id filter', () => {
+      const idFilter = new CustomFilter('id');
+      idFilter.ranges = {
+        fromDate: null,
+        toDate: null,
+        fromSizeMB: null,
+        toSizeMB: null,
+        id: '000d88',
+      };
+      (idFilter.ranges as any)['_isActive'] = true;
+
+      component['backupIdFilter'] = idFilter;
+
+      const params = component['buildFilterParams']();
+
+      expect(params.id).toBe(idFilter.ranges.id);
+    });
   });
 
   describe('Lifecycle Hooks', () => {

apps/frontend/src/app/backups-overview/backups/backups/backups.component.ts

@@ -50,6 +50,7 @@ export class BackupsComponent implements AfterViewInit, OnDestroy, OnInit {
   pageSize = 10;
   backupSizeFilter: CustomFilter;
   backupDateFilter: CustomFilter;
+  backupIdFilter: CustomFilter;
 
   readonly backups$: Observable<APIResponse<Backup>>;
   readonly chartBackups$: Observable<APIResponse<Backup>>;
@@ -65,6 +66,7 @@ export class BackupsComponent implements AfterViewInit, OnDestroy, OnInit {
   ) {
     this.backupSizeFilter = new CustomFilter('size');
     this.backupDateFilter = new CustomFilter('date');
+    this.backupIdFilter = new CustomFilter('id');
 
     this.backups$ = this.filterOptions$.pipe(
       switchMap((params) => this.backupService.getAllBackups(params)),
@@ -108,6 +110,7 @@ export class BackupsComponent implements AfterViewInit, OnDestroy, OnInit {
     combineLatest([
       this.backupDateFilter.changes.pipe(startWith(null)),
       this.backupSizeFilter.changes.pipe(startWith(null)),
+      this.backupIdFilter.changes.pipe(startWith(null)),
     ])
       .pipe(
         map(() => this.buildFilterParams()),
@@ -169,6 +172,10 @@ export class BackupsComponent implements AfterViewInit, OnDestroy, OnInit {
       params.toSizeMB = this.backupSizeFilter.ranges.toSizeMB;
     }
 
+    if (this.backupIdFilter.isActive()) {
+      params.id = this.backupIdFilter.ranges.id;
+    }
+
     return params;
   }
 

apps/frontend/src/app/management/components/settings/notification-settings/notification-settings.component.spec.ts

@@ -4,13 +4,19 @@ import { of, throwError } from 'rxjs';
 
 import { NotificationSettingsComponent } from './notification-settings.component';
 import { NotificationService } from '../../../services/notification.service';
+import { mock } from 'node:test';
 
 describe('NotificationSettingsComponent', () => {
   let component: NotificationSettingsComponent;
   let mockNotificationService: {
     getNotificationSettings: ReturnType<typeof vi.fn>;
     updateNotificationSettings: ReturnType<typeof vi.fn>;
   };
+  let mockAlertService: {
+    getAllAlerts: ReturnType<typeof vi.fn>;
+    refreshAlerts: ReturnType<typeof vi.fn>;
+    getRefreshObservable: ReturnType<typeof vi.fn>;
+  };
   let mockFormBuilder: FormBuilder;
 
   const mockNotificationSettings = [
@@ -28,11 +34,17 @@ describe('NotificationSettingsComponent', () => {
       getNotificationSettings: vi.fn(),
       updateNotificationSettings: vi.fn(),
     };
+    mockAlertService = {
+      getAllAlerts: vi.fn(),
+      refreshAlerts: vi.fn(),
+      getRefreshObservable: vi.fn(),
+    };
 
     mockFormBuilder = new FormBuilder();
 
     component = new NotificationSettingsComponent(
       mockNotificationService as any,
+      mockAlertService as any,
       mockFormBuilder
     );
   });

apps/frontend/src/app/management/services/notification.service.spec.ts

@@ -2,7 +2,8 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { HttpClient } from '@angular/common/http';
 import { NotificationService } from './notification.service';
 import { of } from 'rxjs';
-import { NotificationSettings } from '../../shared/types/notifications';
+import { AlertType } from '../../shared/types/alertType';
+import { SeverityType } from '../../shared/enums/severityType';
 
 describe('NotificationService', () => {
   let service: NotificationService;
@@ -49,11 +50,11 @@ describe('NotificationService', () => {
   // Unit Tests for updateNotificationSettings
   describe('updateNotificationSettings', () => {
     it('should activate user notifications', async () => {
-      const mockNotification: NotificationSettings = {
+      const mockNotification: AlertType = {
         id: '1',
         user_active: true,
         name: 'Email Notifications',
-        severity: '',
+        severity: SeverityType.INFO,
         master_active: false,
       };
 
@@ -64,18 +65,18 @@ describe('NotificationService', () => {
         .toPromise();
 
       expect(httpClientMock.patch).toHaveBeenCalledWith(
-        `${mockBaseUrl}/alerting/type/1/activate/user`,
-        { params: mockNotification }
+        `${mockBaseUrl}/alerting/type/1/user`,
+        { status: mockNotification.user_active }
       );
       expect(result).toEqual(mockNotification);
     });
 
     it('should deactivate user notifications', async () => {
-      const mockNotification: NotificationSettings = {
+      const mockNotification: AlertType = {
         id: '1',
         user_active: false,
         name: 'Email Notifications',
-        severity: '',
+        severity: SeverityType.WARNING,
         master_active: false,
       };
 
@@ -86,8 +87,8 @@ describe('NotificationService', () => {
         .toPromise();
 
       expect(httpClientMock.patch).toHaveBeenCalledWith(
-        `${mockBaseUrl}/alerting/type/1/deactivate/user`,
-        { params: mockNotification }
+        `${mockBaseUrl}/alerting/type/1/user`,
+        { status: mockNotification.user_active }
       );
       expect(result).toEqual(mockNotification);
     });
@@ -102,7 +103,7 @@ describe('NotificationService', () => {
           id: '1',
           user_active: false,
           name: 'Email Notifications',
-          severity: '',
+          severity: SeverityType.WARNING,
           master_active: false,
         },
       ];
@@ -115,7 +116,7 @@ describe('NotificationService', () => {
       expect(fetchedSettings).toEqual(initialSettings);
 
       // Update settings
-      const updatedNotification: NotificationSettings = {
+      const updatedNotification: AlertType = {
         ...initialSettings[0],
         user_active: true,
       };

apps/frontend/src/app/shared/types/backup-filter-type.ts

@@ -7,4 +7,5 @@ export type BackupFilterParams = {
   toDate?: string | null;
   fromSizeMB?: number | null;
   toSizeMB?: number | null;
+  id?: string | null;
 };