From a0da67cb7f0e6066cb1fd0ba164564dc13bb688b Mon Sep 17 00:00:00 2001 From: pujaoshahu Date: Wed, 16 Oct 2024 21:27:58 +0530 Subject: [PATCH] mgr/dashboard: replace bootstrap badges with carbon tags Fixes: https://tracker.ceph.com/issues/68252 Signed-off-by: pujaoshahu --- .../cypress/e2e/block/mirroring.po.ts | 2 +- .../frontend/cypress/e2e/cluster/hosts.po.ts | 12 +-- .../frontend/cypress/e2e/cluster/osds.po.ts | 2 +- .../cypress/e2e/cluster/services.po.ts | 2 +- .../frontend/cypress/e2e/cluster/users.po.ts | 2 +- .../e2e/common/table-helper.feature.po.ts | 4 +- .../e2e/multi-cluster/multi-cluster.po.ts | 2 +- .../frontend/cypress/e2e/rgw/multisite.po.ts | 2 +- .../src/app/ceph/block/block.module.ts | 6 +- .../iscsi-target-details.component.html | 5 +- .../app/ceph/block/iscsi/iscsi.component.ts | 6 +- .../daemon-list/daemon-list.component.html | 2 +- .../image-list/image-list.component.html | 5 +- .../mirror-health-color.pipe.spec.ts | 8 +- .../mirroring/mirror-health-color.pipe.ts | 8 +- .../ceph/block/mirroring/mirroring.module.ts | 6 +- .../pool-list/pool-list.component.html | 4 +- .../nvmeof-gateway.component.html | 5 +- .../nvmeof-gateway.component.ts | 8 +- .../rbd-details/rbd-details.component.html | 2 +- .../block/rbd-list/rbd-list.component.html | 38 ++++++---- .../rbd-snapshot-list.component.ts | 6 +- .../cephfs-subvolume-group.component.html | 8 +- .../cephfs-subvolume-group.component.ts | 4 +- .../cephfs-subvolume-list.component.html | 8 +- .../cephfs-subvolume-list.component.ts | 4 +- ...phfs-subvolume-snapshots-list.component.ts | 6 +- .../cephfs-tabs/cephfs-tabs.component.html | 2 +- .../src/app/ceph/cluster/cluster.module.ts | 6 +- .../configuration-details.component.html | 12 ++- .../configuration-form.component.html | 5 +- .../cluster/crushmap/crushmap.component.html | 11 ++- .../cluster/crushmap/crushmap.component.ts | 12 ++- .../cluster/hosts/hosts.component.spec.ts | 4 +- .../app/ceph/cluster/hosts/hosts.component.ts | 10 +-- .../inventory-devices.component.ts | 10 +-- .../multi-cluster-list.component.ts | 8 +- .../multi-cluster/multi-cluster.component.ts | 16 ++-- ...sd-devices-selection-groups.component.html | 2 +- ...osd-devices-selection-modal.component.html | 8 +- .../osd-flags-indiv-modal.component.html | 8 +- .../osd/osd-list/osd-list.component.html | 12 ++- .../osd/osd-list/osd-list.component.ts | 18 ++--- .../active-alert-list.component.ts | 14 ++-- .../prometheus-tabs.component.html | 8 +- .../rules-list/rules-list.component.ts | 8 +- .../silence-list/silence-list.component.ts | 8 +- .../service-daemon-list.component.html | 8 +- .../service-daemon-list.component.ts | 8 +- .../ceph/dashboard-v3/dashboard-v3.module.ts | 5 +- .../dashboard/dashboard-v3.component.html | 10 +-- .../pool/pool-list/pool-list.component.ts | 8 +- ...gw-bucket-notification-list.component.html | 4 +- .../rgw-multisite-details.component.html | 16 ++-- .../rgw-multisite-sync-policy.component.ts | 6 +- .../rgw-sync-data-info.component.html | 12 ++- .../rgw-sync-data-info.component.spec.ts | 6 +- .../rgw-sync-metadata-info.component.html | 14 +++- .../rgw-sync-metadata-info.component.spec.ts | 10 ++- .../rgw-sync-primary-zone.component.html | 6 +- .../rgw-sync-primary-zone.component.spec.ts | 4 +- .../device-list/device-list.component.ts | 12 +-- .../app/core/navigation/navigation.module.ts | 6 +- .../navigation/navigation.component.html | 20 +++-- .../components/card/card.component.html | 2 +- .../cd-label/cd-label.component.html | 14 ++-- .../cd-label/color-class-from-text.pipe.ts | 12 +-- .../shared/components/components.module.ts | 6 +- .../select-badges.component.html | 6 +- .../select-badges.component.scss | 2 +- .../crud-table/crud-table.component.html | 4 +- .../crud-table/crud-table.component.ts | 6 +- .../datatable/table/table.component.html | 29 +++++--- .../datatable/table/table.component.scss | 4 + .../datatable/table/table.component.spec.ts | 4 +- .../shared/datatable/table/table.component.ts | 6 +- .../src/app/shared/enum/cell-template.enum.ts | 4 +- .../pipes/octal-to-human-readable.pipe.ts | 10 +-- .../mgr/dashboard/frontend/src/styles.scss | 73 ++++++------------- .../frontend/src/styles/_carbon-defaults.scss | 52 +++++++++++++ .../src/styles/ceph-custom/_buttons.scss | 2 +- 81 files changed, 419 insertions(+), 321 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/block/mirroring.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/block/mirroring.po.ts index bf3e0b36dfe90..2ebabe5bfb973 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/block/mirroring.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/block/mirroring.po.ts @@ -48,7 +48,7 @@ export class MirroringPageHelper extends PageHelper { cy.get('cd-mirroring-pools').within(() => { this.getTableCell(this.poolsColumnIndex.name, poolName) .parent() - .find(`[cdstabledata]:nth-child(${this.poolsColumnIndex.health}) .badge`) + .find(`[cdstabledata]:nth-child(${this.poolsColumnIndex.health}) cds-tag`) .should(($ele) => { const newLabels = $ele.toArray().map((v) => v.innerText); expect(newLabels).to.include(status); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/hosts.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/hosts.po.ts index 42da0ef2ed755..402662c2c46ff 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/hosts.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/hosts.po.ts @@ -75,13 +75,13 @@ export class HostsPageHelper extends PageHelper { if (add) { cy.get('cd-modal').find('.select-menu-edit').click(); for (const label of labels) { - cy.contains('cd-modal .badge', new RegExp(`^${label}$`)).should('not.exist'); + cy.contains('cd-modal .tag', new RegExp(`^${label}$`)).should('not.exist'); cy.get('.popover-body input').type(`${label}{enter}`); } } else { for (const label of labels) { - cy.contains('cd-modal .badge', new RegExp(`^${label}$`)) - .find('.badge-remove') + cy.contains('cd-modal .tag', new RegExp(`^${label}$`)) + .find('.tags-remove') .click(); } } @@ -95,7 +95,7 @@ export class HostsPageHelper extends PageHelper { this.getTableCell(this.columnIndex.hostname, hostname, true).as('row').click(); cy.get('@row') .parent() - .find(`[cdstabledata]:nth-child(${this.columnIndex.labels}) .badge`) + .find(`[cdstabledata]:nth-child(${this.columnIndex.labels}) .tag`) .should(($ele) => { const newLabels = $ele.toArray().map((v) => v.innerText); for (const label of labels) { @@ -120,7 +120,7 @@ export class HostsPageHelper extends PageHelper { this.getTableCell(this.columnIndex.hostname, hostname, true) .parent() - .find(`[cdstabledata]:nth-child(${this.columnIndex.status}) .badge`) + .find(`[cdstabledata]:nth-child(${this.columnIndex.status}) cds-tag`) .should(($ele) => { const status = $ele.toArray().map((v) => v.innerText); expect(status).to.include('maintenance'); @@ -150,7 +150,7 @@ export class HostsPageHelper extends PageHelper { this.getTableCell(this.columnIndex.hostname, hostname, true) .parent() - .find(`[cdstabledata]:nth-child(${this.columnIndex.status}) .badge`) + .find(`[cdstabledata]:nth-child(${this.columnIndex.status}) .tag`) .should(($ele) => { const status = $ele.toArray().map((v) => v.innerText); expect(status).to.include('maintenance'); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/osds.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/osds.po.ts index b35a94050a1ad..a9c7c6e9a545c 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/osds.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/osds.po.ts @@ -52,7 +52,7 @@ export class OSDsPageHelper extends PageHelper { checkStatus(id: number, status: string[]) { this.searchTable(id.toString()); cy.wait(5 * 1000); - cy.get(`[cdstabledata]:nth-child(${this.columnIndex.status}) .badge`).should(($ele) => { + cy.get(`[cdstabledata]:nth-child(${this.columnIndex.status}) cds-tag`).should(($ele) => { const allStatus = $ele.toArray().map((v) => v.innerText); for (const s of status) { expect(allStatus).to.include(s); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/services.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/services.po.ts index c546d5cc513a5..d5ed9c26b11ea 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/services.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/services.po.ts @@ -157,7 +157,7 @@ export class ServicesPageHelper extends PageHelper { cy.get('cd-service-daemon-list').within(() => { this.getTableCell(daemonNameIndex, daemon, true) .parent() - .find(`[cdstabledata]:nth-child(${statusIndex}) .badge`) + .find(`[cdstabledata]:nth-child(${statusIndex}) cds-tag`) .should(($ele) => { const status = $ele.toArray().map((v) => v.innerText); expect(status).to.include(expectedStatus); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/users.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/users.po.ts index 2b1d198f236c2..dc57bd9dcd34f 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/users.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/users.po.ts @@ -49,7 +49,7 @@ export class UsersPageHelper extends PageHelper { this.getTableCell(this.columnIndex.entity, entityName) .click() .parent() - .find(`[cdstabledata]:nth-child(${this.columnIndex.capabilities}) .badge`) + .find(`[cdstabledata]:nth-child(${this.columnIndex.capabilities}) cds-tag`) .should(($ele) => { const newCaps = $ele.toArray().map((v) => v.innerText); for (const cap of capabilities) { diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/table-helper.feature.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/table-helper.feature.po.ts index 25dc845cf1878..91503335855ef 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/table-helper.feature.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/table-helper.feature.po.ts @@ -79,7 +79,7 @@ And('I should see row {string} have {string}', (row: string, options: string) => if (options) { cy.get('.cds--search-input').first().clear().type(row); for (const option of options.split(',')) { - cy.contains(`[cdstablerow] [cdstabledata] .badge`, option).should('exist'); + cy.contains(`[cdstablerow] [cdstabledata] .tag`, option).should('exist'); } } }); @@ -96,7 +96,7 @@ And('I should see row {string} does not have {string}', (row: string, options: s if (options) { cy.get('.cds--search-input').first().clear().type(row); for (const option of options.split(',')) { - cy.contains(`[cdstablerow] [cdstabledata] .badge`, option).should('not.exist'); + cy.contains(`[cdstablerow] [cdstabledata] .tag`, option).should('not.exist'); } } }); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/multi-cluster/multi-cluster.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/multi-cluster/multi-cluster.po.ts index 5c683a947a696..13856eefcbcd1 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/multi-cluster/multi-cluster.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/multi-cluster/multi-cluster.po.ts @@ -64,7 +64,7 @@ export class MultiClusterPageHelper extends PageHelper { this.getTableCell(aliasIndex, alias) .parent() - .find(`[cdstabledata]:nth-child(${statusIndex}) .badge`) + .find(`[cdstabledata]:nth-child(${statusIndex}) cds-tag`) .should(($ele) => { const status = $ele.toArray().map((v) => v.innerText); expect(status).to.include(expectedStatus); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.po.ts index 5240c8364244a..e33957dd3db87 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.po.ts @@ -59,7 +59,7 @@ export class MultisitePageHelper extends PageHelper { this.searchTable(group_id); cy.get(`[cdstabledata]:nth-child(${this.columnIndex.status})`) - .find('.badge-warning') + .find('.tag-warning') .should('contain', status); } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts index e3b600bafa90d..f309f8a293280 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts @@ -64,7 +64,8 @@ import { SelectModule, UIShellModule, TreeviewModule, - TabsModule + TabsModule, + TagModule } from 'carbon-components-angular'; // Icons @@ -101,7 +102,8 @@ import ProgressBarRound from '@carbon/icons/es/progress-bar--round/32'; ModalModule, DatePickerModule, ComboBoxModule, - TabsModule + TabsModule, + TagModule ], declarations: [ RbdListComponent, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.html index 77d1cbc566760..29937e48cd253 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.html @@ -14,10 +14,9 @@ > {{ node?.name }}   - + {{ node?.status }} - + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi/iscsi.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi/iscsi.component.ts index 89e4d7f3407b3..787a6e389c21e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi/iscsi.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi/iscsi.component.ts @@ -39,11 +39,11 @@ export class IscsiComponent implements OnInit { name: $localize`State`, prop: 'state', flexGrow: 1, - cellTransformation: CellTemplate.badge, + cellTransformation: CellTemplate.tag, customTemplateConfig: { map: { - up: { class: 'badge-success' }, - down: { class: 'badge-danger' } + up: { class: 'tag-success' }, + down: { class: 'tag-danger' } } } }, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.html index 05226ed1a9340..749b2b40595b0 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/daemon-list/daemon-list.component.html @@ -9,5 +9,5 @@ - {{ value }} + {{ value }} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html index eac76dea64d8e..77c03dd06ae3b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html @@ -48,7 +48,10 @@ - {{ value }} + +{{ value }} + { }); it('transforms "warning"', () => { - expect(pipe.transform('warning')).toBe('badge badge-warning'); + expect(pipe.transform('warning')).toBe('tag-warning'); }); it('transforms "error"', () => { - expect(pipe.transform('error')).toBe('badge badge-danger'); + expect(pipe.transform('error')).toBe('tag-danger'); }); it('transforms "success"', () => { - expect(pipe.transform('success')).toBe('badge badge-success'); + expect(pipe.transform('success')).toBe('tag-success'); }); it('transforms others', () => { - expect(pipe.transform('abc')).toBe('badge badge-info'); + expect(pipe.transform('abc')).toBe('tag-info'); }); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirror-health-color.pipe.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirror-health-color.pipe.ts index 3c25d715e5e30..8817be5f4e157 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirror-health-color.pipe.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirror-health-color.pipe.ts @@ -6,12 +6,12 @@ import { Pipe, PipeTransform } from '@angular/core'; export class MirrorHealthColorPipe implements PipeTransform { transform(value: any): any { if (value === 'warning') { - return 'badge badge-warning'; + return 'tag-warning'; } else if (value === 'error') { - return 'badge badge-danger'; + return 'tag-danger'; } else if (value === 'success') { - return 'badge badge-success'; + return 'tag-success'; } - return 'badge badge-info'; + return 'tag-info'; } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts index 090da06869d10..e4a32f26a30b2 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts @@ -23,7 +23,8 @@ import { IconService, InputModule, ModalModule, - SelectModule + SelectModule, + TagModule } from 'carbon-components-angular'; // Icons @@ -49,7 +50,8 @@ import DocumentImportIcon from '@carbon/icons/es/document--import/16'; SelectModule, GridModule, ButtonModule, - IconModule + IconModule, + TagModule ], declarations: [ BootstrapCreateModalComponent, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.html index ffffe7fa687bc..f8aca866df309 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.html @@ -18,7 +18,9 @@ - {{ value }} + + {{ value }} + - + {{ row.status_desc }} - + Features - {{ feature }} + {{ feature }} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html index 76fabd9c817f4..ddd91a7ce44f8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html @@ -37,26 +37,38 @@ - {{ value[0] }}  - {{ value[1] }}  - primary - secondary + + {{ value[0] }} +   + + {{ value[1] }} +   + + primary + + + secondary + - {{ value }} + + {{ value }} + - {{ value[2] | cdDate }} + + {{ value[2] | cdDate }} + - + {{ result.content }} - + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-group/cephfs-subvolume-group.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-group/cephfs-subvolume-group.component.ts index 9d68fd5c00626..4cb7a1bc31235 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-group/cephfs-subvolume-group.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-group/cephfs-subvolume-group.component.ts @@ -82,9 +82,9 @@ export class CephfsSubvolumeGroupComponent implements OnInit, OnChanges { name: $localize`Data Pool`, prop: 'info.data_pool', flexGrow: 0.7, - cellTransformation: CellTemplate.badge, + cellTransformation: CellTemplate.tag, customTemplateConfig: { - class: 'badge-background-primary' + class: 'tag-background-primary' } }, { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html index a1e063e6d1bc6..afc8172b7775d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html @@ -50,11 +50,11 @@ - + {{ result.content }} - + Clients - {{ clients.data.length }} + {{ clients.data.length }} - {{ flag | uppercase }} + {{ flag | uppercase }} Services + class="bold"> + Services + - {{ service }} + + {{ service }} + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html index a6775dcee1750..f1486969e0713 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html @@ -87,7 +87,10 @@
- {{ service }} + + {{ service }} +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html index 108d39cad7438..9143272803599 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html @@ -25,13 +25,12 @@ - - - {{ data.status }} - + + {{ data?.status }} +   ; + @ViewChild('tag') labelTpl: TemplateRef; icons = Icons; loadingIndicator = true; @@ -134,4 +134,14 @@ export class CrushmapComponent implements OnDestroy, OnInit { delete this.metadataTitle; } } + + getStatusClasses(status: string): string { + if (['in', 'up'].includes(status)) { + return 'tag-success '; + } + if (['down', 'out', 'destroyed'].includes(status)) { + return 'tag-danger'; + } + return ''; + } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts index 34bf44c683c92..e29d31bc68c30 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts @@ -25,6 +25,7 @@ import { TableActionHelper } from '~/testing/unit-test-helper'; import { HostsComponent } from './hosts.component'; +import { TagModule } from 'carbon-components-angular'; class MockShowForceMaintenanceModal { showModal = false; @@ -63,7 +64,8 @@ describe('HostsComponent', () => { RouterTestingModule, ToastrModule.forRoot(), CephModule, - CoreModule + CoreModule, + TagModule ], providers: [ { provide: AuthStorageService, useValue: fakeAuthStorageService }, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts index 200ddba0b76a1..cb237f768f2cc 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts @@ -226,20 +226,20 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit name: $localize`Labels`, prop: 'labels', flexGrow: 1, - cellTransformation: CellTemplate.badge, + cellTransformation: CellTemplate.tag, customTemplateConfig: { - class: 'badge-dark' + class: 'tag-dark' } }, { name: $localize`Status`, prop: 'status', flexGrow: 0.8, - cellTransformation: CellTemplate.badge, + cellTransformation: CellTemplate.tag, customTemplateConfig: { map: { - maintenance: { class: 'badge-warning' }, - available: { class: 'badge-success' } + maintenance: { class: 'tag-warning' }, + available: { class: 'tag-success' } } } }, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component.ts index b377b28f29349..1ed29e4126688 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component.ts @@ -118,11 +118,11 @@ export class InventoryDevicesComponent implements OnInit, OnDestroy { name: $localize`Type`, prop: 'human_readable_type', flexGrow: 1, - cellTransformation: CellTemplate.badge, + cellTransformation: CellTemplate.tag, customTemplateConfig: { map: { - hdd: { value: 'HDD', class: 'badge-hdd' }, - ssd: { value: 'SSD', class: 'badge-ssd' } + hdd: { value: 'HDD', class: 'tag-hdd' }, + ssd: { value: 'SSD', class: 'tag-ssd' } } } }, @@ -153,9 +153,9 @@ export class InventoryDevicesComponent implements OnInit, OnDestroy { name: $localize`OSDs`, prop: 'osd_ids', flexGrow: 1, - cellTransformation: CellTemplate.badge, + cellTransformation: CellTemplate.tag, customTemplateConfig: { - class: 'badge-dark', + class: 'tag-dark', prefix: 'osd.' } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.ts index a9ca408f4874f..91068122aa845 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.ts @@ -132,12 +132,12 @@ export class MultiClusterListComponent extends ListWithDetails implements OnInit prop: 'cluster_connection_status', name: $localize`Connection`, flexGrow: 2, - cellTransformation: CellTemplate.badge, + cellTransformation: CellTemplate.tag, customTemplateConfig: { map: { - 1: { value: 'DISCONNECTED', class: 'badge-danger' }, - 0: { value: 'CONNECTED', class: 'badge-success' }, - 2: { value: 'CHECKING..', class: 'badge-info' } + 1: { value: 'DISCONNECTED', class: 'tag-danger' }, + 0: { value: 'CONNECTED', class: 'tag-success' }, + 2: { value: 'CHECKING..', class: 'tag-info' } } } }, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster.component.ts index 46e07885c5459..02579680b852b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster.component.ts @@ -133,12 +133,12 @@ export class MultiClusterComponent implements OnInit, OnDestroy { prop: 'cluster_connection_status', name: $localize`Connection`, flexGrow: 2, - cellTransformation: CellTemplate.badge, + cellTransformation: CellTemplate.tag, customTemplateConfig: { map: { - 1: { value: 'DISCONNECTED', class: 'badge-danger' }, - 0: { value: 'CONNECTED', class: 'badge-success' }, - 2: { value: 'CHECKING..', class: 'badge-info' } + 1: { value: 'DISCONNECTED', class: 'tag-danger' }, + 0: { value: 'CONNECTED', class: 'tag-success' }, + 2: { value: 'CHECKING..', class: 'tag-info' } } } }, @@ -146,12 +146,12 @@ export class MultiClusterComponent implements OnInit, OnDestroy { prop: 'status', name: $localize`Status`, flexGrow: 1, - cellTransformation: CellTemplate.badge, + cellTransformation: CellTemplate.tag, customTemplateConfig: { map: { - 1: { value: 'WARN', class: 'badge-warning' }, - 0: { value: 'OK', class: 'badge-success' }, - 2: { value: 'ERROR', class: 'badge-danger' } + 1: { value: 'WARN', class: 'tag-warning' }, + 0: { value: 'OK', class: 'tag-success' }, + 2: { value: 'ERROR', class: 'tag-danger' } } } }, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html index e790cf0f3d43c..de55256de2bdf 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html @@ -29,7 +29,7 @@
- {{ filter.name }}: {{ filter.value.formatted }} + {{ filter.name }}: {{ filter.value.formatted }} At least one of these filters must be applied in order to proceed: - - {{ filter }} - + + {{ filter }} + {{ flag.name }} - Cluster-wide + Cluster-wide
{{ flag.description }} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html index 72cebe8c03f96..4b42c0c261d4c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html @@ -120,10 +120,14 @@ - {{ flag }} - {{ flag }} + + {{ flag }} + + + {{ flag }} + Active Alerts - {{ prometheusAlertService.activeCriticalAlerts }} - {{ prometheusAlertService.activeWarningAlerts }} + {{ prometheusAlertService.activeCriticalAlerts }} + {{ prometheusAlertService.activeWarningAlerts }}
  • - + {{ row.status_desc }} - + {{ event.created | relativeDate }} - - {{ event.subject }}
    + {{ event.subject }}
    Telemetry Dashboard - + {{ telemetryEnabled ? 'Active' : 'Inactive' }} - +
    {{ rule.Name }}: {{ rule.Value }} + class="tag-background-gray">{{ rule.Name }}: {{ rule.Value }}

    • @@ -46,7 +46,7 @@ + class="tag-background-primary"> {{ event }} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html index 68018154d53ed..68d739629b8a7 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html @@ -88,16 +88,16 @@ > {{ node?.data?.name }}     - + default - - master - + + master + secondary-zone - +
    -
  • Up to Date
    • +
  • + Up to Date +
    • @@ -49,6 +50,9 @@ i18n> Last Synced: -
  • {{ zone.timestamp | relativeDate }}
    • +
  • + + {{ zone.timestamp | relativeDate }} + +
    • diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.spec.ts index ebcb017ece4be..94e886f148319 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.spec.ts @@ -30,7 +30,7 @@ describe('RgwSyncDataInfoComponent', () => { timestamp: null }; fixture.detectChanges(); - const upToDateBadge = fixture.debugElement.query(By.css('.badge-success')); + const upToDateBadge = fixture.debugElement.query(By.css('cds-tag.tag-success')); expect(upToDateBadge).toBeTruthy(); expect(upToDateBadge.nativeElement.textContent).toEqual('Up to Date'); }); @@ -44,8 +44,8 @@ describe('RgwSyncDataInfoComponent', () => { const lastSyncedElement = fixture.debugElement.query(By.css('li.mt-4.fw-bold')); expect(lastSyncedElement.nativeElement.textContent).toContain('Last Synced:'); - const lastSyncedTimestamp = fixture.debugElement.query(By.css('.badge-info')); - expect(lastSyncedTimestamp.nativeElement.textContent).toEqual('10 minutes ago'); + const lastSyncedTimestamp = fixture.debugElement.query(By.css('cds-tag.tag-info')); + expect(lastSyncedTimestamp.nativeElement.textContent.trim()).toEqual('10 minutes ago'); })); it('should display sync status in the popover', () => { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html index b32ca8a0ba0b5..6f923e9eff066 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html @@ -7,8 +7,11 @@
      -
    • Up to Date
      • +
    • + + Up to Date + +
      • @@ -57,7 +60,10 @@ i18n> Last Synced: -
    • {{ metadataSyncInfo.timestamp | relativeDate }}
      • +
    • + + {{ metadataSyncInfo.timestamp | relativeDate }} + +
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.spec.ts index 0457fe2a98348..1b4155a01a05c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.spec.ts @@ -30,9 +30,10 @@ describe('RgwSyncMetadataInfoComponent', () => { timestamp: null }; fixture.detectChanges(); - const upToDateBadge = fixture.debugElement.query(By.css('.badge-success')); + const upToDateBadge = fixture.debugElement.query(By.css('cds-tag')); expect(upToDateBadge).toBeTruthy(); - expect(upToDateBadge.nativeElement.textContent).toEqual('Up to Date'); + expect(upToDateBadge.nativeElement.classList).toContain('tag-success'); + expect(upToDateBadge.nativeElement.textContent.trim()).toEqual('Up to Date'); }); it('should display correct sync status and last synced time', () => { @@ -47,8 +48,9 @@ describe('RgwSyncMetadataInfoComponent', () => { const lastSyncedElement = fixture.debugElement.query(By.css('li.mt-4.fw-bold')); expect(lastSyncedElement.nativeElement.textContent).toContain('Last Synced:'); - const lastSyncedTimestamp = fixture.debugElement.query(By.css('.badge-info')); - expect(lastSyncedTimestamp.nativeElement.textContent).toEqual('10 minutes ago'); + const lastSyncedTimestamp = fixture.debugElement.query(By.css('cds-tag')); + expect(lastSyncedTimestamp.nativeElement.classList).toContain('tag-info'); + expect(lastSyncedTimestamp.nativeElement.textContent.trim()).toEqual('10 minutes ago'); }); it('should display sync status in the popover', () => { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.html index fe6e074b72df2..658594f5d3e1d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.html @@ -4,7 +4,7 @@ [size]="icons.size20" class="cds-icon--size-07"> -
  • {{realm}}
    • +
  • {{realm}}
  • @@ -13,7 +13,7 @@
    • -

    {{zonegroup}}

    +

    {{zonegroup}}

  • @@ -23,5 +23,5 @@ [size]="icons.size20" class="cds-icon--size-07 cds-icon">
    • -
  • {{zone}}
    • +
  • {{zone}}
    • diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.spec.ts index 1bce83fcc5a6f..16d1ea68cb339 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.spec.ts @@ -28,10 +28,10 @@ describe('RgwSyncPrimaryZoneComponent', () => { component.zone = 'Zone'; fixture.detectChanges(); - const realmBadge = fixture.debugElement.query(By.css('li:nth-child(2)')); + const realmBadge = fixture.debugElement.query(By.css('cds-tag.tag-info')); expect(realmBadge.nativeElement.textContent).toContain('Realm'); - const zonegroupBadge = fixture.debugElement.query(By.css('p')); + const zonegroupBadge = fixture.debugElement.queryAll(By.css('cds-tag.tag-info'))[1]; expect(zonegroupBadge.nativeElement.textContent).toContain('Zonegroup'); const zoneBadge = fixture.debugElement.query(By.css('li:nth-child(8)')); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.ts index 509b869d7153c..fbff353737d97 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.ts @@ -50,14 +50,14 @@ export class DeviceListComponent implements OnChanges, OnInit { prop: 'state', name: $localize`State of Health`, flexGrow: 1, - cellTransformation: CellTemplate.badge, + cellTransformation: CellTemplate.tag, customTemplateConfig: { map: { - good: { value: $localize`Good`, class: 'badge-success' }, - warning: { value: $localize`Warning`, class: 'badge-warning' }, - bad: { value: $localize`Bad`, class: 'badge-danger' }, - stale: { value: $localize`Stale`, class: 'badge-info' }, - unknown: { value: $localize`Unknown`, class: 'badge-dark' } + good: { value: $localize`Good`, class: 'tag-success' }, + warning: { value: $localize`Warning`, class: 'tag-warning' }, + bad: { value: $localize`Bad`, class: 'tag-danger' }, + stale: { value: $localize`Stale`, class: 'tag-info' }, + unknown: { value: $localize`Unknown`, class: 'tag-dark' } } } }, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts index 91b51d8682b2f..7236662e7cc16 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts @@ -15,7 +15,8 @@ import { ModalModule, ToggleModule, ButtonModule, - PlaceholderModule + PlaceholderModule, + TagModule } from 'carbon-components-angular'; import { AppRoutingModule } from '~/app/app-routing.module'; @@ -70,7 +71,8 @@ import { ModalCdsService } from '~/app/shared/services/modal-cds.service'; ModalModule, ToggleModule, ButtonModule, - PlaceholderModule + PlaceholderModule, + TagModule ], declarations: [ AboutComponent, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html index 68c0f081c2024..d6d19b35f38b3 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html @@ -179,10 +179,14 @@ *ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring" class="tc_submenuitem tc_submenuitem_block_mirroring"> Mirroring - {{ summaryData?.rbd_mirroring?.warnings }} - {{ summaryData?.rbd_mirroring?.errors }} + + {{ summaryData?.rbd_mirroring?.warnings }} + + + {{ summaryData?.rbd_mirroring?.errors }} + Alerts - {{ prometheusAlertService.activeCriticalAlerts }} - {{ prometheusAlertService.activeWarningAlerts }} + {{ prometheusAlertService.activeCriticalAlerts }} + {{ prometheusAlertService.activeWarningAlerts }} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.html index 5732c38d204ad..deb4bc366f9bf 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.html @@ -9,7 +9,7 @@ - {{ cardTitle }} + {{ cardTitle }}
    diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.html index 1e92028823c3e..72819d5529845 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.html @@ -1,12 +1,12 @@ - + {{ value }} - + - + {{ key }}: {{ value }} - + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/color-class-from-text.pipe.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/color-class-from-text.pipe.ts index fcbf2f9a45845..5b6ce6cde1042 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/color-class-from-text.pipe.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/color-class-from-text.pipe.ts @@ -5,12 +5,12 @@ import { Pipe, PipeTransform } from '@angular/core'; }) export class ColorClassFromTextPipe implements PipeTransform { readonly cssClasses: string[] = [ - 'badge-cd-label-green', - 'badge-cd-label-cyan', - 'badge-cd-label-purple', - 'badge-cd-label-light-blue', - 'badge-cd-label-gold', - 'badge-cd-label-light-green' + 'tag-cd-label-green', + 'tag-cd-label-cyan', + 'tag-cd-label-purple', + 'tag-cd-label-light-blue', + 'tag-cd-label-gold', + 'tag-cd-label-light-green' ]; transform(text: string): string { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts index 022b086e0890c..a01f806999d56 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts @@ -40,7 +40,8 @@ import { LayoutModule, TilesModule, PopoverModule, - InlineLoadingModule + InlineLoadingModule, + TagModule } from 'carbon-components-angular'; import EditIcon from '@carbon/icons/es/edit/20'; import CodeIcon from '@carbon/icons/es/code/16'; @@ -142,7 +143,8 @@ import CloseIcon from '@carbon/icons/es/close/16'; LayoutModule, TilesModule, PopoverModule, - InlineLoadingModule + InlineLoadingModule, + TagModule ], declarations: [ SparklineComponent, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html index 331b3004040c6..55b8e564c646e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html @@ -13,13 +13,13 @@ - + {{ dataItem }} - - + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss index e1271c5e4202b..843b92c971674 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss @@ -1,6 +1,6 @@ @use './src/styles/vendor/variables' as vv; -.badge-remove { +.tags-remove { color: vv.$white; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/crud-table/crud-table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/crud-table/crud-table.component.html index e5401c70d15c6..4abcd7ca69a28 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/crud-table/crud-table.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/crud-table/crud-table.component.html @@ -45,10 +45,10 @@ - - {{ instance.key }}: {{ instance.value }} + {{ instance.key }}: {{ instance.value }}   diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/crud-table/crud-table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/crud-table/crud-table.component.ts index 5640b5f5364de..29bad1ba9e4ab 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/crud-table/crud-table.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/crud-table/crud-table.component.ts @@ -24,8 +24,8 @@ import { BaseModal } from 'carbon-components-angular'; styleUrls: ['./crud-table.component.scss'] }) export class CRUDTableComponent implements OnInit { - @ViewChild('badgeDictTpl') - public badgeDictTpl: TemplateRef; + @ViewChild('tagDictTpl') + public tagDictTpl: TemplateRef; @ViewChild('dateTpl') public dateTpl: TemplateRef; @ViewChild('durationTpl') @@ -89,7 +89,7 @@ export class CRUDTableComponent implements OnInit { ); this.permission = this.permissions[toCamelCase(meta.permissions[0])]; const templates = { - badgeDict: this.badgeDictTpl, + badgeDict: this.tagDictTpl, date: this.dateTpl, duration: this.durationTpl }; 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 4a52fde29d2b2..044f586aa754c 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 @@ -324,21 +324,28 @@ ({{ row.cdExecuting }}) - - {{ value }} + + + {{ value }} + + + {{value}} + + - - - - {{ (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 }} +   @@ -353,13 +360,13 @@ let-column="data.column" let-value="data.value"> - {{value}} - + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss index d1a943d22730f..73f272639987a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss @@ -107,3 +107,7 @@ tr .edit-btn { tr:hover .edit-btn { opacity: 1; } + +.table-tag { + white-space: nowrap; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts index 35afd964ae3cc..949ba54007297 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts @@ -740,7 +740,7 @@ describe('TableComponent', () => { describe('useCustomClass', () => { beforeEach(() => { component.customCss = { - 'badge badge-danger': 'active', + 'tag-danger': 'active', 'secret secret-number': 123.456, btn: (v) => _.isString(v) && v.startsWith('http'), secure: (v) => _.isString(v) && v.startsWith('https') @@ -759,7 +759,7 @@ describe('TableComponent', () => { }); it('should match a string and return the corresponding class', () => { - expect(component.useCustomClass('active')).toBe('badge badge-danger'); + expect(component.useCustomClass('active')).toBe('tag-danger'); }); it('should match a number and return the corresponding class', () => { 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 e1980a2798b1d..86c105ec64b72 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 @@ -64,8 +64,8 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr executingTpl: TemplateRef; @ViewChild('classAddingTpl', { static: true }) classAddingTpl: TemplateRef; - @ViewChild('badgeTpl', { static: true }) - badgeTpl: TemplateRef; + @ViewChild('tagTpl', { static: true }) + tagTpl: TemplateRef; @ViewChild('mapTpl', { static: true }) mapTpl: TemplateRef; @ViewChild('truncateTpl', { static: true }) @@ -854,7 +854,7 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr this.cellTemplates.perSecond = this.perSecondTpl; this.cellTemplates.executing = this.executingTpl; this.cellTemplates.classAdding = this.classAddingTpl; - this.cellTemplates.badge = this.badgeTpl; + this.cellTemplates.tag = this.tagTpl; this.cellTemplates.map = this.mapTpl; this.cellTemplates.truncate = this.truncateTpl; this.cellTemplates.timeAgo = this.timeAgoTpl; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts index 3edf3669ba057..15a409cccdd6b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts @@ -20,7 +20,7 @@ export enum CellTemplate { // supports an optional custom configuration: // { // ... - // cellTransformation: CellTemplate.badge, + // cellTransformation: CellTemplate.tag, // customTemplateConfig: { // class?: string; // Additional class name. // prefix?: any; // Prefix of the value to be displayed. @@ -30,7 +30,7 @@ export enum CellTemplate { // } // } // } - badge = 'badge', + tag = 'tag', // Maps the value using the given dictionary. // { // ... diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/octal-to-human-readable.pipe.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/octal-to-human-readable.pipe.ts index 54e72792126fe..148272d946a13 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/octal-to-human-readable.pipe.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/octal-to-human-readable.pipe.ts @@ -29,28 +29,28 @@ export class OctalToHumanReadablePipe implements PipeTransform { if (fileType !== 'directory') { permissionSummary.push({ content: fileType, - class: 'badge-primary me-1' + class: 'tag-primary me-1' }); } if (owner !== '---') { permissionSummary.push({ content: `owner: ${owner}`, - class: 'badge-primary me-1' + class: 'tag-primary me-1' }); } if (group !== '---') { permissionSummary.push({ content: `group: ${group}`, - class: 'badge-primary me-1' + class: 'tag-primary me-1' }); } if (others !== '---') { permissionSummary.push({ content: `others: ${others}`, - class: 'badge-primary me-1' + class: 'tag-primary me-1' }); } @@ -58,7 +58,7 @@ export class OctalToHumanReadablePipe implements PipeTransform { return [ { content: 'no permissions', - class: 'badge-warning me-1', + class: 'tag-warning me-1', toolTip: `owner: ${owner}, group: ${group}, others: ${others}` } ]; diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss index cb38072b712a9..a3ea809897c1a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss @@ -1,6 +1,7 @@ /* You can add global styles to this file, and also import other style files */ @use './src/styles/defaults' as *; @use '@carbon/charts/styles.css' as *; +@use '@carbon/colors'; @import './src/styles/carbon-defaults.scss'; @@ -87,57 +88,58 @@ $grid-breakpoints: ( } } -// Custom badges. -.badge-background-gray, -.badge-hdd { - background-color: $gray-600; - color: $white; +// Custom tag. + +.tag-background-gray, +.tag-hdd { + background-color: colors.$gray-60; + color: colors.$white; } -.badge-background-primary, -.badge-ssd { +.tag-background-primary, +.tag-ssd { background-color: $primary; - color: $white; + color: colors.$white; } -.badge-tab { +.tag-tab { background-color: $gray-200; color: $gray-700; } -.badge-cd-label-green { +.tag-cd-label-green { background-color: $green-300; color: $white; } -.badge-cd-label-cyan { +.tag-cd-label-cyan { background-color: $cyan-300; color: $white; } -.badge-cd-label-purple { +.tag-cd-label-purple { background-color: $purple-300; color: $white; } -.badge-cd-label-light-blue { +.tag-cd-label-light-blue { background-color: $light-blue-300; color: $white; } -.badge-cd-label-gold { +.tag-cd-label-gold { background-color: $gold-300; color: $white; } -.badge-cd-label-light-green { +.tag-cd-label-light-green { background-color: $light-green-300; color: $white; font-weight: bolder; } // Other -tags-input .tags { +tag-input .tag { border: 1px solid $gray-400; border-radius: 4px; box-shadow: inset 0 1px 1px rgba($black, 0.09); @@ -166,42 +168,9 @@ a.btn-light { text-decoration: none; } -// Overrides the badge to rounded-pill -.badge { - @extend .badge, .mb-1; -} - -// Overriding badges to match the class name of badges in Bootstrap v5 -.badge-primary { - @extend .badge, .bg-primary; -} - -.badge-secondary { - @extend .badge, .bg-secondary; -} - -.badge-success { - @extend .badge, .bg-success; -} - -.badge-danger { - @extend .badge, .bg-danger; -} - -.badge-info { - @extend .badge, .bg-primary; -} - -.badge-warning { - @extend .badge, .bg-warning, .text-dark; -} - -.badge-light { - @extend .badge, .bg-light, .text-dark; -} - -.badge-dark { - @extend .badge, .bg-dark; +// Overrides the tags to rounded-pill +.tag { + @extend .tag, .mb-1; } formly-form { diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss index 2ddf98af8ea42..a6bb37c823dea 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss @@ -38,6 +38,10 @@ Custom theme ******************************************/ @forward './themes/content'; +//Importing carbon tags token + +@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens; + /****************************************** Datatable ******************************************/ @@ -66,6 +70,54 @@ th { padding-block: 0 !important; } +/****************************************** + Tags +******************************************/ +.tag-success { + background-color: theme.$support-success; + color: colors.$white; +} + +.tag-warning { + background: theme.$support-warning; + color: colors.$white; +} + +.tag-danger { + background: theme.$support-error; + color: colors.$white; +} + +.tag-primary { + background: vv.$primary; + color: colors.$white; +} + +.tag-secondary { + background: tag-tokens.$tag-color-warm-gray; + color: colors.$white; +} + +.tag-info { + background-color: vv.$primary; + color: colors.$white; +} + +.tag-light { + background: colors.$white; + border: tag-tokens.$tag-color-gray; +} + +.tag-dark { + background: tag-tokens.$tag-color-cool-gray; + color: colors.$white; +} + +.tag-default { + background: tag-tokens.$tag-border-gray; + color: colors.$white; +} + /****************************************** Side nav ******************************************/ diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss index 9e4d3794c0aee..715c8ede66de4 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss @@ -80,7 +80,7 @@ @extend .btn-light; } -.btn-primary .badge { +.btn-primary .tag { background-color: vv.$gray-200; color: vv.$primary; } -- 2.39.5