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=51e3c9afe0a76e99cbc6bb2d3ed42ffb190cb461;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 84db49150d8..fe9ffaea57d 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 890f5b951c3..ef6575e47ea 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 dee0ed502db..e0d24d635e4 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 c9b37c714b6..60443d8da13 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';
@@ -34,7 +34,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 0065b624746..21cd4f873db 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
@@ -231,10 +231,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 2ce7a5182d4..7b6baeb809e 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';
@@ -238,10 +238,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 eec24923f43..a0cb1e93aeb 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
@@ -162,3 +162,8 @@ export const ICON_TYPE = {
   warningAlt: 'warning--alt',
   checkMarkOutline: 'checkmark--outline'
 } 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 00000000000..5c945aa659a
Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/empty-state-search.png differ