]> git.apps.os.sepia.ceph.com Git - ceph-ci.git/commitdiff
mgr/dashboard: use border:0 for clipboard css
authorAfreen Misbah <afreen@ibm.com>
Wed, 27 Aug 2025 08:13:38 +0000 (13:43 +0530)
committerAfreen Misbah <afreen@ibm.com>
Wed, 27 Aug 2025 09:35:21 +0000 (15:05 +0530)
- Sets border-width: 0
- Completely removes the border
- More memory efficient than `border: none` which occupies some browser memory
- Higher priority in border conflicts

Signed-off-by: Afreen Misbah <afreen@ibm.com>
src/pybind/mgr/dashboard/frontend/cypress/e2e/a11y/dashboard.e2e-spec.ts
src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/04-osds.e2e-spec.ts
src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard-v3.e2e-spec.ts
src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard-v3.po.ts
src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard.e2e-spec.ts [deleted file]
src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard.po.ts [deleted file]
src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html
src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.scss
src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss

index 39a2dbf14cbd0064053d171201804e4a288d110d..41149f24bfa479b00790b3e0a1e9dd1943f43d7a 100644 (file)
@@ -1,7 +1,7 @@
-import { DashboardPageHelper } from '../ui/dashboard.po';
+import { DashboardV3PageHelper } from '../ui/dashboard-v3.po';
 
 describe('Dashboard Main Page', { retries: 0 }, () => {
-  const dashboard = new DashboardPageHelper();
+  const dashboard = new DashboardV3PageHelper();
 
   beforeEach(() => {
     cy.login();
index 74b46054afd2f879a3b55467d8a11e064e2e5f8f..31870abd231390879576cebee9d39dc3c8fff651 100644 (file)
@@ -1,18 +1,12 @@
 import { OSDsPageHelper } from '../cluster/osds.po';
-import { DashboardPageHelper } from '../ui/dashboard.po';
-import { ManagerModulesPageHelper } from '../cluster/mgr-modules.po';
+import { DashboardV3PageHelper } from '../ui/dashboard-v3.po';
 
 describe('OSDs page', () => {
   const osds = new OSDsPageHelper();
-  const dashboard = new DashboardPageHelper();
-  const mgrmodules = new ManagerModulesPageHelper();
+  const dashboard = new DashboardV3PageHelper();
 
   before(() => {
     cy.login();
-    mgrmodules.navigateTo();
-    mgrmodules.navigateEdit('dashboard');
-    cy.get('#FEATURE_TOGGLE_DASHBOARD').uncheck();
-    cy.contains('button', 'Update').click();
   });
 
   beforeEach(() => {
@@ -35,9 +29,7 @@ describe('OSDs page', () => {
 
           // landing page is easier to check OSD status
           dashboard.navigateTo();
-          dashboard.infoCardBody('OSDs').should('contain.text', `${expectedCount} total`);
-          dashboard.infoCardBody('OSDs').should('contain.text', `${expectedCount} up`);
-          dashboard.infoCardBody('OSDs').should('contain.text', `${expectedCount} in`);
+          dashboard.cardRow('OSD').should('contain.text', `${expectedCount} OSDs`);
 
           cy.wait(30000);
           expect(Number(newCount)).to.be.gte(2);
index 3815011a1859a90ac2cd39643c65498818e42560..58a9a23d01f55a1b0163b7f6d9695162c42bdd6c 100644 (file)
@@ -1,16 +1,10 @@
-import { ManagerModulesPageHelper } from '../cluster/mgr-modules.po';
 import { DashboardV3PageHelper } from './dashboard-v3.po';
 
 describe('Dashboard-v3 Main Page', () => {
   const dashboard = new DashboardV3PageHelper();
-  const mgrmodules = new ManagerModulesPageHelper();
 
   before(() => {
     cy.login();
-    mgrmodules.navigateTo();
-    mgrmodules.navigateEdit('dashboard');
-    cy.get('#FEATURE_TOGGLE_DASHBOARD').check();
-    cy.contains('button', 'Update').click();
   });
 
   beforeEach(() => {
index 597d2db9b50884cbb0edcd7ba651cdc8ce2bc5c6..212562250a845eaa46372bc7363a141b57d1e872 100644 (file)
@@ -17,4 +17,8 @@ export class DashboardV3PageHelper extends PageHelper {
 
     return cy.get('@cards').its(indexOrTitle);
   }
+
+  cardRow(rowName: string) {
+    return cy.get(`[data-testid=${rowName}]`);
+  }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard.e2e-spec.ts
deleted file mode 100644 (file)
index ef719c9..0000000
+++ /dev/null
@@ -1,141 +0,0 @@
-import { IscsiPageHelper } from '../block/iscsi.po';
-import { HostsPageHelper } from '../cluster/hosts.po';
-import { ManagerModulesPageHelper } from '../cluster/mgr-modules.po';
-import { MonitorsPageHelper } from '../cluster/monitors.po';
-import { OSDsPageHelper } from '../cluster/osds.po';
-import { PageHelper } from '../page-helper.po';
-import { PoolPageHelper } from '../pools/pools.po';
-import { DaemonsPageHelper } from '../rgw/daemons.po';
-import { DashboardPageHelper } from './dashboard.po';
-
-describe('Dashboard Main Page', () => {
-  const dashboard = new DashboardPageHelper();
-  const daemons = new DaemonsPageHelper();
-  const hosts = new HostsPageHelper();
-  const osds = new OSDsPageHelper();
-  const pools = new PoolPageHelper();
-  const monitors = new MonitorsPageHelper();
-  const iscsi = new IscsiPageHelper();
-  const mgrmodules = new ManagerModulesPageHelper();
-
-  before(() => {
-    cy.login();
-    mgrmodules.navigateTo();
-    mgrmodules.navigateEdit('dashboard');
-    cy.get('#FEATURE_TOGGLE_DASHBOARD').uncheck();
-    cy.contains('button', 'Update').click();
-  });
-
-  beforeEach(() => {
-    cy.login();
-    dashboard.navigateTo();
-  });
-
-  describe('Check that all hyperlinks on info cards lead to the correct page and fields exist', () => {
-    it('should ensure that all linked info cards lead to correct page', () => {
-      const expectationMap = {
-        Monitors: 'Monitors',
-        OSDs: 'OSDs',
-        Hosts: 'Hosts',
-        'Object Gateways': 'Gateways',
-        'iSCSI Gateways': 'Overview',
-        Pools: 'Pools'
-      };
-
-      for (const [linkText, breadcrumbText] of Object.entries(expectationMap)) {
-        cy.location('hash').should('eq', '#/dashboard');
-        dashboard.clickInfoCardLink(linkText);
-        dashboard.expectBreadcrumbText(breadcrumbText);
-        dashboard.navigateBack();
-      }
-    });
-
-    it('should verify that info cards exist on dashboard in proper order', () => {
-      // Ensures that info cards are all displayed on the dashboard tab while being in the proper
-      // order, checks for card title and position via indexing into a list of all info cards.
-      const order = [
-        'Cluster Status',
-        'Hosts',
-        'Monitors',
-        'OSDs',
-        'Managers',
-        'Object Gateways',
-        'Metadata Servers',
-        'iSCSI Gateways',
-        'Raw Capacity',
-        'Objects',
-        'PG Status',
-        'Pools',
-        'PGs per OSD',
-        'Client Read/Write',
-        'Client Throughput',
-        'Recovery Throughput',
-        'Scrubbing'
-      ];
-
-      for (let i = 0; i < order.length; i++) {
-        dashboard.infoCard(i).should('contain.text', order[i]);
-      }
-    });
-
-    it('should verify that info card group titles are present and in the right order', () => {
-      cy.location('hash').should('eq', '#/dashboard');
-      dashboard.infoGroupTitle(0).should('eq', 'Status');
-      dashboard.infoGroupTitle(1).should('eq', 'Capacity');
-      dashboard.infoGroupTitle(2).should('eq', 'Performance');
-    });
-  });
-
-  it('Should check that dashboard cards have correct information', () => {
-    interface TestSpec {
-      cardName: string;
-      regexMatcher?: RegExp;
-      pageObject: PageHelper;
-    }
-    const testSpecs: TestSpec[] = [
-      { cardName: 'Object Gateways', regexMatcher: /(\d+)\s+total/, pageObject: daemons },
-      { cardName: 'Monitors', regexMatcher: /(\d+)\s+\(quorum/, pageObject: monitors },
-      { cardName: 'Hosts', regexMatcher: /(\d+)\s+total/, pageObject: hosts },
-      { cardName: 'OSDs', regexMatcher: /(\d+)\s+total/, pageObject: osds },
-      { cardName: 'Pools', pageObject: pools },
-      { cardName: 'iSCSI Gateways', regexMatcher: /(\d+)\s+total/, pageObject: iscsi }
-    ];
-    for (let i = 0; i < testSpecs.length; i++) {
-      const spec = testSpecs[i];
-      dashboard.navigateTo();
-
-      dashboard.infoCardBodyText(spec.cardName).then((infoCardBodyText: string) => {
-        let dashCount = 0;
-
-        if (spec.regexMatcher) {
-          const match = infoCardBodyText.match(new RegExp(spec.regexMatcher));
-          expect(match).to.length.gt(
-            1,
-            `Regex ${spec.regexMatcher} did not find a match for card with name ` +
-              `${spec.cardName}`
-          );
-          dashCount = Number(match[1]);
-        } else {
-          dashCount = Number(infoCardBodyText);
-        }
-
-        spec.pageObject.navigateTo();
-        spec.pageObject.getTableCount('total').then((tableCount) => {
-          expect(tableCount).to.eq(
-            dashCount,
-            `Text of card "${spec.cardName}" and regex "${spec.regexMatcher}" resulted in ${dashCount} ` +
-              `but did not match table count ${tableCount}`
-          );
-        });
-      });
-    }
-  });
-
-  after(() => {
-    cy.login();
-    mgrmodules.navigateTo();
-    mgrmodules.navigateEdit('dashboard');
-    cy.get('#FEATURE_TOGGLE_DASHBOARD').click();
-    cy.contains('button', 'Update').click();
-  });
-});
diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard.po.ts
deleted file mode 100644 (file)
index 170555f..0000000
+++ /dev/null
@@ -1,31 +0,0 @@
-import { PageHelper } from '../page-helper.po';
-
-export class DashboardPageHelper extends PageHelper {
-  pages = { index: { url: '#/dashboard', id: 'cd-dashboard' } };
-
-  infoGroupTitle(index: number) {
-    return cy.get('[data-testid=group-title]').its(index).text();
-  }
-
-  clickInfoCardLink(cardName: string) {
-    cy.get(`cd-info-card[cardtitle="${cardName}"]`).contains('a', cardName).click();
-  }
-
-  infoCard(indexOrTitle: number | string) {
-    cy.get('cd-info-card').as('infoCards');
-
-    if (typeof indexOrTitle === 'number') {
-      return cy.get('@infoCards').its(indexOrTitle);
-    } else {
-      return cy.contains('cd-info-card a', indexOrTitle).parent().parent().parent().parent();
-    }
-  }
-
-  infoCardBodyText(infoCard: string) {
-    return this.infoCard(infoCard).find('.card-text').text();
-  }
-
-  infoCardBody(infoCard: string) {
-    return this.infoCard(infoCard).find('.card-text');
-  }
-}
index 42b4d25e87107282f1adefdd7d72d6aba9faa436..7e5897ea69b2c0c1a5eb1fe6350b286df98bf547 100644 (file)
@@ -6,6 +6,7 @@
     <a [routerLink]="link"
        *ngIf="link && total > 0; else noLinkTitle"
        [ngPlural]="total"
+       data-testid="title"
       i18n>
         {{ total }}
       <ng-template ngPluralCase="=0">{{ title }}</ng-template>
index 47c7720e137e29c6912e88458d82e5dc794dcae6..b96277f477ebf8e57320b718a170c605eec1b834 100644 (file)
@@ -4,22 +4,6 @@
  * thus reducing the final css size.
 */
 
-cd-info-card {
-  .card {
-    @extend .pb-2;
-
-    .card-body {
-      .card-title {
-        @extend .ps-2;
-      }
-
-      .card-text {
-        @extend .pt-2;
-      }
-    }
-  }
-}
-
 .btn-toolbar cd-table-actions.btn-group {
   @extend .me-2;
 }
@@ -46,42 +30,6 @@ cd-table {
   }
 }
 
-cd-health {
-  cd-info-card {
-    @extend .d-flex;
-    @extend .flex-column;
-    @extend .mb-4;
-    @extend .col-12;
-    @extend .col-sm-12;
-    @extend .col-md-6;
-    @extend .col-lg-4;
-
-    &.cd-status-card {
-      @extend .col-xl-3;
-    }
-
-    &.cd-performance-card,
-    &.cd-capacity-card {
-      @extend .col-xl;
-    }
-
-    &.cd-capacity-card {
-      @extend .col-lg-3;
-    }
-
-    &.cd-performance-card {
-      @extend .col-lg-6;
-    }
-
-    &.cd-chart-card {
-      @extend .col-md-12;
-      @extend .col-lg-6;
-      @extend .col-xl-4;
-      @extend .col-2xl-3;
-    }
-  }
-}
-
 cd-logs {
   label {
     @extend .me-2;