From c27ebbe29ec8a86f6236c3c0a666966146a1ab04 Mon Sep 17 00:00:00 2001 From: Evelyn Tanigawa Murasaki Date: Tue, 23 Dec 2025 13:32:14 -0300 Subject: [PATCH] list perses with without namespace --- ...es.cy.ts => 00.coo_bvt_perses_admin.cy.ts} | 7 +- .../perses/00.coo_bvt_perses_admin_1.cy.ts | 38 +++++++++ .../e2e/perses/01.coo_list_perses_admin.cy.ts | 56 +++++++++++++ web/cypress/fixtures/perses/constants.ts | 19 +++-- web/cypress/support/index.ts | 4 +- ...es.cy.ts => 00.coo_bvt_perses_admin.cy.ts} | 12 +-- .../perses/00.coo_bvt_perses_admin_1.cy.ts | 56 +++++++++++++ .../perses/01.coo_list_perses_admin.cy.ts | 76 +++++++++++++++++ .../01.coo_list_perses_admin_namespace.cy.ts | 81 ++++++++++++++++++ web/cypress/views/list-perses-dashboards.ts | 82 +++++++++++++++++++ web/cypress/views/perses-dashboards.ts | 40 +++++++-- web/src/components/data-test.ts | 34 +++++++- 12 files changed, 479 insertions(+), 26 deletions(-) rename web/cypress/e2e/perses/{01.coo_perses.cy.ts => 00.coo_bvt_perses_admin.cy.ts} (85%) create mode 100644 web/cypress/e2e/perses/00.coo_bvt_perses_admin_1.cy.ts create mode 100644 web/cypress/e2e/perses/01.coo_list_perses_admin.cy.ts rename web/cypress/support/perses/{00.coo_bvt_perses.cy.ts => 00.coo_bvt_perses_admin.cy.ts} (84%) create mode 100644 web/cypress/support/perses/00.coo_bvt_perses_admin_1.cy.ts create mode 100644 web/cypress/support/perses/01.coo_list_perses_admin.cy.ts create mode 100644 web/cypress/support/perses/01.coo_list_perses_admin_namespace.cy.ts create mode 100644 web/cypress/views/list-perses-dashboards.ts diff --git a/web/cypress/e2e/perses/01.coo_perses.cy.ts b/web/cypress/e2e/perses/00.coo_bvt_perses_admin.cy.ts similarity index 85% rename from web/cypress/e2e/perses/01.coo_perses.cy.ts rename to web/cypress/e2e/perses/00.coo_bvt_perses_admin.cy.ts index c9016c1d2..8fe7a7b8f 100644 --- a/web/cypress/e2e/perses/01.coo_perses.cy.ts +++ b/web/cypress/e2e/perses/00.coo_bvt_perses_admin.cy.ts @@ -1,5 +1,5 @@ import { nav } from '../../views/nav'; -import { runBVTCOOPersesTests } from '../../support/perses/00.coo_bvt_perses.cy'; +import { runBVTCOOPersesTests } from '../../support/perses/00.coo_bvt_perses_admin.cy'; import { guidedTour } from '../../views/tour'; // Set constants for the operators that need to be installed for tests. @@ -18,16 +18,13 @@ const MP = { operatorName: 'Cluster Monitoring Operator', }; -describe('BVT: COO - Dashboards (Perses) - Administrator perspective', { tags: ['@smoke', '@dashboards'] }, () => { +describe('BVT: COO - Dashboards (Perses) - Administrator perspective', { tags: ['@smoke', '@dashboards', '@perses'] }, () => { before(() => { cy.beforeBlockCOO(MCP, MP); }); beforeEach(() => { - cy.visit('/'); - guidedTour.close(); - cy.validateLogin(); nav.sidenav.clickNavLink(['Observe', 'Dashboards (Perses)']); }); diff --git a/web/cypress/e2e/perses/00.coo_bvt_perses_admin_1.cy.ts b/web/cypress/e2e/perses/00.coo_bvt_perses_admin_1.cy.ts new file mode 100644 index 000000000..b975a872a --- /dev/null +++ b/web/cypress/e2e/perses/00.coo_bvt_perses_admin_1.cy.ts @@ -0,0 +1,38 @@ +import { nav } from '../../views/nav'; +//TODO: rename after customizable-dashboards gets merged +import { runBVTCOOPersesTests1 } from '../../support/perses/00.coo_bvt_perses_admin_1.cy'; +import { guidedTour } from '../../views/tour'; + +// Set constants for the operators that need to be installed for tests. +const MCP = { + namespace: 'openshift-cluster-observability-operator', + packageName: 'cluster-observability-operator', + operatorName: 'Cluster Observability Operator', + config: { + kind: 'UIPlugin', + name: 'monitoring', + }, +}; + +const MP = { + namespace: 'openshift-monitoring', + operatorName: 'Cluster Monitoring Operator', +}; + +//TODO: change tag to @smoke, @dashboards, @perses when customizable-dashboards gets merged +describe('BVT: COO - Dashboards (Perses) - Administrator perspective', { tags: ['@smoke-', '@dashboards-', '@perses-'] }, () => { + + before(() => { + cy.beforeBlockCOO(MCP, MP); + }); + + beforeEach(() => { + nav.sidenav.clickNavLink(['Observe', 'Dashboards (Perses)']); + }); + + //TODO: rename after customizable-dashboards gets merged + runBVTCOOPersesTests1({ + name: 'Administrator', + }); + +}); \ No newline at end of file diff --git a/web/cypress/e2e/perses/01.coo_list_perses_admin.cy.ts b/web/cypress/e2e/perses/01.coo_list_perses_admin.cy.ts new file mode 100644 index 000000000..cc8c20d38 --- /dev/null +++ b/web/cypress/e2e/perses/01.coo_list_perses_admin.cy.ts @@ -0,0 +1,56 @@ +import { nav } from '../../views/nav'; +import { runCOOListPersesTests } from '../../support/perses/01.coo_list_perses_admin.cy'; +import { runCOOListPersesTestsNamespace } from '../../support/perses/01.coo_list_perses_admin_namespace.cy'; + +// Set constants for the operators that need to be installed for tests. +const MCP = { + namespace: 'openshift-cluster-observability-operator', + packageName: 'cluster-observability-operator', + operatorName: 'Cluster Observability Operator', + config: { + kind: 'UIPlugin', + name: 'monitoring', + }, +}; + +const MP = { + namespace: 'openshift-monitoring', + operatorName: 'Cluster Monitoring Operator', +}; + +//TODO: change tag to @dashboards when customizable-dashboards gets merged +describe('COO - Dashboards (Perses) - List perses dashboards', { tags: ['@perses', '@dashboards-'] }, () => { + + before(() => { + cy.beforeBlockCOO(MCP, MP); + }); + + beforeEach(() => { + nav.sidenav.clickNavLink(['Observe', 'Dashboards (Perses)']); + cy.changeNamespace('All Projects'); + }); + + runCOOListPersesTests({ + name: 'Administrator', + }); + +}); + +//TODO: change tag to @dashboards when customizable-dashboards gets merged +describe('COO - Dashboards (Perses) - List perses dashboards - Namespace', { tags: ['@perses', '@dashboards-'] }, () => { + + before(() => { + cy.beforeBlockCOO(MCP, MP); + }); + + beforeEach(() => { + nav.sidenav.clickNavLink(['Observe', 'Dashboards (Perses)']); + cy.changeNamespace('All Projects'); + }); + + runCOOListPersesTestsNamespace({ + name: 'Administrator', + }); + +}); + diff --git a/web/cypress/fixtures/perses/constants.ts b/web/cypress/fixtures/perses/constants.ts index 48f9e520b..9c34395cd 100644 --- a/web/cypress/fixtures/perses/constants.ts +++ b/web/cypress/fixtures/perses/constants.ts @@ -21,14 +21,15 @@ export enum persesDashboardsRefreshInterval { } export const persesDashboardsDashboardDropdownCOO = { - ACCELERATORS_COMMON_METRICS:['Accelerators common metrics', 'perses'], - K8S_COMPUTE_RESOURCES_CLUSTER: ['Kubernetes / Compute Resources / Cluster', 'perses'], + ACCELERATORS_COMMON_METRICS:['Accelerators common metrics', 'perses', 'accelerators-dashboard'], + APM_DASHBOARD: ['Application Performance Monitoring (APM)', 'perses', 'apm-dashboard'], + K8S_COMPUTE_RESOURCES_CLUSTER: ['Kubernetes / Compute Resources / Cluster', 'perses', 'openshift-cluster-sample-dashboard'], } export const persesDashboardsDashboardDropdownPersesDev = { - PERSES_DASHBOARD_SAMPLE: ['Perses Dashboard Sample', 'perses'], - PROMETHEUS_OVERVIEW: ['Prometheus / Overview', 'perses'], - THANOS_COMPACT_OVERVIEW: ['Thanos / Compact / Overview', 'perses'], + PERSES_DASHBOARD_SAMPLE: ['Perses Dashboard Sample', 'perses', 'perses-dashboard-sample'], + PROMETHEUS_OVERVIEW: ['Prometheus / Overview', 'perses', 'prometheus-overview'], + THANOS_COMPACT_OVERVIEW: ['Thanos / Compact / Overview', 'perses', 'thanos-compact-overview'], } export enum persesDashboardsAcceleratorsCommonMetricsPanels { @@ -39,4 +40,12 @@ export enum persesDashboardsAcceleratorsCommonMetricsPanels { TEMPERATURE_CELCIUS = 'Temperature (Celsius)', SM_CLOCK_HERTZ = 'SM Clock (Hertz)', MEMORY_CLOCK_HERTZ = 'Memory Clock (Hertz)', +} + +export const listPersesDashboardsPageSubtitle = 'View and manage dashboards.'; + +export const listPersesDashboardsEmptyState = { + TITLE: 'No results found', + BODY: 'No results match the filter criteria. Clear filters to show results.', + } \ No newline at end of file diff --git a/web/cypress/support/index.ts b/web/cypress/support/index.ts index 2a9dd2dbf..6e80ff6d8 100644 --- a/web/cypress/support/index.ts +++ b/web/cypress/support/index.ts @@ -26,7 +26,9 @@ Cypress.on('uncaught:exception', (err) => { message.includes('Unauthorized') || message.includes('Bad Gateway') || message.includes(`Cannot read properties of null (reading 'default')`) || - message.includes(`(intermediate value) is not a function`) + message.includes(`(intermediate value) is not a function`) || + //TODO: OU-1158 + message.includes(`[ Federation Runtime ]: Failed to load script resources. #RUNTIME-008`) ) { console.warn('Ignored frontend exception:', err.message); return false; diff --git a/web/cypress/support/perses/00.coo_bvt_perses.cy.ts b/web/cypress/support/perses/00.coo_bvt_perses_admin.cy.ts similarity index 84% rename from web/cypress/support/perses/00.coo_bvt_perses.cy.ts rename to web/cypress/support/perses/00.coo_bvt_perses_admin.cy.ts index 0e671193b..981ed40a9 100644 --- a/web/cypress/support/perses/00.coo_bvt_perses.cy.ts +++ b/web/cypress/support/perses/00.coo_bvt_perses_admin.cy.ts @@ -1,7 +1,7 @@ import { persesDashboardsAcceleratorsCommonMetricsPanels, persesDashboardsDashboardDropdownCOO, persesDashboardsDashboardDropdownPersesDev } from '../../fixtures/perses/constants'; import { commonPages } from '../../views/common'; import { persesDashboardsPage } from '../../views/perses-dashboards'; -import { persesDataTestIDs } from '../../../src/components/data-test'; +import { persesMUIDataTestIDs } from '../../../src/components/data-test'; export interface PerspectiveConfig { name: string; @@ -31,7 +31,7 @@ export function testBVTCOOPerses(perspective: PerspectiveConfig) { cy.log(`2.1. use sidebar nav to go to Observe > Dashboards (Perses) > Accelerators common metrics dashboard`); cy.changeNamespace('openshift-cluster-observability-operator'); persesDashboardsPage.clickDashboardDropdown(persesDashboardsDashboardDropdownCOO.ACCELERATORS_COMMON_METRICS[0] as keyof typeof persesDashboardsDashboardDropdownCOO); - cy.byDataTestID(persesDataTestIDs.variableDropdown+'-cluster').should('be.visible'); + cy.byDataTestID(persesMUIDataTestIDs.variableDropdown+'-cluster').should('be.visible'); persesDashboardsPage.panelGroupHeaderAssertion('Accelerators'); persesDashboardsPage.panelHeadersAcceleratorsCommonMetricsAssertion(); persesDashboardsPage.expandPanel(persesDashboardsAcceleratorsCommonMetricsPanels.GPU_UTILIZATION); @@ -42,10 +42,10 @@ export function testBVTCOOPerses(perspective: PerspectiveConfig) { cy.log(`3.1. use sidebar nav to go to Observe > Dashboards (Perses) > Perses Dashboard Sample dashboard`); cy.changeNamespace('perses-dev'); persesDashboardsPage.clickDashboardDropdown(persesDashboardsDashboardDropdownPersesDev.PERSES_DASHBOARD_SAMPLE[0] as keyof typeof persesDashboardsDashboardDropdownPersesDev); - cy.byDataTestID(persesDataTestIDs.variableDropdown+'-job').should('be.visible'); - cy.byDataTestID(persesDataTestIDs.variableDropdown+'-instance').should('be.visible'); - cy.byDataTestID(persesDataTestIDs.variableDropdown+'-interval').should('be.visible'); - cy.byDataTestID(persesDataTestIDs.variableDropdown+'-text').should('be.visible'); + cy.byDataTestID(persesMUIDataTestIDs.variableDropdown+'-job').should('be.visible'); + cy.byDataTestID(persesMUIDataTestIDs.variableDropdown+'-instance').should('be.visible'); + cy.byDataTestID(persesMUIDataTestIDs.variableDropdown+'-interval').should('be.visible'); + cy.byDataTestID(persesMUIDataTestIDs.variableDropdown+'-text').should('be.visible'); persesDashboardsPage.panelGroupHeaderAssertion('Row 1'); persesDashboardsPage.expandPanel('RAM Used'); persesDashboardsPage.collapsePanel('RAM Used'); diff --git a/web/cypress/support/perses/00.coo_bvt_perses_admin_1.cy.ts b/web/cypress/support/perses/00.coo_bvt_perses_admin_1.cy.ts new file mode 100644 index 000000000..1251a94eb --- /dev/null +++ b/web/cypress/support/perses/00.coo_bvt_perses_admin_1.cy.ts @@ -0,0 +1,56 @@ +import { persesDashboardsAcceleratorsCommonMetricsPanels, persesDashboardsDashboardDropdownCOO, persesDashboardsDashboardDropdownPersesDev } from '../../fixtures/perses/constants'; +import { persesDashboardsPage } from '../../views/perses-dashboards'; +import { persesMUIDataTestIDs } from '../../../src/components/data-test'; +import { listPersesDashboardsPage } from '../../views/list-perses-dashboards'; + +export interface PerspectiveConfig { + name: string; + beforeEach?: () => void; +} + +export function runBVTCOOPersesTests1(perspective: PerspectiveConfig) { + testBVTCOOPerses1(perspective); +} + +export function testBVTCOOPerses1(perspective: PerspectiveConfig) { + + it(`1.${perspective.name} perspective - Dashboards (Perses) page`, () => { + cy.log(`1.1. use sidebar nav to go to Observe > Dashboards (Perses)`); + listPersesDashboardsPage.shouldBeLoaded(); + listPersesDashboardsPage.clickDashboard(persesDashboardsDashboardDropdownCOO.ACCELERATORS_COMMON_METRICS[2]); + persesDashboardsPage.shouldBeLoaded(); + }); + + it(`2.${perspective.name} perspective - Accelerators common metrics dashboard `, () => { + cy.log(`2.1. use sidebar nav to go to Observe > Dashboards (Perses) > Accelerators common metrics dashboard`); + cy.changeNamespace('openshift-cluster-observability-operator'); + listPersesDashboardsPage.clickDashboard(persesDashboardsDashboardDropdownCOO.ACCELERATORS_COMMON_METRICS[2]); + cy.wait(2000); + persesDashboardsPage.clickDashboardDropdown(persesDashboardsDashboardDropdownCOO.ACCELERATORS_COMMON_METRICS[0] as keyof typeof persesDashboardsDashboardDropdownCOO); + cy.byDataTestID(persesMUIDataTestIDs.variableDropdown+'-cluster').should('be.visible'); + persesDashboardsPage.panelGroupHeaderAssertion('Accelerators'); + persesDashboardsPage.panelHeadersAcceleratorsCommonMetricsAssertion(); + persesDashboardsPage.expandPanel(persesDashboardsAcceleratorsCommonMetricsPanels.GPU_UTILIZATION); + persesDashboardsPage.collapsePanel(persesDashboardsAcceleratorsCommonMetricsPanels.GPU_UTILIZATION); + }); + + it(`3.${perspective.name} perspective - Perses Dashboard Sample dashboard`, () => { + cy.log(`3.1. use sidebar nav to go to Observe > Dashboards (Perses) > Perses Dashboard Sample dashboard`); + cy.changeNamespace('perses-dev'); + listPersesDashboardsPage.clickDashboard(persesDashboardsDashboardDropdownPersesDev.PERSES_DASHBOARD_SAMPLE[2]); + cy.wait(2000); + persesDashboardsPage.clickDashboardDropdown(persesDashboardsDashboardDropdownPersesDev.PERSES_DASHBOARD_SAMPLE[0] as keyof typeof persesDashboardsDashboardDropdownPersesDev); + cy.byDataTestID(persesMUIDataTestIDs.variableDropdown+'-job').should('be.visible'); + cy.byDataTestID(persesMUIDataTestIDs.variableDropdown+'-instance').should('be.visible'); + cy.byDataTestID(persesMUIDataTestIDs.variableDropdown+'-interval').should('be.visible'); + cy.byDataTestID(persesMUIDataTestIDs.variableDropdown+'-text').should('be.visible'); + persesDashboardsPage.panelGroupHeaderAssertion('Row 1'); + persesDashboardsPage.expandPanel('RAM Used'); + persesDashboardsPage.collapsePanel('RAM Used'); + persesDashboardsPage.statChartValueAssertion('RAM Used', true); + persesDashboardsPage.searchAndSelectVariable('job', 'node-exporter'); + persesDashboardsPage.statChartValueAssertion('RAM Used', false); + + }); + +} diff --git a/web/cypress/support/perses/01.coo_list_perses_admin.cy.ts b/web/cypress/support/perses/01.coo_list_perses_admin.cy.ts new file mode 100644 index 000000000..4698d2d15 --- /dev/null +++ b/web/cypress/support/perses/01.coo_list_perses_admin.cy.ts @@ -0,0 +1,76 @@ +import { persesDashboardsDashboardDropdownCOO, persesDashboardsDashboardDropdownPersesDev } from '../../fixtures/perses/constants'; +import { commonPages } from '../../views/common'; +import { listPersesDashboardsPage } from "../../views/list-perses-dashboards"; +import { persesDashboardsPage } from '../../views/perses-dashboards'; + +export interface PerspectiveConfig { + name: string; + beforeEach?: () => void; +} + +export function runCOOListPersesTests(perspective: PerspectiveConfig) { + testCOOListPerses(perspective); +} + +export function testCOOListPerses(perspective: PerspectiveConfig) { + + it(`1.${perspective.name} perspective - List Dashboards (Perses) page`, () => { + cy.log(`1.1. use sidebar nav to go to Observe > Dashboards (Perses)`); + commonPages.titleShouldHaveText('Dashboards'); + listPersesDashboardsPage.shouldBeLoaded(); + + cy.log(`1.2. Filter by Name`); + listPersesDashboardsPage.filter.byName(persesDashboardsDashboardDropdownCOO.ACCELERATORS_COMMON_METRICS[2]); + listPersesDashboardsPage.countDashboards('1'); + + cy.log(`1.3. Clear all filters`); + listPersesDashboardsPage.clearAllFilters(); + + cy.log(`1.4. Filter by Project and Name`); + listPersesDashboardsPage.filter.byProject('perses-dev'); + listPersesDashboardsPage.countDashboards('3'); + listPersesDashboardsPage.filter.byName(persesDashboardsDashboardDropdownPersesDev.PROMETHEUS_OVERVIEW[2]); + listPersesDashboardsPage.countDashboards('1'); + + cy.log(`1.5. Clear all filters`); + listPersesDashboardsPage.clearAllFilters(); + + cy.log(`1.6. Filter by Project`); + listPersesDashboardsPage.filter.byProject('perses-dev'); + + cy.log(`1.7. Clear all filters`); + listPersesDashboardsPage.clearAllFilters(); + + cy.log(`1.8. Sort by Dashboard - Ascending`); + listPersesDashboardsPage.sortBy('Dashboard'); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownCOO.ACCELERATORS_COMMON_METRICS[2], 0); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownCOO.APM_DASHBOARD[2], 1); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownCOO.K8S_COMPUTE_RESOURCES_CLUSTER[2], 2); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownPersesDev.PERSES_DASHBOARD_SAMPLE[2], 3); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownPersesDev.PROMETHEUS_OVERVIEW[2], 4); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownPersesDev.THANOS_COMPACT_OVERVIEW[2], 5); + + cy.log(`1.9. Sort by Dashboard - Descending`); + listPersesDashboardsPage.sortBy('Dashboard'); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownPersesDev.THANOS_COMPACT_OVERVIEW[2], 0); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownPersesDev.PROMETHEUS_OVERVIEW[2], 1); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownPersesDev.PERSES_DASHBOARD_SAMPLE[2], 2); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownCOO.K8S_COMPUTE_RESOURCES_CLUSTER[2], 3); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownCOO.APM_DASHBOARD[2], 4); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownCOO.ACCELERATORS_COMMON_METRICS[2], 5); + + cy.log(`1.10. Filter by Name - Empty state`); + listPersesDashboardsPage.filter.byName(persesDashboardsDashboardDropdownCOO.ACCELERATORS_COMMON_METRICS[0]); + listPersesDashboardsPage.emptyState(); + listPersesDashboardsPage.countDashboards('0'); + + cy.log(`1.11. Clear all filters`); + listPersesDashboardsPage.clearAllFilters(); + + cy.log(`1.12. Click on a dashboard`); + listPersesDashboardsPage.clickDashboard(persesDashboardsDashboardDropdownPersesDev.THANOS_COMPACT_OVERVIEW[2]); + //TODO: change back to shouldBeLoaded when customizable-dashboards gets merged + // persesDashboardsPage.shouldBeLoaded1(); + }); + +} diff --git a/web/cypress/support/perses/01.coo_list_perses_admin_namespace.cy.ts b/web/cypress/support/perses/01.coo_list_perses_admin_namespace.cy.ts new file mode 100644 index 000000000..2454faa1b --- /dev/null +++ b/web/cypress/support/perses/01.coo_list_perses_admin_namespace.cy.ts @@ -0,0 +1,81 @@ +import { persesDashboardsDashboardDropdownCOO, persesDashboardsDashboardDropdownPersesDev } from '../../fixtures/perses/constants'; +import { commonPages } from '../../views/common'; +import { listPersesDashboardsPage } from "../../views/list-perses-dashboards"; +import { persesDashboardsPage } from '../../views/perses-dashboards'; + +export interface PerspectiveConfig { + name: string; + beforeEach?: () => void; +} + +export function runCOOListPersesTestsNamespace(perspective: PerspectiveConfig) { + testCOOListPersesNamespace(perspective); +} + +export function testCOOListPersesNamespace(perspective: PerspectiveConfig) { + + it(`1.${perspective.name} perspective - List Dashboards (Perses) page`, () => { + cy.log(`1.1. use sidebar nav to go to Observe > Dashboards (Perses)`); + commonPages.titleShouldHaveText('Dashboards'); + listPersesDashboardsPage.shouldBeLoaded(); + + cy.log(`1.2. Change namespace to perses-dev`); + cy.changeNamespace('perses-dev'); + listPersesDashboardsPage.filter.byProject('perses-dev'); + listPersesDashboardsPage.countDashboards('3'); + listPersesDashboardsPage.filter.byName(persesDashboardsDashboardDropdownPersesDev.PROMETHEUS_OVERVIEW[2]); + listPersesDashboardsPage.countDashboards('1'); + + cy.log(`1.3. Clear all filters`); + listPersesDashboardsPage.clearAllFilters(); + + cy.log(`1.4. Sort by Dashboard - Ascending`); + listPersesDashboardsPage.sortBy('Dashboard'); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownPersesDev.PERSES_DASHBOARD_SAMPLE[2], 0); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownPersesDev.PROMETHEUS_OVERVIEW[2], 1); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownPersesDev.THANOS_COMPACT_OVERVIEW[2], 2); + + cy.log(`1.5. Sort by Dashboard - Descending`); + listPersesDashboardsPage.sortBy('Dashboard'); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownPersesDev.THANOS_COMPACT_OVERVIEW[2], 0); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownPersesDev.PROMETHEUS_OVERVIEW[2], 1); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownPersesDev.PERSES_DASHBOARD_SAMPLE[2], 2); + + + cy.log(`1.6. Change namespace to openshift-cluster-observability-operator`); + cy.changeNamespace('openshift-cluster-observability-operator'); + listPersesDashboardsPage.countDashboards('3'); + listPersesDashboardsPage.filter.byName(persesDashboardsDashboardDropdownCOO.ACCELERATORS_COMMON_METRICS[2]); + listPersesDashboardsPage.countDashboards('1'); + + cy.log(`1.7. Clear all filters`); + listPersesDashboardsPage.clearAllFilters(); + + + cy.log(`1.8. Sort by Dashboard - Ascending`); + listPersesDashboardsPage.sortBy('Dashboard'); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownCOO.ACCELERATORS_COMMON_METRICS[2], 0); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownCOO.APM_DASHBOARD[2], 1); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownCOO.K8S_COMPUTE_RESOURCES_CLUSTER[2], 2); + + cy.log(`1.9. Sort by Dashboard - Descending`); + listPersesDashboardsPage.sortBy('Dashboard'); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownCOO.K8S_COMPUTE_RESOURCES_CLUSTER[2], 0); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownCOO.APM_DASHBOARD[2], 1); + listPersesDashboardsPage.assertDashboardName(persesDashboardsDashboardDropdownCOO.ACCELERATORS_COMMON_METRICS[2], 2); + + cy.log(`1.10. Filter by Name - Empty state`); + listPersesDashboardsPage.filter.byName(persesDashboardsDashboardDropdownPersesDev.PROMETHEUS_OVERVIEW[2]); + listPersesDashboardsPage.emptyState(); + listPersesDashboardsPage.countDashboards('0'); + + cy.log(`1.11. Clear all filters`); + listPersesDashboardsPage.clearAllFilters(); + + cy.log(`1.12. Click on a dashboard`); + listPersesDashboardsPage.clickDashboard(persesDashboardsDashboardDropdownCOO.APM_DASHBOARD[2]); + //TODO: change back to shouldBeLoaded when customizable-dashboards gets merged + persesDashboardsPage.shouldBeLoaded1(); + }); + +} diff --git a/web/cypress/views/list-perses-dashboards.ts b/web/cypress/views/list-perses-dashboards.ts new file mode 100644 index 000000000..5c7311189 --- /dev/null +++ b/web/cypress/views/list-perses-dashboards.ts @@ -0,0 +1,82 @@ +import { commonPages } from "./common"; +import { DataTestIDs, Classes, listPersesDashboardsOUIAIDs, listPersesDashboardsDataTestIDs, IDs } from "../../src/components/data-test"; +import { listPersesDashboardsEmptyState, listPersesDashboardsPageSubtitle } from "../fixtures/perses/constants"; +import { MonitoringPageTitles } from "../fixtures/monitoring/constants"; + +export const listPersesDashboardsPage = { + + emptyState: () => { + cy.log('listPersesDashboardsPage.emptyState'); + cy.byTestID(listPersesDashboardsDataTestIDs.EmptyStateTitle).should('be.visible').contains(listPersesDashboardsEmptyState.TITLE); + cy.byTestID(listPersesDashboardsDataTestIDs.EmptyStateBody).should('be.visible').contains(listPersesDashboardsEmptyState.BODY); + cy.byTestID(listPersesDashboardsDataTestIDs.ClearAllFiltersButton).should('be.visible'); + }, + + shouldBeLoaded: () => { + cy.log('listPersesDashboardsPage.shouldBeLoaded'); + cy.byOUIAID(listPersesDashboardsOUIAIDs.PersesBreadcrumb).should('contain', 'Dashboards').should('be.visible'); + commonPages.titleShouldHaveText(MonitoringPageTitles.DASHBOARDS); + cy.byOUIAID(listPersesDashboardsOUIAIDs.PageHeaderSubtitle).should('contain', listPersesDashboardsPageSubtitle).should('be.visible'); + cy.byTestID(DataTestIDs.FavoriteStarButton).should('be.visible'); + cy.byOUIAID(listPersesDashboardsOUIAIDs.PersesDashListDataViewTable).should('be.visible'); + + }, + + filter: { + byName: (name: string) => { + cy.log('listPersesDashboardsPage.filter.byName'); + cy.byOUIAID(listPersesDashboardsOUIAIDs.persesListDataViewFilters).contains('button',/Name|Project/).scrollIntoView().click(); + cy.get(Classes.FilterDropdownOption).should('be.visible').contains('Name').click(); + cy.byTestID(listPersesDashboardsDataTestIDs.NameFilter).should('be.visible').type(name); + cy.byTestID(listPersesDashboardsDataTestIDs.NameFilter).find('input').should('have.attr', 'value', name); + }, + byProject: (project: string) => { + cy.log('listPersesDashboardsPage.filter.byProject'); + cy.byOUIAID(listPersesDashboardsOUIAIDs.persesListDataViewFilters).contains('button',/Name|Project/).scrollIntoView().click(); + cy.get(Classes.FilterDropdownOption).should('be.visible').contains('Project').click(); + cy.byTestID(listPersesDashboardsDataTestIDs.ProjectFilter).should('be.visible').type(project); + cy.byTestID(listPersesDashboardsDataTestIDs.ProjectFilter).find('input').should('have.attr', 'value', project); + }, + }, + + countDashboards: (count: string) => { + cy.log('listPersesDashboardsPage.countDashboards'); + cy.wait(2000); + cy.get('#'+ IDs.persesDashboardCount,).find(Classes.PersesListDashboardCount).invoke('text').should((text) => { + const total = text.split('of')[1].trim(); + expect(total).to.equal(count); + }); + }, + + clearAllFilters: () => { + cy.log('listPersesDashboardsPage.clearAllFilters'); + cy.byOUIAID(listPersesDashboardsOUIAIDs.persesListDataViewHeaderClearAllFiltersButton).click(); + }, + + sortBy: (column: string) => { + cy.log('listPersesDashboardsPage.sortBy'); + cy.byOUIAID(listPersesDashboardsOUIAIDs.persesListDataViewHeaderSortButton).contains(column).scrollIntoView().click(); + }, + + /** + * If index is not provided, it asserts the existence of the dashboard by appending the name to the prefix to build data-test id, expecting to be unique + * If index is provided, it asserts the existence of the dashboard by the index. + * @param name - The name of the dashboard to assert + * @param index - The index of the dashboard to assert (optional) + */ + assertDashboardName: (name: string, index?: number) => { + cy.log('listPersesDashboardsPage.assertDashboardName'); + const idx = index !== undefined ? index : 0; + if (index === undefined) { + cy.byTestID(listPersesDashboardsDataTestIDs.DashboardLinkPrefix+name).should('be.visible').contains(name); + } else { + cy.byOUIAID(listPersesDashboardsOUIAIDs.persesListDataViewTableDashboardNameTD+idx.toString()).should('be.visible').contains(name); + } + }, + + clickDashboard: (name: string, index?: number) => { + const idx = index !== undefined ? index : 0; + cy.log('listPersesDashboardsPage.clickDashboard'); + cy.byTestID(listPersesDashboardsDataTestIDs.DashboardLinkPrefix+name).eq(idx).should('be.visible').click(); + }, +} diff --git a/web/cypress/views/perses-dashboards.ts b/web/cypress/views/perses-dashboards.ts index 9448cd1af..4eef67563 100644 --- a/web/cypress/views/perses-dashboards.ts +++ b/web/cypress/views/perses-dashboards.ts @@ -1,6 +1,7 @@ import { commonPages } from "./common"; -import { DataTestIDs, Classes, LegacyTestIDs, persesAriaLabels, persesDataTestIDs } from "../../src/components/data-test"; +import { DataTestIDs, Classes, LegacyTestIDs, persesAriaLabels, persesMUIDataTestIDs, listPersesDashboardsOUIAIDs, IDs, persesDashboardDataTestIDs } from "../../src/components/data-test"; import { MonitoringPageTitles } from "../fixtures/monitoring/constants"; +import { listPersesDashboardsPageSubtitle } from "../fixtures/perses/constants"; import { persesDashboardsTimeRange, persesDashboardsRefreshInterval, persesDashboardsDashboardDropdownCOO, persesDashboardsDashboardDropdownPersesDev, persesDashboardsAcceleratorsCommonMetricsPanels } from "../fixtures/perses/constants"; export const persesDashboardsPage = { @@ -19,6 +20,29 @@ export const persesDashboardsPage = { }, + //TODO: change back to shouldBeLoaded when customizable-dashboards gets merged + shouldBeLoaded1: () => { + cy.log('persesDashboardsPage.shouldBeLoaded'); + commonPages.titleShouldHaveText(MonitoringPageTitles.DASHBOARDS); + cy.byOUIAID(listPersesDashboardsOUIAIDs.PageHeaderSubtitle).should('contain', listPersesDashboardsPageSubtitle).should('be.visible'); + + cy.byTestID(persesDashboardDataTestIDs.editDashboardButtonToolbar).should('be.visible'); + + cy.byAriaLabel(persesAriaLabels.TimeRangeDropdown).contains(persesDashboardsTimeRange.LAST_30_MINUTES).should('be.visible'); + cy.byAriaLabel(persesAriaLabels.ZoomInButton).should('be.visible'); + cy.byAriaLabel(persesAriaLabels.ZoomOutButton).should('be.visible'); + cy.byAriaLabel(persesAriaLabels.RefreshButton).should('be.visible'); + cy.byAriaLabel(persesAriaLabels.RefreshIntervalDropdown).contains(persesDashboardsRefreshInterval.OFF).should('be.visible'); + + cy.get('#'+IDs.persesDashboardDownloadButton).should('be.visible'); + cy.byAriaLabel(persesAriaLabels.ViewJSONButton).should('be.visible'); + + cy.byTestID(DataTestIDs.PersesDashboardDropdown).find('input').should('be.visible'); + cy.byTestID(DataTestIDs.PersesDashboardDropdown).find('button').should('be.visible'); + cy.byLegacyTestID(LegacyTestIDs.PersesDashboardSection).should('be.visible'); + + }, + clickTimeRangeDropdown: (timeRange: persesDashboardsTimeRange) => { cy.log('persesDashboardsPage.clickTimeRangeDropdown'); cy.byAriaLabel(persesAriaLabels.TimeRangeDropdown).should('be.visible').click({force: true}); @@ -84,7 +108,7 @@ export const persesDashboardsPage = { panelGroupHeaderAssertion: (panelGroupHeader: string) => { cy.log('persesDashboardsPage.panelGroupHeaderAssertion'); - cy.byDataTestID(persesDataTestIDs.panelGroupHeader).contains(panelGroupHeader).should('be.visible'); + cy.byDataTestID(persesMUIDataTestIDs.panelGroupHeader).contains(panelGroupHeader).should('be.visible'); }, panelHeadersAcceleratorsCommonMetricsAssertion: () => { @@ -93,33 +117,33 @@ export const persesDashboardsPage = { const panels = Object.values(persesDashboardsAcceleratorsCommonMetricsPanels); panels.forEach((panel) => { cy.log('Panel: ' + panel); - cy.byDataTestID(persesDataTestIDs.panelHeader).find('h6').contains(panel).scrollIntoView().should('be.visible'); + cy.byDataTestID(persesMUIDataTestIDs.panelHeader).find('h6').contains(panel).scrollIntoView().should('be.visible'); }); }, expandPanel: (panel: keyof typeof persesDashboardsAcceleratorsCommonMetricsPanels | string) => { cy.log('persesDashboardsPage.expandPanel'); - cy.byDataTestID(persesDataTestIDs.panelHeader).find('h6').contains(panel).scrollIntoView().siblings('div').eq(2).find('[data-testid="ArrowExpandIcon"]').click({force: true}); + cy.byDataTestID(persesMUIDataTestIDs.panelHeader).find('h6').contains(panel).scrollIntoView().siblings('div').eq(2).find('[data-testid="ArrowExpandIcon"]').click({force: true}); }, collapsePanel: (panel: keyof typeof persesDashboardsAcceleratorsCommonMetricsPanels | string) => { cy.log('persesDashboardsPage.collapsePanel'); - cy.byDataTestID(persesDataTestIDs.panelHeader).find('h6').contains(panel).scrollIntoView().siblings('div').eq(2).find('[data-testid="ArrowCollapseIcon"]').click({force: true}); + cy.byDataTestID(persesMUIDataTestIDs.panelHeader).find('h6').contains(panel).scrollIntoView().siblings('div').eq(2).find('[data-testid="ArrowCollapseIcon"]').click({force: true}); }, statChartValueAssertion: (panel: keyof typeof persesDashboardsAcceleratorsCommonMetricsPanels | string, noData: boolean) => { cy.log('persesDashboardsPage.statChartValueAssertion'); cy.wait(2000); if (noData) { - cy.byDataTestID(persesDataTestIDs.panelHeader).find('h6').contains(panel).scrollIntoView().parents('header').siblings('figure').find('p').should('contain', 'No data').should('be.visible'); + cy.byDataTestID(persesMUIDataTestIDs.panelHeader).find('h6').contains(panel).scrollIntoView().parents('header').siblings('figure').find('p').should('contain', 'No data').should('be.visible'); } else { - cy.byDataTestID(persesDataTestIDs.panelHeader).find('h6').contains(panel).scrollIntoView().parents('header').siblings('figure').find('h3').should('not.contain', 'No data').should('be.visible'); + cy.byDataTestID(persesMUIDataTestIDs.panelHeader).find('h6').contains(panel).scrollIntoView().parents('header').siblings('figure').find('h3').should('not.contain', 'No data').should('be.visible'); } }, searchAndSelectVariable: (variable: string, value: string) => { cy.log('persesDashboardsPage.searchAndSelectVariable'); - cy.byDataTestID(persesDataTestIDs.variableDropdown+'-'+variable).find('input').type(value); + cy.byDataTestID(persesMUIDataTestIDs.variableDropdown+'-'+variable).find('input').type(value); cy.byPFRole('option').contains(value).click({force: true}); cy.wait(1000); }, diff --git a/web/src/components/data-test.ts b/web/src/components/data-test.ts index 4f08dc0aa..ec4f74f6d 100644 --- a/web/src/components/data-test.ts +++ b/web/src/components/data-test.ts @@ -19,6 +19,7 @@ export const DataTestIDs = { ExpireSilenceButton: 'expire-silence-button', ExpireXSilencesButton: 'expire-x-silences-button', Expression: 'expression', + FavoriteStarButton: 'favorite-button', KebabDropdownButton: 'kebab-dropdown-button', MastHeadHelpIcon: 'help-dropdown-toggle', MastHeadApplicationItem: 'application-launcher-item', @@ -175,6 +176,8 @@ export const LegacyTestIDs = { export const IDs = { ChartAxis0ChartLabel: 'chart-axis-0-ChartLabel', //id^=IDs.ChartAxis0ChartLabel AxisX ChartAxis1ChartLabel: 'chart-axis-1-ChartLabel', //id^=IDs.ChartAxis1ChartLabel AxisY + persesDashboardCount: 'options-menu-top-pagination', + persesDashboardDownloadButton: 'download-dashboard-button', }; export const Classes = { @@ -202,6 +205,7 @@ export const Classes = { MetricsPageQueryAutocomplete: '.cm-tooltip-autocomplete.cm-tooltip.cm-tooltip-below', MoreLessTag: '.pf-v6-c-label-group__label, .pf-v5-c-chip-group__label', NamespaceDropdown: '.pf-v6-c-menu-toggle.co-namespace-dropdown__menu-toggle', + PersesListDashboardCount: '.pf-v6-c-menu-toggle__text', SectionHeader: '.pf-v6-c-title.pf-m-h2, .co-section-heading', TableHeaderColumn: '.pf-v6-c-table__button, .pf-c-table__button', SilenceAlertTitle: '.pf-v6-c-alert__title, .pf-v5-c-alert__title', @@ -221,10 +225,38 @@ export const persesAriaLabels = { RefreshIntervalDropdown: 'Select refresh interval. Currently set to 0s', ZoomInButton: 'Zoom in', ZoomOutButton: 'Zoom out', + ViewJSONButton: 'View JSON', }; -export const persesDataTestIDs = { +//data-testid from MUI components +export const persesMUIDataTestIDs = { variableDropdown: 'variable', panelGroupHeader: 'panel-group-header', panelHeader: 'panel', }; + +export const persesDashboardDataTestIDs = { + editDashboardButtonToolbar: 'edit-dashboard-button-toolbar', + cancelButtonToolbar: 'cancel-button-toolbar', +}; + +export const listPersesDashboardsDataTestIDs = { + PersesBreadcrumbDashboardItem: 'perses-dashboards-breadcrumb-dashboard-item', + PersesBreadcrumbDashboardNameItem: 'perses-dashboards-breadcrumb-dashboard-name-item', + NameFilter: 'name-filter', + ProjectFilter: 'project-filter', + EmptyStateTitle: 'empty-state-title', + EmptyStateBody: 'empty-state-body', + ClearAllFiltersButton: 'clear-all-filters-button', + DashboardLinkPrefix: 'perseslistpage-', +}; + +export const listPersesDashboardsOUIAIDs = { + PageHeaderSubtitle: 'PageHeader-subtitle', + PersesBreadcrumb: 'perses-dashboards-breadcrumb', + PersesDashListDataViewTable: 'PersesDashList-DataViewTable', + persesListDataViewHeaderClearAllFiltersButton: 'PersesDashList-DataViewHeader-clear-all-filters', + persesListDataViewFilters: 'DataViewFilters', + persesListDataViewHeaderSortButton: 'PersesDashList-DataViewTable-th', + persesListDataViewTableDashboardNameTD: 'PersesDashList-DataViewTable-td-', +};