From: Annmool Date: Sun, 15 Mar 2026 13:54:36 +0000 (+0530) Subject: mgr/dashboard: use border-subtle utility class in overview and tearsheet X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=4ef668e69b9fbab4ca85ea17cd0f09c586b9c0f0;p=ceph.git mgr/dashboard: use border-subtle utility class in overview and tearsheet Replace the remaining custom dashboard border classes in the overview alerts card and tearsheet with the shared border-subtle utility classes. Update the alerts-card unit test so it checks the shared utility class name used by the template. Stub Prometheus overview requests in the dashboard a11y Cypress test so the test does not fail on missing metrics in CI. Fixes: http://tracker.ceph.com/issues/75404 Signed-off-by: Annmool --- diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/a11y/dashboard.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/a11y/dashboard.e2e-spec.ts index faa45d8b794f..b6f6ad21cf88 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/a11y/dashboard.e2e-spec.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/a11y/dashboard.e2e-spec.ts @@ -4,6 +4,26 @@ describe('Overview Page', { retries: 0 }, () => { const overview = new DashboardV3PageHelper(); beforeEach(() => { + cy.intercept('GET', '**/api/prometheus/data*', { + statusCode: 200, + body: { + status: 'success', + data: { + resultType: 'matrix', + result: [] + } + } + }); + cy.intercept('GET', '**/api/prometheus/prometheus_query_data*', { + statusCode: 200, + body: { + status: 'success', + data: { + resultType: 'vector', + result: [] + } + } + }); cy.login(); overview.navigateTo(); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.html index 434b4469bd12..9635a0b87012 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.html @@ -33,9 +33,11 @@
@for (b of vm.badges; track b.key; let last = $last) { + class="overview-alerts-card-badge cds-pr-4" + [class.cds-mr-4]="!last && compact" + [class.border-subtle-right]="!last && compact" + [class.overview-alerts-card-badge--compact]="!compact" + [class.border-subtle-bottom]="!compact"> { expect(vm.badges).toEqual([{ key: 'warning', icon: 'warning', count: 3 }]); }); - it('template should render border class only on 2nd badge (when both exist)', async () => { + it('template should render right border class only on the first badge when both exist', async () => { mockSvc.emitCounts(10, 1, 2); fixture.detectChanges(); await fixture.whenStable(); @@ -113,11 +113,7 @@ describe('OverviewAlertsCardComponent', () => { ) as HTMLElement[]; expect(badgeEls.length).toBe(2); - expect(badgeEls[0].classList.contains('overview-alerts-card-badge-with-border--right')).toBe( - true - ); - expect(badgeEls[1].classList.contains('overview-alerts-card-badge-with-border--right')).toBe( - false - ); + expect(badgeEls[0].classList.contains('border-subtle-right')).toBe(true); + expect(badgeEls[1].classList.contains('border-subtle-right')).toBe(false); }); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.html index e2213a77ed57..b7ea0637cccd 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.html @@ -197,7 +197,8 @@ [gap]="8"> @for (item of healthItems; track item.key; let isLast = $last) {
+ [class.overview-health-card-tab-content-item]="!isLast" + [class.border-subtle-right]="!isLast"> @@ -222,8 +223,9 @@ @if (hwEnabled && hwSections) {
- @for (section of sections; track $index) { -
+ @for (section of sections; track $index; let isLast = $last) { +
@for (row of section; track row.key) {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.scss index 2a436894fcb8..6d1a9742c5f4 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/health-card/overview-health-card.component.scss @@ -42,7 +42,6 @@ } &-tab-content-item { - border-right: 1px solid var(--cds-border-subtle); max-block-size: fit-content; } @@ -87,12 +86,10 @@ gap: var(--cds-spacing-03); min-width: 0; padding-inline-end: var(--cds-spacing-03); - border-right: 1px solid var(--cds-border-subtle); box-sizing: border-box; } &-hardware-section:last-child { - border-right: none; padding-inline-end: 0; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.html index 76dcec8cb1eb..e07a66893c43 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.html @@ -10,7 +10,7 @@ [columnNumbers]="{'lg': 16, 'md': 16, 'sm': 16}">
+ class="tearsheet-header tearsheet-header--full border-subtle-block-end">

{{title}}

@@ -25,7 +25,7 @@
+ class="tearsheet-left-influencer border-subtle-inline-end">
- +