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 84db49150d8cda151c3ec567650eaa6c14f47933..fe9ffaea57da6b0504e25138d7a4baff5b16714a 100644 (file)
--- 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 890f5b951c3a920ffad6e54132b28d907396195b..ef6575e47eab9d350577ed4c5c3c22b902477d9d 100644 (file)
--- 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 dee0ed502db91e8edb967abc3a511dd8fa2aa12f..e0d24d635e42e34e551715869f60cb9fca038254 100644 (file)
--- 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 83862678a1975d064b92ecc210e1dde66a16d09f..65aa3754aa13b3c5258fa025662c93d7dc307ba3 100644 (file)
--- 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 7be41ed60306681437cef876af56046926f4eda9..86615a7e0def173e72015709382690f322e0eeb7 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
@@ -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 7018f706cb9b43cbeead58ed084ef22c8a84827d..4e3a91b0990885368ef071313a94a2970ba9a3db 100644 (file)
--- 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 f37a9fdbbd8a071d6ef3ac0cc2ef8d73247d2227..61f6209b0f29be0fa1ce23324f7ba373a54012ce 100644 (file)
--- 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 (file)
index 0000000..5c945aa
Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/empty-state-search.png differ