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

… systems (#9076) * NAS-124670: Reporting disks view improvements for large disk systems * NAS-124670: PR update * NAS-124670: PR update * NAS-124670: PR update * NAS-124670: PR update
truenas · Oct 27, 2023 · d987d1a · d987d1a
1 parent 928c173
commit d987d1a
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 15 deletions.
diff --git a/src/app/modules/ix-forms/components/ix-select/ix-select.component.html b/src/app/modules/ix-forms/components/ix-select/ix-select.component.html
@@ -22,6 +22,19 @@
         {{ selectedLabel }}
       </mat-select-trigger>
 
+      <div
+        *ngIf="multiple && showSelectAll"
+        class="select-all-checkbox"
+        [ixTest]="[controlDirective.name, 'select-all']"
+        (click)="toggleSelectAll(!selectAllState.checked)"
+      >
+        <ix-icon
+          [name]="selectAllState.checked ? 'check_circle' : 'remove'"
+        ></ix-icon>
+
+        {{ 'Select All' | translate }}
+      </div>
+
       <ng-container *ngIf="opts$ | async as opts; else loadingOrError">
         <mat-option
           *ngIf="opts.length === 0"

diff --git a/src/app/modules/ix-forms/components/ix-select/ix-select.component.scss b/src/app/modules/ix-forms/components/ix-select/ix-select.component.scss
@@ -5,6 +5,20 @@
   padding: 8px 0;
 }
 
+::ng-deep {
+  .select-all-checkbox {
+    align-items: center;
+    border-bottom: 1px solid var(--alt-bg1);
+    cursor: pointer;
+    display: flex;
+    padding: 8px;
+
+    ix-icon {
+      margin-right: 16px;
+    }
+  }
+}
+
 .full-width {
   color: var(--fg1);
   width: 100%;

diff --git a/src/app/modules/ix-forms/components/ix-select/ix-select.component.spec.ts b/src/app/modules/ix-forms/components/ix-select/ix-select.component.spec.ts
@@ -196,5 +196,19 @@ 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.setInput('showSelectAll', true);
+      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.setInput('showSelectAll', true);
+      spectator.component.toggleSelectAll(false);
+      expect(spectator.component.value).toEqual([]);
+      expect(spectator.component.selectAllState.checked).toBeFalsy();
+    });
   });
 });
diff --git a/src/app/modules/ix-forms/components/ix-select/ix-select.component.ts b/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;
@@ -29,12 +29,18 @@ export class IxSelectComponent implements ControlValueAccessor, OnChanges {
   @Input() multiple: boolean;
   @Input() emptyValue: string = null;
   @Input() hideEmpty = false;
+  @Input() showSelectAll = false;
   @Input() compareWith: (val1: unknown, val2: unknown) => boolean = (val1: unknown, val2: unknown) => val1 === val2;
 
   isDisabled = false;
   hasErrorInOptions = false;
   opts$: Observable<SelectOption[]>;
   isLoading = false;
+
+  selectAllState = {
+    checked: 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,36 @@ 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 {
+    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;
+      } else if (this.value.length === this.opts.length) {
+        this.selectAllState.checked = true;
+      } else {
+        this.selectAllState.checked = false;
+      }
+    }
   }
 }
diff --git a/...edentials/backup-credentials/cloud-credentials-card/cloud-credentials-card.component.html b/...edentials/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>
 

diff --git a/...ports-dashboard/components/reports-global-controls/reports-global-controls.component.html b/...ports-dashboard/components/reports-global-controls/reports-global-controls.component.html
@@ -5,6 +5,7 @@
       [label]="'Devices' | translate"
       [options]="diskDevices$"
       [multiple]="true"
+      [showSelectAll]="true"
     ></ix-select>
 
     <ix-select

diff --git a/...reports-dashboard/components/reports-global-controls/reports-global-controls.component.ts b/...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,
   ) {}
 

diff --git a/src/assets/styles/other/_tn-styles.scss b/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