From: Sagar Gopale <sagar.gopale@ibm.com>
Date: Wed, 4 Mar 2026 07:54:50 +0000 (+0530)
Subject: mgr/dashboard: Use illustration image for empty state table
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=3eb7114dd82b47b73129bbb2cb3dc09da27814b1;p=ceph.git

mgr/dashboard: Use illustration image for empty state table

Fixes: https://tracker.ceph.com/issues/75287

Signed-off-by: Sagar Gopale <sagar.gopale@ibm.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-subsystem/nvmeof-gateway-subsystem.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-subsystem/nvmeof-gateway-subsystem.component.html
index 84db49150d8c..fe9ffaea57da 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-subsystem/nvmeof-gateway-subsystem.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-subsystem/nvmeof-gateway-subsystem.component.html
@@ -13,7 +13,7 @@
     i18n-emptyStateTitle
     emptyStateMessage="Once a subsystem is associated, it will appear in this list."
     i18n-emptyStateMessage
-    [emptyStateIcon]="iconType.emptySearch"
+    [emptyStateImage]="emptyStateImage.search"
   >
   </cd-table>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-subsystem/nvmeof-gateway-subsystem.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-subsystem/nvmeof-gateway-subsystem.component.ts
index 890f5b951c3a..ef6575e47eab 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-subsystem/nvmeof-gateway-subsystem.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway-subsystem/nvmeof-gateway-subsystem.component.ts
@@ -12,7 +12,7 @@ import {
 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
 
-import { ICON_TYPE } from '~/app/shared/enum/icons.enum';
+import { ICON_TYPE, EMPTY_STATE_IMAGE } from '~/app/shared/enum/icons.enum';
 import { NvmeofSubsystemAuthType } from '~/app/shared/enum/nvmeof.enum';
 
 @Component({
@@ -34,6 +34,7 @@ export class NvmeofGatewaySubsystemComponent implements OnInit {
 
   iconType = ICON_TYPE;
   authType = NvmeofSubsystemAuthType;
+  emptyStateImage = EMPTY_STATE_IMAGE;
 
   constructor(private nvmeofService: NvmeofService, private route: ActivatedRoute) {}
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-listeners-list/nvmeof-listeners-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-listeners-list/nvmeof-listeners-list.component.html
index dee0ed502db9..e0d24d635e42 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-listeners-list/nvmeof-listeners-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-listeners-list/nvmeof-listeners-list.component.html
@@ -17,7 +17,7 @@
           i18n-emptyStateTitle
           emptyStateMessage="No listeners found. Add listeners to define network endpoints for hosts"
           i18n-emptyStateMessage
-          [emptyStateIcon]="iconType.emptySearch"
+          [emptyStateImage]="emptyStateImage.search"
           (updateSelection)="updateSelection($event)">
   <div class="table-actions">
     <cd-table-actions [permission]="permission"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-listeners-list/nvmeof-listeners-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-listeners-list/nvmeof-listeners-list.component.ts
index 83862678a197..65aa3754aa13 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-listeners-list/nvmeof-listeners-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-listeners-list/nvmeof-listeners-list.component.ts
@@ -4,7 +4,7 @@ import { NvmeofService } from '~/app/shared/api/nvmeof.service';
 import { DeleteConfirmationModalComponent } from '~/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component';
 import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants';
 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
-import { Icons, ICON_TYPE } from '~/app/shared/enum/icons.enum';
+import { Icons, EMPTY_STATE_IMAGE } from '~/app/shared/enum/icons.enum';
 import { CdTableAction } from '~/app/shared/models/cd-table-action';
 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
@@ -33,7 +33,7 @@ export class NvmeofListenersListComponent implements OnInit {
   permission: Permission;
   listeners: NvmeofListener[];
   hasAvailableNodes = true;
-  iconType = ICON_TYPE;
+  emptyStateImage = EMPTY_STATE_IMAGE;
 
   constructor(
     public actionLabels: ActionLabelsI18n,
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 7be41ed60306..86615a7e0def 100644
--- 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
@@ -227,10 +227,8 @@
           <div cdsStack="vertical"
                gap="1">
             <div>
-              <cd-icon
-                [type]="emptyStateIcon"
-                [size]="iconSize.size32">
-              </cd-icon>
+              <img src="{{ emptyStateImage }}"
+                   alt="No data available" />
             </div>
             <legend class="cds--type-body-compact-02">
               <ng-container>{{ emptyStateTitle }}</ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
index 7018f706cb9b..4e3a91b09908 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
@@ -22,7 +22,7 @@ import { BehaviorSubject, Observable, of, Subject, Subscription } from 'rxjs';
 
 import { TableStatus } from '~/app/shared/classes/table-status';
 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
-import { Icons, IconSize, ICON_TYPE } from '~/app/shared/enum/icons.enum';
+import { Icons, IconSize, EMPTY_STATE_IMAGE } from '~/app/shared/enum/icons.enum';
 
 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
 import { CdTableColumnFilter } from '~/app/shared/models/cd-table-column-filter';
@@ -223,10 +223,10 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
   @Input()
   emptyStateMessage: string = $localize`There are currently no records to display.`;
   /**
-   * Icon to be displayed when there is no data
+   * Illustration image to be displayed when there is no data
    */
   @Input()
-  emptyStateIcon: string = ICON_TYPE.deploy;
+  emptyStateImage: string = EMPTY_STATE_IMAGE.default;
 
   /**
    * Should be a function to update the input data if undefined nothing will be triggered
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
index f37a9fdbbd8a..61f6209b0f29 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
@@ -126,3 +126,8 @@ export const ICON_TYPE = {
   add: 'add',
   emptySearch: 'emptySearch'
 } as const;
+
+export const EMPTY_STATE_IMAGE = {
+  default: 'assets/empty-state.png',
+  search: 'assets/empty-state-search.png'
+} as const;
diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/empty-state-search.png b/src/pybind/mgr/dashboard/frontend/src/assets/empty-state-search.png
new file mode 100644
index 000000000000..5c945aa659ab
Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/empty-state-search.png differ