NAS-124670 / 24.04 / Reporting disks view improvements for large disk systems

src/app/modules/ix-forms/components/ix-select/ix-select.component.html

@@ -22,6 +22,17 @@
         {{ selectedLabel }}
       </mat-select-trigger>
 
+      <mat-checkbox
+        *ngIf="multiple"
+        ixTest="select-all"
+        class="select-all-checkbox"
+        [checked]="selectAllState.checked"
+        [indeterminate]="selectAllState.indeterminate"
+        (change)="toggleSelectAll($event.checked)"
+      >
+        {{ 'Select All' | translate }}
+      </mat-checkbox>
+
       <ng-container *ngIf="opts$ | async as opts; else loadingOrError">
         <mat-option
           *ngIf="opts.length === 0"

src/app/modules/ix-forms/components/ix-select/ix-select.component.scss

@@ -5,6 +5,21 @@
   padding: 8px 0;
 }
 
+::ng-deep {
+  .select-all-checkbox {
+    margin: 0;
+    width: 100%;
+
+    > div {
+      width: 100%;
+    }
+
+    label {
+      width: 100%;
+    }
+  }
+}
+
 .full-width {
   color: var(--fg1);
   width: 100%;

src/app/modules/ix-forms/components/ix-select/ix-select.component.spec.ts

@@ -196,5 +196,26 @@ describe('IxSelectComponent', () => {
       expect(currentValue).toBe('GBR, GRL');
       expect(control.value).toEqual(['Great Britain', 'Greenland']);
     });
+
+    it('should select all options when "Select All" is checked', () => {
+      spectator.component.toggleSelectAll(true);
+      expect(spectator.component.value).toEqual(['Great Britain', 'Greenland', 'France']);
+      expect(spectator.component.selectAllState.checked).toBeTruthy();
+    });
+
+    it('should unselect all options when "Select All" is unchecked', () => {
+      spectator.component.toggleSelectAll(false);
+      expect(spectator.component.value).toEqual([]);
+      expect(spectator.component.selectAllState.checked).toBeFalsy();
+    });
+
+    it('should set "Select All" checkbox to indeterminate when some options are selected', async () => {
+      const select = await loader.getHarness(MatSelectHarness);
+      await select.open();
+      await select.clickOptions({ text: 'GBR' });
+
+      spectator.component.updateSelectAllState();
+      expect(spectator.component.selectAllState.indeterminate).toBeTruthy();
+    });
   });
 });

src/app/modules/ix-forms/components/ix-select/ix-select.component.ts

@@ -1,13 +1,13 @@
 import {
   ChangeDetectionStrategy, ChangeDetectorRef,
-  Component, Input, OnChanges,
+  Component, Input, OnChanges, OnInit,
 } from '@angular/core';
 import {
   ControlValueAccessor, NgControl,
 } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { EMPTY, Observable } from 'rxjs';
-import { catchError, tap } from 'rxjs/operators';
+import { catchError, debounceTime, tap } from 'rxjs/operators';
 import { SelectOption, SelectOptionValueType } from 'app/interfaces/option.interface';
 
 type IxSelectValue = SelectOptionValueType;
@@ -19,7 +19,7 @@ type IxSelectValue = SelectOptionValueType;
   templateUrl: './ix-select.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class IxSelectComponent implements ControlValueAccessor, OnChanges {
+export class IxSelectComponent implements ControlValueAccessor, OnInit, OnChanges {
   @Input() label: string;
   @Input() value: IxSelectValue;
   @Input() hint: string;
@@ -35,6 +35,12 @@ export class IxSelectComponent implements ControlValueAccessor, OnChanges {
   hasErrorInOptions = false;
   opts$: Observable<SelectOption[]>;
   isLoading = false;
+
+  selectAllState = {
+    checked: false,
+    indeterminate: false,
+  };
+
   private opts: SelectOption[] = [];
 
   get selectedLabel(): string {
@@ -60,10 +66,15 @@ export class IxSelectComponent implements ControlValueAccessor, OnChanges {
     return selectedLabels.length > 0 ? selectedLabels : [];
   }
 
-  constructor(
-    public controlDirective: NgControl,
-    private cdr: ChangeDetectorRef,
-  ) {
+  get disabledState(): boolean {
+    return this.isDisabled || !this.options;
+  }
+
+  get isLoadingState(): boolean {
+    return this.isLoading || !this.options;
+  }
+
+  constructor(public controlDirective: NgControl, private cdr: ChangeDetectorRef) {
     this.controlDirective.valueAccessor = this;
   }
 
@@ -90,6 +101,15 @@ export class IxSelectComponent implements ControlValueAccessor, OnChanges {
     }
   }
 
+  ngOnInit(): void {
+    if (this.multiple) {
+      this.controlDirective.control.valueChanges.pipe(debounceTime(0), untilDestroyed(this)).subscribe(() => {
+        this.updateSelectAllState();
+        this.cdr.markForCheck();
+      });
+    }
+  }
+
   onChange: (value: IxSelectValue) => void = (): void => {};
   onTouch: () => void = (): void => {};
 
@@ -115,11 +135,41 @@ export class IxSelectComponent implements ControlValueAccessor, OnChanges {
     event.stopPropagation();
   }
 
-  get disabledState(): boolean {
-    return this.isDisabled || !this.options;
+  selectAll(): void {
+    if (this.multiple) {
+      this.value = this.opts.map(opt => opt.value) as SelectOptionValueType;
+      this.onChange(this.value);
+    }
   }
 
-  get isLoadingState(): boolean {
-    return this.isLoading || !this.options;
+  unselectAll(): void {
+    if (this.multiple) {
+      this.value = [];
+      this.onChange(this.value);
+    }
+  }
+
+  toggleSelectAll(checked: boolean): void {
+    if (checked) {
+      this.selectAll();
+    } else {
+      this.unselectAll();
+    }
+    this.updateSelectAllState();
+  }
+
+  updateSelectAllState(): void {
+    if (Array.isArray(this.value)) {
+      if (this.value.length === 0) {
+        this.selectAllState.checked = false;
+        this.selectAllState.indeterminate = false;
+      } else if (this.value.length === this.opts.length) {
+        this.selectAllState.checked = true;
+        this.selectAllState.indeterminate = false;
+      } else {
+        this.selectAllState.checked = false;
+        this.selectAllState.indeterminate = true;
+      }
+    }
   }
 }

src/app/pages/credentials/backup-credentials/cloud-credentials-card/cloud-credentials-card.component.html

@@ -25,7 +25,7 @@ <h3>{{ 'Cloud Credentials' | translate }}</h3>
         [isLoading]="dataProvider.isLoading$ | async"
       ></tbody>
     </ix-table2>
-    <ix-table-pager-show-more [pageSize]="4" [dataProvider]="dataProvider"></ix-table-pager-show-more>
+    <ix-table-pager-show-more [pageSize]="5" [dataProvider]="dataProvider"></ix-table-pager-show-more>
   </mat-card-content>
 </mat-card>
 

src/app/pages/reports-dashboard/components/reports-global-controls/reports-global-controls.component.ts

@@ -10,7 +10,6 @@ import { Store } from '@ngrx/store';
 import { take } from 'rxjs';
 import { ReportTab, ReportType } from 'app/pages/reports-dashboard/interfaces/report-tab.interface';
 import { ReportsService } from 'app/pages/reports-dashboard/reports.service';
-import { IxSlideInService } from 'app/services/ix-slide-in.service';
 import { AppState } from 'app/store';
 import { autoRefreshReportsToggled } from 'app/store/preferences/preferences.actions';
 import { waitForPreferences } from 'app/store/preferences/preferences.selectors';
@@ -41,7 +40,6 @@ export class ReportsGlobalControlsComponent implements OnInit {
     private route: ActivatedRoute,
     private store$: Store<AppState>,
     private reportsService: ReportsService,
-    private slideInService: IxSlideInService,
     private cdr: ChangeDetectorRef,
   ) {}
 

src/assets/styles/other/_tn-styles.scss

@@ -342,7 +342,7 @@ $primary-dark: darken(map-get($md-primary, 500), 8%);
   .mat-mdc-menu-content button.mat-mdc-menu-item:hover .mat-icon:not(.theme-picker-swatch-icon),
   .mat-mdc-menu-content button.mat-mdc-menu-item:focus,
   .mat-mdc-menu-content button.mat-mdc-menu-item:focus .mat-icon:not(.theme-picker-swatch-icon) {
-    background-color: var(--hover-bg);
+    background-color: var(--hover-bg) !important;
   }
 
   // Treelists in storage/volumes