mgr/dashboard: Add clients tab to NFS details

Fixes: https://tracker.ceph.com/issues/39963

Signed-off-by: Tiago Melo <tmelo@suse.com>
(cherry picked from commit 56f0ffc)

src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.html

@@ -4,4 +4,16 @@
     <cd-table-key-value [data]="data">
     </cd-table-key-value>
   </tab>
+
+  <tab heading="Clients ({{ clients.length }})"
+       i18n-heading>
+    <cd-table #table
+              [data]="clients"
+              columnMode="flex"
+              [columns]="clientsColumns"
+              identifier="addresses"
+              forceIdentifier="true"
+              selectionType="">
+    </cd-table>
+  </tab>
 </tabset>

src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.spec.ts

@@ -1,5 +1,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import * as _ from 'lodash';
 import { TabsModule } from 'ngx-bootstrap/tabs';
@@ -13,6 +14,8 @@ describe('NfsDetailsComponent', () => {
   let component: NfsDetailsComponent;
   let fixture: ComponentFixture<NfsDetailsComponent>;
 
+  const elem = (css) => fixture.debugElement.query(By.css(css));
+
   configureTestBed({
     declarations: [NfsDetailsComponent],
     imports: [SharedModule, TabsModule.forRoot(), HttpClientTestingModule],
@@ -37,25 +40,27 @@ describe('NfsDetailsComponent', () => {
         squash: 'no_root_squash',
         protocols: [3, 4],
         transports: ['TCP', 'UDP'],
-        clients: [],
+        clients: [
+          {
+            addresses: ['192.168.0.10', '192.168.1.0/8'],
+            access_type: 'RW',
+            squash: 'root_id_squash'
+          }
+        ],
         id: 'cluster1:1',
         state: 'LOADING'
       }
     ];
     component.selection.update();
-
+    component.ngOnChanges();
     fixture.detectChanges();
   });
 
-  beforeEach(() => {});
-
   it('should create', () => {
-    component.ngOnChanges();
     expect(component.data).toBeTruthy();
   });
 
   it('should prepare data', () => {
-    component.ngOnChanges();
     expect(component.data).toEqual({
       'Access Type': 'RW',
       'CephFS Filesystem': 1,
@@ -95,4 +100,15 @@ describe('NfsDetailsComponent', () => {
       Transport: ['TCP', 'UDP']
     });
   });
+
+  it('should have 1 client', () => {
+    expect(elem('li.nav-item:nth-of-type(2) span').nativeElement.textContent).toBe('Clients (1)');
+    expect(component.clients).toEqual([
+      {
+        access_type: 'RW',
+        addresses: ['192.168.0.10', '192.168.1.0/8'],
+        squash: 'root_id_squash'
+      }
+    ]);
+  });
 });

src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.ts

@@ -3,6 +3,7 @@ import { Component, Input, OnChanges } from '@angular/core';
 import { I18n } from '@ngx-translate/i18n-polyfill';
 import * as _ from 'lodash';
 
+import { CdTableColumn } from '../../../shared/models/cd-table-column';
 import { CdTableSelection } from '../../../shared/models/cd-table-selection';
 
 @Component({
@@ -17,11 +18,35 @@ export class NfsDetailsComponent implements OnChanges {
   selectedItem: any;
   data: any;
 
-  constructor(private i18n: I18n) {}
+  clientsColumns: CdTableColumn[];
+  clients = [];
+
+  constructor(private i18n: I18n) {
+    this.clientsColumns = [
+      {
+        name: this.i18n('Addresses'),
+        prop: 'addresses',
+        flexGrow: 2
+      },
+      {
+        name: this.i18n('Access Type'),
+        prop: 'access_type',
+        flexGrow: 1
+      },
+      {
+        name: this.i18n('Squash'),
+        prop: 'squash',
+        flexGrow: 1
+      }
+    ];
+  }
 
   ngOnChanges() {
     if (this.selection.hasSelection) {
       this.selectedItem = this.selection.first();
+
+      this.clients = this.selectedItem.clients;
+
       this.data = {};
       this.data[this.i18n('Cluster')] = this.selectedItem.cluster_id;
       this.data[this.i18n('Daemons')] = this.selectedItem.daemons;