mgr/dashboard: Various UI issues related to CephFS

* Check if data is accessible, otherwise set grafanaId to undefined.
* Catch errors in 'Clients' tab and stop loading spinner. Display ViewCacheStatus Exception.
* Render the 'Enabled' column using the checkIcon cell template as other lists do.

Fixes: https://tracker.ceph.com/issues/40925
Signed-off-by: Volker Theile <vtheile@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.html
index 295f1b50d8c4235d4e404d30f2856266bbc87180..96d9d60fb5a8b6ddba2e12cab440b99ad5be1043 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.html
@@ -2,7 +2,7 @@
 
 <cd-table [data]="clients.data"
           [columns]="clients.columns"
-          (fetchData)="refresh()"
+          (fetchData)="refresh($event)"
           selectionType="single"
           (updateSelection)="updateSelection($event)">
   <cd-table-actions class="table-actions"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.ts
index 31891ae2f9b2ef1278f772fa9411868b917ce601..f618f44d54bfd36661f506dd62432d7cdf51c4f7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.ts
@@ -10,6 +10,7 @@ import { Icons } from '../../../shared/enum/icons.enum';
 import { NotificationType } from '../../../shared/enum/notification-type.enum';
 import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum';
 import { CdTableAction } from '../../../shared/models/cd-table-action';
+import { CdTableFetchDataContext } from '../../../shared/models/cd-table-fetch-data-context';
 import { CdTableSelection } from '../../../shared/models/cd-table-selection';
 import { Permission } from '../../../shared/models/permissions';
 import { AuthStorageService } from '../../../shared/services/auth-storage.service';
@@ -66,11 +67,19 @@ export class CephfsClientsComponent implements OnInit {
     this.viewCacheStatus = ViewCacheStatus.ValueNone;
   }
 
-  refresh() {
-    this.cephfsService.getClients(this.id).subscribe((data: any) => {
-      this.viewCacheStatus = data.status;
-      this.clients.data = data.data;
-    });
+  refresh(context?: CdTableFetchDataContext) {
+    this.cephfsService.getClients(this.id).subscribe(
+      (data: any) => {
+        this.viewCacheStatus = data.status;
+        this.clients.data = data.data;
+      },
+      () => {
+        this.viewCacheStatus = ViewCacheStatus.ValueException;
+        if (context) {
+          context.error();
+        }
+      }
+    );
   }
 
   updateSelection(selection: CdTableSelection) {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.spec.ts
index 256db87fa448d09fa954468d2cb2cdf51c366467..b6a201a9521775b87e3b5cf43f98bd8a401158f9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.spec.ts
@@ -3,11 +3,13 @@ import { Component, Input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import * as _ from 'lodash';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { TabsModule } from 'ngx-bootstrap/tabs';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
+import { CdTableSelection } from '../../../shared/models/cd-table-selection';
 import { SharedModule } from '../../../shared/shared.module';
 import { CephfsDetailComponent } from './cephfs-detail.component';
 
@@ -49,4 +51,18 @@ describe('CephfsDetailComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should resist invalid mds info', () => {
+    component.selection = new CdTableSelection();
+    component.selection.selected = [
+      {
+        mdsmap: {
+          info: {}
+        }
+      }
+    ];
+    component.selection.update();
+    component.ngOnChanges();
+    expect(_.isUndefined(component.grafanaId)).toBeTruthy();
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.ts
index 420e35e7c290969547111726233fa827793e0311..e717ff9e3bf6cc770b0c418551888b4ee8149e1c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.ts
@@ -53,7 +53,8 @@ export class CephfsDetailComponent implements OnChanges, OnInit {
     if (this.selection.hasSelection) {
       this.selectedItem = this.selection.first();
       const mdsInfo: any[] = this.selectedItem.mdsmap.info;
-      this.grafanaId = Object.values(mdsInfo)[0].name;
+      const values = Object.values(mdsInfo);
+      this.grafanaId = values.length ? _.first(values).name : undefined;
 
       if (this.id !== this.selectedItem.id) {
         this.id = this.selectedItem.id;
@@ -61,7 +62,12 @@ export class CephfsDetailComponent implements OnChanges, OnInit {
         this.pools.data = [];
         this.standbys = [];
         this.mdsCounters = {};
+        this.clientCount = 0;
       }
+
+      // Immediately refresh the displayed data, don't wait until the
+      // table refreshes the data itself.
+      this.refresh();
     }
   }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.ts
index d58357d4ba8aea32f4ad14172deea67409e86acd..66567475c76debd5d947cf7e52d9a869109ace0a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.ts
@@ -3,6 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { I18n } from '@ngx-translate/i18n-polyfill';
 
 import { CephfsService } from '../../../shared/api/cephfs.service';
+import { CellTemplate } from '../../../shared/enum/cell-template.enum';
 import { CdTableColumn } from '../../../shared/models/cd-table-column';
 import { CdTableFetchDataContext } from '../../../shared/models/cd-table-fetch-data-context';
 import { CdTableSelection } from '../../../shared/models/cd-table-selection';
@@ -34,7 +35,8 @@ export class CephfsListComponent implements OnInit {
       {
         name: this.i18n('Enabled'),
         prop: 'mdsmap.enabled',
-        flexGrow: 1
+        flexGrow: 1,
+        cellTransformation: CellTemplate.checkIcon
       }
     ];
   }