Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactored acknowledge alerts button on Alerts by trigger dashboard page to be a modal experience. #167

Merged
merged 2 commits into from
Feb 17, 2022
Merged

Refactored acknowledge alerts button on Alerts by trigger dashboard page to be a modal experience. #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c99b181
Refactored Acknowledge button on Alerts by trigger dashboard to displ…
AWSHurneyt Feb 1, 2022
5a2e152
Updated license headers.
AWSHurneyt Feb 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 192 additions & 0 deletions cypress/integration/acknowledge_alerts_modal_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import { INDEX, PLUGIN_NAME } from '../support/constants';
import sampleAlertsFlyoutBucketMonitor from '../fixtures/sample_alerts_flyout_bucket_level_monitor.json';
import sampleAlertsFlyoutQueryMonitor from '../fixtures/sample_alerts_flyout_query_level_monitor.json';

const BUCKET_MONITOR = 'sample_alerts_flyout_bucket_level_monitor';
const BUCKET_TRIGGER = 'sample_alerts_flyout_bucket_level_trigger';
const QUERY_MONITOR = 'sample_alerts_flyout_query_level_monitor';
const QUERY_TRIGGER = 'sample_alerts_flyout_query_level_trigger';

const TWENTY_SECONDS = 20000;

describe('AcknowledgeAlertsModal', () => {
before(() => {
// Delete any existing monitors
cy.deleteAllMonitors();

// Load sample data
cy.loadSampleEcommerceData();

// Create the test monitors
cy.createMonitor(sampleAlertsFlyoutBucketMonitor);
cy.createMonitor(sampleAlertsFlyoutQueryMonitor);

// Visit Alerting OpenSearch Dashboards
cy.visit(`${Cypress.env('opensearch_dashboards')}/app/${PLUGIN_NAME}#/monitors`);

// Confirm test monitors were created successfully
cy.contains(BUCKET_MONITOR, { timeout: TWENTY_SECONDS });
cy.contains(QUERY_MONITOR, { timeout: TWENTY_SECONDS });

// Wait 1 minute for the test monitors to trigger alerts, then go to the 'Alerts by trigger' dashboard page to view alerts
cy.wait(60000);
});

beforeEach(() => {
// Reloading the page to close any modals that were not closed by other tests that had failures.
cy.visit(`${Cypress.env('opensearch_dashboards')}/app/${PLUGIN_NAME}#/dashboard`);

// Confirm dashboard is displaying rows for the test monitors.
cy.contains(BUCKET_MONITOR, { timeout: TWENTY_SECONDS });
cy.contains(QUERY_MONITOR, { timeout: TWENTY_SECONDS });
});

it('Acknowledge button disabled when more than 1 trigger selected', () => {
// Set the 'severity' filter to only display rows with ACTIVE alerts.
cy.get('[data-test-subj="dashboardAlertStateFilter"]').select('Active');

// Confirm the 'Alerts by trigger' dashboard contains more than 1 row.
cy.get('tbody > tr', { timeout: TWENTY_SECONDS }).should(($tr) =>
expect($tr).to.have.length.greaterThan(1)
);

// Select the first and last rows in the table.
cy.get('input[data-test-subj^="checkboxSelectRow-"]').first().click();
cy.get('input[data-test-subj^="checkboxSelectRow-"]').last().click();

// Click the 'Alerts by trigger' dashboard 'Acknowledge' button.
cy.get('[data-test-subj="acknowledgeAlertsButton"]').should('be.disabled');
});

it('Bucket-level monitor modal test', () => {
// To simplify testing, filter the dashboard to only display the desired trigger.
cy.get(`input[type="search"]`).focus().type(BUCKET_TRIGGER);

// Confirm the dashboard is displaying only 1 row.
cy.get('tbody > tr', { timeout: TWENTY_SECONDS }).should(($tr) =>
expect($tr).to.have.length(1)
);

// Find the row for the trigger, and check off the checkbox.
cy.get('input[data-test-subj^="checkboxSelectRow-"]').first().click();

// Click the 'Alerts by trigger' dashboard 'Acknowledge' button.
cy.get('[data-test-subj="acknowledgeAlertsButton"]').click();

// Perform the test checks within the modal component.
cy.get(`[data-test-subj="alertsDashboardModal_${BUCKET_TRIGGER}"]`).within(() => {
// Confirm modal header contains expected text.
cy.get(`[data-test-subj="alertsDashboardModal_header_${BUCKET_TRIGGER}"]`).contains(
`Select which alerts to acknowledge for ${BUCKET_TRIGGER}`
);

// Set the 'severity' filter to only display ACTIVE alerts.
cy.get('[data-test-subj="dashboardAlertStateFilter"]').select('Active');

// This monitor configuration consistently returns 46 alerts when testing locally.
// Confirm the modal dashboard contains more than 1 ACTIVE alert.
cy.get('tbody > tr', { timeout: TWENTY_SECONDS }).should(($tr) =>
expect($tr).to.have.length.greaterThan(1)
);

// Select the first and last alerts in the table.
cy.get('input[data-test-subj^="checkboxSelectRow-"]', { timeout: TWENTY_SECONDS })
.first()
.click();
cy.get('input[data-test-subj^="checkboxSelectRow-"]', { timeout: TWENTY_SECONDS })
.last()
.click();

// Press the modal 'Acknowledge button, and wait for the AcknowledgeAlerts API call to complete.
cy.get('[data-test-subj="alertsDashboardModal_acknowledgeAlertsButton"]').click();
});

// Confirm acknowledge alerts toast displays expected text.
cy.contains('Successfully acknowledged 2 alerts.');

// Confirm alerts were acknowledged as expected.
cy.get(`[data-test-subj="alertsDashboardModal_${BUCKET_TRIGGER}"]`).within(() => {
// Set the 'severity' filter to only display ACKNOWLEDGED alerts.
cy.get('[data-test-subj="dashboardAlertStateFilter"]').select('Acknowledged');

// Confirm the table displays 2 acknowledged alerts.
cy.get('tbody > tr', { timeout: TWENTY_SECONDS }).should(($tr) =>
expect($tr).to.have.length(2)
);
});

// Confirm close button hides the modal.
cy.get(`[data-test-subj="alertsDashboardModal_closeButton_${BUCKET_TRIGGER}"]`).click();
cy.contains(`[data-test-subj="alertsDashboardModal_${BUCKET_TRIGGER}"]`).should('not.exist');
});

it('Query-level monitor modal test', () => {
// To simplify testing, filter the dashboard to only display the desired trigger.
cy.get(`input[type="search"]`).focus().type(QUERY_TRIGGER);

// Confirm the dashboard is displaying only 1 row.
cy.get('tbody > tr', { timeout: TWENTY_SECONDS }).should(($tr) =>
expect($tr).to.have.length(1)
);

// Find the row for the trigger, and check off the checkbox.
cy.get('input[data-test-subj^="checkboxSelectRow-"]').first().click();

// Click the 'Alerts by trigger' dashboard 'Acknowledge' button.
cy.get('[data-test-subj="acknowledgeAlertsButton"]').click();

// Perform the test checks within the modal component.
cy.get(`[data-test-subj="alertsDashboardModal_${QUERY_TRIGGER}"]`).within(() => {
// Confirm modal header contains expected text.
cy.get(`[data-test-subj="alertsDashboardModal_header_${QUERY_TRIGGER}"]`).contains(
`Select which alerts to acknowledge for ${QUERY_TRIGGER}`
);

// Set the 'severity' filter to only display ACTIVE alerts.
cy.get('[data-test-subj="dashboardAlertStateFilter"]').select('Active');

// Confirm the modal dashboard contains 1 alert.
cy.get('tbody > tr', { timeout: TWENTY_SECONDS }).should(($tr) =>
expect($tr).to.have.length(1)
);

// Select the alert.
cy.get('input[data-test-subj^="checkboxSelectRow-"]').first().click();

// Press the modal 'Acknowledge' button, and wait for the AcknowledgeAlerts API call to complete.
cy.get('[data-test-subj="alertsDashboardModal_acknowledgeAlertsButton"]').click();
});

// Confirm acknowledge alerts toast displays expected text.
cy.contains('Successfully acknowledged 1 alert.');

// Confirm alerts were acknowledged as expected.
cy.get(`[data-test-subj="alertsDashboardModal_${QUERY_TRIGGER}"]`).within(() => {
// Set the 'severity' filter to only display ACKNOWLEDGED alerts.
cy.get('[data-test-subj="dashboardAlertStateFilter"]').select('Acknowledged');

// Confirm the table displays 1 acknowledged alert.
cy.get('tbody > tr', { timeout: TWENTY_SECONDS }).should(($tr) =>
expect($tr).to.have.length(1)
);
});

// Confirm close button hides the modal.
cy.get(`[data-test-subj="alertsDashboardModal_closeButton_${QUERY_TRIGGER}"]`).click();
cy.contains(`[data-test-subj="alertsDashboardModal_${QUERY_TRIGGER}"]`).should('not.exist');
});

after(() => {
// Delete all monitors
cy.deleteAllMonitors();

// Delete sample data
cy.deleteIndexByName(`${INDEX.SAMPLE_DATA_ECOMMERCE}`);
});
});
Loading