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 faa45d8b794..b6f6ad21cf8 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 434b4469bd1..9635a0b8701 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 e2213a77ed5..b7ea0637ccc 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 2a436894fcb..6d1a9742c5f 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 76dcec8cb1e..e07a66893c4 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">
- +