Merge branch 'master' into NAS-123587

README.md

@@ -29,7 +29,7 @@ NOTE: Pull requests are also generated as Docker images and can be used for test
 # Development requirements
 
   - yarn >= 1.12
-  - Node.js >= 8.9
+  - Node.js >= 14
   - Running TrueNAS CORE or TrueNAS SCALE Nightly Machine (VM is fine)
 
 

src/app/enums/v-dev-type.enum.ts

@@ -16,6 +16,7 @@ export enum TopologyItemType {
   Raidz1 = 'RAIDZ1',
   Raidz2 = 'RAIDZ2',
   Raidz3 = 'RAIDZ3',
+  Draid = 'DRAID',
   L2Cache = 'L2CACHE',
   Replacing = 'REPLACING',
 }

src/app/helpers/options.helper.spec.ts

@@ -1,5 +1,15 @@
 import { TranslateService } from '@ngx-translate/core';
-import { mapToOptions } from 'app/helpers/options.helper';
+import { generateOptionsRange, mapToOptions } from 'app/helpers/options.helper';
+
+describe('generateOptionsRange', () => {
+  it('generates a range of options based on range of numbers', () => {
+    expect(generateOptionsRange(1, 3)).toStrictEqual([
+      { label: '1', value: 1 },
+      { label: '2', value: 2 },
+      { label: '3', value: 3 },
+    ]);
+  });
+});
 
 describe('mapToOptions', () => {
   it('converts JS Map to an array of options while invoking translation on labels', () => {

src/app/helpers/options.helper.ts

@@ -15,3 +15,10 @@ export function findLabelsByValue(options: Option[]): (value: string) => string
     return selectedOption?.label;
   };
 }
+
+export function generateOptionsRange(start: number, end: number): Option[] {
+  return Array.from({ length: end - start + 1 }, (_, index) => {
+    const value = start + index;
+    return { label: String(value), value };
+  });
+}

src/app/helptext/storage/volumes/manager/manager.ts

@@ -81,10 +81,12 @@ export default {
  be sized to X GiB for each X TiB of general storage.'),
   exported_pool_warning: T('This disk is part of the exported pool {pool}. Adding this disk to a new or other existing pools will make {pool} unable to import. You will lose any and all data in {pool}. Please make sure you have backed up any sensitive data in {pool} before reusing/repurposing this disk.'),
 
-  dRaidTooltip: T('dRAID is a ZFS feature that boosts resilver speed, load distribution, and disk space efficiency. \nOpt for dRAID over RAID-Z when handling large-capacity drives and extensive disk environments for enhanced performance.'),
+  dRaidTooltip: T('dRAID is a ZFS feature that boosts resilver speed and load distribution. Due to fixed strip width disk space efficiency may be substantially worse with small files. \nOpt for dRAID over RAID-Z when handling large-capacity drives and extensive disk environments for enhanced performance.'),
   stripeTooltip: T('Each disk stores data. A stripe requires at least one disk and has no data redundancy.'),
   mirrorTooltip: T('Data is identical in each disk. A mirror requires at least two disks, provides the most redundancy, and has the least capacity.'),
   raidz1Tooltip: T('Uses one disk for parity while all other disks store data. RAIDZ1 requires at least three disks. RAIDZ is a traditional ZFS data protection scheme. \nChoose RAIDZ over dRAID when managing a smaller set of drives, where simplicity of setup and predictable disk usage are primary considerations.'),
   raidz2Tooltip: T('Uses two disks for parity while all other disks store data. RAIDZ2 requires at least four disks. RAIDZ is a traditional ZFS data protection scheme. \nChoose RAIDZ over dRAID when managing a smaller set of drives, where simplicity of setup and predictable disk usage are primary considerations.'),
   raidz3Tooltip: T('Uses three disks for parity while all other disks store data. RAIDZ3 requires at least five disks. RAIDZ is a traditional ZFS data protection scheme. \nChoose RAIDZ over dRAID when managing a smaller set of drives, where simplicity of setup and predictable disk usage are primary considerations.'),
+
+  dRaidChildrenExplanation: T('The number of children must at the minimum accomodate the total number of disks required for the previous configuration options including parity drives.'),
 };

src/app/interfaces/pool.interface.ts

@@ -89,7 +89,7 @@ export interface UpdatePool {
 
 // TODO: Maybe replace first 5 keys with VdevType enum once old pool manager is removed.
 export interface UpdatePoolTopology {
-  data?: { type: CreateVdevLayout; disks: string[] }[];
+  data?: DataPoolTopologyUpdate[];
   special?: { type: CreateVdevLayout; disks: string[] }[];
   dedup?: { type: CreateVdevLayout; disks: string[] }[];
   cache?: { type: CreateVdevLayout; disks: string[] }[];
@@ -98,6 +98,15 @@ export interface UpdatePoolTopology {
   spares?: string[];
 }
 
+export interface DataPoolTopologyUpdate {
+  type: CreateVdevLayout;
+  disks: string[];
+  draid_data_disks?: number;
+  draid_spare_disks?: number;
+}
+
+export type UpdatePoolTopologyGroup = keyof UpdatePoolTopology;
+
 export interface PoolAttachParams {
   target_vdev?: string;
   new_disk?: string;

src/app/modules/ix-feedback/feedback-dialog/feedback-dialog.component.ts

@@ -45,7 +45,7 @@ export class FeedbackDialogComponent implements OnInit {
 
   constructor(
     private formBuilder: FormBuilder,
-    private slideIn: IxSlideInService,
+    private slideInService: IxSlideInService,
     private dialogRef: MatDialogRef<FeedbackDialogComponent>,
     private feedbackService: IxFeedbackService,
     private store$: Store<AppState>,
@@ -75,7 +75,7 @@ export class FeedbackDialogComponent implements OnInit {
 
   openFileTicketForm(): void {
     this.dialogRef.close();
-    this.slideIn.open(FileTicketFormComponent);
+    this.slideInService.open(FileTicketFormComponent);
   }
 
   onSubmit(): void {

src/app/modules/ix-table2/components/ix-table-body/cells/ix-cell-date/ix-cell-date.component.html

@@ -1 +1 @@
-{{ value | formatDateTime:undefined:formatDate:formatTime }}
+{{ value | formatDateTime }}

src/app/modules/ix-table2/components/ix-table-body/cells/ix-cell-date/ix-cell-date.component.spec.ts

@@ -32,12 +32,4 @@ describe('IxCellDateComponent', () => {
   it('shows default format datetime in template', () => {
     expect(spectator.element.textContent.trim()).toBe('2023-07-12 09:10:00');
   });
-
-  it('shows custom format datetime in template', () => {
-    spectator.component.formatDate = 'yyyy/MM/dd';
-    spectator.component.formatTime = 'HH.mm.ss';
-    spectator.fixture.detectChanges();
-
-    expect(spectator.element.textContent.trim()).toBe('2023/07/12 09.10.00');
-  });
 });

src/app/modules/ix-table2/components/ix-table-body/cells/ix-cell-date/ix-cell-date.component.ts

@@ -1,14 +1,15 @@
 import { Component } from '@angular/core';
+import { ApiTimestamp } from 'app/interfaces/api-date.interface';
 import { Column, ColumnComponent } from 'app/modules/ix-table2/interfaces/table-column.interface';
 
 @Component({
   templateUrl: './ix-cell-date.component.html',
 })
 export class IxCellDateComponent<T> extends ColumnComponent<T> {
-  formatDate: string = undefined;
-  formatTime: string = undefined;
-
   get value(): number | Date {
+    if ((this.row[this.propertyName] as ApiTimestamp)?.$date) {
+      return (this.row[this.propertyName] as ApiTimestamp).$date;
+    }
     return this.row[this.propertyName] as number | Date;
   }
 }

src/app/modules/ix-table2/components/ix-table-pager-show-more/ix-table-pager-show-more.component.scss

@@ -1,4 +1,8 @@
-:host {
+:host:not(.collapsible) {
+  display: none;
+}
+
+:host.collapsible {
   align-items: center;
   display: flex;
   justify-content: center;

src/app/modules/ix-table2/components/ix-table-pager-show-more/ix-table-pager-show-more.component.ts

@@ -1,5 +1,5 @@
 import {
-  AfterContentChecked, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit,
+  AfterContentChecked, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnInit,
 } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { ArrayDataProvider } from 'app/modules/ix-table2/array-data-provider';
@@ -19,7 +19,7 @@ export class IxTablePagerShowMoreComponent<T> implements OnInit, AfterContentChe
   totalItems = 0;
   expanded = false;
 
-  get collapsible(): boolean {
+  @HostBinding('class.collapsible') get collapsible(): boolean {
     return this.totalItems > this.pageSize;
   }
 

src/app/modules/scheduler/components/scheduler-modal/scheduler-modal.component.scss

@@ -10,6 +10,7 @@
 .settings-column {
   margin-bottom: 10px;
   margin-top: 19px;
+  width: 100%;
 
   .no-spaces-hint {
     font-size: 85%;

src/app/pages/account/users/user-form/user-form.component.spec.ts

@@ -125,7 +125,7 @@ describe('UserFormComponent', () => {
 
       const usernameInput = await loader.getHarness(IxInputHarness.with({ label: 'Username' }));
       await usernameInput.setValue('test');
-      expect(await homeInput.getValue()).toBe('/mnt/users/test');
+      expect(await homeInput.getValue()).toBe('/mnt/users');
     });
 
     it('checks download ssh key button is hidden', async () => {

src/app/pages/account/users/user-form/user-form.component.ts

@@ -8,7 +8,7 @@ import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import _ from 'lodash';
 import {
-  combineLatest, from, Observable, of, Subscription,
+  from, Observable, of, Subscription,
 } from 'rxjs';
 import {
   debounceTime, filter, map, switchMap, take,
@@ -416,14 +416,9 @@ export class UserFormComponent implements OnInit {
     ]]).pipe(
       filter((shares) => !!shares.length),
       map((shares) => shares[0].path),
-      switchMap((homeSharePath) => {
-        this.form.patchValue({ home: homeSharePath });
-
-        return combineLatest([of(homeSharePath), this.form.controls.username.valueChanges]);
-      }),
       untilDestroyed(this),
-    ).subscribe(([homeSharePath, username]) => {
-      this.form.patchValue({ home: `${homeSharePath}/${username}` });
+    ).subscribe((homeSharePath) => {
+      this.form.patchValue({ home: homeSharePath });
     });
   }
 

src/app/pages/apps/components/app-detail-view/app-detail-view.component.html

@@ -27,7 +27,7 @@ <h2>{{ 'Screenshots' | translate }}</h2>
         <ng-template #appScreenshots>
           <div class="screenshots" gallerize>
             <div *ngFor="let image of app.screenshots" class="screenshot">
-              <img class="screenshot-image" [src]="image" />
+              <img class="screenshot-image" [src]="image" [src-fallback]="imagePlaceholder" />
             </div>
           </div>
         </ng-template>

src/app/pages/apps/components/installed-apps/app-containers-card/app-containers-card.component.html

@@ -56,7 +56,7 @@ <h4>{{ 'Containers' | translate }}</h4>
                   </ng-container>
                 </div>
                 <div
-                  *ngIf="app.status === chartReleaseStatus.Active"
+                  *ngIf="app.status === chartReleaseStatus.Active || app.status === chartReleaseStatus.Deploying"
                   class="container-action"
                 >
                   <button

src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.html

@@ -26,7 +26,7 @@ <h3 mat-card-title>
   <mat-card-content>
     <div fxLayout="row" fxLayoutGap="8px">
       <div class="app-logo">
-        <img [src]="app?.chart_metadata?.icon" />
+        <img [src]="app?.chart_metadata?.icon" [src-fallback]="imagePlaceholder" />
       </div>
       <div class="details-list">
         <div class="details-item">

src/app/pages/apps/components/installed-apps/app-info-card/app-info-card.component.ts

@@ -7,6 +7,7 @@ import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { TranslateService } from '@ngx-translate/core';
 import { startCase, isEmpty } from 'lodash';
 import { filter, map, take } from 'rxjs';
+import { appImagePlaceholder } from 'app/constants/catalog.constants';
 import helptext from 'app/helptext/apps/apps';
 import { UpgradeSummary } from 'app/interfaces/application.interface';
 import { ChartRelease } from 'app/interfaces/chart-release.interface';
@@ -31,6 +32,7 @@ import { RedirectService } from 'app/services/redirect.service';
 export class AppInfoCardComponent {
   @Input() app: ChartRelease;
 
+  readonly imagePlaceholder = appImagePlaceholder;
   readonly isEmpty = isEmpty;
 
   constructor(

src/app/pages/apps/components/installed-apps/app-row/app-row.component.html

@@ -9,7 +9,7 @@
     ></mat-checkbox>
 
     <div class="app-logo">
-      <img [src]="app.chart_metadata.icon" />
+      <img [src]="app.chart_metadata.icon" [src-fallback]="imagePlaceholder" />
     </div>
 
     <div>

src/app/pages/apps/components/installed-apps/app-row/app-row.component.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component, EventEmitter, Input, Output,
 } from '@angular/core';
+import { appImagePlaceholder } from 'app/constants/catalog.constants';
 import { ChartReleaseStatus } from 'app/enums/chart-release-status.enum';
 import { JobState } from 'app/enums/job-state.enum';
 import { ChartScaleQueryParams, ChartScaleResult } from 'app/interfaces/chart-release-event.interface';
@@ -23,6 +24,8 @@ export class AppRowComponent {
   @Output() stopApp = new EventEmitter<void>();
   @Output() clickStatus = new EventEmitter<void>();
 
+  readonly imagePlaceholder = appImagePlaceholder;
+
   get hasUpdates(): boolean {
     return this.app.update_available || this.app.container_images_update_available;
   }

src/app/pages/apps/components/installed-apps/app-upgrade-dialog/app-upgrade-dialog.component.html

@@ -1,10 +1,7 @@
 <div mat-dialog-content>
   <div class="logo-container" fxLayout="row" fxLayoutAlign="start center">
     <div class="logo">
-      <img
-        [src]="dialogConfig.appInfo.chart_metadata.icon"
-        [src-fallback]="imagePlaceholder"
-      />
+      <img [src]="dialogConfig.appInfo.chart_metadata.icon" [src-fallback]="imagePlaceholder" />
     </div>
     <div fxLayout="row" fxLayoutAlign="start center">
       <strong class="chart-name">{{ dialogConfig.appInfo.name }}</strong>