[Security Solution][Detections] - Fix loading indicators in the rules…

… management table (#91925) **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 <[email protected]>
elastic · Feb 22, 2021 · 4511fe5 · 4511fe5
1 parent d9cdb99
commit 4511fe5
Show file tree

Hide file tree

Showing 17 changed files with 257 additions and 155 deletions.
diff --git a/...k/plugins/security_solution/cypress/integration/detection_rules/custom_query_rule.spec.ts b/...k/plugins/security_solution/cypress/integration/detection_rules/custom_query_rule.spec.ts
@@ -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';
@@ -136,7 +136,7 @@ describe('Custom detection rules creation', () => {
     waitForAlertsPanelToBeLoaded();
     waitForAlertsIndexToBeCreated();
     goToManageAlertsDetectionRules();
-    waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
+    waitForRulesTableToBeLoaded();
     goToCreateNewRule();
     fillDefineCustomRuleWithImportedQueryAndContinue(this.rule);
     fillAboutRuleAndContinue(this.rule);
@@ -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);
@@ -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(
@@ -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(

diff --git a/...gins/security_solution/cypress/integration/detection_rules/event_correlation_rule.spec.ts b/...gins/security_solution/cypress/integration/detection_rules/event_correlation_rule.spec.ts
@@ -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';
@@ -104,7 +103,7 @@ describe('Detection rules, EQL', () => {
     waitForAlertsPanelToBeLoaded();
     waitForAlertsIndexToBeCreated();
     goToManageAlertsDetectionRules();
-    waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
+    waitForRulesTableToBeLoaded();
     goToCreateNewRule();
     selectEqlRuleType();
     fillDefineEqlRuleAndContinue(this.rule);
@@ -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);
@@ -200,7 +198,7 @@ describe('Detection rules, sequence EQL', () => {
     waitForAlertsPanelToBeLoaded();
     waitForAlertsIndexToBeCreated();
     goToManageAlertsDetectionRules();
-    waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
+    waitForRulesTableToBeLoaded();
     goToCreateNewRule();
     selectEqlRuleType();
     fillDefineEqlRuleAndContinue(this.rule);
@@ -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);

diff --git a/...lugins/security_solution/cypress/integration/detection_rules/indicator_match_rule.spec.ts b/...lugins/security_solution/cypress/integration/detection_rules/indicator_match_rule.spec.ts
@@ -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 {
@@ -375,7 +374,7 @@ describe('indicator match', () => {
         waitForAlertsPanelToBeLoaded();
         waitForAlertsIndexToBeCreated();
         goToManageAlertsDetectionRules();
-        waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
+        waitForRulesTableToBeLoaded();
         goToCreateNewRule();
         selectIndicatorMatchType();
       });
@@ -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);

diff --git a/...ugins/security_solution/cypress/integration/detection_rules/machine_learning_rule.spec.ts b/...ugins/security_solution/cypress/integration/detection_rules/machine_learning_rule.spec.ts
@@ -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 {
@@ -81,7 +80,7 @@ describe('Detection rules, machine learning', () => {
     waitForAlertsPanelToBeLoaded();
     waitForAlertsIndexToBeCreated();
     goToManageAlertsDetectionRules();
-    waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
+    waitForRulesTableToBeLoaded();
     goToCreateNewRule();
     selectMachineLearningRuleType();
     fillDefineMachineLearningRuleAndContinue(machineLearningRule);
@@ -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);

diff --git a/x-pack/plugins/security_solution/cypress/integration/detection_rules/override.spec.ts b/x-pack/plugins/security_solution/cypress/integration/detection_rules/override.spec.ts
@@ -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';
@@ -113,7 +112,7 @@ describe('Detection rules, override', () => {
     waitForAlertsPanelToBeLoaded();
     waitForAlertsIndexToBeCreated();
     goToManageAlertsDetectionRules();
-    waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
+    waitForRulesTableToBeLoaded();
     goToCreateNewRule();
     fillDefineCustomRuleWithImportedQueryAndContinue(this.rule);
     fillAboutRuleWithOverrideAndContinue(this.rule);
@@ -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) => {

diff --git a/x-pack/plugins/security_solution/cypress/integration/detection_rules/prebuilt_rules.spec.ts b/x-pack/plugins/security_solution/cypress/integration/detection_rules/prebuilt_rules.spec.ts
@@ -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';
 
@@ -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;
@@ -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', () => {
@@ -110,8 +106,7 @@ describe('Deleting prebuilt rules', () => {
 
     deleteFirstRule();
     cy.reload();
-    changeToThreeHundredRowsPerPage();
-    waitForRulesToBeLoaded();
+    changeRowsPerPageTo300();
 
     cy.get(ELASTIC_RULES_BTN).should(
       'have.text',
@@ -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',
@@ -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(
@@ -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',