[RAM} Add refine search prompt to rule execution log (#128982)

* Refine search prompt * Add refine prompt to error log table Co-authored-by: Kibana Machine <[email protected]> (cherry picked from commit 2fd6772)
elastic · Apr 5, 2022 · 5e50aea · 5e50aea
1 parent 4a49368
commit 5e50aea
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 0 deletions.
diff --git a/...rs_actions_ui/public/application/sections/rule_details/components/rule_error_log.test.tsx b/...rs_actions_ui/public/application/sections/rule_details/components/rule_error_log.test.tsx
@@ -12,6 +12,7 @@ import { useKibana } from '../../../../common/lib/kibana';
 
 import { EuiSuperDatePicker } from '@elastic/eui';
 import { Rule } from '../../../../types';
+import { RefineSearchPrompt } from '../refine_search_prompt';
 import { RuleErrorLog } from './rule_error_log';
 
 const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
@@ -309,4 +310,43 @@ describe('rule_error_log', () => {
 
     nowMock.mockRestore();
   });
+
+  it('does not show the refine search prompt normally', async () => {
+    const wrapper = mountWithIntl(
+      <RuleErrorLog
+        rule={mockRule}
+        loadExecutionLogAggregations={loadExecutionLogAggregationsMock}
+      />
+    );
+
+    await act(async () => {
+      await nextTick();
+      wrapper.update();
+    });
+
+    expect(wrapper.find(RefineSearchPrompt).text()).toBeFalsy();
+  });
+
+  it('shows the refine search prompt when our queries return too much data', async () => {
+    loadExecutionLogAggregationsMock.mockResolvedValue({
+      ...mockLogResponse,
+      totalErrors: 1000,
+    });
+
+    const wrapper = mountWithIntl(
+      <RuleErrorLog
+        rule={mockRule}
+        loadExecutionLogAggregations={loadExecutionLogAggregationsMock}
+      />
+    );
+
+    await act(async () => {
+      await nextTick();
+      wrapper.update();
+    });
+
+    expect(wrapper.find(RefineSearchPrompt).text()).toEqual(
+      'These are the first 1000 matching your search, refine your search to see others. Back to top.'
+    );
+  });
 });
diff --git a/...riggers_actions_ui/public/application/sections/rule_details/components/rule_error_log.tsx b/...riggers_actions_ui/public/application/sections/rule_details/components/rule_error_log.tsx
@@ -22,6 +22,7 @@ import {
 } from '@elastic/eui';
 import { useKibana } from '../../../../common/lib/kibana';
 
+import { RefineSearchPrompt } from '../refine_search_prompt';
 import { LoadExecutionLogAggregationsProps } from '../../../lib/rule_api';
 import { Rule } from '../../../../types';
 import { IExecutionErrors } from '../../../../../../alerting/common';
@@ -256,6 +257,10 @@ export const RuleErrorLog = (props: RuleErrorLogProps) => {
           }
         }}
       />
+      <RefineSearchPrompt
+        documentSize={pagination.totalItemCount}
+        backToTopAnchor="rule_error_log_list"
+      />
     </div>
   );
 };

diff --git a/...tions_ui/public/application/sections/rule_details/components/rule_event_log_list.test.tsx b/...tions_ui/public/application/sections/rule_details/components/rule_event_log_list.test.tsx
@@ -14,6 +14,7 @@ import { useKibana } from '../../../../common/lib/kibana';
 import { EuiSuperDatePicker, EuiDataGrid } from '@elastic/eui';
 import { RuleEventLogListStatusFilter } from './rule_event_log_list_status_filter';
 import { RuleEventLogList } from './rule_event_log_list';
+import { RefineSearchPrompt } from '../refine_search_prompt';
 import { RULE_EXECUTION_DEFAULT_INITIAL_VISIBLE_COLUMNS } from '../../../constants';
 import { Rule } from '../../../../types';
 
@@ -501,4 +502,43 @@ describe('rule_event_log_list', () => {
       )
     ).toEqual([...RULE_EXECUTION_DEFAULT_INITIAL_VISIBLE_COLUMNS, 'num_active_alerts']);
   });
+
+  it('does not show the refine search prompt normally', async () => {
+    const wrapper = mountWithIntl(
+      <RuleEventLogList
+        rule={mockRule}
+        loadExecutionLogAggregations={loadExecutionLogAggregationsMock}
+      />
+    );
+
+    await act(async () => {
+      await nextTick();
+      wrapper.update();
+    });
+
+    expect(wrapper.find(RefineSearchPrompt).text()).toBeFalsy();
+  });
+
+  it('shows the refine search prompt when our queries return too much data', async () => {
+    loadExecutionLogAggregationsMock.mockResolvedValue({
+      ...mockLogResponse,
+      total: 1000,
+    });
+
+    const wrapper = mountWithIntl(
+      <RuleEventLogList
+        rule={mockRule}
+        loadExecutionLogAggregations={loadExecutionLogAggregationsMock}
+      />
+    );
+
+    await act(async () => {
+      await nextTick();
+      wrapper.update();
+    });
+
+    expect(wrapper.find(RefineSearchPrompt).text()).toEqual(
+      'These are the first 1000 matching your search, refine your search to see others. Back to top.'
+    );
+  });
 });
diff --git a/...rs_actions_ui/public/application/sections/rule_details/components/rule_event_log_list.tsx b/...rs_actions_ui/public/application/sections/rule_details/components/rule_event_log_list.tsx
@@ -25,6 +25,7 @@ import { RULE_EXECUTION_DEFAULT_INITIAL_VISIBLE_COLUMNS } from '../../../constan
 import { RuleEventLogListStatusFilter } from './rule_event_log_list_status_filter';
 import { RuleEventLogListCellRenderer, ColumnId } from './rule_event_log_list_cell_renderer';
 
+import { RefineSearchPrompt } from '../refine_search_prompt';
 import { LoadExecutionLogAggregationsProps } from '../../../lib/rule_api';
 import { Rule } from '../../../../types';
 import {
@@ -459,6 +460,10 @@ export const RuleEventLogList = (props: RuleEventLogListProps) => {
         sorting={sortingProps}
         pagination={paginationProps}
       />
+      <RefineSearchPrompt
+        documentSize={pagination.totalItemCount}
+        backToTopAnchor="rule_event_log_list"
+      />
     </div>
   );
 };

diff --git a/...ins/triggers_actions_ui/public/application/sections/rule_details/refine_search_prompt.tsx b/...ins/triggers_actions_ui/public/application/sections/rule_details/refine_search_prompt.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useMemo } from 'react';
+import { EuiLink, EuiText, useEuiTheme } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+interface RefineSearchFooterProps {
+  documentSize: number;
+  visibleDocumentSize?: number;
+  backToTopAnchor: string;
+}
+
+const DEFAULT_VISIBLE_THRESHOLD = 500;
+
+export const RefineSearchPrompt = (props: RefineSearchFooterProps) => {
+  const {
+    documentSize = 0,
+    visibleDocumentSize = DEFAULT_VISIBLE_THRESHOLD,
+    backToTopAnchor,
+  } = props;
+
+  const { euiTheme } = useEuiTheme();
+
+  const textStyles = useMemo(
+    () => ({
+      backgroundColor: euiTheme.colors.lightestShade,
+      padding: `${euiTheme.size.m} ${euiTheme.size.base}`,
+      marginTop: `${euiTheme.size.xs}`,
+    }),
+    [euiTheme]
+  );
+
+  if (documentSize < visibleDocumentSize) {
+    return null;
+  }
+
+  return (
+    <EuiText style={textStyles} textAlign="center" size="s">
+      <FormattedMessage
+        id="xpack.triggersActionsUI.sections.ruleDetails.refineSearchPrompt.prompt"
+        defaultMessage="These are the first {documentSize} matching your search, refine your search to see others."
+        values={{ documentSize }}
+      />
+      &nbsp;
+      <EuiLink href={`#${backToTopAnchor}`}>
+        <FormattedMessage
+          id="xpack.triggersActionsUI.sections.ruleDetails.refineSearchPrompt.backToTop"
+          defaultMessage="Back to top."
+        />
+      </EuiLink>
+    </EuiText>
+  );
+};