Fix exceptions flyout disappearing (#166914)

## Summary
fix:
[https://github.com/elastic/kibana/issues/166616](https://github.com/elastic/kibana/issues/166616)

When we open exception flyout we do request a rule
Then in the rule details page, `alertDefaultFilters` was memoized based
on whole rule object
And if the rule changes it rerenders the whole alerts table. 

In the attached video it rule changes because of rule execution time.

I make `useMemo` and `use effect` for these cases really on rule
property, but not full object




eba7c3ce-84b9-47a7-8bc9-a15bc0179e2c
This commit is contained in:
Khristinin Nikita 2023-09-26 08:01:59 +02:00 committed by GitHub
parent b3c1ba265f
commit 0cf5ba15fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -233,6 +233,7 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
detailName: string; detailName: string;
tabName: string; tabName: string;
}>(); }>();
const { const {
rule: maybeRule, rule: maybeRule,
refresh: refreshRule, refresh: refreshRule,
@ -382,19 +383,21 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
[clearEventsLoading, clearEventsDeleted, clearSelected, setFilterGroup] [clearEventsLoading, clearEventsDeleted, clearSelected, setFilterGroup]
); );
const isBuildingBlockTypeNotNull = rule?.building_block_type != null;
// Set showBuildingBlockAlerts if rule is a Building Block Rule otherwise we won't show alerts // Set showBuildingBlockAlerts if rule is a Building Block Rule otherwise we won't show alerts
useEffect(() => { useEffect(() => {
setShowBuildingBlockAlerts(rule?.building_block_type != null); setShowBuildingBlockAlerts(isBuildingBlockTypeNotNull);
}, [rule, setShowBuildingBlockAlerts]); }, [isBuildingBlockTypeNotNull, setShowBuildingBlockAlerts]);
const ruleRuleId = rule?.rule_id ?? '';
const alertDefaultFilters = useMemo( const alertDefaultFilters = useMemo(
() => [ () => [
...buildAlertsFilter(rule?.rule_id ?? ''), ...buildAlertsFilter(ruleRuleId ?? ''),
...buildShowBuildingBlockFilter(showBuildingBlockAlerts), ...buildShowBuildingBlockFilter(showBuildingBlockAlerts),
...buildAlertStatusFilter(filterGroup), ...buildAlertStatusFilter(filterGroup),
...buildThreatMatchFilter(showOnlyThreatIndicatorAlerts), ...buildThreatMatchFilter(showOnlyThreatIndicatorAlerts),
], ],
[rule, showBuildingBlockAlerts, showOnlyThreatIndicatorAlerts, filterGroup] [ruleRuleId, showBuildingBlockAlerts, showOnlyThreatIndicatorAlerts, filterGroup]
); );
const alertMergedFilters = useMemo( const alertMergedFilters = useMemo(