Skip to content

Commit

Permalink
[Security Solution][Detections] - Fix loading indicators in the rules…
Browse files Browse the repository at this point in the history 
… management table (#91925) (#92270)

**Base PR:** #91342
**Fixes:** #91336

## Summary

This PR fixes loading indicators used in the rules management table.

- [Added] Blocking indicator. We show a spinner and "freeze" (fade out) the table when any of these changes: filters, sorting, pagination, manual click on Refresh button.
- [Adjusted] Non-blocking indicator. We show a non-blocking "ribbon" (progress bar) only when auto-refresh is in progress.
- Initial loading indicator. We show it only on the first table load.

Code and tests are slightly adjusted. Things to note are marked below in additional GH comments.

Co-authored-by: Yara Tercero <yara.tercero@elastic.co>

Co-authored-by: Yara Tercero <yara.tercero@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
@banderror @yctercero @kibanamachine
3 people authored Feb 24, 2021
1 parent a1515f9 commit be1f3cc
Show file tree
Hide file tree
Showing 17 changed files with 257 additions and 155 deletions.
15 changes: 7 additions & 8 deletions ...k/plugins/security_solution/cypress/integration/detection_rules/custom_query_rule.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,16 +80,16 @@ import {
waitForAlertsPanelToBeLoaded,
} from '../../tasks/alerts';
import {
changeToThreeHundredRowsPerPage,
changeRowsPerPageTo300,
deleteFirstRule,
deleteSelectedRules,
editFirstRule,
filterByCustomRules,
goToCreateNewRule,
goToRuleDetails,
selectNumberOfRules,
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded,
waitForRulesToBeLoaded,
waitForRulesTableToBeLoaded,
waitForRulesTableToBeRefreshed,
} from '../../tasks/alerts_detection_rules';
import { createCustomRuleActivated } from '../../tasks/api_calls/rules';
import { createTimeline } from '../../tasks/api_calls/timelines';
Expand Down Expand Up @@ -136,7 +136,7 @@ describe('Custom detection rules creation', () => {
waitForAlertsPanelToBeLoaded();
waitForAlertsIndexToBeCreated();
goToManageAlertsDetectionRules();
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
waitForRulesTableToBeLoaded();
goToCreateNewRule();
fillDefineCustomRuleWithImportedQueryAndContinue(this.rule);
fillAboutRuleAndContinue(this.rule);
Expand All @@ -158,8 +158,7 @@ describe('Custom detection rules creation', () => {

cy.get(CUSTOM_RULES_BTN).should('have.text', 'Custom rules (1)');

changeToThreeHundredRowsPerPage();
waitForRulesToBeLoaded();
changeRowsPerPageTo300();

cy.get(RULES_TABLE).then(($table) => {
cy.wrap($table.find(RULES_ROW).length).should('eql', expectedNumberOfRules);
Expand Down Expand Up @@ -245,7 +244,7 @@ describe('Custom detection rules deletion and edition', () => {
cy.get(SHOWING_RULES_TEXT).should('have.text', `Showing ${initialNumberOfRules} rules`);

deleteFirstRule();
waitForRulesToBeLoaded();
waitForRulesTableToBeRefreshed();

cy.get(RULES_TABLE).then(($table) => {
cy.wrap($table.find(RULES_ROW).length).should(
Expand Down Expand Up @@ -275,7 +274,7 @@ describe('Custom detection rules deletion and edition', () => {

selectNumberOfRules(numberOfRulesToBeDeleted);
deleteSelectedRules();
waitForRulesToBeLoaded();
waitForRulesTableToBeRefreshed();

cy.get(RULES_TABLE).then(($table) => {
cy.wrap($table.find(RULES_ROW).length).should(
Expand Down
15 changes: 6 additions & 9 deletions ...gins/security_solution/cypress/integration/detection_rules/event_correlation_rule.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,11 @@ import {
waitForAlertsPanelToBeLoaded,
} from '../../tasks/alerts';
import {
changeToThreeHundredRowsPerPage,
changeRowsPerPageTo300,
filterByCustomRules,
goToCreateNewRule,
goToRuleDetails,
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded,
waitForRulesToBeLoaded,
waitForRulesTableToBeLoaded,
} from '../../tasks/alerts_detection_rules';
import { createTimeline } from '../../tasks/api_calls/timelines';
import { cleanKibana } from '../../tasks/common';
Expand Down Expand Up @@ -104,7 +103,7 @@ describe('Detection rules, EQL', () => {
waitForAlertsPanelToBeLoaded();
waitForAlertsIndexToBeCreated();
goToManageAlertsDetectionRules();
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
waitForRulesTableToBeLoaded();
goToCreateNewRule();
selectEqlRuleType();
fillDefineEqlRuleAndContinue(this.rule);
Expand All @@ -114,8 +113,7 @@ describe('Detection rules, EQL', () => {

cy.get(CUSTOM_RULES_BTN).should('have.text', 'Custom rules (1)');

changeToThreeHundredRowsPerPage();
waitForRulesToBeLoaded();
changeRowsPerPageTo300();

cy.get(RULES_TABLE).then(($table) => {
cy.wrap($table.find(RULES_ROW).length).should('eql', expectedNumberOfRules);
Expand Down Expand Up @@ -200,7 +198,7 @@ describe('Detection rules, sequence EQL', () => {
waitForAlertsPanelToBeLoaded();
waitForAlertsIndexToBeCreated();
goToManageAlertsDetectionRules();
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
waitForRulesTableToBeLoaded();
goToCreateNewRule();
selectEqlRuleType();
fillDefineEqlRuleAndContinue(this.rule);
Expand All @@ -210,8 +208,7 @@ describe('Detection rules, sequence EQL', () => {

cy.get(CUSTOM_RULES_BTN).should('have.text', 'Custom rules (1)');

changeToThreeHundredRowsPerPage();
waitForRulesToBeLoaded();
changeRowsPerPageTo300();

cy.get(RULES_TABLE).then(($table) => {
cy.wrap($table.find(RULES_ROW).length).should('eql', expectedNumberOfRules);
Expand Down
10 changes: 4 additions & 6 deletions ...lugins/security_solution/cypress/integration/detection_rules/indicator_match_rule.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,11 @@ import {
waitForAlertsPanelToBeLoaded,
} from '../../tasks/alerts';
import {
changeToThreeHundredRowsPerPage,
changeRowsPerPageTo300,
filterByCustomRules,
goToCreateNewRule,
goToRuleDetails,
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded,
waitForRulesToBeLoaded,
waitForRulesTableToBeLoaded,
} from '../../tasks/alerts_detection_rules';
import { cleanKibana } from '../../tasks/common';
import {
Expand Down Expand Up @@ -375,7 +374,7 @@ describe('indicator match', () => {
waitForAlertsPanelToBeLoaded();
waitForAlertsIndexToBeCreated();
goToManageAlertsDetectionRules();
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
waitForRulesTableToBeLoaded();
goToCreateNewRule();
selectIndicatorMatchType();
});
Expand All @@ -388,8 +387,7 @@ describe('indicator match', () => {

cy.get(CUSTOM_RULES_BTN).should('have.text', 'Custom rules (1)');

changeToThreeHundredRowsPerPage();
waitForRulesToBeLoaded();
changeRowsPerPageTo300();

cy.get(RULES_TABLE).then(($table) => {
cy.wrap($table.find(RULES_ROW).length).should('eql', expectedNumberOfRules);
Expand Down
10 changes: 4 additions & 6 deletions ...ugins/security_solution/cypress/integration/detection_rules/machine_learning_rule.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,11 @@ import {
waitForAlertsPanelToBeLoaded,
} from '../../tasks/alerts';
import {
changeToThreeHundredRowsPerPage,
changeRowsPerPageTo300,
filterByCustomRules,
goToCreateNewRule,
goToRuleDetails,
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded,
waitForRulesToBeLoaded,
waitForRulesTableToBeLoaded,
} from '../../tasks/alerts_detection_rules';
import { cleanKibana } from '../../tasks/common';
import {
Expand Down Expand Up @@ -81,7 +80,7 @@ describe('Detection rules, machine learning', () => {
waitForAlertsPanelToBeLoaded();
waitForAlertsIndexToBeCreated();
goToManageAlertsDetectionRules();
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
waitForRulesTableToBeLoaded();
goToCreateNewRule();
selectMachineLearningRuleType();
fillDefineMachineLearningRuleAndContinue(machineLearningRule);
Expand All @@ -91,8 +90,7 @@ describe('Detection rules, machine learning', () => {

cy.get(CUSTOM_RULES_BTN).should('have.text', 'Custom rules (1)');

changeToThreeHundredRowsPerPage();
waitForRulesToBeLoaded();
changeRowsPerPageTo300();

cy.get(RULES_TABLE).then(($table) => {
cy.wrap($table.find(RULES_ROW).length).should('eql', expectedNumberOfRules);
Expand Down
10 changes: 4 additions & 6 deletions x-pack/plugins/security_solution/cypress/integration/detection_rules/override.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,11 @@ import {
waitForAlertsPanelToBeLoaded,
} from '../../tasks/alerts';
import {
changeToThreeHundredRowsPerPage,
changeRowsPerPageTo300,
filterByCustomRules,
goToCreateNewRule,
goToRuleDetails,
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded,
waitForRulesToBeLoaded,
waitForRulesTableToBeLoaded,
} from '../../tasks/alerts_detection_rules';
import { createTimeline } from '../../tasks/api_calls/timelines';
import { cleanKibana } from '../../tasks/common';
Expand Down Expand Up @@ -113,7 +112,7 @@ describe('Detection rules, override', () => {
waitForAlertsPanelToBeLoaded();
waitForAlertsIndexToBeCreated();
goToManageAlertsDetectionRules();
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
waitForRulesTableToBeLoaded();
goToCreateNewRule();
fillDefineCustomRuleWithImportedQueryAndContinue(this.rule);
fillAboutRuleWithOverrideAndContinue(this.rule);
Expand All @@ -122,8 +121,7 @@ describe('Detection rules, override', () => {

cy.get(CUSTOM_RULES_BTN).should('have.text', 'Custom rules (1)');

changeToThreeHundredRowsPerPage();
waitForRulesToBeLoaded();
changeRowsPerPageTo300();

const expectedNumberOfRules = 1;
cy.get(RULES_TABLE).then(($table) => {
Expand Down
32 changes: 12 additions & 20 deletions x-pack/plugins/security_solution/cypress/integration/detection_rules/prebuilt_rules.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,15 @@ import {
waitForAlertsPanelToBeLoaded,
} from '../../tasks/alerts';
import {
changeToThreeHundredRowsPerPage,
changeRowsPerPageTo300,
deleteFirstRule,
deleteSelectedRules,
loadPrebuiltDetectionRules,
paginate,
goToNextPage,
reloadDeletedRules,
selectNumberOfRules,
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded,
waitForRulesTableToBeLoaded,
waitForPrebuiltDetectionRulesToBeLoaded,
waitForRulesToBeLoaded,
} from '../../tasks/alerts_detection_rules';
import { loginAndWaitForPageWithoutDateRange } from '../../tasks/login';

Expand All @@ -51,20 +50,18 @@ describe('Alerts rules, prebuilt rules', () => {
waitForAlertsPanelToBeLoaded();
waitForAlertsIndexToBeCreated();
goToManageAlertsDetectionRules();
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
waitForRulesTableToBeLoaded();
loadPrebuiltDetectionRules();
waitForPrebuiltDetectionRulesToBeLoaded();

cy.get(ELASTIC_RULES_BTN).should('have.text', expectedElasticRulesBtnText);

changeToThreeHundredRowsPerPage();
waitForRulesToBeLoaded();
changeRowsPerPageTo300();

cy.get(SHOWING_RULES_TEXT).should('have.text', `Showing ${expectedNumberOfRules} rules`);
cy.get(RULES_TABLE).then(($table1) => {
const firstScreenRules = $table1.find(RULES_ROW).length;
paginate();
waitForRulesToBeLoaded();
goToNextPage();
cy.get(RULES_TABLE).then(($table2) => {
const secondScreenRules = $table2.find(RULES_ROW).length;
const totalNumberOfRules = firstScreenRules + secondScreenRules;
Expand All @@ -85,14 +82,13 @@ describe('Deleting prebuilt rules', () => {
waitForAlertsPanelToBeLoaded();
waitForAlertsIndexToBeCreated();
goToManageAlertsDetectionRules();
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
waitForRulesTableToBeLoaded();
loadPrebuiltDetectionRules();
waitForPrebuiltDetectionRulesToBeLoaded();

cy.get(ELASTIC_RULES_BTN).should('have.text', expectedElasticRulesBtnText);

changeToThreeHundredRowsPerPage();
waitForRulesToBeLoaded();
changeRowsPerPageTo300();
});

it('Does not allow to delete one rule when more than one is selected', () => {
Expand All @@ -110,8 +106,7 @@ describe('Deleting prebuilt rules', () => {

deleteFirstRule();
cy.reload();
changeToThreeHundredRowsPerPage();
waitForRulesToBeLoaded();
changeRowsPerPageTo300();

cy.get(ELASTIC_RULES_BTN).should(
'have.text',
Expand All @@ -125,8 +120,7 @@ describe('Deleting prebuilt rules', () => {
cy.get(RELOAD_PREBUILT_RULES_BTN).should('not.exist');

cy.reload();
changeToThreeHundredRowsPerPage();
waitForRulesToBeLoaded();
changeRowsPerPageTo300();

cy.get(ELASTIC_RULES_BTN).should(
'have.text',
Expand All @@ -142,8 +136,7 @@ describe('Deleting prebuilt rules', () => {
selectNumberOfRules(numberOfRulesToBeSelected);
deleteSelectedRules();
cy.reload();
changeToThreeHundredRowsPerPage();
waitForRulesToBeLoaded();
changeRowsPerPageTo300();

cy.get(RELOAD_PREBUILT_RULES_BTN).should('exist');
cy.get(RELOAD_PREBUILT_RULES_BTN).should(
Expand All @@ -160,8 +153,7 @@ describe('Deleting prebuilt rules', () => {
cy.get(RELOAD_PREBUILT_RULES_BTN).should('not.exist');

cy.reload();
changeToThreeHundredRowsPerPage();
waitForRulesToBeLoaded();
changeRowsPerPageTo300();

cy.get(ELASTIC_RULES_BTN).should(
'have.text',
Expand Down
Loading

0 comments on commit be1f3cc

Please sign in to comment.