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

[8.14] [Security Solution][Alert details] - fix z-index of response details flyout to be shown above timeline (#182031) (#182300)

Browse source 
# Backport

This will backport the following commits from `main` to `8.14`:
- [[Security Solution][Alert details] - fix z-index of response details
flyout to be shown above timeline
(#182031)](https://github.com/elastic/kibana/pull/182031)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2024-05-01T21:02:41Z","message":"[Security
Solution][Alert details] - fix z-index of response details flyout to be
shown above timeline
(#182031)","sha":"0d39bc9ddff297f1eeb648aed534e445ffeb7888","branchLabelMapping":{"^v8.15.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Defend
Workflows","Team:Threat
Hunting:Investigations","v8.14.0","v8.15.0"],"title":"[Security
Solution][Alert details] - fix z-index of response details flyout to be
shown above
timeline","number":182031,"url":"https://github.com/elastic/kibana/pull/182031","mergeCommit":{"message":"[Security
Solution][Alert details] - fix z-index of response details flyout to be
shown above timeline
(#182031)","sha":"0d39bc9ddff297f1eeb648aed534e445ffeb7888"}},"sourceBranch":"main","suggestedTargetBranches":["8.14"],"targetPullRequestStates":[{"branch":"8.14","label":"v8.14.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.15.0","branchLabelMappingKey":"^v8.15.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/182031","number":182031,"mergeCommit":{"message":"[Security
Solution][Alert details] - fix z-index of response details flyout to be
shown above timeline
(#182031)","sha":"0d39bc9ddff297f1eeb648aed534e445ffeb7888"}}]}]
BACKPORT-->

Co-authored-by: Philippe Oberti <philippe.oberti@elastic.co>
This commit is contained in:
Kibana Machine 2024-05-01 18:24:24 -04:00 • committed by GitHub
parent bc0a1dab46
commit 46e8fead37
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 63 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

106
x-pack/plugins/osquery/public/live_queries/form/query_details_flyout.tsx
View file

@ -14,9 +14,9 @@ import {
EuiFlexItem,
EuiCodeBlock,
EuiSpacer,
useEuiTheme,
} from '@elastic/eui';
import React from 'react';
import React, { useMemo } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
interface QueryDetailsFlyoutProps {
@ -27,46 +27,66 @@ interface QueryDetailsFlyoutProps {
onClose: () => void;
}
const QueryDetailsFlyoutComponent: React.FC<QueryDetailsFlyoutProps> = ({ action, onClose }) => (
<EuiPortal>
<EuiFlyout size="m" ownFocus onClose={onClose} aria-labelledby="flyoutTitle">
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s">
<h2 id="flyoutTitle">
<FormattedMessage
id="xpack.osquery.liveQueryActions.details.title"
defaultMessage="Query Details"
/>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiFlexItem grow={false}>
<strong>
<FormattedMessage id="xpack.osquery.liveQueryActions.details.id" defaultMessage="Id" />
</strong>
<EuiSpacer size="xs" />
<EuiCodeBlock fontSize="m" paddingSize="s" isCopyable={true}>
{action.id}
</EuiCodeBlock>
</EuiFlexItem>
<EuiSpacer size="m" />
<EuiFlexItem grow={false}>
<strong>
<FormattedMessage
id="xpack.osquery.liveQueryActions.details.query"
defaultMessage="Query"
/>
</strong>
<EuiSpacer size="xs" />
<EuiCodeBlock language="sql" fontSize="m" paddingSize="s" isCopyable={true}>
{action.query}
</EuiCodeBlock>
</EuiFlexItem>
<EuiSpacer size="m" />
</EuiFlyoutBody>
</EuiFlyout>
</EuiPortal>
);
const QueryDetailsFlyoutComponent: React.FC<QueryDetailsFlyoutProps> = ({ action, onClose }) => {
const { euiTheme } = useEuiTheme();
// we need this flyout to be above the timeline flyout (which has a z-index of 1002)
const maskProps = useMemo(
() => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }),
[euiTheme.levels.flyout]
);
return (
<EuiPortal>
<EuiFlyout
size="m"
ownFocus
onClose={onClose}
aria-labelledby="flyoutTitle"
// 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={maskProps}
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s">
<h2 id="flyoutTitle">
<FormattedMessage
id="xpack.osquery.liveQueryActions.details.title"
defaultMessage="Query Details"
/>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiFlexItem grow={false}>
<strong>
<FormattedMessage
id="xpack.osquery.liveQueryActions.details.id"
defaultMessage="Id"
/>
</strong>
<EuiSpacer size="xs" />
<EuiCodeBlock fontSize="m" paddingSize="s" isCopyable={true}>
{action.id}
</EuiCodeBlock>
</EuiFlexItem>
<EuiSpacer size="m" />
<EuiFlexItem grow={false}>
<strong>
<FormattedMessage
id="xpack.osquery.liveQueryActions.details.query"
defaultMessage="Query"
/>
</strong>
<EuiSpacer size="xs" />
<EuiCodeBlock language="sql" fontSize="m" paddingSize="s" isCopyable={true}>
{action.query}
</EuiCodeBlock>
</EuiFlexItem>
<EuiSpacer size="m" />
</EuiFlyoutBody>
</EuiFlyout>
</EuiPortal>
);
};
export const QueryDetailsFlyout = React.memo(QueryDetailsFlyoutComponent);