Link stack rule details page refresh button to alerts table

x-pack/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(), [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,