[8.10] [Security Solution] Expandable flyout - add data view title and query bar to rule preview panel (#164650) (#164717)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Security Solution] Expandable flyout - add data view title and query
bar to rule preview panel
(#164650)](https://github.com/elastic/kibana/pull/164650)

<!--- Backport version: 8.9.7 -->

### 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":"2023-08-24T13:44:09Z","message":"[Security
Solution] Expandable flyout - add data view title and query bar to rule
preview panel (#164650)\n\n## Summary\r\n\r\nThis PR adds
`dataViewTitle` to rule preview panel -> define section\r\nwhen data
view is available in a rule. This
addresses\r\nhttps://github.com/elastic/kibana/issues/164529.\r\n\r\n**How
to test**\r\n- Create a rule with data view\r\n- Generate some alerts,
go to alerts page, pick a alert and open\r\nexpandable flyout\r\n- Go to
About, open `Rule summary`\r\n- Expand `Define` section, the content
should match the define section\r\nin rule details page for that
rule\r\n\r\n\r\n![image](30aeff6b-547a-4b68-be87-9b52ab58501b)\r\n\r\n\r\n###
Checklist\r\n\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":"1bb4a5269242ac2a9ac7cadf4d535e0ea7b5e720","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Threat
Hunting:Investigations","v8.10.0","v8.11.0"],"number":164650,"url":"https://github.com/elastic/kibana/pull/164650","mergeCommit":{"message":"[Security
Solution] Expandable flyout - add data view title and query bar to rule
preview panel (#164650)\n\n## Summary\r\n\r\nThis PR adds
`dataViewTitle` to rule preview panel -> define section\r\nwhen data
view is available in a rule. This
addresses\r\nhttps://github.com/elastic/kibana/issues/164529.\r\n\r\n**How
to test**\r\n- Create a rule with data view\r\n- Generate some alerts,
go to alerts page, pick a alert and open\r\nexpandable flyout\r\n- Go to
About, open `Rule summary`\r\n- Expand `Define` section, the content
should match the define section\r\nin rule details page for that
rule\r\n\r\n\r\n![image](30aeff6b-547a-4b68-be87-9b52ab58501b)\r\n\r\n\r\n###
Checklist\r\n\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":"1bb4a5269242ac2a9ac7cadf4d535e0ea7b5e720"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/164650","number":164650,"mergeCommit":{"message":"[Security
Solution] Expandable flyout - add data view title and query bar to rule
preview panel (#164650)\n\n## Summary\r\n\r\nThis PR adds
`dataViewTitle` to rule preview panel -> define section\r\nwhen data
view is available in a rule. This
addresses\r\nhttps://github.com/elastic/kibana/issues/164529.\r\n\r\n**How
to test**\r\n- Create a rule with data view\r\n- Generate some alerts,
go to alerts page, pick a alert and open\r\nexpandable flyout\r\n- Go to
About, open `Rule summary`\r\n- Expand `Define` section, the content
should match the define section\r\nin rule details page for that
rule\r\n\r\n\r\n![image](30aeff6b-547a-4b68-be87-9b52ab58501b)\r\n\r\n\r\n###
Checklist\r\n\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":"1bb4a5269242ac2a9ac7cadf4d535e0ea7b5e720"}}]}]
BACKPORT-->

Co-authored-by: christineweng <18648970+christineweng@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2023-08-24 11:12:14 -04:00 committed by GitHub
parent e776ad88d9
commit 4dfca26de8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 2 deletions

View file

@ -22,6 +22,7 @@ import {
mockDefineStepRule,
mockScheduleStepRule,
} from '../../../detection_engine/rule_management_ui/components/rules_table/__mocks__/mock';
import { useGetSavedQuery } from '../../../detections/pages/detection_engine/rules/use_get_saved_query';
import {
RULE_PREVIEW_BODY_TEST_ID,
RULE_PREVIEW_ABOUT_HEADER_TEST_ID,
@ -43,6 +44,9 @@ jest.mock('../../../detection_engine/rule_management/logic/use_rule_with_fallbac
const mockGetStepsData = getStepsData as jest.Mock;
jest.mock('../../../detections/pages/detection_engine/rules/helpers');
const mockUseGetSavedQuery = useGetSavedQuery as jest.Mock;
jest.mock('../../../detections/pages/detection_engine/rules/use_get_saved_query');
const mockTheme = getMockTheme({ eui: { euiColorMediumShade: '#ece' } });
const contextValue = {
@ -69,6 +73,7 @@ describe('<RulePreview />', () => {
scheduleRuleData: mockScheduleStepRule(),
ruleActionsData: { actions: ['action'] },
});
mockUseGetSavedQuery.mockReturnValue({ isSavedQueryLoading: false, savedQueryBar: null });
const { getByTestId } = render(
<TestProviders>
<ThemeProvider theme={mockTheme}>

View file

@ -6,6 +6,8 @@
*/
import React, { memo, useState, useEffect } from 'react';
import { EuiText, EuiHorizontalRule, EuiSpacer, EuiPanel, EuiLoadingSpinner } from '@elastic/eui';
import { useKibana } from '../../../common/lib/kibana';
import { useGetSavedQuery } from '../../../detections/pages/detection_engine/rules/use_get_saved_query';
import type { Rule } from '../../../detection_engine/rule_management/logic';
import { usePreviewPanelContext } from '../context';
import { ExpandableSection } from '../../right/components/expandable_section';
@ -33,6 +35,7 @@ export const RulePreview: React.FC = memo(() => {
const { ruleId, indexPattern } = usePreviewPanelContext();
const [rule, setRule] = useState<Rule | null>(null);
const { rule: maybeRule, loading: ruleLoading } = useRuleWithFallback(ruleId ?? '');
const { data } = useKibana().services;
// persist rule until refresh is complete
useEffect(() => {
@ -51,6 +54,23 @@ export const RulePreview: React.FC = memo(() => {
ruleActionsData: null,
};
const [dataViewTitle, setDataViewTitle] = useState<string>();
useEffect(() => {
const fetchDataViewTitle = async () => {
if (defineRuleData?.dataViewId != null && defineRuleData?.dataViewId !== '') {
const dataView = await data.dataViews.get(defineRuleData?.dataViewId);
setDataViewTitle(dataView.title);
}
};
fetchDataViewTitle();
}, [data.dataViews, defineRuleData?.dataViewId]);
const { isSavedQueryLoading, savedQueryBar } = useGetSavedQuery({
savedQueryId: rule?.saved_id,
ruleType: rule?.type,
});
const hasNotificationActions = Boolean(ruleActionsData?.actions?.length);
const hasResponseActions = Boolean(ruleActionsData?.responseActions?.length);
const hasActions = ruleActionsData != null && (hasNotificationActions || hasResponseActions);
@ -76,7 +96,7 @@ export const RulePreview: React.FC = memo(() => {
)}
</ExpandableSection>
<EuiHorizontalRule margin="l" />
{defineRuleData && (
{defineRuleData && !isSavedQueryLoading && (
<>
<ExpandableSection
title={i18n.RULE_PREVIEW_DEFINITION_TEXT}
@ -86,7 +106,11 @@ export const RulePreview: React.FC = memo(() => {
<StepDefineRuleReadOnly
addPadding={false}
descriptionColumns="single"
defaultValues={defineRuleData}
defaultValues={{
...defineRuleData,
dataViewTitle,
queryBar: savedQueryBar ?? defineRuleData.queryBar,
}}
indexPattern={indexPattern}
isInPanelView
/>