-
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
79e7316
commit 171a9ac
Showing
26 changed files
with
997 additions
and
151 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
37 changes: 37 additions & 0 deletions
37
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,37 @@ | ||
| /* | ||
| * 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[]; | ||
| } | ||
|
|
||
| /** | ||
| * Document details expandable flyout right section, that will display the content | ||
| * of the overview, table and json tabs. | ||
| */ | ||
| 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'; |
146 changes: 146 additions & 0 deletions
146
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,146 @@ | ||
| /* | ||
| * 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; | ||
| /** | ||
| * 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; | ||
| /** | ||
| * | ||
| */ | ||
| scopeId: string; | ||
| /** | ||
| * index used within the SessionView component | ||
| */ | ||
| index: string; | ||
| /** | ||
| * | ||
| */ | ||
| sessionEntityId: string; | ||
| /** | ||
| * | ||
| */ | ||
| sessionStartTime: string; | ||
| /** | ||
| * | ||
| */ | ||
| 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.