NAS-132995: Implement iSCSI connections card

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

@@ -5,10 +5,18 @@ <h3 mat-card-title>
     </h3>
   </mat-card-header>
   <mat-card-content>
-    @for (session of sessions(); track session.initiator_addr) {
-      <div class="connection">
-        {{ session.initiator_addr }}
-      </div>
+    @if (isLoading()) {
+      <ngx-skeleton-loader></ngx-skeleton-loader>
+    } @else {
+      @if (sessions()?.length > 0) {
+        @for (session of sessions(); track session.initiator_addr) {
+          <div class="connection">
+            {{ session.initiator }} | {{ session.initiator_addr }}
+          </div>
+        }
+      } @else {
+        <p>{{ 'No connections' }}</p>
+      }
     }
   </mat-card-content>
 </mat-card>

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

@@ -1,30 +1,40 @@
-import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { Spectator, createComponentFactory } from '@ngneat/spectator/jest';
+import { mockApi, mockCall } from 'app/core/testing/utils/mock-api.utils';
+import { IscsiGlobalSession } from 'app/interfaces/iscsi-global-config.interface';
 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';
+import { ConnectionsCardComponent } from './connections-card.component';
+
+describe('ConnectionsCardComponent', () => {
+  let spectator: Spectator<ConnectionsCardComponent>;
 
-describe('AuthorizedNetworksCardComponent', () => {
-  let spectator: Spectator<AuthorizedNetworksCardComponent>;
   const createComponent = createComponentFactory({
-    component: AuthorizedNetworksCardComponent,
+    component: ConnectionsCardComponent,
+    providers: [
+      mockApi([
+        mockCall('iscsi.global.sessions', [
+          { initiator: 'iqn.1991-05.com.microsoft:initiator1', initiator_addr: '192.168.1.100' },
+          { initiator: 'iqn.1991-05.com.microsoft:initiator2', initiator_addr: '192.168.1.101' },
+        ] as IscsiGlobalSession[]),
+      ]),
+    ],
   });
 
   beforeEach(() => {
     spectator = createComponent({
       props: {
         target: {
-          auth_networks: ['192.168.1.10/24', '10.0.0.1/24'],
+          name: 'Target1',
         } as IscsiTarget,
       },
     });
   });
 
-  it('shows a list of networks authorized for the target', () => {
-    const networks = spectator.queryAll('.network');
+  it('displays session information when available', () => {
+    spectator.detectChanges();
 
-    expect(networks).toHaveLength(2);
-    expect(networks[0]).toHaveText('192.168.1.10/24');
-    expect(networks[1]).toHaveText('10.0.0.1/24');
+    const connections = spectator.queryAll('.connection');
+    expect(connections).toHaveLength(2);
+    expect(connections[0]).toHaveText('iqn.1991-05.com.microsoft:initiator1 | 192.168.1.100');
+    expect(connections[1]).toHaveText('iqn.1991-05.com.microsoft:initiator2 | 192.168.1.101');
   });
 });

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

@@ -1,15 +1,21 @@
 import {
   ChangeDetectionStrategy, Component,
+  effect,
+  input,
+  signal,
 } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
 import {
   MatCard, MatCardContent, MatCardHeader, MatCardTitle,
 } from '@angular/material/card';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
-import { map } from 'rxjs';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { finalize, take } from 'rxjs';
 import { IscsiGlobalSession } from 'app/interfaces/iscsi-global-config.interface';
+import { IscsiTarget } from 'app/interfaces/iscsi.interface';
 import { ApiService } from 'app/services/websocket/api.service';
 
+@UntilDestroy()
 @Component({
   selector: 'ix-connections-card',
   styleUrls: ['./connections-card.component.scss'],
@@ -20,21 +26,36 @@ import { ApiService } from 'app/services/websocket/api.service';
     MatCard,
     MatCardHeader,
     MatCardTitle,
+    NgxSkeletonLoaderModule,
     TranslateModule,
     MatCardContent,
   ],
 })
 export class ConnectionsCardComponent {
-  sessions = toSignal(this.api.call('iscsi.global.sessions').pipe(
-    map(() => {
-      return [{
-        initiator: 'inr1',
-        initiator_addr: '10.0.0.1',
-      }] as IscsiGlobalSession[];
-    }),
-  ));
+  readonly target = input.required<IscsiTarget>();
+
+  isLoading = signal<boolean>(false);
+  sessions = signal<IscsiGlobalSession[]>(null);
 
   constructor(
     private api: ApiService,
-  ) {}
+  ) {
+    effect(() => {
+      this.sessions.set(null);
+      this.isLoading.set(true);
+      this.getConnectionsByInitiatorId();
+    }, { allowSignalWrites: true });
+  }
+
+  private getConnectionsByInitiatorId(): void {
+    this.api.call('iscsi.global.sessions', [[['target_alias', '=', this.target().name]]])
+      .pipe(
+        take(1),
+        finalize(() => this.isLoading.set(false)),
+        untilDestroyed(this),
+      )
+      .subscribe((sessions) => {
+        this.sessions.set(sessions);
+      });
+  }
 }