mgr/dashboard: Display OSD device class in OSD list

Fixes: https://tracker.ceph.com/issues/43179
Signed-off-by: Ricardo Marques <rimarques@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
index 3f9e473ed345223935304b4598c0550ff1d1cba7..95bf1279c01d5c714361d6bdebeabc2e59756dfd 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
@@ -204,10 +204,11 @@ export class OsdListComponent implements OnInit {
     ];
     this.columns = [
       { prop: 'host.name', name: this.i18n('Host') },
-      { prop: 'id', name: this.i18n('ID'), cellTransformation: CellTemplate.bold },
+      { prop: 'id', name: this.i18n('ID'), flexGrow: 1, cellTransformation: CellTemplate.bold },
       {
         prop: 'collectedStates',
         name: this.i18n('Status'),
+        flexGrow: 1,
         cellTransformation: CellTemplate.badge,
         customTemplateConfig: {
           map: {
@@ -219,8 +220,29 @@ export class OsdListComponent implements OnInit {
           }
         }
       },
-      { prop: 'stats.numpg', name: this.i18n('PGs') },
-      { prop: 'stats.stat_bytes', name: this.i18n('Size'), pipe: this.dimlessBinaryPipe },
+      {
+        prop: 'tree.device_class',
+        name: this.i18n('Device class'),
+        flexGrow: 1,
+        cellTransformation: CellTemplate.badge,
+        customTemplateConfig: {
+          map: {
+            hdd: { class: 'badge-hdd' },
+            ssd: { class: 'badge-ssd' }
+          }
+        }
+      },
+      {
+        prop: 'stats.numpg',
+        name: this.i18n('PGs'),
+        flexGrow: 1
+      },
+      {
+        prop: 'stats.stat_bytes',
+        name: this.i18n('Size'),
+        flexGrow: 1,
+        pipe: this.dimlessBinaryPipe
+      },
       { prop: 'stats.usage', name: this.i18n('Usage'), cellTemplate: this.osdUsageTpl },
       {
         prop: 'stats_history.out_bytes',

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 3a95e7ddfe0cf095f292c18cf7d3420ec8d63d07..ff67df3ab6abefa280c148723ad34c086d50d030 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -200,7 +200,8 @@
              let-value="value">
   <span *ngFor="let item of (value | array); last as last">
     <span class="badge"
-          [ngClass]="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.class) ? column.customTemplateConfig.map[item].class : (column?.customTemplateConfig?.class ? column.customTemplateConfig.class : 'badge-primary')">
+          [ngClass]="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.class) ? column.customTemplateConfig.map[item].class : (column?.customTemplateConfig?.class ? column.customTemplateConfig.class : 'badge-primary')"
+          *ngIf="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item">
       {{ (column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item }}
     </span>
     <span *ngIf="!last">&nbsp;</span>