NAS-132777: iSCSI authorized networks cards (#11113)

src/app/pages/sharing/iscsi/target/all-targets/all-targets.component.html

@@ -18,28 +18,28 @@
     @if (dataProvider.expandedRow; as target) {
       <div class="detail-actions">
         <button
-          *ixRequiresRoles="requiredRoles"
           mat-button
-          ixTest="delete-target"
-          (click)="deleteTarget(target)"
+          ixTest="edit-target"
+          (click)="editTarget(target)"
         >
-          {{ 'Delete' | translate }}
+          {{ 'Edit' | translate }}
         </button>
 
         <button
+          *ixRequiresRoles="requiredRoles"
           mat-button
-          ixTest="edit-target"
-          (click)="editTarget(target)"
+          ixTest="delete-target"
+          (click)="deleteTarget(target)"
         >
-          {{ 'Edit' | translate }}
+          {{ 'Delete' | translate }}
         </button>
       </div>
     }
   </ng-container>
 
   <ng-container detail>
     @if (dataProvider.expandedRow) {
-      <ix-target-details></ix-target-details>
+      <ix-target-details [target]="dataProvider.expandedRow"></ix-target-details>
     }
   </ng-container>
 </ix-master-detail-view>

src/app/pages/sharing/iscsi/target/all-targets/all-targets.component.ts

@@ -13,6 +13,7 @@ import { DialogService } from 'app/modules/dialog/dialog.service';
 import { AsyncDataProvider } from 'app/modules/ix-table/classes/async-data-provider/async-data-provider';
 import { AppLoaderService } from 'app/modules/loader/app-loader.service';
 import { MasterDetailViewComponent } from 'app/modules/master-detail-view/master-detail-view.component';
+import { TestDirective } from 'app/modules/test-id/test.directive';
 import { TargetDetailsComponent } from 'app/pages/sharing/iscsi/target/all-targets/target-details/target-details.component';
 import { TargetListComponent } from 'app/pages/sharing/iscsi/target/all-targets/target-list/target-list.component';
 import { TargetFormComponent } from 'app/pages/sharing/iscsi/target/target-form/target-form.component';
@@ -35,6 +36,7 @@ import { ApiService } from 'app/services/websocket/api.service';
     TargetDetailsComponent,
     RequiresRolesDirective,
     MatButton,
+    TestDirective,
   ],
 })
 export class AllTargetsComponent implements OnInit {

src/app/pages/sharing/iscsi/target/all-targets/target-details/authorized-networks-card/authorized-networks-card.component.html

@@ -0,0 +1,14 @@
+<mat-card class="card">
+  <mat-card-header>
+    <h3 mat-card-title>
+      {{ 'iSCSI Authorized Networks' | translate }}
+    </h3>
+  </mat-card-header>
+  <mat-card-content>
+    @for (network of target().auth_networks; track network) {
+      <div class="network">
+        {{ network }}
+      </div>
+    }
+  </mat-card-content>
+</mat-card>

src/app/pages/sharing/iscsi/target/all-targets/target-details/authorized-networks-card/authorized-networks-card.component.scss

@@ -0,0 +1,7 @@
+.network {
+  margin-bottom: 2px;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}

src/app/pages/sharing/iscsi/target/all-targets/target-details/authorized-networks-card/authorized-networks-card.component.spec.ts

@@ -0,0 +1,30 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { IscsiTarget } from 'app/interfaces/iscsi.interface';
+import {
+  AuthorizedNetworksCardComponent,
+} from 'app/pages/sharing/iscsi/target/all-targets/target-details/authorized-networks-card/authorized-networks-card.component';
+
+describe('AuthorizedNetworksCardComponent', () => {
+  let spectator: Spectator<AuthorizedNetworksCardComponent>;
+  const createComponent = createComponentFactory({
+    component: AuthorizedNetworksCardComponent,
+  });
+
+  beforeEach(() => {
+    spectator = createComponent({
+      props: {
+        target: {
+          auth_networks: ['192.168.1.10/24', '10.0.0.1/24'],
+        } as IscsiTarget,
+      },
+    });
+  });
+
+  it('shows a list of networks authorized for the target', () => {
+    const networks = spectator.queryAll('.network');
+
+    expect(networks).toHaveLength(2);
+    expect(networks[0]).toHaveText('192.168.1.10/24');
+    expect(networks[1]).toHaveText('10.0.0.1/24');
+  });
+});

src/app/pages/sharing/iscsi/target/all-targets/target-details/authorized-networks-card/authorized-networks-card.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import {
+  MatCard, MatCardContent, MatCardHeader, MatCardTitle,
+} from '@angular/material/card';
+import { TranslateModule } from '@ngx-translate/core';
+import { IscsiTarget } from 'app/interfaces/iscsi.interface';
+
+@Component({
+  selector: 'ix-authorized-networks-card',
+  styleUrls: ['./authorized-networks-card.component.scss'],
+  templateUrl: './authorized-networks-card.component.html',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatCard,
+    MatCardHeader,
+    MatCardTitle,
+    TranslateModule,
+    MatCardContent,
+  ],
+})
+export class AuthorizedNetworksCardComponent {
+  readonly target = input.required<IscsiTarget>();
+}

src/app/pages/sharing/iscsi/target/all-targets/target-details/target-details.component.html

@@ -1,5 +1,9 @@
 <div class="cards">
   <div class="scroll-window">
-    <p>// TODO: Implement cards 🧑‍💻 </p>
+    @if (hasIscsiCards()) {
+      @if (target().auth_networks.length) {
+        <ix-authorized-networks-card [target]="target()"></ix-authorized-networks-card>
+      }
+    }
   </div>
 </div>

src/app/pages/sharing/iscsi/target/all-targets/target-details/target-details.component.ts

@@ -1,12 +1,23 @@
 import {
-  ChangeDetectionStrategy, Component,
+  ChangeDetectionStrategy, Component, computed, input,
 } from '@angular/core';
+import { IscsiTargetMode } from 'app/enums/iscsi.enum';
+import { IscsiTarget } from 'app/interfaces/iscsi.interface';
+import {
+  AuthorizedNetworksCardComponent,
+} from 'app/pages/sharing/iscsi/target/all-targets/target-details/authorized-networks-card/authorized-networks-card.component';
 
 @Component({
   selector: 'ix-target-details',
   templateUrl: './target-details.component.html',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [],
+  imports: [
+    AuthorizedNetworksCardComponent,
+  ],
 })
-export class TargetDetailsComponent {}
+export class TargetDetailsComponent {
+  readonly target = input.required<IscsiTarget>();
+
+  protected hasIscsiCards = computed(() => [IscsiTargetMode.Iscsi, IscsiTargetMode.Both].includes(this.target().mode));
+}

src/app/pages/sharing/iscsi/target/all-targets/target-list/target-list.component.spec.ts

@@ -80,7 +80,7 @@ describe('TargetListComponent', () => {
 
   it('should show table rows', async () => {
     const expectedRows = [
-      ['Target Name', 'Target Alias'],
+      ['Name', 'Alias'],
       ['test-iscsi-target', 'test-iscsi-target-alias'],
     ];
 

src/app/pages/sharing/iscsi/target/all-targets/target-list/target-list.component.ts

@@ -75,11 +75,11 @@ export class TargetListComponent implements OnInit {
 
   columns = createTable<IscsiTarget>([
     textColumn({
-      title: this.translate.instant('Target Name'),
+      title: this.translate.instant('Name'),
       propertyName: 'name',
     }),
     textColumn({
-      title: this.translate.instant('Target Alias'),
+      title: this.translate.instant('Alias'),
       propertyName: 'alias',
     }),
   ], {

src/assets/i18n/af.json

@@ -323,6 +323,7 @@
   "Alerts": "",
   "Alerts could not be loaded": "",
   "Algorithm": "",
+  "Alias": "",
   "Alias for the identical interface  on the other TrueNAS controller. The alias can be an IPv4 or IPv6 address.": "",
   "Aliases": "",
   "Aliases must be 15 characters or less.": "",
@@ -5129,6 +5130,7 @@
   "gzip-1 (fastest)": "",
   "gzip-9 (maximum, slow)": "",
   "iSCSI": "",
+  "iSCSI Authorized Networks": "",
   "iSCSI Extent": "",
   "iSCSI Group": "",
   "iSCSI Initiator": "",

src/assets/i18n/ar.json

@@ -323,6 +323,7 @@
   "Alerts": "",
   "Alerts could not be loaded": "",
   "Algorithm": "",
+  "Alias": "",
   "Alias for the identical interface  on the other TrueNAS controller. The alias can be an IPv4 or IPv6 address.": "",
   "Aliases": "",
   "Aliases must be 15 characters or less.": "",
@@ -5129,6 +5130,7 @@
   "gzip-1 (fastest)": "",
   "gzip-9 (maximum, slow)": "",
   "iSCSI": "",
+  "iSCSI Authorized Networks": "",
   "iSCSI Extent": "",
   "iSCSI Group": "",
   "iSCSI Initiator": "",

src/assets/i18n/ast.json

@@ -323,6 +323,7 @@
   "Alerts": "",
   "Alerts could not be loaded": "",
   "Algorithm": "",
+  "Alias": "",
   "Alias for the identical interface  on the other TrueNAS controller. The alias can be an IPv4 or IPv6 address.": "",
   "Aliases": "",
   "Aliases must be 15 characters or less.": "",
@@ -5129,6 +5130,7 @@
   "gzip-1 (fastest)": "",
   "gzip-9 (maximum, slow)": "",
   "iSCSI": "",
+  "iSCSI Authorized Networks": "",
   "iSCSI Extent": "",
   "iSCSI Group": "",
   "iSCSI Initiator": "",

src/assets/i18n/az.json

@@ -323,6 +323,7 @@
   "Alerts": "",
   "Alerts could not be loaded": "",
   "Algorithm": "",
+  "Alias": "",
   "Alias for the identical interface  on the other TrueNAS controller. The alias can be an IPv4 or IPv6 address.": "",
   "Aliases": "",
   "Aliases must be 15 characters or less.": "",
@@ -5129,6 +5130,7 @@
   "gzip-1 (fastest)": "",
   "gzip-9 (maximum, slow)": "",
   "iSCSI": "",
+  "iSCSI Authorized Networks": "",
   "iSCSI Extent": "",
   "iSCSI Group": "",
   "iSCSI Initiator": "",

src/assets/i18n/be.json

@@ -323,6 +323,7 @@
   "Alerts": "",
   "Alerts could not be loaded": "",
   "Algorithm": "",
+  "Alias": "",
   "Alias for the identical interface  on the other TrueNAS controller. The alias can be an IPv4 or IPv6 address.": "",
   "Aliases": "",
   "Aliases must be 15 characters or less.": "",
@@ -5129,6 +5130,7 @@
   "gzip-1 (fastest)": "",
   "gzip-9 (maximum, slow)": "",
   "iSCSI": "",
+  "iSCSI Authorized Networks": "",
   "iSCSI Extent": "",
   "iSCSI Group": "",
   "iSCSI Initiator": "",

src/assets/i18n/bg.json

@@ -323,6 +323,7 @@
   "Alerts": "",
   "Alerts could not be loaded": "",
   "Algorithm": "",
+  "Alias": "",
   "Alias for the identical interface  on the other TrueNAS controller. The alias can be an IPv4 or IPv6 address.": "",
   "Aliases": "",
   "Aliases must be 15 characters or less.": "",
@@ -5129,6 +5130,7 @@
   "gzip-1 (fastest)": "",
   "gzip-9 (maximum, slow)": "",
   "iSCSI": "",
+  "iSCSI Authorized Networks": "",
   "iSCSI Extent": "",
   "iSCSI Group": "",
   "iSCSI Initiator": "",

src/assets/i18n/bn.json

@@ -323,6 +323,7 @@
   "Alerts": "",
   "Alerts could not be loaded": "",
   "Algorithm": "",
+  "Alias": "",
   "Alias for the identical interface  on the other TrueNAS controller. The alias can be an IPv4 or IPv6 address.": "",
   "Aliases": "",
   "Aliases must be 15 characters or less.": "",
@@ -5129,6 +5130,7 @@
   "gzip-1 (fastest)": "",
   "gzip-9 (maximum, slow)": "",
   "iSCSI": "",
+  "iSCSI Authorized Networks": "",
   "iSCSI Extent": "",
   "iSCSI Group": "",
   "iSCSI Initiator": "",

src/assets/i18n/br.json

@@ -323,6 +323,7 @@
   "Alerts": "",
   "Alerts could not be loaded": "",
   "Algorithm": "",
+  "Alias": "",
   "Alias for the identical interface  on the other TrueNAS controller. The alias can be an IPv4 or IPv6 address.": "",
   "Aliases": "",
   "Aliases must be 15 characters or less.": "",
@@ -5129,6 +5130,7 @@
   "gzip-1 (fastest)": "",
   "gzip-9 (maximum, slow)": "",
   "iSCSI": "",
+  "iSCSI Authorized Networks": "",
   "iSCSI Extent": "",
   "iSCSI Group": "",
   "iSCSI Initiator": "",

src/assets/i18n/bs.json

@@ -323,6 +323,7 @@
   "Alerts": "",
   "Alerts could not be loaded": "",
   "Algorithm": "",
+  "Alias": "",
   "Alias for the identical interface  on the other TrueNAS controller. The alias can be an IPv4 or IPv6 address.": "",
   "Aliases": "",
   "Aliases must be 15 characters or less.": "",
@@ -5129,6 +5130,7 @@
   "gzip-1 (fastest)": "",
   "gzip-9 (maximum, slow)": "",
   "iSCSI": "",
+  "iSCSI Authorized Networks": "",
   "iSCSI Extent": "",
   "iSCSI Group": "",
   "iSCSI Initiator": "",

src/assets/i18n/ca.json

@@ -323,6 +323,7 @@
   "Alerts": "",
   "Alerts could not be loaded": "",
   "Algorithm": "",
+  "Alias": "",
   "Alias for the identical interface  on the other TrueNAS controller. The alias can be an IPv4 or IPv6 address.": "",
   "Aliases": "",
   "Aliases must be 15 characters or less.": "",
@@ -5129,6 +5130,7 @@
   "gzip-1 (fastest)": "",
   "gzip-9 (maximum, slow)": "",
   "iSCSI": "",
+  "iSCSI Authorized Networks": "",
   "iSCSI Extent": "",
   "iSCSI Group": "",
   "iSCSI Initiator": "",

src/assets/i18n/cs.json

@@ -89,6 +89,7 @@
   "Adjust Scrub Priority": "",
   "Adjust Scrub/Resilver Priority": "",
   "Adjust how often alert notifications are sent, use  the Frequency drop-down. Setting the Frequency to NEVER prevents that  alert from being added to alert notifications, but the alert can still  show in the web interface if it is triggered.": "",
+  "Alias": "",
   "All Host CPUs": "",
   "All Users": "",
   "Allow Directory Service users to access WebUI?": "",
@@ -4226,6 +4227,7 @@
   "You can only lock a dataset if it was encrypted with a passphrase": "",
   "You have unsaved changes. Are you sure you want to close?": "",
   "ZFS Errors": "",
+  "iSCSI Authorized Networks": "",
   "iXsystems does not audit or otherwise validate the contents of third-party applications catalogs.     It is incumbent on the user to verify that the new catalog is from a trusted source and that the third-party     properly audits its chart contents. Failure to exercise due diligence may expose the user and their data to     some or all of the following:<br/>    <ul>\n      <li>Malicious software</li>\n      <li>Broken services on TrueNAS host</li>\n      <li>Service disruption on TrueNAS host</li>\n      <li>Broken filesystem permissions on Host or within application</li>\n      <li>Unexpected deletion of user data</li>\n      <li>Unsafe service configuration in application</li>\n      <li>Degradation of TrueNAS host performance and stability</li>\n    </ul>": "",
   "{n, plural, =0 {No keys} =1 {# key} other {# keys}}": "",
   "{n, plural, one {# CPU} other {# CPUs}}": "",

src/assets/i18n/cy.json

@@ -323,6 +323,7 @@
   "Alerts": "",
   "Alerts could not be loaded": "",
   "Algorithm": "",
+  "Alias": "",
   "Alias for the identical interface  on the other TrueNAS controller. The alias can be an IPv4 or IPv6 address.": "",
   "Aliases": "",
   "Aliases must be 15 characters or less.": "",
@@ -5129,6 +5130,7 @@
   "gzip-1 (fastest)": "",
   "gzip-9 (maximum, slow)": "",
   "iSCSI": "",
+  "iSCSI Authorized Networks": "",
   "iSCSI Extent": "",
   "iSCSI Group": "",
   "iSCSI Initiator": "",