OU-1134: edit perses dashboards automation testing

web/cypress/e2e/perses/02.coo_edit_perses_admin.cy.ts

@@ -0,0 +1,39 @@
+import { nav } from '../../views/nav';
+import { runCOOEditPersesTests } from '../../support/perses/02.coo_edit_perses_admin.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) - Edit perses dashboard', { tags: ['@perses', '@dashboards-'] }, () => {
+
+  before(() => {
+    cy.beforeBlockCOO(MCP, MP);
+  });
+
+  beforeEach(() => {
+    nav.sidenav.clickNavLink(['Observe', 'Dashboards (Perses)']);
+    cy.changeNamespace('All Projects');
+  });
+
+  runCOOEditPersesTests({ 
+    name: 'Administrator',
+  });
+
+});
+
+
+

web/cypress/fixtures/perses/constants.ts

@@ -48,4 +48,45 @@ export const listPersesDashboardsEmptyState = {
   TITLE: 'No results found',
   BODY: 'No results match the filter criteria. Clear filters to show results.',
 
+}
+
+export const persesDashboardsModalTitles ={
+  EDIT_DASHBOARD_VARIABLES: 'Edit Dashboard Variables',
+  DASHBOARD_BUILT_IN_VARIABLES: 'Dashboard Built-in Variables',
+  ADD_VARIABLE: 'Add Variable',
+  EDIT_VARIABLE: 'Edit Variable',
+  EDIT_DASHBOARD_DATASOURCES: 'Edit Dashboard Datasources',
+  ADD_DATASOURCE: 'Add Datasource',
+  EDIT_DATASOURCE: 'Edit Datasource',
+  ADD_PANEL: 'Add Panel',
+  EDIT_PANEL: 'Edit Panel',
+  DELETE_PANEL: 'Delete Panel',
+  ADD_PANEL_GROUP: 'Add Panel Group',
+  EDIT_PANEL_GROUP: 'Edit Panel Group',
+  DELETE_PANEL_GROUP: 'Delete Panel Group',
+  EDIT_DASHBOARD_JSON: 'Edit Dashboard JSON',
+  SAVE_DASHBOARD: 'Save Dashboard',
+  DISCARD_CHANGES: 'Discard Changes',
+}
+
+export enum persesDashboardsAddListVariableSource {
+  STATIC_LIST_VARIABLE=  'Static List Variable',
+  DATASOURCE_VARIABLE= 'Datasource Variable',
+  PROMETHEUS_LABEL_VARIABLE= 'Prometheus Label Variable',
+  PROMETHEUS_NAMES_VARIABLE= 'Prometheus Names Variable',
+  PROMETHEUS_PROMQL_VARIABLE= 'Prometheus PromQL Variable',
+}
+
+export enum persesDashboardsAddListVariableSort {
+  NONE = 'None',
+  ALPHABETICAL_ASC = 'Alphabetical, asc',
+  ALPHABETICAL_DESC = 'Alphabetical, desc',
+  NUMERICAL_ASC = 'Numerical, asc',
+  NUMERICAL_DESC = 'Numerical, desc',
+  ALPHABETICAL_CI_ASC = 'Alphabetical, case-insensitive, asc',
+  ALPHABETICAL_CI_DESC = 'Alphabetical, case-insensitive, desc',
+}
+
+export const persesDashboardsRequiredFields = {
+  AddVariableNameField: 'String must contain at least 1 character(s)'
 }

web/cypress/views/common.ts

@@ -10,6 +10,11 @@ export const commonPages = {
     cy.bySemanticElement('h1', title).scrollIntoView().should('be.visible');
   },
 
+  titleModalShouldHaveText: (title: string) => {
+    cy.log('commonPages.titleModalShouldHaveText - ' + `${title}`);
+    cy.bySemanticElement('h2', title).scrollIntoView().should('be.visible');
+  },
+
   linkShouldExist: (linkName: string) => {
     cy.log('commonPages.linkShouldExist - ' + `${linkName}`);
     cy.bySemanticElement('button', linkName).should('be.visible');

web/cypress/views/perses-dashboards-edit-datasources.ts

@@ -0,0 +1,85 @@
+import { commonPages } from "./common";
+import { persesAriaLabels, persesMUIDataTestIDs, IDs, editPersesDashboardsAddVariable, editPersesDashboardsAddDatasource } from "../../src/components/data-test";
+import { persesDashboardsModalTitles, persesDashboardsAddListVariableSource, persesDashboardsAddListVariableSort, persesDashboardsRequiredFields } from "../fixtures/perses/constants";
+
+export const persesDashboardsEditDatasources = {
+
+  shouldBeLoaded: () => {
+    cy.log('persesDashboardsEditVariables.shouldBeLoaded');
+    commonPages.titleModalShouldHaveText(persesDashboardsModalTitles.EDIT_DASHBOARD_DATASOURCES);
+    cy.byAriaLabel(persesAriaLabels.EditDashboardDatasourcesTable).should('be.visible');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('button').contains('Apply').should('be.visible').and('have.attr', 'disabled');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('button').contains('Cancel').should('be.visible');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('button').contains('Add Datasource').should('be.visible');
+  },
+
+  assertDatasource: (index: number, name: string, type: 'PrometheusDatasource' | 'TempoDatasource', description: string) => {
+    cy.log('persesDashboardsEditDatasources.assertDatasource');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('tbody').find('tr').eq(index).find('th').contains(name).should('be.visible');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('tbody').find('tr').eq(index).find('td').eq(0).contains(type).should('be.visible');
+    if (description !== '') {
+      cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('tbody').find('tr').eq(index).find('td').eq(1).contains(description).should('be.visible');
+    }
+  },
+
+  assertDatasourceNotExist: (name: string) => {
+    cy.log('persesDashboardsEditDatasources.assertDatasource');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('th').contains(name).should('not.exist');
+  },
+
+  clickButton: (button: 'Apply' | 'Cancel' | 'Add Datasource' | 'Add') => {
+    cy.log('persesDashboardsEditDatasources.clickButton');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('button').contains(button).should('be.visible').click();
+  },
+
+  addDatasource: (name: string, defaultDatasource: boolean, pluginOptions: 'Prometheus Datasource' | 'Tempo Datasource', displayLabel?: string, description?: string) => {
+    cy.log('persesDashboardsEditDatasources.addDatasource');
+    cy.get('input[name="'+editPersesDashboardsAddDatasource.inputName+'"]').clear().type(name);
+    if (displayLabel !== undefined) {
+      cy.get('input[name="'+editPersesDashboardsAddDatasource.inputDisplayLabel+'"]').clear().type(displayLabel);
+    }
+    if (description !== undefined) {
+      cy.get('input[name="'+editPersesDashboardsAddDatasource.inputDescription+'"]').clear().type(description);
+    }
+
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('input[name="'+editPersesDashboardsAddDatasource.inputDefaultDatasource+'"]').then((checkbox) => {
+      if ((checkbox.not(':checked') && defaultDatasource) || (checkbox.is(':checked') && !defaultDatasource)) {
+        cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('input[name="'+editPersesDashboardsAddDatasource.inputDefaultDatasource+'"]').click();
+      }
+    });
+
+    persesDashboardsEditDatasources.clickDropdownAndSelectOption('Source', pluginOptions);
+
+  },
+
+  clickDropdownAndSelectOption: (label: string, option: string) => {
+    cy.log('persesDashboardsEditVariables.selectVariableType');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('label').contains(label).siblings('div').click();
+    cy.get('li').contains(option).should('be.visible').click();
+  },
+
+  assertRequiredFieldValidation: (field: string) => {
+    cy.log('persesDashboardsEditVariables.assertRequiredFieldValidation');
+
+    switch (field) {
+      case 'Name':
+        cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('label').contains(field).siblings('p').should('have.text', persesDashboardsRequiredFields.AddVariableNameField);
+        break;
+    }
+  },
+
+  clickDiscardChangesButton: () => {
+    cy.log('persesDashboardsEditVariables.clickDiscardChangesButton');
+    cy.bySemanticElement('button', 'Discard Changes').scrollIntoView().should('be.visible').click({ force: true });
+  },
+
+  clickEditDatasourceButton: (index: number) => {
+    cy.log('persesDashboardsEditDatasources.clickEditDatasourceButton');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('[data-testid="'+persesMUIDataTestIDs.editDashboardEditVariableDatasourceEditButton+'"]').eq(index).should('be.visible').click();
+  },
+
+  clickDeleteDatasourceButton: (index: number) => {
+    cy.log('persesDashboardsEditDatasources.clickDeleteDatasourceButton');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardDatasourcesModal).find('[data-testid="'+persesMUIDataTestIDs.editDashboardEditVariableDatasourceDeleteButton+'"]').eq(index).should('be.visible').click();
+  },
+}

web/cypress/views/perses-dashboards-edit-variables.ts

@@ -0,0 +1,130 @@
+import { commonPages } from "./common";
+import { persesAriaLabels, persesMUIDataTestIDs, IDs, editPersesDashboardsAddVariable } from "../../src/components/data-test";
+import { persesDashboardsModalTitles, persesDashboardsAddListVariableSource, persesDashboardsAddListVariableSort, persesDashboardsRequiredFields } from "../fixtures/perses/constants";
+
+export const persesDashboardsEditVariables = {
+
+  shouldBeLoaded: () => {
+    cy.log('persesDashboardsEditVariables.shouldBeLoaded');
+    commonPages.titleModalShouldHaveText(persesDashboardsModalTitles.EDIT_DASHBOARD_VARIABLES);
+    cy.byAriaLabel(persesAriaLabels.EditDashboardVariablesTable).should('be.visible');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('button').contains('Apply').should('be.visible').and('have.attr', 'disabled');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('button').contains('Cancel').should('be.visible');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('button').contains('Add Variable').should('be.visible');
+    commonPages.titleModalShouldHaveText(persesDashboardsModalTitles.DASHBOARD_BUILT_IN_VARIABLES);
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('#'+IDs.persesDashboardEditVariablesModalBuiltinButton).should('have.attr', 'aria-expanded', 'false');
+  },
+
+  clickButton: (button: 'Apply' | 'Cancel' | 'Add Variable' | 'Add' | 'Run Query') => {
+    cy.log('persesDashboardsEditVariables.clickButton');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('button').contains(button).should('be.visible').click();
+  },
+
+  addTextVariable: (name: string, constant: boolean, displayLabel?: string, description?: string, value?: string) => {
+    cy.log('persesDashboardsEditVariables.addTextVariable');
+    cy.get('input[name="'+editPersesDashboardsAddVariable.inputName+'"]').clear().type(name);
+
+    const displayLabelInput = displayLabel !== undefined ? displayLabel : name;
+    const descriptionInput = description !== undefined ? description : name;
+    const valueInput = value !== undefined ? value : '';
+
+    cy.get('input[name="'+editPersesDashboardsAddVariable.inputDisplayLabel+'"]').clear().type(displayLabelInput);
+    cy.get('input[name="'+editPersesDashboardsAddVariable.inputDescription+'"]').clear().type(descriptionInput);
+    cy.get('input[name="'+editPersesDashboardsAddVariable.inputValue+'"]').clear().type(valueInput);
+    if (constant) {
+      cy.get('input[name="'+editPersesDashboardsAddVariable.inputConstant+'"]').click();
+    }
+  },
+
+  addListVariable: (
+    name: string, 
+    allowMultiple: boolean, 
+    allowAllValue: boolean, 
+    customAllValue?: string, 
+    displayLabel?: string, 
+    description?: string, 
+    source?: persesDashboardsAddListVariableSource, 
+    sort?: persesDashboardsAddListVariableSort) => {
+    cy.log('persesDashboardsEditVariables.addListVariable');
+    cy.get('input[name="'+editPersesDashboardsAddVariable.inputName+'"]').clear().type(name);
+
+    if (displayLabel !== undefined) {
+      cy.get('input[name="'+editPersesDashboardsAddVariable.inputDisplayLabel+'"]').clear().type(displayLabel);
+    }
+    if (description !== undefined) {
+      cy.get('input[name="'+editPersesDashboardsAddVariable.inputDescription+'"]').clear().type(description);
+    }
+    persesDashboardsEditVariables.clickDropdownAndSelectOption('Type', 'List');
+
+    if (source !== undefined) {
+      persesDashboardsEditVariables.clickDropdownAndSelectOption('Source', source);
+    }
+    if (sort !== undefined) {
+      persesDashboardsEditVariables.clickDropdownAndSelectOption('Sort', sort);
+    }
+    if (allowMultiple) {
+      cy.get('input[name="'+editPersesDashboardsAddVariable.inputAllowMultiple+'"]').click();
+    }
+    if (allowAllValue) {
+      cy.get('input[name="'+editPersesDashboardsAddVariable.inputAllowAllValue+'"]').click();
+      if (customAllValue !== undefined) {
+        cy.get('input[name="'+editPersesDashboardsAddVariable.inputCustomAllValue+'"]').clear().type(customAllValue);
+      }
+    }
+  },
+
+  /**
+   * 
+   * @param label - label of the dropdown
+   * @param option - option to select
+   */
+  clickDropdownAndSelectOption: (label: string, option: string) => {
+    cy.log('persesDashboardsEditVariables.selectVariableType');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('label').contains(label).siblings('div').click();
+    cy.get('li').contains(option).should('be.visible').click();
+  },
+
+  assertRequiredFieldValidation: (field: string) => {
+    cy.log('persesDashboardsEditVariables.assertRequiredFieldValidation');
+
+    switch (field) {
+      case 'Name':
+        cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('label').contains(field).siblings('p').should('have.text', persesDashboardsRequiredFields.AddVariableNameField);
+        break;
+    }
+  },
+
+  clickDiscardChangesButton: () => {
+    cy.log('persesDashboardsEditVariables.clickDiscardChangesButton');
+    cy.bySemanticElement('button', 'Discard Changes').scrollIntoView().should('be.visible').click({ force: true });
+  },
+
+  toggleVariableVisibility: (index: number, visible: boolean) => {
+    cy.log('persesDashboardsEditVariables.toggleVariableVisibility');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('input[type="checkbox"]').eq(index).then((checkbox) => {
+      if ((checkbox.not(':checked') && visible) || (checkbox.is(':checked') && !visible)) {
+        cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('input[type="checkbox"]').eq(index).click();
+      }
+    });
+  },
+
+  moveVariableUp: (index: number) => {
+    cy.log('persesDashboardsEditVariables.moveVariableUp');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('[data-testid="'+persesMUIDataTestIDs.editDashboardEditVariableMoveUpButton+'"]').eq(index).should('be.visible').click();
+  },
+
+  moveVariableDown: (index: number) => {
+    cy.log('persesDashboardsEditVariables.moveVariableDown');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('[data-testid="'+persesMUIDataTestIDs.editDashboardEditVariableMoveDownButton+'"]').eq(index).should('be.visible').click();
+  },
+
+  clickEditVariableButton: (index: number) => {
+    cy.log('persesDashboardsEditVariables.clickEditVariableButton');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('[data-testid="'+persesMUIDataTestIDs.editDashboardEditVariableDatasourceEditButton+'"]').eq(index).should('be.visible').click();
+  },
+
+  clickDeleteVariableButton: (index: number) => {
+    cy.log('persesDashboardsEditVariables.clickDeleteVariableButton');
+    cy.byDataTestID(persesMUIDataTestIDs.editDashboardVariablesModal).find('[data-testid="'+persesMUIDataTestIDs.editDashboardEditVariableDatasourceDeleteButton+'"]').eq(index).should('be.visible').click();
+  },
+}