github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution] fix endpoint filter flyout shown behind timeline (#180077)

Browse source 
## Summary

This PR fixes an issue introduced in [this
PR](https://github.com/elastic/kibana/pull/177087) where - in order to
get the expandable flyout to work within timeline - we had to modify the
`z-index` of the timeline modal
([here](https://github.com/elastic/kibana/pull/177087/files#diff-a4fef8db9f9e4c1a86b8fcc0f859b10420a1ff0c1c5c091eace92cf0643ca58c))
as well as the _secondary flyouts_ accessed through the `Take action`
button in the flyout's footer.

Obviously I had missed this endpoint filter flyout.


66fa62ce-6dde-43e5-b79b-9620b5c21d98

https://github.com/elastic/kibana/issues/179879
This commit is contained in:
Philippe Oberti 2024-04-08 17:55:43 -05:00 • committed by GitHub
parent 6419e3d53a
commit 0b450739b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 13 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

15
x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/footer.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useCallback, useMemo, useState } from 'react';
import { EuiFlyoutFooter, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiFlyoutFooter, EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
import { find } from 'lodash/fp';
import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
import { isActiveTimeline } from '../../../../../helpers';
@ -52,6 +52,12 @@ export const FlyoutFooterComponent = ({
scopeId,
refetchFlyoutData,
}: FlyoutFooterProps) => {
const { euiTheme } = useEuiTheme();
const flyoutZIndex = useMemo(
() => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }),
[euiTheme]
);
const alertId = detailsEcsData?.kibana?.alert ? detailsEcsData?._id : null;
const ruleIndexRaw = useMemo(
() =>
@ -165,7 +171,12 @@ export const FlyoutFooterComponent = ({
/>
)}
{isAddEventFilterModalOpen && detailsEcsData != null && (
<EventFiltersFlyout data={detailsEcsData} onCancel={closeAddEventFilterModal} />
<EventFiltersFlyout
data={detailsEcsData}
onCancel={closeAddEventFilterModal}
// EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
maskProps={flyoutZIndex} // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
/>
)}
{isOsqueryFlyoutOpenWithAgentId && detailsEcsData != null && (
<OsqueryFlyout