From 6a627481025aa70664635e95b4eca8c5bdfff294 Mon Sep 17 00:00:00 2001 From: Kiefer Chang Date: Thu, 16 Apr 2020 13:27:21 +0800 Subject: [PATCH] mgr/dashboard: displaying Service detail inside table Adapt the changes in https://github.com/ceph/ceph/pull/32747. Fixes: https://tracker.ceph.com/issues/45106 Signed-off-by: Kiefer Chang --- .../service-daemon-list.component.html | 8 ++++++ .../service-daemon-list.component.ts | 25 +++++++++++++------ .../service-details.component.html | 4 +-- .../cluster/services/services.component.html | 5 ++-- .../services/services.component.spec.ts | 6 ++++- .../cluster/services/services.component.ts | 8 +++--- 6 files changed, 39 insertions(+), 17 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html index 27daa57c3f645..078ac04d42ed0 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html @@ -7,3 +7,11 @@ [autoReload]="60000" (fetchData)="getDaemons($event)"> + + + + {{ row.status_desc }} + + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts index 6683d276c6a46..43cf10de322ac 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts @@ -7,6 +7,7 @@ import { OnInit, QueryList, TemplateRef, + ViewChild, ViewChildren } from '@angular/core'; import { I18n } from '@ngx-translate/i18n-polyfill'; @@ -29,6 +30,9 @@ import { Daemon } from '../../../../shared/models/daemon.interface'; styleUrls: ['./service-daemon-list.component.scss'] }) export class ServiceDaemonListComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy { + @ViewChild('statusTpl', { static: true }) + statusTpl: TemplateRef; + @ViewChildren('daemonsTable') daemonsTableTpls: QueryList>; @@ -107,15 +111,10 @@ export class ServiceDaemonListComponent implements OnInit, OnChanges, AfterViewI }, { name: this.i18n('Status'), - prop: 'status', - flexGrow: 1, - filterable: true - }, - { - name: this.i18n('Status Description'), prop: 'status_desc', flexGrow: 1, - filterable: true + filterable: true, + cellTemplate: this.statusTpl }, { name: this.i18n('Last Refreshed'), @@ -149,6 +148,18 @@ export class ServiceDaemonListComponent implements OnInit, OnChanges, AfterViewI } } + getStatusClass(status: number) { + return _.get( + { + '-1': 'badge-danger', + '0': 'badge-warning', + '1': 'badge-success' + }, + status, + 'badge-dark' + ); + } + getDaemons(context: CdTableFetchDataContext) { let observable: Observable; if (this.hostname) { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.html index 924fb914947bd..9849ccad22e76 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.html @@ -1,7 +1,7 @@ - + - + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html index 5e2bcc5360334..11174d3849d04 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.html @@ -8,10 +8,11 @@ selectionType="single" [autoReload]="60000" (fetchData)="getServices($event)" - (updateSelection)="updateSelection($event)"> + [hasDetails]="true" + (setExpandedRow)="setExpandedRow($event)"> + [selection]="expandedRow"> diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.spec.ts index 925ed8a7a8cfa..347cfa1b00e18 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.spec.ts @@ -79,7 +79,11 @@ describe('ServicesComponent', () => { }); it('should have columns that are sortable', () => { - expect(component.columns.every((column) => Boolean(column.prop))).toBeTruthy(); + expect( + component.columns + .filter((column) => !(column.cellClass === 'cd-datatable-expand-collapse')) + .every((column) => Boolean(column.prop)) + ).toBeTruthy(); }); it('should return all services', () => { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts index a691ff5c61ebd..757d4f9da41b8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts @@ -3,6 +3,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'; import { CephServiceService } from '../../../shared/api/ceph-service.service'; import { OrchestratorService } from '../../../shared/api/orchestrator.service'; +import { ListWithDetails } from '../../../shared/classes/list-with-details.class'; import { TableComponent } from '../../../shared/datatable/table/table.component'; import { CellTemplate } from '../../../shared/enum/cell-template.enum'; import { CdTableColumn } from '../../../shared/models/cd-table-column'; @@ -17,7 +18,7 @@ import { AuthStorageService } from '../../../shared/services/auth-storage.servic templateUrl: './services.component.html', styleUrls: ['./services.component.scss'] }) -export class ServicesComponent implements OnChanges, OnInit { +export class ServicesComponent extends ListWithDetails implements OnChanges, OnInit { @ViewChild(TableComponent, { static: false }) table: TableComponent; @@ -43,6 +44,7 @@ export class ServicesComponent implements OnChanges, OnInit { private orchService: OrchestratorService, private cephServiceService: CephServiceService ) { + super(); this.permissions = this.authStorageService.getPermissions(); } @@ -100,10 +102,6 @@ export class ServicesComponent implements OnChanges, OnInit { } } - updateSelection(selection: CdTableSelection) { - this.selection = selection; - } - getServices(context: CdTableFetchDataContext) { if (this.isLoadingServices) { return; -- 2.39.5