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

[Security solution] Expandable flyout - add subtab to path (#162748)

Browse source
This commit is contained in:
christineweng 2023-08-15 03:34:34 -05:00 • committed by GitHub
parent efbee18dc9
commit cc946c46e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 174 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/kbn-expandable-flyout/index.ts
View file

@ -16,4 +16,4 @@ export {
export type { ExpandableFlyoutApi } from './src/context';
export type { ExpandableFlyoutProps } from './src';
export type { FlyoutPanelProps } from './src/types';
export type { FlyoutPanelProps, PanelPath } from './src/types';

4
packages/kbn-expandable-flyout/src/reducer.test.ts
View file

@ -12,7 +12,7 @@ import { Action, ActionType } from './actions';
const rightPanel1: FlyoutPanelProps = {
id: 'right1',
path: ['path'],
path: { tab: 'tab' },
};
const leftPanel1: FlyoutPanelProps = {
id: 'left1',
@ -25,7 +25,7 @@ const previewPanel1: FlyoutPanelProps = {
const rightPanel2: FlyoutPanelProps = {
id: 'right2',
path: ['path'],
path: { tab: 'tab' },
};
const leftPanel2: FlyoutPanelProps = {
id: 'left2',

15
packages/kbn-expandable-flyout/src/types.ts
View file

@ -8,6 +8,17 @@
import React from 'react';
export interface PanelPath {
/**
* Top level tab that to be displayed
*/
tab: string;
/**
* Optional secondary level to be displayed under top level tab
*/
subTab?: string;
}
export interface FlyoutPanelProps {
/**
* Unique key to identify the panel
@ -18,9 +29,9 @@ export interface FlyoutPanelProps {
*/
params?: Record<string, unknown>;
/**
* Tracks the path for what to show in a panel. We may have multiple tabs or details..., so easiest to just use a stack
* Tracks the path for what to show in a panel, such as activated tab and subtab
*/
path?: string[];
path?: PanelPath;
/**
* Tracks visual state such as whether the panel is collapsed
*/

19
x-pack/plugins/security_solution/public/flyout/left/index.tsx
View file

@ -9,7 +9,7 @@ import type { FC } from 'react';
import React, { memo, useMemo } from 'react';
import { useEuiBackgroundColor } from '@elastic/eui';
import { css } from '@emotion/react';
import type { FlyoutPanelProps } from '@kbn/expandable-flyout';
import type { FlyoutPanelProps, PanelPath } from '@kbn/expandable-flyout';
import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
import { PanelHeader } from './header';
import { PanelContent } from './content';
@ -19,15 +19,14 @@ import { useLeftPanelContext } from './context';
export type LeftPanelPaths = 'visualize' | 'insights' | 'investigation' | 'response';
export const LeftPanelKey: LeftPanelProps['key'] = 'document-details-left';
export const LeftPanelVisualizeTabPath: LeftPanelProps['path'] = ['visualize'];
export const LeftPanelInsightsTabPath: LeftPanelProps['path'] = ['insights'];
export const LeftPanelInvestigationTabPath: LeftPanelProps['path'] = ['investigation'];
export const LeftPanelResponseTabPath: LeftPanelProps['path'] = ['response'];
export const LeftPanelVisualizeTab: LeftPanelPaths = 'visualize';
export const LeftPanelInsightsTab: LeftPanelPaths = 'insights';
export const LeftPanelInvestigationTab: LeftPanelPaths = 'investigation';
export const LeftPanelResponseTab: LeftPanelPaths = 'response';
export interface LeftPanelProps extends FlyoutPanelProps {
key: 'document-details-left';
path?: LeftPanelPaths[];
path?: PanelPath;
params?: {
id: string;
indexName: string;
@ -42,13 +41,15 @@ export const LeftPanel: FC<Partial<LeftPanelProps>> = memo(({ path }) => {
const selectedTabId = useMemo(() => {
const defaultTab = tabs[0].id;
if (!path) return defaultTab;
return tabs.map((tab) => tab.id).find((tabId) => tabId === path[0]) ?? defaultTab;
return tabs.map((tab) => tab.id).find((tabId) => tabId === path.tab) ?? defaultTab;
}, [path]);
const setSelectedTabId = (tabId: LeftPanelTabsType[number]['id']) => {
openLeftPanel({
id: LeftPanelKey,
path: [tabId],
path: {
tab: tabId,
},
params: {
id: eventId,
indexName,

39
x-pack/plugins/security_solution/public/flyout/left/tabs/insights_tab.tsx
View file

@ -5,10 +5,11 @@
* 2.0.
*/
import React, { memo, useCallback, useState } from 'react';
import React, { memo, useCallback, useState, useEffect } from 'react';
import { EuiButtonGroup, EuiSpacer } from '@elastic/eui';
import type { EuiButtonGroupOptionProps } from '@elastic/eui/src/components/button/button_group/button_group';
import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
import {
INSIGHTS_TAB_BUTTON_GROUP_TEST_ID,
INSIGHTS_TAB_ENTITIES_BUTTON_TEST_ID,
@ -16,7 +17,8 @@ import {
INSIGHTS_TAB_PREVALENCE_BUTTON_TEST_ID,
INSIGHTS_TAB_CORRELATIONS_BUTTON_TEST_ID,
} from './test_ids';
import { useLeftPanelContext } from '../context';
import { LeftPanelKey, LeftPanelInsightsTab } from '..';
import {
INSIGHTS_BUTTONGROUP_OPTIONS,
ENTITIES_BUTTON,
@ -59,11 +61,36 @@ const insightsButtons: EuiButtonGroupOptionProps[] = [
* Insights view displayed in the document details expandable flyout left section
*/
export const InsightsTab: React.FC = memo(() => {
const [activeInsightsId, setActiveInsightsId] = useState(ENTITIES_TAB_ID);
const { eventId, indexName, scopeId } = useLeftPanelContext();
const { panels, openLeftPanel } = useExpandableFlyoutContext();
const [activeInsightsId, setActiveInsightsId] = useState(
panels.left?.path?.subTab ?? ENTITIES_TAB_ID
);
const onChangeCompressed = useCallback((optionId: string) => {
setActiveInsightsId(optionId);
}, []);
const onChangeCompressed = useCallback(
(optionId: string) => {
setActiveInsightsId(optionId);
openLeftPanel({
id: LeftPanelKey,
path: {
tab: LeftPanelInsightsTab,
subTab: optionId,
},
params: {
id: eventId,
indexName,
scopeId,
},
});
},
[eventId, indexName, scopeId, openLeftPanel]
);
useEffect(() => {
if (panels.left?.path?.subTab) {
setActiveInsightsId(panels.left?.path?.subTab);
}
}, [panels.left?.path?.subTab]);
return (
<>

31
x-pack/plugins/security_solution/public/flyout/left/tabs/visualize_tab.tsx
View file

@ -6,9 +6,12 @@
*/
import type { FC } from 'react';
import React, { memo, useState, useCallback } from 'react';
import React, { memo, useState, useCallback, useEffect } from 'react';
import { EuiButtonGroup, EuiSpacer } from '@elastic/eui';
import type { EuiButtonGroupOptionProps } from '@elastic/eui/src/components/button/button_group/button_group';
import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
import { useLeftPanelContext } from '../context';
import { LeftPanelKey, LeftPanelVisualizeTab } from '..';
import {
VISUALIZE_TAB_BUTTON_GROUP_TEST_ID,
VISUALIZE_TAB_GRAPH_ANALYZER_BUTTON_TEST_ID,
@ -41,7 +44,11 @@ const visualizeButtons: EuiButtonGroupOptionProps[] = [
* Visualize view displayed in the document details expandable flyout left section
*/
export const VisualizeTab: FC = memo(() => {
const [activeVisualizationId, setActiveVisualizationId] = useState(SESSION_VIEW_ID);
const { eventId, indexName, scopeId } = useLeftPanelContext();
const { panels, openLeftPanel } = useExpandableFlyoutContext();
const [activeVisualizationId, setActiveVisualizationId] = useState(
panels.left?.path?.subTab ?? SESSION_VIEW_ID
);
const { startTransaction } = useStartTransaction();
const onChangeCompressed = useCallback(
(optionId: string) => {
@ -49,10 +56,28 @@ export const VisualizeTab: FC = memo(() => {
if (optionId === ANALYZE_GRAPH_ID) {
startTransaction({ name: ALERTS_ACTIONS.OPEN_ANALYZER });
}
openLeftPanel({
id: LeftPanelKey,
path: {
tab: LeftPanelVisualizeTab,
subTab: optionId,
},
params: {
id: eventId,
indexName,
scopeId,
},
});
},
[startTransaction]
[startTransaction, eventId, indexName, scopeId, openLeftPanel]
);
useEffect(() => {
if (panels.left?.path?.subTab) {
setActiveVisualizationId(panels.left?.path?.subTab);
}
}, [panels.left?.path?.subTab]);
return (
<>
<EuiButtonGroup

7
x-pack/plugins/security_solution/public/flyout/preview/index.tsx
View file

@ -6,16 +6,17 @@
*/
import React, { memo, useMemo } from 'react';
import type { FlyoutPanelProps } from '@kbn/expandable-flyout';
import type { FlyoutPanelProps, PanelPath } from '@kbn/expandable-flyout';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { panels } from './panels';
export type PreviewPanelPaths = 'rule-preview';
export const RulePreviewPanel: PreviewPanelPaths = 'rule-preview';
export const PreviewPanelKey: PreviewPanelProps['key'] = 'document-details-preview';
export interface PreviewPanelProps extends FlyoutPanelProps {
key: 'document-details-preview';
path?: PreviewPanelPaths[];
path?: PanelPath;
params?: {
id: string;
indexName: string;
@ -29,7 +30,7 @@ export interface PreviewPanelProps extends FlyoutPanelProps {
*/
export const PreviewPanel: React.FC<Partial<PreviewPanelProps>> = memo(({ path }) => {
const previewPanel = useMemo(() => {
return path ? panels.find((panel) => panel.id === path[0]) : null;
return path ? panels.find((panel) => panel.id === path.tab) : null;
}, [path]);
if (!previewPanel) {

5
x-pack/plugins/security_solution/public/flyout/right/components/analyzer_tree.test.tsx
View file

@ -22,7 +22,8 @@ import { AnalyzerTree } from './analyzer_tree';
import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
import { TestProviders } from '@kbn/timelines-plugin/public/mock';
import { RightPanelContext } from '../context';
import { LeftPanelKey, LeftPanelVisualizeTabPath } from '../../left';
import { LeftPanelKey, LeftPanelVisualizeTab } from '../../left';
import { ANALYZE_GRAPH_ID } from '../../left/components/analyze_graph';
const defaultProps: AnalyzerTreeProps = {
statsNodes: mock.mockStatsNodes,
@ -92,7 +93,7 @@ describe('<AnalyzerTree />', () => {
getByTestId(ANALYZER_PREVIEW_TITLE_LINK_TEST_ID).click();
expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({
id: LeftPanelKey,
path: LeftPanelVisualizeTabPath,
path: { tab: LeftPanelVisualizeTab, subTab: ANALYZE_GRAPH_ID },
params: {
id: panelContextValue.eventId,
indexName: panelContextValue.indexName,

8
x-pack/plugins/security_solution/public/flyout/right/components/analyzer_tree.tsx
View file

@ -9,9 +9,10 @@ import { EuiTreeView } from '@elastic/eui';
import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
import { ExpandablePanel } from '../../shared/components/expandable_panel';
import { useRightPanelContext } from '../context';
import { LeftPanelKey, LeftPanelVisualizeTabPath } from '../../left';
import { LeftPanelKey, LeftPanelVisualizeTab } from '../../left';
import { ANALYZER_PREVIEW_TITLE } from './translations';
import { ANALYZER_PREVIEW_TEST_ID } from './test_ids';
import { ANALYZE_GRAPH_ID } from '../../left/components/analyze_graph';
import type { StatsNode } from '../../../common/containers/alerts/use_alert_prevalence_from_process_tree';
import { getTreeNodes } from '../utils/analyzer_helpers';
@ -63,7 +64,10 @@ export const AnalyzerTree: React.FC<AnalyzerTreeProps> = ({
const goToAnalyserTab = useCallback(() => {
openLeftPanel({
id: LeftPanelKey,
path: LeftPanelVisualizeTabPath,
path: {
tab: LeftPanelVisualizeTab,
subTab: ANALYZE_GRAPH_ID,
},
params: {
id: eventId,
indexName,

5
x-pack/plugins/security_solution/public/flyout/right/components/correlations_overview.test.tsx
View file

@ -11,8 +11,9 @@ import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
import { RightPanelContext } from '../context';
import { TestProviders } from '../../../common/mock';
import { CorrelationsOverview } from './correlations_overview';
import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left';
import { useCorrelations } from '../../shared/hooks/use_correlations';
import { CORRELATIONS_TAB_ID } from '../../left/components/correlations_details';
import { LeftPanelInsightsTab, LeftPanelKey } from '../../left';
import {
INSIGHTS_CORRELATIONS_CONTENT_TEST_ID,
INSIGHTS_CORRELATIONS_LOADING_TEST_ID,
@ -154,7 +155,7 @@ describe('<CorrelationsOverview />', () => {
getByTestId(INSIGHTS_CORRELATIONS_TITLE_LINK_TEST_ID).click();
expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: { tab: LeftPanelInsightsTab, subTab: CORRELATIONS_TAB_ID },
params: {
id: panelContextValue.eventId,
indexName: panelContextValue.indexName,

8
x-pack/plugins/security_solution/public/flyout/right/components/correlations_overview.tsx
View file

@ -14,7 +14,8 @@ import { useCorrelations } from '../../shared/hooks/use_correlations';
import { INSIGHTS_CORRELATIONS_TEST_ID } from './test_ids';
import { useRightPanelContext } from '../context';
import { CORRELATIONS_TITLE } from './translations';
import { LeftPanelKey, LeftPanelInsightsTabPath } from '../../left';
import { LeftPanelKey, LeftPanelInsightsTab } from '../../left';
import { CORRELATIONS_TAB_ID } from '../../left/components/correlations_details';
/**
* Correlations section under Insights section, overview tab.
@ -29,7 +30,10 @@ export const CorrelationsOverview: React.FC = () => {
const goToCorrelationsTab = useCallback(() => {
openLeftPanel({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: {
tab: LeftPanelInsightsTab,
subTab: CORRELATIONS_TAB_ID,
},
params: {
id: eventId,
indexName,

4
x-pack/plugins/security_solution/public/flyout/right/components/description.tsx
View file

@ -23,7 +23,7 @@ import {
RULE_SUMMARY_TEXT,
PREVIEW_RULE_DETAILS,
} from './translations';
import { PreviewPanelKey, type PreviewPanelProps } from '../../preview';
import { PreviewPanelKey, type PreviewPanelProps, RulePreviewPanel } from '../../preview';
/**
* Displays the description of a document.
@ -36,7 +36,7 @@ export const Description: FC = () => {
);
const { openPreviewPanel } = useExpandableFlyoutContext();
const openRulePreview = useCallback(() => {
const PreviewPanelRulePreview: PreviewPanelProps['path'] = ['rule-preview'];
const PreviewPanelRulePreview: PreviewPanelProps['path'] = { tab: RulePreviewPanel };
openPreviewPanel({
id: PreviewPanelKey,
path: PreviewPanelRulePreview,

8
x-pack/plugins/security_solution/public/flyout/right/components/entities_overview.tsx
View file

@ -15,7 +15,8 @@ import { ENTITIES_TITLE } from './translations';
import { getField } from '../../shared/utils';
import { HostEntityOverview } from './host_entity_overview';
import { UserEntityOverview } from './user_entity_overview';
import { LeftPanelKey, LeftPanelInsightsTabPath } from '../../left';
import { LeftPanelKey, LeftPanelInsightsTab } from '../../left';
import { ENTITIES_TAB_ID } from '../../left/components/entities_details';
/**
* Entities section under Insights section, overview tab. It contains a preview of host and user information.
@ -29,7 +30,10 @@ export const EntitiesOverview: React.FC = () => {
const goToEntitiesTab = useCallback(() => {
openLeftPanel({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: {
tab: LeftPanelInsightsTab,
subTab: ENTITIES_TAB_ID,
},
params: {
id: eventId,
indexName,

5
x-pack/plugins/security_solution/public/flyout/right/components/highlighted_fields_cell.test.tsx
View file

@ -15,8 +15,9 @@ import {
import { HighlightedFieldsCell } from './highlighted_fields_cell';
import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
import { RightPanelContext } from '../context';
import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left';
import { LeftPanelInsightsTab, LeftPanelKey } from '../../left';
import { TestProviders } from '../../../common/mock';
import { ENTITIES_TAB_ID } from '../../left/components/entities_details';
const flyoutContextValue = {
openLeftPanel: jest.fn(),
@ -61,7 +62,7 @@ describe('<HighlightedFieldsCell />', () => {
getByTestId(HIGHLIGHTED_FIELDS_LINKED_CELL_TEST_ID).click();
expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: { tab: LeftPanelInsightsTab, subTab: ENTITIES_TAB_ID },
params: {
id: panelContextValue.eventId,
indexName: panelContextValue.indexName,

5
x-pack/plugins/security_solution/public/flyout/right/components/highlighted_fields_cell.tsx
View file

@ -16,7 +16,8 @@ import {
HOST_NAME_FIELD_NAME,
USER_NAME_FIELD_NAME,
} from '../../../timelines/components/timeline/body/renderers/constants';
import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left';
import { LeftPanelInsightsTab, LeftPanelKey } from '../../left';
import { ENTITIES_TAB_ID } from '../../left/components/entities_details';
import {
HIGHLIGHTED_FIELDS_AGENT_STATUS_CELL_TEST_ID,
HIGHLIGHTED_FIELDS_BASIC_CELL_TEST_ID,
@ -42,7 +43,7 @@ const LinkFieldCell: VFC<LinkFieldCellProps> = ({ value }) => {
const goToInsightsEntities = useCallback(() => {
openLeftPanel({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: { tab: LeftPanelInsightsTab, subTab: ENTITIES_TAB_ID },
params: {
id: eventId,
indexName,

5
x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx
View file

@ -20,7 +20,8 @@ import { RightPanelContext } from '../context';
import { mockContextValue } from '../mocks/mock_right_panel_context';
import { mockDataFormattedForFieldBrowser } from '../mocks/mock_context';
import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left';
import { LeftPanelInsightsTab, LeftPanelKey } from '../../left';
import { ENTITIES_TAB_ID } from '../../left/components/entities_details';
const hostName = 'host';
const ip = '10.200.000.000';
@ -143,7 +144,7 @@ describe('<HostEntityContent />', () => {
getByTestId(ENTITIES_HOST_OVERVIEW_LINK_TEST_ID).click();
expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: { tab: LeftPanelInsightsTab, subTab: ENTITIES_TAB_ID },
params: {
id: panelContextValue.eventId,
indexName: panelContextValue.indexName,

5
x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx
View file

@ -37,6 +37,7 @@ import { useRiskScore } from '../../../explore/containers/risk_score';
import { useHostDetails } from '../../../explore/hosts/containers/hosts/details';
import * as i18n from '../../../overview/components/host_overview/translations';
import { TECHNICAL_PREVIEW_TITLE, TECHNICAL_PREVIEW_MESSAGE } from './translations';
import { ENTITIES_TAB_ID } from '../../left/components/entities_details';
import {
TECHNICAL_PREVIEW_ICON_TEST_ID,
ENTITIES_HOST_OVERVIEW_TEST_ID,
@ -44,7 +45,7 @@ import {
ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID,
ENTITIES_HOST_OVERVIEW_LINK_TEST_ID,
} from './test_ids';
import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left';
import { LeftPanelInsightsTab, LeftPanelKey } from '../../left';
const HOST_ICON = 'storage';
const CONTEXT_ID = `flyout-host-entity-overview`;
@ -65,7 +66,7 @@ export const HostEntityOverview: React.FC<HostEntityOverviewProps> = ({ hostName
const goToEntitiesTab = useCallback(() => {
openLeftPanel({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: { tab: LeftPanelInsightsTab, subTab: ENTITIES_TAB_ID },
params: {
id: eventId,
indexName,

6
x-pack/plugins/security_solution/public/flyout/right/components/investigation_guide_button.tsx
View file

@ -10,7 +10,7 @@ import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
import { useRightPanelContext } from '../context';
import { useRuleWithFallback } from '../../../detection_engine/rule_management/logic/use_rule_with_fallback';
import { useBasicDataFromDetailsData } from '../../../timelines/components/side_panel/event_details/helpers';
import { LeftPanelKey, LeftPanelInvestigationTabPath } from '../../left';
import { LeftPanelKey, LeftPanelInvestigationTab } from '../../left';
import { INVESTIGATION_GUIDE_BUTTON_TEST_ID } from './test_ids';
import { INVESTIGATION_GUIDE_TITLE } from './translations';
@ -27,7 +27,9 @@ export const InvestigationGuideButton: React.FC = () => {
const goToInvestigationsTab = useCallback(() => {
openLeftPanel({
id: LeftPanelKey,
path: LeftPanelInvestigationTabPath,
path: {
tab: LeftPanelInvestigationTab,
},
params: {
id: eventId,
indexName,

5
x-pack/plugins/security_solution/public/flyout/right/components/prevalence_overview.test.tsx
View file

@ -15,13 +15,14 @@ import {
INSIGHTS_PREVALENCE_TITLE_TEXT_TEST_ID,
INSIGHTS_PREVALENCE_TOGGLE_ICON_TEST_ID,
} from './test_ids';
import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left';
import { LeftPanelInsightsTab, LeftPanelKey } from '../../left';
import React from 'react';
import { PrevalenceOverview } from './prevalence_overview';
import { usePrevalence } from '../hooks/use_prevalence';
import { PrevalenceOverviewRow } from './prevalence_overview_row';
import { useFetchFieldValuePairWithAggregation } from '../../shared/hooks/use_fetch_field_value_pair_with_aggregation';
import { useFetchUniqueByField } from '../../shared/hooks/use_fetch_unique_by_field';
import { PREVALENCE_TAB_ID } from '../../left/components/prevalence_details';
import type { BrowserFields, TimelineEventsDetailsItem } from '@kbn/timelines-plugin/common';
jest.mock('../../shared/hooks/use_fetch_field_value_pair_with_aggregation');
@ -156,7 +157,7 @@ describe('<PrevalenceOverview />', () => {
getByTestId(INSIGHTS_PREVALENCE_TITLE_LINK_TEST_ID).click();
expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: { tab: LeftPanelInsightsTab, subTab: PREVALENCE_TAB_ID },
params: {
id: 'eventId',
indexName: 'indexName',

8
x-pack/plugins/security_solution/public/flyout/right/components/prevalence_overview.tsx
View file

@ -14,7 +14,8 @@ import { usePrevalence } from '../hooks/use_prevalence';
import { INSIGHTS_PREVALENCE_TEST_ID } from './test_ids';
import { useRightPanelContext } from '../context';
import { PREVALENCE_TITLE } from './translations';
import { LeftPanelKey, LeftPanelInsightsTabPath } from '../../left';
import { LeftPanelKey, LeftPanelInsightsTab } from '../../left';
import { PREVALENCE_TAB_ID } from '../../left/components/prevalence_details';
/**
* Prevalence section under Insights section, overview tab.
@ -29,7 +30,10 @@ export const PrevalenceOverview: FC = () => {
const goToCorrelationsTab = useCallback(() => {
openLeftPanel({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: {
tab: LeftPanelInsightsTab,
subTab: PREVALENCE_TAB_ID,
},
params: {
id: eventId,
indexName,

4
x-pack/plugins/security_solution/public/flyout/right/components/response_button.tsx
View file

@ -13,7 +13,7 @@ import type {
RawEventData,
} from '../../../../common/types/response_actions';
import { useRightPanelContext } from '../context';
import { LeftPanelKey, LeftPanelResponseTabPath } from '../../left';
import { LeftPanelKey, LeftPanelResponseTab } from '../../left';
import { RESPONSE_BUTTON_TEST_ID, RESPONSE_EMPTY_TEST_ID } from './test_ids';
import { RESPONSE_EMPTY, RESPONSE_TITLE } from './translations';
@ -33,7 +33,7 @@ export const ResponseButton: React.FC = () => {
const goToResponseTab = useCallback(() => {
openLeftPanel({
id: LeftPanelKey,
path: LeftPanelResponseTabPath,
path: { tab: LeftPanelResponseTab },
params: {
id: eventId,
indexName,

5
x-pack/plugins/security_solution/public/flyout/right/components/session_preview.test.tsx
View file

@ -19,7 +19,8 @@ import {
SESSION_PREVIEW_TITLE_TEXT_TEST_ID,
SESSION_PREVIEW_TOGGLE_ICON_TEST_ID,
} from './test_ids';
import { LeftPanelKey, LeftPanelVisualizeTabPath } from '../../left';
import { LeftPanelKey, LeftPanelVisualizeTab } from '../../left';
import { SESSION_VIEW_ID } from '../../left/components/session_view';
jest.mock('../hooks/use_process_data');
@ -131,7 +132,7 @@ describe('SessionPreview', () => {
getByTestId(SESSION_PREVIEW_TITLE_LINK_TEST_ID).click();
expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({
id: LeftPanelKey,
path: LeftPanelVisualizeTabPath,
path: { tab: LeftPanelVisualizeTab, subTab: SESSION_VIEW_ID },
params: {
id: panelContextValue.eventId,
indexName: panelContextValue.indexName,

9
x-pack/plugins/security_solution/public/flyout/right/components/session_preview.tsx
View file

@ -12,7 +12,6 @@ import { ExpandablePanel } from '../../shared/components/expandable_panel';
import { SIGNAL_RULE_NAME_FIELD_NAME } from '../../../timelines/components/timeline/body/renderers/constants';
import { useRightPanelContext } from '../context';
import { PreferenceFormattedDate } from '../../../common/components/formatted_date';
import { useProcessData } from '../hooks/use_process_data';
import { SESSION_PREVIEW_TEST_ID } from './test_ids';
import {
@ -22,8 +21,9 @@ import {
SESSION_PREVIEW_TIME_TEXT,
SESSION_PREVIEW_TITLE,
} from './translations';
import { LeftPanelKey, LeftPanelVisualizeTabPath } from '../../left';
import { LeftPanelKey, LeftPanelVisualizeTab } from '../../left';
import { RenderRuleName } from '../../../timelines/components/timeline/body/renderers/formatted_field_helpers';
import { SESSION_VIEW_ID } from '../../left/components/session_view';
/**
* One-off helper to make sure that inline values are rendered consistently
@ -51,7 +51,10 @@ export const SessionPreview: FC = () => {
const goToSessionViewTab = useCallback(() => {
openLeftPanel({
id: LeftPanelKey,
path: LeftPanelVisualizeTabPath,
path: {
tab: LeftPanelVisualizeTab,
subTab: SESSION_VIEW_ID,
},
params: {
id: eventId,
indexName,

5
x-pack/plugins/security_solution/public/flyout/right/components/threat_intelligence_overview.test.tsx
View file

@ -11,8 +11,9 @@ import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
import { RightPanelContext } from '../context';
import { TestProviders } from '../../../common/mock';
import { ThreatIntelligenceOverview } from './threat_intelligence_overview';
import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left';
import { LeftPanelInsightsTab, LeftPanelKey } from '../../left';
import { useFetchThreatIntelligence } from '../hooks/use_fetch_threat_intelligence';
import { THREAT_INTELLIGENCE_TAB_ID } from '../../left/components/threat_intelligence_details';
import {
INSIGHTS_THREAT_INTELLIGENCE_CONTAINER_TEST_ID,
INSIGHTS_THREAT_INTELLIGENCE_CONTENT_TEST_ID,
@ -185,7 +186,7 @@ describe('<ThreatIntelligenceOverview />', () => {
getByTestId(INSIGHTS_THREAT_INTELLIGENCE_TITLE_LINK_TEST_ID).click();
expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: { tab: LeftPanelInsightsTab, subTab: THREAT_INTELLIGENCE_TAB_ID },
params: {
id: panelContextValue.eventId,
indexName: panelContextValue.indexName,

8
x-pack/plugins/security_solution/public/flyout/right/components/threat_intelligence_overview.tsx
View file

@ -21,7 +21,8 @@ import {
THREAT_MATCHES_DETECTED,
THREAT_ENRICHMENTS,
} from './translations';
import { LeftPanelKey, LeftPanelInsightsTabPath } from '../../left';
import { LeftPanelKey, LeftPanelInsightsTab } from '../../left';
import { THREAT_INTELLIGENCE_TAB_ID } from '../../left/components/threat_intelligence_details';
/**
* Threat Intelligence section under Insights section, overview tab.
@ -35,7 +36,10 @@ export const ThreatIntelligenceOverview: FC = () => {
const goToThreatIntelligenceTab = useCallback(() => {
openLeftPanel({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: {
tab: LeftPanelInsightsTab,
subTab: THREAT_INTELLIGENCE_TAB_ID,
},
params: {
id: eventId,
indexName,

5
x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx
View file

@ -21,7 +21,8 @@ import { mockContextValue } from '../mocks/mock_right_panel_context';
import { mockDataFormattedForFieldBrowser } from '../mocks/mock_context';
import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
import { RightPanelContext } from '../context';
import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left';
import { LeftPanelInsightsTab, LeftPanelKey } from '../../left';
import { ENTITIES_TAB_ID } from '../../left/components/entities_details';
const userName = 'user';
const ip = '10.200.000.000';
@ -144,7 +145,7 @@ describe('<UserEntityOverview />', () => {
getByTestId(ENTITIES_USER_OVERVIEW_LINK_TEST_ID).click();
expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: { tab: LeftPanelInsightsTab, subTab: ENTITIES_TAB_ID },
params: {
id: panelContextValue.eventId,
indexName: panelContextValue.indexName,

5
x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx
View file

@ -18,7 +18,8 @@ import {
import { css } from '@emotion/css';
import { getOr } from 'lodash/fp';
import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left';
import { LeftPanelInsightsTab, LeftPanelKey } from '../../left';
import { ENTITIES_TAB_ID } from '../../left/components/entities_details';
import { useRightPanelContext } from '../context';
import type { DescriptionList } from '../../../../common/utility_types';
import {
@ -65,7 +66,7 @@ export const UserEntityOverview: React.FC<UserEntityOverviewProps> = ({ userName
const goToEntitiesTab = useCallback(() => {
openLeftPanel({
id: LeftPanelKey,
path: LeftPanelInsightsTabPath,
path: { tab: LeftPanelInsightsTab, subTab: ENTITIES_TAB_ID },
params: {
id: eventId,
indexName,

12
x-pack/plugins/security_solution/public/flyout/right/index.tsx
View file

@ -7,7 +7,7 @@
import type { FC } from 'react';
import React, { memo, useMemo } from 'react';
import type { FlyoutPanelProps } from '@kbn/expandable-flyout';
import type { FlyoutPanelProps, PanelPath } from '@kbn/expandable-flyout';
import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
import { useRightPanelContext } from './context';
import { PanelHeader } from './header';
@ -17,13 +17,11 @@ import { tabs } from './tabs';
import { PanelFooter } from './footer';
export type RightPanelPaths = 'overview' | 'table' | 'json';
export const RightPanelKey: RightPanelProps['key'] = 'document-details-right';
export const RightPanelTableTabPath: RightPanelProps['path'] = ['table'];
export interface RightPanelProps extends FlyoutPanelProps {
key: 'document-details-right';
path?: RightPanelPaths[];
path?: PanelPath;
params?: {
id: string;
indexName: string;
@ -41,13 +39,15 @@ export const RightPanel: FC<Partial<RightPanelProps>> = memo(({ path }) => {
const selectedTabId = useMemo(() => {
const defaultTab = tabs[0].id;
if (!path) return defaultTab;
return tabs.map((tab) => tab.id).find((tabId) => tabId === path[0]) ?? defaultTab;
return tabs.map((tab) => tab.id).find((tabId) => tabId === path.tab) ?? defaultTab;
}, [path]);
const setSelectedTabId = (tabId: RightPanelTabsType[number]['id']) => {
openRightPanel({
id: RightPanelKey,
path: [tabId],
path: {
tab: tabId,
},
params: {
id: eventId,
indexName,