diff --git a/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx b/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx index 1951ff3a9e774..cd122f44b8222 100644 --- a/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx +++ b/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx @@ -219,31 +219,17 @@ export class Simulator { } /** - * An element with a list of all nodes. + * The titles of the links that select a node in the node list view. */ - public nodeListElement(): ReactWrapper { - return this.domNodes('[data-test-subj="resolver:node-list"]'); + public nodeListNodeLinkText(): ReactWrapper { + return this.domNodes('[data-test-subj="resolver:node-list:node-link:title"]'); } /** - * Return the items in the node list (the default panel view.) + * The icons in the links that select a node in the node list view. */ - public nodeListItems(): ReactWrapper { - return this.domNodes('[data-test-subj="resolver:node-list:item"]'); - } - - /** - * The links that select a node in the node list view. - */ - public nodeListNodeLinks(): ReactWrapper { - return this.domNodes('[data-test-subj="resolver:node-list:node-link"]'); - } - - /** - * The element containing the details for the selected node. - */ - public nodeDetailElement(): ReactWrapper { - return this.domNodes('[data-test-subj="resolver:node-detail"]'); + public nodeListNodeLinkIcons(): ReactWrapper { + return this.domNodes('[data-test-subj="resolver:node-list:node-link:icon"]'); } /** @@ -261,17 +247,10 @@ export class Simulator { } /** - * The details of the selected node are shown in a description list. This returns the title elements of the description list. + * The icon element for the node detail title. */ - private nodeDetailEntryTitle(): ReactWrapper { - return this.domNodes('[data-test-subj="resolver:node-detail:entry-title"]'); - } - - /** - * The details of the selected node are shown in a description list. This returns the description elements of the description list. - */ - private nodeDetailEntryDescription(): ReactWrapper { - return this.domNodes('[data-test-subj="resolver:node-detail:entry-description"]'); + public nodeDetailViewTitleIcon(): ReactWrapper { + return this.domNodes('[data-test-subj="resolver:node-detail:title-icon"]'); } /** @@ -287,8 +266,14 @@ export class Simulator { * The titles and descriptions (as text) from the node detail panel. */ public nodeDetailDescriptionListEntries(): Array<[string, string]> { - const titles = this.nodeDetailEntryTitle(); - const descriptions = this.nodeDetailEntryDescription(); + /** + * The details of the selected node are shown in a description list. This returns the title elements of the description list. + */ + const titles = this.domNodes('[data-test-subj="resolver:node-detail:entry-title"]'); + /** + * The details of the selected node are shown in a description list. This returns the description elements of the description list. + */ + const descriptions = this.domNodes('[data-test-subj="resolver:node-detail:entry-description"]'); const entries: Array<[string, string]> = []; for (let index = 0; index < Math.min(titles.length, descriptions.length); index++) { const title = titles.at(index).text(); diff --git a/x-pack/plugins/security_solution/public/resolver/view/assets.tsx b/x-pack/plugins/security_solution/public/resolver/view/assets.tsx index fc4a9daf17ad1..6962d300f7072 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/assets.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/assets.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import React, { memo } from 'react'; import euiThemeAmsterdamDark from '@elastic/eui/dist/eui_theme_amsterdam_dark.json'; import euiThemeAmsterdamLight from '@elastic/eui/dist/eui_theme_amsterdam_light.json'; @@ -11,7 +13,7 @@ import { htmlIdGenerator, ButtonColor } from '@elastic/eui'; import styled from 'styled-components'; import { i18n } from '@kbn/i18n'; import { useUiSetting } from '../../common/lib/kibana'; -import { DEFAULT_DARK_MODE } from '../../../common/constants'; +import { DEFAULT_DARK_MODE as defaultDarkMode } from '../../../common/constants'; import { ResolverProcessType } from '../types'; type ResolverColorNames = @@ -141,8 +143,6 @@ const PaintServers = memo(({ isDarkMode }: { isDarkMode: boolean }) => ( )); -PaintServers.displayName = 'PaintServers'; - /** * Ids of symbols to be linked by elements */ @@ -376,8 +376,6 @@ const SymbolsAndShapes = memo(({ isDarkMode }: { isDarkMode: boolean }) => ( )); -SymbolsAndShapes.displayName = 'SymbolsAndShapes'; - /** * This `` element is used to define the reusable assets for the Resolver * It confers several advantages, including but not limited to: @@ -386,7 +384,7 @@ SymbolsAndShapes.displayName = 'SymbolsAndShapes'; * 3. `` elements can be handled by compositor (faster) */ const SymbolDefinitionsComponent = memo(({ className }: { className?: string }) => { - const isDarkMode = useUiSetting(DEFAULT_DARK_MODE); + const isDarkMode = useUiSetting(defaultDarkMode); return ( @@ -397,8 +395,6 @@ const SymbolDefinitionsComponent = memo(({ className }: { className?: string }) ); }); -SymbolDefinitionsComponent.displayName = 'SymbolDefinitions'; - export const SymbolDefinitions = styled(SymbolDefinitionsComponent)` position: absolute; left: 100%; @@ -424,7 +420,7 @@ export const useResolverTheme = (): { nodeAssets: NodeStyleMap; cubeAssetsForNode: (isProcessTerimnated: boolean, isProcessTrigger: boolean) => NodeStyleConfig; } => { - const isDarkMode = useUiSetting(DEFAULT_DARK_MODE); + const isDarkMode = useUiSetting(defaultDarkMode); const theme = isDarkMode ? euiThemeAmsterdamDark : euiThemeAmsterdamLight; const getThemedOption = (lightOption: string, darkOption: string): string => { diff --git a/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx b/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx index 91d29b4f743fe..38a921078b38b 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx @@ -71,8 +71,9 @@ describe('Resolver, when analyzing a tree that has no ancestors and 2 children', }); }); - it(`should show the node list`, async () => { - await expect(simulator.map(() => simulator.nodeListElement().length)).toYieldEqualTo(1); + it(`should show links to the 3 nodes (with icons) in the node list.`, async () => { + await expect(simulator.map(() => simulator.nodeListNodeLinkText().length)).toYieldEqualTo(3); + await expect(simulator.map(() => simulator.nodeListNodeLinkIcons().length)).toYieldEqualTo(3); }); describe("when the second child node's first button has been clicked", () => { diff --git a/x-pack/plugins/security_solution/public/resolver/view/panel.test.tsx b/x-pack/plugins/security_solution/public/resolver/view/panel.test.tsx index 794b8b550a210..4d391a6c9ce59 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panel.test.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panel.test.tsx @@ -71,16 +71,28 @@ describe(`Resolver: when analyzing a tree with no ancestors and two children, an }); it('should show the node details for the origin', async () => { await expect( - simulator().map(() => simulator().nodeDetailDescriptionListEntries()) - ).toYieldEqualTo([ - ['process.executable', 'executable'], - ['process.pid', '0'], - ['user.name', 'user.name'], - ['user.domain', 'user.domain'], - ['process.parent.pid', '0'], - ['process.hash.md5', 'hash.md5'], - ['process.args', 'args'], - ]); + simulator().map(() => { + const titleWrapper = simulator().nodeDetailViewTitle(); + const titleIconWrapper = simulator().nodeDetailViewTitleIcon(); + return { + title: titleWrapper.exists() ? titleWrapper.text() : null, + titleIcon: titleIconWrapper.exists() ? titleIconWrapper.text() : null, + detailEntries: simulator().nodeDetailDescriptionListEntries(), + }; + }) + ).toYieldEqualTo({ + title: 'c', + titleIcon: 'Running Process', + detailEntries: [ + ['process.executable', 'executable'], + ['process.pid', '0'], + ['user.name', 'user.name'], + ['user.domain', 'user.domain'], + ['process.parent.pid', '0'], + ['process.hash.md5', 'hash.md5'], + ['process.args', 'args'], + ], + }); }); }); @@ -109,19 +121,21 @@ describe(`Resolver: when analyzing a tree with no ancestors and two children, an }); }); - it('should show the node list', async () => { - await expect(simulator().map(() => simulator().nodeListElement().length)).toYieldEqualTo(1); + it('should have 3 nodes (with icons) in the node list', async () => { + await expect(simulator().map(() => simulator().nodeListNodeLinkText().length)).toYieldEqualTo( + 3 + ); + await expect(simulator().map(() => simulator().nodeListNodeLinkIcons().length)).toYieldEqualTo( + 3 + ); }); - it('should have 3 nodes in the node list', async () => { - await expect(simulator().map(() => simulator().nodeListItems().length)).toYieldEqualTo(3); - }); - describe('when there is an item in the node list and it has been clicked', () => { + describe('when there is an item in the node list and its text has been clicked', () => { beforeEach(async () => { - const nodeListItems = await simulator().resolveWrapper(() => simulator().nodeListItems()); - expect(nodeListItems && nodeListItems.length).toBeTruthy(); - if (nodeListItems) { - nodeListItems.first().find('button').simulate('click'); + const nodeLinks = await simulator().resolveWrapper(() => simulator().nodeListNodeLinkText()); + expect(nodeLinks).toBeTruthy(); + if (nodeLinks) { + nodeLinks.first().simulate('click'); } }); it('should show the details for the first node', async () => { @@ -155,7 +169,7 @@ describe(`Resolver: when analyzing a tree with no ancestors and two children, an await expect( simulator().map(() => { return simulator() - .nodeListNodeLinks() + .nodeListNodeLinkText() .map((node) => node.text()); }) ).toYieldEqualTo(['c', 'd', 'e']); diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/cube_for_process.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/cube_for_process.tsx index 90453b845faad..b7c8ed0dfd7db 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/cube_for_process.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/cube_for_process.tsx @@ -4,41 +4,55 @@ * you may not use this file except in compliance with the Elastic License. */ +import styled from 'styled-components'; + +import { i18n } from '@kbn/i18n'; + +/* eslint-disable react/display-name */ + import React, { memo } from 'react'; import { useResolverTheme } from '../assets'; /** - * During user testing, one user indicated they wanted to see stronger visual relationships between - * Nodes on the graph and what's in the table. Using the same symbol in both places (as below) could help with that. + * Icon representing a process node. */ -export const CubeForProcess = memo(function CubeForProcess({ - isProcessTerminated, +export const CubeForProcess = memo(function ({ + running, + 'data-test-subj': dataTestSubj, }: { - isProcessTerminated: boolean; + 'data-test-subj'?: string; + /** + * True if the process represented by the node is still running. + */ + running: boolean; }) { const { cubeAssetsForNode } = useResolverTheme(); - const { cubeSymbol } = cubeAssetsForNode(isProcessTerminated, false); + const { cubeSymbol } = cubeAssetsForNode(!running, false); return ( - <> - - - - + + + {i18n.translate('xpack.securitySolution.resolver.node_icon', { + defaultMessage: '{running, select, true {Running Process} false {Terminated Process}}', + values: { running }, + })} + + + ); }); + +const StyledSVG = styled.svg` + position: relative; + top: 0.4em; + margin-right: 0.25em; +`; diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx index 4ccf18416bef6..adfcc4cc44d1f 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx @@ -156,20 +156,23 @@ export const ProcessDetails = memo(function ProcessDetails({ return cubeAssetsForNode(isProcessTerminated, false); }, [processEvent, cubeAssetsForNode, isProcessTerminated]); - const titleId = useMemo(() => htmlIdGenerator('resolverTable')(), []); + const titleID = useMemo(() => htmlIdGenerator('resolverTable')(), []); return ( <> -

- - {processName} +

+ + {processName}

- {descriptionText} + {descriptionText} diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx index eba3e94ab76f9..1be4b4b055243 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx @@ -110,10 +110,12 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({ crumbEvent: '', }); }} - data-test-subj="resolver:node-list:node-link" > - - {name} + + {name} ); },