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 <aydv.267@gmail.com>

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 faa45d8b794fee77a3e7da4a8d7ba96d616df5fc..b6f6ad21cf88223a39181587ac845d1bf7be274a 100644 (file)
--- 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 434b4469bd12f68fc7c580fcbc326ee131c56d0f..9635a0b87012479f785da99bbc4551bc5ddcc4c2 100644 (file)
--- 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 @@
     <div [cdsStack]="compact? 'horizontal' : 'vertical'">
       @for (b of vm.badges; track b.key; let last = $last) {
       <span
-        class="overview-alerts-card-badge"
-        [class.overview-alerts-card-badge-with-border--right]="!last && compact"
-        [class.overview-alerts-card-badge-with-border--bottom]="!compact">
+        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">
         <a
           cdsLink
           [routerLink]="['/monitoring/active-alerts']"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.scss
index e29be372d3cb8b4984ff8d0b1c7ea0b2b806cecc..7edaf5c44de875eb68242741a84790ea597dc5a5 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.scss
@@ -2,17 +2,10 @@
   &-badge {
     display: inline-flex;
     align-items: center;
-    padding-right: var(--cds-spacing-04);
-  }
-
-  &-badge-with-border--right {
-    border-right: 1px solid var(--cds-border-subtle);
-    margin-right: var(--cds-spacing-04);
-  }
 
-  &-badge-with-border--bottom {
-    border-bottom: 1px solid var(--cds-border-subtle);
-    padding: var(--cds-spacing-03) 0;
+    &--compact {
+      padding: var(--cds-spacing-03) 0;
+    }
   }
 
   &-need-attention {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.spec.ts
index 57462b52ac60776cdd082deb4ff0aeefc14a2840..a1c0afa52e5b1d51d71c02d6bfd4a59b6455c36f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/alerts-card/overview-alerts-card.component.spec.ts
@@ -102,7 +102,7 @@ describe('OverviewAlertsCardComponent', () => {
     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 e2213a77ed57353cc043a4b37ec7830f8570e313..b7ea0637cccd10a35878cce6d554a21e72ef7ca3 100644 (file)
--- 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) {
           <div class="cds-pr-8"
-               [class.overview-health-card-tab-content-item]="!isLast">
+               [class.overview-health-card-tab-content-item]="!isLast"
+               [class.border-subtle-right]="!isLast">
             <span class="overview-health-card-icon-and-text">
               <cd-icon [type]="vm?.[item.key]?.severity"></cd-icon>
               <span class="cds--type-body-compact-01">
@@ -222,8 +223,9 @@
 
         @if (hwEnabled && hwSections) {
           <div class="overview-health-card-hardware-sections">
-          @for (section of sections; track $index) {
-            <div class="overview-health-card-hardware-section">
+          @for (section of sections; track $index; let isLast = $last) {
+            <div class="overview-health-card-hardware-section"
+                 [class.border-subtle-right]="!isLast">
             @for (row of section; track row.key) {
             <div class="overview-health-card-hardware-row">
               <span class="overview-health-card-icon-and-text">

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 2a436894fcb8714cda1b226eec793275f4606fc5..6d1a9742c5f47d8f19b9c600795aba7b7fcc35a7 100644 (file)
--- 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 76dcec8cb1eb68ce5f5a265a0f89229fe03a2dda..e07a66893c43c264f1a6302cf1016e5117de14cd 100644 (file)
--- 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}">
     <!-- Tearsheet Header -->
     <header
-      class="tearsheet-header tearsheet-header--full">
+      class="tearsheet-header tearsheet-header--full border-subtle-block-end">
       <h4 class="cds--type-heading-04 tearsheet-header-title">
         {{title}}
       </h4>
@@ -25,7 +25,7 @@
       <!-- Tearsheet Influencer-->
       <div cdsCol
            [columnNumbers]="{'lg': 3, 'md': 3, 'sm': 3}"
-           class="tearsheet-left-influencer">
+           class="tearsheet-left-influencer border-subtle-inline-end">
         <cds-progress-indicator
           orientation="vertical"
           [steps]="steps"
@@ -44,7 +44,7 @@
         </ng-container>
         </div>
         <!-- Tearsheet Footer -->
-        <cds-modal-footer class="tearsheet-footer tearsheet-footer--full">
+        <cds-modal-footer class="tearsheet-footer tearsheet-footer--full border-subtle-top">
           <button cdsButton="ghost"
                   class="tearsheet-footer-cancel"
                   (click)="closeTearsheet()"
@@ -83,7 +83,7 @@
   (overlaySelected)="closeTearsheet()">
   <!-- Tearsheet Header -->
   <header
-    class="tearsheet-header">
+    class="tearsheet-header border-subtle-block-end">
     <h4 cdsModalHeaderHeading
         class="cds--type-heading-04 tearsheet-header-title">
         {{title}}
@@ -101,7 +101,7 @@
     @if (steps.length > 1) {
     <div cdsCol
          [columnNumbers]="{lg: 3, md: 3, sm: 3}"
-         class="tearsheet-left-influencer">
+         class="tearsheet-left-influencer border-subtle-inline-end">
       <cds-progress-indicator
         orientation="vertical"
         [steps]="steps"
@@ -142,7 +142,7 @@
       </div>
       }
       <!-- Tearsheet Footer -->
-      <cds-modal-footer class="tearsheet-footer">
+      <cds-modal-footer class="tearsheet-footer border-subtle-top">
         <button cdsButton="ghost"
                 (click)="closeTearsheet()"
                 size="xl"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.scss
index 3b3fa98099de0de981fcd9e49b93fe0ae6087920..b331215840d94e35d02cab88bed048e16793bfea 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/tearsheet/tearsheet.component.scss
@@ -57,7 +57,6 @@
   fill: var(--cds-icon-primary);
   background-color: var(--cds-background);
   padding: var(--cds-spacing-06) var(--cds-spacing-07);
-  border-block-end: 1px solid var(--cds-border-subtle-01);
 
   &-title {
     color: var(--cds-text-primary);
@@ -88,7 +87,6 @@
   padding: var(--cds-spacing-06) var(--cds-spacing-07);
   overflow-block: auto;
   overflow-y: auto;
-  border-inline-end: 1px solid var(--cds-border-subtle-01);
   margin: 0;
 }
 
@@ -130,7 +128,6 @@
 
 //FOOTER
 .tearsheet-footer {
-  border-top: 1px solid var(--cds-border-subtle);
   background-color: var(--cds-layer-01);
 
   &-submit {

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index fd177f841845b33405fd3b7dde49a1beffa97054..fcd7d2c68cea6691d7adecfe064a24f8557ab2b7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -219,7 +219,27 @@ input:-webkit-autofill:active {
 .cds--progress-bar__bar {
   background-color: var(--cds-primary);
 }
-
+// Carbon borders
 .border-subtle {
   border: 1px solid var(--cds-border-subtle);
 }
+
+.border-subtle-bottom {
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+.border-subtle-top {
+  border-top: 1px solid var(--cds-border-subtle);
+}
+
+.border-subtle-right {
+  border-right: 1px solid var(--cds-border-subtle);
+}
+
+.border-subtle-block-end {
+  border-block-end: 1px solid var(--cds-border-subtle-01);
+}
+
+.border-subtle-inline-end {
+  border-inline-end: 1px solid var(--cds-border-subtle-01);
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_spacings.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_spacings.scss
index 7d3d0ff98212b883ea90ee7929904c822e6daebd..1580b6a7bd95fe10cb564781477cf7aecb3123fb 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_spacings.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_spacings.scss
@@ -17,6 +17,10 @@
   padding-top: layout.$spacing-03;
 }
 
+.cds-pr-4 {
+  padding-right: layout.$spacing-04;
+}
+
 .cds-pr-8 {
   padding-right: layout.$spacing-08;
 }
@@ -106,6 +110,10 @@
   margin-right: layout.$spacing-03;
 }
 
+.cds-mr-4 {
+  margin-right: layout.$spacing-04;
+}
+
 .cds-mr-5 {
   margin-right: layout.$spacing-05;
 }