From: Afreen Misbah Date: Wed, 27 Aug 2025 08:13:38 +0000 (+0530) Subject: mgr/dashboard: use border:0 for clipboard css X-Git-Tag: testing/wip-vshankar-testing-20250829.190601-debug~3^2~1 X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=b18bbeac7246025fa2868008b8eed91fb9d4fb37;p=ceph-ci.git mgr/dashboard: use border:0 for clipboard css - 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 --- 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 39a2dbf14cb..41149f24bfa 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 @@ -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(); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/04-osds.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/04-osds.e2e-spec.ts index 74b46054afd..31870abd231 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/04-osds.e2e-spec.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/04-osds.e2e-spec.ts @@ -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); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard-v3.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard-v3.e2e-spec.ts index 3815011a185..58a9a23d01f 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard-v3.e2e-spec.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard-v3.e2e-spec.ts @@ -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(() => { diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard-v3.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard-v3.po.ts index 597d2db9b50..212562250a8 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard-v3.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard-v3.po.ts @@ -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 index ef719c9fd14..00000000000 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard.e2e-spec.ts +++ /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 index 170555f735c..00000000000 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard.po.ts +++ /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'); - } -} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html index 42b4d25e871..7e5897ea69b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html @@ -6,6 +6,7 @@ {{ total }} {{ title }} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.scss index 72ec3a89b8e..842040a7eac 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.scss @@ -1,5 +1,5 @@ .clipboard-btn { - border: none; + border: 0; box-shadow: none; outline: none; } diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss index 47c7720e137..b96277f477e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss @@ -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;