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 <kiefer.chang@suse.com>

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 27daa57c3f645bd0f258a9d7894180fbf6a72c22..078ac04d42ed0badfa3ba1e2c7d9591bd8082f9e 100644 (file)
--- 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)">
 </cd-table>
+
+<ng-template #statusTpl
+             let-row="row">
+  <span class="badge"
+        [ngClass]="getStatusClass(row.status)">
+    {{ row.status_desc }}
+  </span>
+</ng-template>

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 6683d276c6a46d1780b5b5880f60496780c1da8e..43cf10de322ac46fee6b15bfdc1cf01a3195ce85 100644 (file)
--- 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<any>;
+
   @ViewChildren('daemonsTable')
   daemonsTableTpls: QueryList<TemplateRef<TableComponent>>;
 
@@ -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<Daemon[]>;
     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 924fb914947bd34fae37bdd68d5ab90dccab20b3..9849ccad22e76d531f6f9f39f1b7b4f30c4f4ae7 100644 (file)
--- 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 @@
-<tabset *ngIf="selection.hasSingleSelection">
+<tabset *ngIf="selection">
   <tab i18n-heading
        heading="Daemons">
-    <cd-service-daemon-list [serviceName]="selection.first()['service_name']">
+    <cd-service-daemon-list [serviceName]="selection['service_name']">
     </cd-service-daemon-list>
   </tab>
 </tabset>

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 5e2bcc53603347ccd672761abf74014243c7e5cd..11174d3849d045ba7f03cf1b593f10c4b5d984a5 100644 (file)
--- 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)">
     <cd-service-details cdTableDetail
                         [permissions]="permissions"
-                        [selection]="selection">
+                        [selection]="expandedRow">
     </cd-service-details>
   </cd-table>
 </ng-container>

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 925ed8a7a8cfaae1f504170ea51f84ee42180e9c..347cfa1b00e18e103087798c5700cafc68382169 100644 (file)
--- 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 a691ff5c61ebda2bf005c510ea1d6bf44f2038cd..757d4f9da41b8f7b9bb992280b9ab3ef1830e724 100644 (file)
--- 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;