[8.x] [ResponseOps][Rules][Alerts] Link stack rule details page refre…

…sh button to alerts table (#195736) (#196654) # Backport This will backport the following commits from `main` to `8.x`: - [[ResponseOps][Rules][Alerts] Link stack rule details page refresh button to alerts table (#195736)](#195736)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Umberto Pepato <[email protected]>
elastic · Oct 17, 2024 · 049dc1a · 049dc1a
1 parent 2d7ceb5
commit 049dc1a
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 5 deletions.
diff --git a/...ins/triggers_actions_ui/public/application/sections/rule_details/components/rule.test.tsx b/...ins/triggers_actions_ui/public/application/sections/rule_details/components/rule.test.tsx
@@ -6,7 +6,9 @@
  */
 
 import * as React from 'react';
+import { Suspense } from 'react';
 import { shallow } from 'enzyme';
+import { waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { mountWithIntl, nextTick } from '@kbn/test-jest-helpers';
 import { act } from 'react-dom/test-utils';
@@ -21,6 +23,10 @@ import { ruleTypeRegistryMock } from '../../../rule_type_registry.mock';
 import { useKibana } from '../../../../common/lib/kibana';
 import { useBulkGetMaintenanceWindows } from '../../alerts_table/hooks/use_bulk_get_maintenance_windows';
 import { getMaintenanceWindowMockMap } from '../../alerts_table/maintenance_windows/index.mock';
+import { loadRuleTypes } from '../../../lib/rule_api/rule_types';
+
+jest.mock('../../../lib/rule_api/rule_types');
+jest.mocked(loadRuleTypes).mockResolvedValue([]);
 
 const mockUseKibanaReturnValue = createStartServicesMock();
 jest.mock('../../../../common/lib/kibana', () => ({
@@ -37,6 +43,15 @@ jest.mock('../../../lib/rule_api/load_execution_log_aggregations', () => ({
   loadExecutionLogAggregations: jest.fn(),
 }));
 
+const mockAlertsTable = jest.fn(() => {
+  return <div data-test-subj="alertsTable" />;
+});
+jest.mock('../../alerts_table/alerts_table_state', () => ({
+  __esModule: true,
+  AlertsTableState: mockAlertsTable,
+  default: mockAlertsTable,
+}));
+
 const { loadExecutionLogAggregations } = jest.requireMock(
   '../../../lib/rule_api/load_execution_log_aggregations'
 );
@@ -60,7 +75,6 @@ const useBulkGetMaintenanceWindowsMock = useBulkGetMaintenanceWindows as jest.Mo
 const ruleTypeRegistry = ruleTypeRegistryMock.create();
 
 import { getIsExperimentalFeatureEnabled } from '../../../../common/get_experimental_features';
-import { waitFor } from '@testing-library/react';
 import { createStartServicesMock } from '../../../../common/lib/kibana/kibana_react.mock';
 
 const fakeNow = new Date('2020-02-09T23:15:41.941Z');
@@ -118,9 +132,11 @@ const queryClient = new QueryClient({
 
 const RuleComponentWithProvider = (props: RuleComponentProps) => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <RuleComponent {...props} />
-    </QueryClientProvider>
+    <Suspense fallback={null}>
+      <QueryClientProvider client={queryClient}>
+        <RuleComponent {...props} />
+      </QueryClientProvider>
+    </Suspense>
   );
 };
 
@@ -277,6 +293,48 @@ describe('rules', () => {
       alertToListItem(fakeNow.getTime(), 'us-east', ruleUsEast),
     ]);
   });
+
+  it('requests a table refresh when the refresh token changes', async () => {
+    jest.useFakeTimers();
+    const rule = mockRule({
+      enabled: false,
+    });
+    const ruleType = mockRuleType({
+      hasFieldsForAAD: true,
+    });
+    const ruleSummary = mockRuleSummary();
+    jest.setSystemTime(fake2MinutesAgo);
+
+    const wrapper = mountWithIntl(
+      <RuleComponentWithProvider
+        {...mockAPIs}
+        rule={rule}
+        ruleType={ruleType}
+        ruleSummary={ruleSummary}
+        readOnly={false}
+      />
+    );
+
+    await waitFor(() => wrapper.find('[data-test-subj="alertsTable"]'));
+
+    jest.setSystemTime(fakeNow);
+
+    wrapper.setProps({
+      refreshToken: {
+        resolve: () => undefined,
+        reject: () => undefined,
+      },
+    });
+
+    expect(mockAlertsTable).toHaveBeenCalledWith(
+      expect.objectContaining({
+        lastReloadRequestTime: fakeNow.getTime(),
+      }),
+      expect.anything()
+    );
+
+    jest.useRealTimers();
+  });
 });
 
 describe('alertToListItem', () => {

diff --git a/.../plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx b/.../plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { lazy, useCallback } from 'react';
+import React, { lazy, useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiTabbedContent } from '@elastic/eui';
 import { AlertStatusValues, ALERTING_FEATURE_ID } from '@kbn/alerting-plugin/common';
@@ -71,6 +71,9 @@ export function RuleComponent({
 }: RuleComponentProps) {
   const { ruleTypeRegistry, actionTypeRegistry, alertsTableConfigurationRegistry } =
     useKibana().services;
+  // The lastReloadRequestTime should be updated when the refreshToken changes
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const lastReloadRequestTime = useMemo(() => new Date().getTime(), [refreshToken]);
 
   const alerts = Object.entries(ruleSummary.alerts)
     .map(([alertId, alert]) => alertToListItem(durationEpoch, alertId, alert))
@@ -110,6 +113,7 @@ export function RuleComponent({
           }
           query={{ bool: { filter: { term: { [ALERT_RULE_UUID]: rule.id } } } }}
           showAlertStatusWithFlapping
+          lastReloadRequestTime={lastReloadRequestTime}
         />
       );
     }
@@ -124,6 +128,7 @@ export function RuleComponent({
   }, [
     alerts,
     alertsTableConfigurationRegistry,
+    lastReloadRequestTime,
     onMuteAction,
     readOnly,
     rule.consumer,