From 2c9533390381651d56492d2b11f662353f3b3a28 Mon Sep 17 00:00:00 2001 From: Volker Theile Date: Wed, 24 Jul 2019 15:26:03 +0200 Subject: [PATCH] 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 --- .../cephfs-clients.component.html | 2 +- .../cephfs-clients.component.ts | 19 ++++++++++++++----- .../cephfs-detail.component.spec.ts | 16 ++++++++++++++++ .../cephfs-detail/cephfs-detail.component.ts | 8 +++++++- .../cephfs-list/cephfs-list.component.ts | 4 +++- 5 files changed, 41 insertions(+), 8 deletions(-) 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 295f1b50d8c42..96d9d60fb5a8b 100644 --- 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 @@ { - 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 256db87fa448d..b6a201a952177 100644 --- 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 420e35e7c2909..e717ff9e3bf6c 100644 --- 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 d58357d4ba8ae..66567475c76de 100644 --- 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 } ]; } -- 2.39.5