Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Security Solution] Disable automatically open analyzer panels in flyout #203497

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

[Security Solution] Disable automatically open analyzer panels in flyout #203497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 3 additions & 20 deletions x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,15 @@
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 { useExpandableFlyoutApi, useExpandableFlyoutState } from '@kbn/expandable-flyout';
import { useExpandableFlyoutState } from '@kbn/expandable-flyout';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { useDocumentDetailsContext } from '../../shared/context';
import { useWhichFlyout } from '../../shared/hooks/use_which_flyout';
import { DocumentDetailsAnalyzerPanelKey } from '../../shared/constants/panel_keys';
import {
VISUALIZE_TAB_BUTTON_GROUP_TEST_ID,
VISUALIZE_TAB_GRAPH_ANALYZER_BUTTON_TEST_ID,
VISUALIZE_TAB_SESSION_VIEW_BUTTON_TEST_ID,
} from './test_ids';
import {
ANALYZE_GRAPH_ID,
AnalyzeGraph,
ANALYZER_PREVIEW_BANNER,
} from '../components/analyze_graph';
import { ANALYZE_GRAPH_ID, AnalyzeGraph } from '../components/analyze_graph';
import { SESSION_VIEW_ID, SessionView } from '../components/session_view';
import { ALERTS_ACTIONS } from '../../../../common/lib/apm/user_actions';
import { useStartTransaction } from '../../../../common/lib/apm/use_start_transaction';
Expand Down Expand Up @@ -55,29 +48,19 @@ const visualizeButtons: EuiButtonGroupOptionProps[] = [
* Visualize view displayed in the document details expandable flyout left section
*/
export const VisualizeTab = memo(() => {
const { scopeId } = useDocumentDetailsContext();
const { openPreviewPanel } = useExpandableFlyoutApi();
const panels = useExpandableFlyoutState();
const [activeVisualizationId, setActiveVisualizationId] = useState(
panels.left?.path?.subTab ?? SESSION_VIEW_ID
);
const key = useWhichFlyout() ?? 'memory';
const { startTransaction } = useStartTransaction();
const onChangeCompressed = useCallback(
(optionId: string) => {
setActiveVisualizationId(optionId);
if (optionId === ANALYZE_GRAPH_ID) {
startTransaction({ name: ALERTS_ACTIONS.OPEN_ANALYZER });
openPreviewPanel({
id: DocumentDetailsAnalyzerPanelKey,
params: {
resolverComponentInstanceID: `${key}-${scopeId}`,
banner: ANALYZER_PREVIEW_BANNER,
},
});
}
},
[startTransaction, openPreviewPanel, key, scopeId]
[startTransaction]
);

useEffect(() => {
Expand Down
39 changes: 2 additions & 37 deletions ...ty_solution/public/flyout/document_details/shared/hooks/use_navigate_to_analyzer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,10 @@ import { renderHook } from '@testing-library/react';
import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
import { useNavigateToAnalyzer } from './use_navigate_to_analyzer';
import { mockFlyoutApi } from '../mocks/mock_flyout_context';
import { useWhichFlyout } from './use_which_flyout';
import { useKibana as mockUseKibana } from '../../../../common/lib/kibana/__mocks__';
import { useKibana } from '../../../../common/lib/kibana';
import {
DocumentDetailsRightPanelKey,
DocumentDetailsLeftPanelKey,
DocumentDetailsAnalyzerPanelKey,
} from '../constants/panel_keys';
import { ANALYZE_GRAPH_ID, ANALYZER_PREVIEW_BANNER } from '../../left/components/analyze_graph';
import { DocumentDetailsRightPanelKey, DocumentDetailsLeftPanelKey } from '../constants/panel_keys';
import { ANALYZE_GRAPH_ID } from '../../left/components/analyze_graph';

jest.mock('@kbn/expandable-flyout');
jest.mock('../../../../common/lib/kibana');
Expand All @@ -26,10 +21,6 @@ jest.mock('./use_which_flyout');
const mockedUseKibana = mockUseKibana();
(useKibana as jest.Mock).mockReturnValue(mockedUseKibana);

const mockUseWhichFlyout = useWhichFlyout as jest.Mock;
const FLYOUT_KEY = 'SecuritySolution';
const TIMELINE_FLYOUT_KEY = 'Timeline';

const eventId = 'eventId1';
const indexName = 'index1';
const scopeId = 'scopeId1';
Expand All @@ -41,7 +32,6 @@ describe('useNavigateToAnalyzer', () => {
});

it('when isFlyoutOpen is true, should return callback that opens left and preview panels', () => {
mockUseWhichFlyout.mockReturnValue(FLYOUT_KEY);
const hookResult = renderHook(() =>
useNavigateToAnalyzer({ isFlyoutOpen: true, eventId, indexName, scopeId })
);
Expand All @@ -59,19 +49,9 @@ describe('useNavigateToAnalyzer', () => {
scopeId,
},
});

expect(mockFlyoutApi.openPreviewPanel).toHaveBeenCalledWith({
id: DocumentDetailsAnalyzerPanelKey,
params: {
resolverComponentInstanceID: `${FLYOUT_KEY}-${scopeId}`,
banner: ANALYZER_PREVIEW_BANNER,
},
});
});

it('when isFlyoutOpen is false and scopeId is not timeline, should return callback that opens a new flyout', () => {
mockUseWhichFlyout.mockReturnValue(null);

const hookResult = renderHook(() =>
useNavigateToAnalyzer({ isFlyoutOpen: false, eventId, indexName, scopeId })
);
Expand All @@ -97,18 +77,10 @@ describe('useNavigateToAnalyzer', () => {
scopeId,
},
},
preview: {
id: DocumentDetailsAnalyzerPanelKey,
params: {
resolverComponentInstanceID: `${FLYOUT_KEY}-${scopeId}`,
banner: ANALYZER_PREVIEW_BANNER,
},
},
});
});

it('when isFlyoutOpen is false and scopeId is current timeline, should return callback that opens a new flyout in timeline', () => {
mockUseWhichFlyout.mockReturnValue(null);
const timelineId = 'timeline-1';
const hookResult = renderHook(() =>
useNavigateToAnalyzer({ isFlyoutOpen: false, eventId, indexName, scopeId: timelineId })
Expand All @@ -135,13 +107,6 @@ describe('useNavigateToAnalyzer', () => {
scopeId: timelineId,
},
},
preview: {
id: DocumentDetailsAnalyzerPanelKey,
params: {
resolverComponentInstanceID: `${TIMELINE_FLYOUT_KEY}-${timelineId}`,
banner: ANALYZER_PREVIEW_BANNER,
},
},
});
});
});
43 changes: 4 additions & 39 deletions ...ecurity_solution/public/flyout/document_details/shared/hooks/use_navigate_to_analyzer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,8 @@ import type { FlyoutPanelProps } from '@kbn/expandable-flyout';
import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
import type { Maybe } from '@kbn/timelines-plugin/common/search_strategy/common';
import { useKibana } from '../../../../common/lib/kibana';
import { useWhichFlyout } from './use_which_flyout';
import { ANALYZE_GRAPH_ID, ANALYZER_PREVIEW_BANNER } from '../../left/components/analyze_graph';
import {
DocumentDetailsLeftPanelKey,
DocumentDetailsRightPanelKey,
DocumentDetailsAnalyzerPanelKey,
} from '../constants/panel_keys';
import { Flyouts } from '../constants/flyouts';
import { isTimelineScope } from '../../../../helpers';
import { ANALYZE_GRAPH_ID } from '../../left/components/analyze_graph';
import { DocumentDetailsLeftPanelKey, DocumentDetailsRightPanelKey } from '../constants/panel_keys';
import { DocumentEventTypes } from '../../../../common/lib/telemetry';

export interface UseNavigateToAnalyzerParams {
Expand Down Expand Up @@ -58,12 +51,7 @@ export const useNavigateToAnalyzer = ({
scopeId,
}: UseNavigateToAnalyzerParams): UseNavigateToAnalyzerResult => {
const { telemetry } = useKibana().services;
const { openLeftPanel, openPreviewPanel, openFlyout } = useExpandableFlyoutApi();
let key = useWhichFlyout() ?? 'memory';

if (!isFlyoutOpen) {
key = isTimelineScope(scopeId) ? Flyouts.timeline : Flyouts.securitySolution;
}
const { openLeftPanel, openFlyout } = useExpandableFlyoutApi();

const right: FlyoutPanelProps = useMemo(
() => ({
Expand Down Expand Up @@ -93,21 +81,9 @@ export const useNavigateToAnalyzer = ({
[eventId, indexName, scopeId]
);

const preview: FlyoutPanelProps = useMemo(
() => ({
id: DocumentDetailsAnalyzerPanelKey,
params: {
resolverComponentInstanceID: `${key}-${scopeId}`,
banner: ANALYZER_PREVIEW_BANNER,
},
}),
[key, scopeId]
);

const navigateToAnalyzer = useCallback(() => {
if (isFlyoutOpen) {
openLeftPanel(left);
openPreviewPanel(preview);
telemetry.reportEvent(DocumentEventTypes.DetailsFlyoutTabClicked, {
location: scopeId,
panel: 'left',
Expand All @@ -117,24 +93,13 @@ export const useNavigateToAnalyzer = ({
openFlyout({
right,
left,
preview,
});
telemetry.reportEvent(DocumentEventTypes.DetailsFlyoutOpened, {
location: scopeId,
panel: 'left',
});
}
}, [
openFlyout,
openLeftPanel,
openPreviewPanel,
right,
left,
preview,
scopeId,
telemetry,
isFlyoutOpen,
]);
}, [openFlyout, openLeftPanel, right, left, scopeId, telemetry, isFlyoutOpen]);

return useMemo(() => ({ navigateToAnalyzer }), [navigateToAnalyzer]);
};