mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
[8.15] [Security Solution] Document flyout investigation guide and response action updates (#187920) (#188142)
# Backport This will backport the following commits from `main` to `8.15`: - [[Security Solution] Document flyout investigation guide and response action updates (#187920)](https://github.com/elastic/kibana/pull/187920) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"christineweng","email":"18648970+christineweng@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-07-11T18:02:11Z","message":"[Security Solution] Document flyout investigation guide and response action updates (#187920)\n\n## Summary\r\n\r\nThis PR updates the UI for investigation guide and response actions per\r\nupdated [Figma\r\nmock](https://www.figma.com/design/882AiMJMr1GMKnXN5G6WDa/Component-library?node-id=2500-131607&t=JBKKkcwOOMjURFWu-0).\r\n\r\n### Investigation guide\r\n\r\nAlerts with investigation guide\r\n\r\n\r\n\r\nIn alert preview\r\n\r\n\r\n\r\nIn rule creation (alert preview)\r\n\r\n\r\n\r\n\r\nNo Investigation guide\r\n\r\n\r\n\r\n\r\n### Response action\r\nIn alert preview\r\n\r\n\r\n\r\nIn rule creation (alert preview)\r\n\r\n\r\n\r\nNormal response button\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios","sha":"751ba218a9aaa3ab47ac1425ae8c8d80bfb2a2d6","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Threat Hunting","Team:Threat Hunting:Investigations","v8.15.0","v8.16.0"],"title":"[Security Solution] Document flyout investigation guide and response action updates","number":187920,"url":"https://github.com/elastic/kibana/pull/187920","mergeCommit":{"message":"[Security Solution] Document flyout investigation guide and response action updates (#187920)\n\n## Summary\r\n\r\nThis PR updates the UI for investigation guide and response actions per\r\nupdated [Figma\r\nmock](https://www.figma.com/design/882AiMJMr1GMKnXN5G6WDa/Component-library?node-id=2500-131607&t=JBKKkcwOOMjURFWu-0).\r\n\r\n### Investigation guide\r\n\r\nAlerts with investigation guide\r\n\r\n\r\n\r\nIn alert preview\r\n\r\n\r\n\r\nIn rule creation (alert preview)\r\n\r\n\r\n\r\n\r\nNo Investigation guide\r\n\r\n\r\n\r\n\r\n### Response action\r\nIn alert preview\r\n\r\n\r\n\r\nIn rule creation (alert preview)\r\n\r\n\r\n\r\nNormal response button\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios","sha":"751ba218a9aaa3ab47ac1425ae8c8d80bfb2a2d6"}},"sourceBranch":"main","suggestedTargetBranches":["8.15"],"targetPullRequestStates":[{"branch":"8.15","label":"v8.15.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/187920","number":187920,"mergeCommit":{"message":"[Security Solution] Document flyout investigation guide and response action updates (#187920)\n\n## Summary\r\n\r\nThis PR updates the UI for investigation guide and response actions per\r\nupdated [Figma\r\nmock](https://www.figma.com/design/882AiMJMr1GMKnXN5G6WDa/Component-library?node-id=2500-131607&t=JBKKkcwOOMjURFWu-0).\r\n\r\n### Investigation guide\r\n\r\nAlerts with investigation guide\r\n\r\n\r\n\r\nIn alert preview\r\n\r\n\r\n\r\nIn rule creation (alert preview)\r\n\r\n\r\n\r\n\r\nNo Investigation guide\r\n\r\n\r\n\r\n\r\n### Response action\r\nIn alert preview\r\n\r\n\r\n\r\nIn rule creation (alert preview)\r\n\r\n\r\n\r\nNormal response button\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios","sha":"751ba218a9aaa3ab47ac1425ae8c8d80bfb2a2d6"}}]}] BACKPORT--> Co-authored-by: christineweng <18648970+christineweng@users.noreply.github.com>
This commit is contained in:
Kibana Machine
GitHub
parent
ed421e10b7
commit
26b5bdb9da
8 changed files with 154 additions and 65 deletions
|
|
@ -29,7 +29,8 @@ const mockFlyoutContextValue = { openLeftPanel: jest.fn() };
|
|||
|
||||
const NO_DATA_MESSAGE = "Investigation guideThere's no investigation guide for this rule.";
|
||||
const PREVIEW_MESSAGE = 'Investigation guide is not available in alert preview.';
|
||||
const OPEN_FLYOUT_MESSAGE = 'Open alert details to access investigation guides.';
|
||||
const OPEN_FLYOUT_MESSAGE =
|
||||
'Investigation guide availableOpen alert details to access investigation guides.';
|
||||
|
||||
const renderInvestigationGuide = () =>
|
||||
render(
|
||||
|
|
@ -56,7 +57,6 @@ describe('<InvestigationGuide />', () => {
|
|||
});
|
||||
const { getByTestId, queryByTestId } = renderInvestigationGuide();
|
||||
expect(getByTestId(INVESTIGATION_GUIDE_TEST_ID)).toBeInTheDocument();
|
||||
expect(getByTestId(INVESTIGATION_GUIDE_TEST_ID)).toHaveTextContent('Investigation guide');
|
||||
expect(getByTestId(INVESTIGATION_GUIDE_BUTTON_TEST_ID)).toBeInTheDocument();
|
||||
expect(getByTestId(INVESTIGATION_GUIDE_BUTTON_TEST_ID)).toHaveTextContent(
|
||||
'Show investigation guide'
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSkeletonText } from '@elastic/eui';
|
||||
import { EuiButton, EuiSkeletonText, EuiCallOut } from '@elastic/eui';
|
||||
import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
|
@ -46,29 +46,38 @@ export const InvestigationGuide: React.FC = () => {
|
|||
});
|
||||
}, [eventId, indexName, openLeftPanel, scopeId]);
|
||||
|
||||
const hasInvesigationGuide = useMemo(
|
||||
const hasInvestigationGuide = useMemo(
|
||||
() => !error && basicAlertData && basicAlertData.ruleId && ruleNote,
|
||||
[error, basicAlertData, ruleNote]
|
||||
);
|
||||
|
||||
return (
|
||||
<EuiFlexGroup direction="column" gutterSize="s" data-test-subj={INVESTIGATION_GUIDE_TEST_ID}>
|
||||
<EuiFlexItem>
|
||||
<EuiTitle size="xxs">
|
||||
<h5>
|
||||
const content = useMemo(() => {
|
||||
if (isPreview) {
|
||||
return (
|
||||
<EuiCallOut
|
||||
iconType="documentation"
|
||||
size="s"
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideTitle"
|
||||
id="xpack.securitySolution.flyout.right.investigation.investigationGuide.previewTitle"
|
||||
defaultMessage="Investigation guide"
|
||||
/>
|
||||
</h5>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
{isPreview ? (
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.investigation.investigationGuide.previewMessage"
|
||||
defaultMessage="Investigation guide is not available in alert preview."
|
||||
/>
|
||||
) : loading ? (
|
||||
}
|
||||
aria-label={i18n.translate(
|
||||
'xpack.securitySolution.flyout.right.investigation.investigationGuide.previewAriaLabel',
|
||||
{ defaultMessage: 'Investigation guide' }
|
||||
)}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.investigation.investigationGuide.previewMessage"
|
||||
defaultMessage="Investigation guide is not available in alert preview."
|
||||
/>
|
||||
</EuiCallOut>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<EuiSkeletonText
|
||||
data-test-subj={INVESTIGATION_GUIDE_LOADING_TEST_ID}
|
||||
contentAriaLabel={i18n.translate(
|
||||
|
|
@ -76,38 +85,78 @@ export const InvestigationGuide: React.FC = () => {
|
|||
{ defaultMessage: 'investigation guide' }
|
||||
)}
|
||||
/>
|
||||
) : hasInvesigationGuide && isPreviewMode ? (
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.investigation.investigationGuide.openFlyoutMessage"
|
||||
defaultMessage="Open alert details to access investigation guides."
|
||||
/>
|
||||
) : hasInvesigationGuide ? (
|
||||
<EuiFlexItem>
|
||||
<EuiButton
|
||||
onClick={goToInvestigationsTab}
|
||||
iconType="documentation"
|
||||
data-test-subj={INVESTIGATION_GUIDE_BUTTON_TEST_ID}
|
||||
aria-label={i18n.translate(
|
||||
'xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideButtonAriaLabel',
|
||||
{
|
||||
defaultMessage: 'Show investigation guide',
|
||||
}
|
||||
)}
|
||||
>
|
||||
);
|
||||
}
|
||||
|
||||
if (hasInvestigationGuide && isPreviewMode) {
|
||||
return (
|
||||
<EuiCallOut
|
||||
iconType="documentation"
|
||||
size="s"
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideButtonLabel"
|
||||
defaultMessage="Show investigation guide"
|
||||
id="xpack.securitySolution.flyout.right.investigation.investigationGuide.openFlyoutTitle"
|
||||
defaultMessage="Investigation guide available"
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
) : (
|
||||
}
|
||||
aria-label={i18n.translate(
|
||||
'xpack.securitySolution.flyout.right.investigation.investigationGuide.openFlyoutAriaLabel',
|
||||
{ defaultMessage: 'Investigation guide available' }
|
||||
)}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.investigation.investigationGuide.openFlyoutMessage"
|
||||
defaultMessage="Open alert details to access investigation guides."
|
||||
/>
|
||||
</EuiCallOut>
|
||||
);
|
||||
}
|
||||
|
||||
if (hasInvestigationGuide) {
|
||||
return (
|
||||
<EuiButton
|
||||
onClick={goToInvestigationsTab}
|
||||
iconType="documentation"
|
||||
size="s"
|
||||
fullWidth
|
||||
data-test-subj={INVESTIGATION_GUIDE_BUTTON_TEST_ID}
|
||||
aria-label={i18n.translate(
|
||||
'xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideButtonAriaLabel',
|
||||
{ defaultMessage: 'Show investigation guide' }
|
||||
)}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideButtonLabel"
|
||||
defaultMessage="Show investigation guide"
|
||||
/>
|
||||
</EuiButton>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<EuiCallOut
|
||||
iconType="documentation"
|
||||
size="s"
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.investigation.investigationGuide.noDataTitle"
|
||||
defaultMessage="Investigation guide"
|
||||
/>
|
||||
}
|
||||
aria-label={i18n.translate(
|
||||
'xpack.securitySolution.flyout.right.investigation.investigationGuide.noDataAriaLabel',
|
||||
{ defaultMessage: 'Investigation guide' }
|
||||
)}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.investigation.investigationGuide.noDataDescription"
|
||||
defaultMessage="There's no investigation guide for this rule."
|
||||
/>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
</EuiCallOut>
|
||||
);
|
||||
}, [loading, isPreview, isPreviewMode, goToInvestigationsTab, hasInvestigationGuide]);
|
||||
|
||||
return <div data-test-subj={INVESTIGATION_GUIDE_TEST_ID}>{content}</div>;
|
||||
};
|
||||
|
||||
InvestigationGuide.displayName = 'InvestigationGuideButton';
|
||||
|
|
|
|||
|
|
@ -39,13 +39,13 @@ export const InvestigationSection = memo(() => {
|
|||
/>
|
||||
}
|
||||
localStorageKey={KEY}
|
||||
gutterSize="s"
|
||||
gutterSize="none"
|
||||
data-test-subj={INVESTIGATION_SECTION_TEST_ID}
|
||||
>
|
||||
{eventKind === EventKind.signal && (
|
||||
<>
|
||||
<InvestigationGuide />
|
||||
<EuiSpacer size="s" />
|
||||
<EuiSpacer size="m" />
|
||||
</>
|
||||
)}
|
||||
<HighlightedFields />
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ export const ResponseButton: React.FC = () => {
|
|||
onClick={goToResponseTab}
|
||||
iconType="documentation"
|
||||
data-test-subj={RESPONSE_BUTTON_TEST_ID}
|
||||
size="s"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.response.responseButtonLabel"
|
||||
|
|
|
|||
|
|
@ -5,8 +5,10 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { memo } from 'react';
|
||||
import React, { memo, useMemo } from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { EuiCallOut } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useExpandSection } from '../hooks/use_expand_section';
|
||||
import { ResponseButton } from './response_button';
|
||||
import { ExpandableSection } from './expandable_section';
|
||||
|
|
@ -24,8 +26,60 @@ export const ResponseSection = memo(() => {
|
|||
const { isPreview, getFieldsData, isPreviewMode } = useDocumentDetailsContext();
|
||||
|
||||
const expanded = useExpandSection({ title: KEY, defaultValue: false });
|
||||
|
||||
const eventKind = getField(getFieldsData('event.kind'));
|
||||
|
||||
const content = useMemo(() => {
|
||||
if (isPreview) {
|
||||
return (
|
||||
<EuiCallOut
|
||||
iconType="documentation"
|
||||
size="s"
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.response.previewTitle"
|
||||
defaultMessage="Response actions"
|
||||
/>
|
||||
}
|
||||
aria-label={i18n.translate(
|
||||
'xpack.securitySolution.flyout.right.response.previewAriaLabel',
|
||||
{ defaultMessage: 'Response actions' }
|
||||
)}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.response.previewMessage"
|
||||
defaultMessage="Response is not available in alert preview."
|
||||
/>
|
||||
</EuiCallOut>
|
||||
);
|
||||
}
|
||||
|
||||
if (isPreviewMode) {
|
||||
return (
|
||||
<EuiCallOut
|
||||
iconType="documentation"
|
||||
size="s"
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.response.openFlyoutTitle"
|
||||
defaultMessage="Response actions"
|
||||
/>
|
||||
}
|
||||
aria-label={i18n.translate(
|
||||
'xpack.securitySolution.flyout.right.response.openFlyoutAriaLabel',
|
||||
{ defaultMessage: 'Response actions' }
|
||||
)}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.response.openFlyoutMessage"
|
||||
defaultMessage="Open alert details to access response actions."
|
||||
/>
|
||||
</EuiCallOut>
|
||||
);
|
||||
}
|
||||
|
||||
return <ResponseButton />;
|
||||
}, [isPreview, isPreviewMode]);
|
||||
|
||||
if (eventKind !== EventKind.signal) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -42,19 +96,7 @@ export const ResponseSection = memo(() => {
|
|||
localStorageKey={KEY}
|
||||
data-test-subj={RESPONSE_SECTION_TEST_ID}
|
||||
>
|
||||
{isPreview ? (
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.response.previewMessage"
|
||||
defaultMessage="Response is not available in alert preview."
|
||||
/>
|
||||
) : isPreviewMode ? (
|
||||
<FormattedMessage
|
||||
id="xpack.securitySolution.flyout.right.response.openFlyoutMessage"
|
||||
defaultMessage="Open alert details to access response actions."
|
||||
/>
|
||||
) : (
|
||||
<ResponseButton />
|
||||
)}
|
||||
{content}
|
||||
</ExpandableSection>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -36235,7 +36235,6 @@
|
|||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideButtonAriaLabel": "Afficher le guide d'investigation",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideButtonLabel": "Afficher le guide d'investigation",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideLoadingAriaLabel": "guide d'investigation",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideTitle": "Guide d'investigation",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.noDataDescription": "Il n'existe pas de guide d'investigation pour cette règle.",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.previewMessage": "Le guide d'investigation n'est pas disponible dans l'aperçu des alertes.",
|
||||
"xpack.securitySolution.flyout.right.investigation.sectionTitle": "Investigation",
|
||||
|
|
|
|||
|
|
@ -36210,7 +36210,6 @@
|
|||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideButtonAriaLabel": "調査ガイドを表示",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideButtonLabel": "調査ガイドを表示",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideLoadingAriaLabel": "調査ガイド",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideTitle": "調査ガイド",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.noDataDescription": "このルールに関する調査ガイドはありません。",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.previewMessage": "調査ガイドはアラートプレビューでは使用できません。",
|
||||
"xpack.securitySolution.flyout.right.investigation.sectionTitle": "調査",
|
||||
|
|
|
|||
|
|
@ -36253,7 +36253,6 @@
|
|||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideButtonAriaLabel": "显示调查指南",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideButtonLabel": "显示调查指南",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideLoadingAriaLabel": "调查指南",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.investigationGuideTitle": "调查指南",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.noDataDescription": "没有适用于此规则的调查指南。",
|
||||
"xpack.securitySolution.flyout.right.investigation.investigationGuide.previewMessage": "调查指南在告警预览中不可用。",
|
||||
"xpack.securitySolution.flyout.right.investigation.sectionTitle": "调查",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue