From 51e3c9afe0a76e99cbc6bb2d3ed42ffb190cb461 Mon Sep 17 00:00:00 2001 From: Sagar Gopale Date: Wed, 4 Mar 2026 13:24:50 +0530 Subject: [PATCH] mgr/dashboard: Use illustration image for empty state table Fixes: https://tracker.ceph.com/issues/75287 Signed-off-by: Sagar Gopale --- .../nvmeof-gateway-subsystem.component.html | 2 +- .../nvmeof-gateway-subsystem.component.ts | 3 ++- .../nvmeof-listeners-list.component.html | 2 +- .../nvmeof-listeners-list.component.ts | 4 ++-- .../shared/datatable/table/table.component.html | 6 ++---- .../shared/datatable/table/table.component.ts | 6 +++--- .../frontend/src/app/shared/enum/icons.enum.ts | 5 +++++ .../frontend/src/assets/empty-state-search.png | Bin 0 -> 4541 bytes 8 files changed, 16 insertions(+), 12 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/assets/empty-state-search.png 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" > 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)">
- - + No data available
{{ emptyStateTitle }} 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 0000000000000000000000000000000000000000..5c945aa659ab06dd499c92f39a9964b759e3c61a GIT binary patch literal 4541 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 bVZh;kHaNBvT-Y3b00000NkvXXu0mjfbNQht literal 0 HcmV?d00001 -- 2.47.3