-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Security Solution][Alert Details] - SessionView changes to render th…
…e detailed panel as a flyout preview panel
- Loading branch information
1 parent
e3877e0
commit 5107c10
Showing
22 changed files
with
975 additions
and
148 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
x-pack/plugins/security_solution/public/flyout/document_details/session_view/content.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import type { FC } from 'react'; | ||
| import React, { useMemo } from 'react'; | ||
| import type { SessionViewPanelPaths } from '.'; | ||
| import type { SessionViewPanelTabType } from './tabs'; | ||
| import { FlyoutBody } from '../../shared/components/flyout_body'; | ||
|
|
||
| export interface PanelContentProps { | ||
| /** | ||
| * Id of the tab selected in the parent component to display its content | ||
| */ | ||
| selectedTabId: SessionViewPanelPaths; | ||
| /** | ||
| * Tabs display right below the flyout's header | ||
| */ | ||
| tabs: SessionViewPanelTabType[]; | ||
| } | ||
|
|
||
| /** | ||
| * SessionView preview panel content, that renders the process, metadata and alerts tab contents. | ||
| */ | ||
| export const PanelContent: FC<PanelContentProps> = ({ selectedTabId, tabs }) => { | ||
| const selectedTabContent = useMemo(() => { | ||
| return tabs.find((tab) => tab.id === selectedTabId)?.content; | ||
| }, [selectedTabId, tabs]); | ||
|
|
||
| return <FlyoutBody>{selectedTabContent}</FlyoutBody>; | ||
| }; | ||
|
|
||
| PanelContent.displayName = 'PanelContent'; |
147 changes: 147 additions & 0 deletions
147
x-pack/plugins/security_solution/public/flyout/document_details/session_view/context.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React, { createContext, memo, useContext, useMemo } from 'react'; | ||
| import type { ProcessEvent } from '@kbn/session-view-plugin/common'; | ||
| import { FlyoutError } from '../../shared/components/flyout_error'; | ||
| import type { SessionViewPanelProps } from '.'; | ||
|
|
||
| export interface CustomProcess { | ||
| /** | ||
| * Id of the process | ||
| */ | ||
| id: string; | ||
| /** | ||
| * Details of the process (see implementation under getDetailsMemo here: x-pack/plugins/session_view/public/components/process_tree/hooks.ts) | ||
| */ | ||
| details: ProcessEvent; | ||
| /** | ||
| * Timestamp of the 'end' event (see implementation under getEndTime here x-pack/plugins/session_view/public/components/process_tree/hooks.ts) | ||
| */ | ||
| endTime: string; | ||
| } | ||
|
|
||
| export interface SessionViewPanelContext { | ||
| /** | ||
| * Id of the document that was initially being investigated in the expandable flyout. | ||
| * This context needs to store it as it is used within the SessionView preview panel to be able to reopen the left panel with the same document. | ||
| */ | ||
| eventId: string; | ||
| /** | ||
| * Index used when investigating the initial document in the expandable flyout. | ||
| * This context needs to store it as it is used within the SessionView preview panel to be able to reopen the left panel with the same document. | ||
| */ | ||
| indexName: string; | ||
| /** | ||
| * ScopeId used when investigating the initial document in the expandable flyout. | ||
| * This context needs to store it as it is used within the SessionView preview panel to be able to reopen the left panel with the same document. | ||
| */ | ||
| scopeId: string; | ||
| /** | ||
| * Store a subset of properties from the SessionView component. | ||
| * The original object had functions as well as recursive properties, which we should not store in the context. | ||
| */ | ||
| selectedProcess: CustomProcess | null; | ||
| /** | ||
| * index used within the SessionView component | ||
| */ | ||
| index: string; | ||
| /** | ||
| * sessionEntityId value used to correctly render the SessionView component | ||
| */ | ||
| sessionEntityId: string; | ||
| /** | ||
| * sessionStartTime value used to correctly render the SessionView component | ||
| */ | ||
| sessionStartTime: string; | ||
| /** | ||
| * investigatedAlertId value used to correctly render the SessionView component | ||
| */ | ||
| investigatedAlertId: string; | ||
| } | ||
|
|
||
| export const SessionViewPanelContext = createContext<SessionViewPanelContext | undefined>( | ||
| undefined | ||
| ); | ||
|
|
||
| export type SessionViewPanelProviderProps = { | ||
| /** | ||
| * React components to render | ||
| */ | ||
| children: React.ReactNode; | ||
| } & Partial<SessionViewPanelProps['params']>; | ||
|
|
||
| export const SessionViewPanelProvider = memo( | ||
| ({ | ||
| eventId, | ||
| indexName, | ||
| selectedProcess, | ||
| index, | ||
| sessionEntityId, | ||
| sessionStartTime, | ||
| scopeId, | ||
| investigatedAlertId, | ||
| children, | ||
| }: SessionViewPanelProviderProps) => { | ||
| const contextValue = useMemo( | ||
| () => | ||
| eventId && | ||
| indexName && | ||
| selectedProcess && | ||
| index && | ||
| sessionEntityId && | ||
| sessionStartTime && | ||
| scopeId && | ||
| investigatedAlertId | ||
| ? { | ||
| eventId, | ||
| indexName, | ||
| selectedProcess, | ||
| index, | ||
| sessionEntityId, | ||
| sessionStartTime, | ||
| scopeId, | ||
| investigatedAlertId, | ||
| } | ||
| : undefined, | ||
| [ | ||
| eventId, | ||
| indexName, | ||
| selectedProcess, | ||
| index, | ||
| sessionEntityId, | ||
| sessionStartTime, | ||
| scopeId, | ||
| investigatedAlertId, | ||
| ] | ||
| ); | ||
|
|
||
| if (!contextValue) { | ||
| return <FlyoutError />; | ||
| } | ||
|
|
||
| return ( | ||
| <SessionViewPanelContext.Provider value={contextValue}> | ||
| {children} | ||
| </SessionViewPanelContext.Provider> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| SessionViewPanelProvider.displayName = 'SessionViewPanelProvider'; | ||
|
|
||
| export const useSessionViewPanelContext = (): SessionViewPanelContext => { | ||
| const contextValue = useContext(SessionViewPanelContext); | ||
|
|
||
| if (!contextValue) { | ||
| throw new Error( | ||
| 'SessionViewPanelContext can only be used within SessionViewPanelContext provider' | ||
| ); | ||
| } | ||
|
|
||
| return contextValue; | ||
| }; |
Oops, something went wrong.