-
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.
Add Host risk information flyout to Host risk KPI panel (#121075)
* Create HoverVisibilityContainer component * Add Host risk information flyout to Host rik KPI panel * Update snapshot test * Fix cypress test * Code review improvements Co-authored-by: Kibana Machine <[email protected]>
- Loading branch information
1 parent
e1a86ba
commit 653cbe1
Showing
14 changed files
with
2,875 additions
and
2,480 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
54 changes: 54 additions & 0 deletions
54
...gins/security_solution/public/common/components/hover_visibility_container/index.test.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,54 @@ | ||
| /* | ||
| * 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 { mount } from 'enzyme'; | ||
| import React from 'react'; | ||
|
|
||
| import { TestProviders } from '../../mock'; | ||
|
|
||
| import { HoverVisibilityContainer } from '.'; | ||
|
|
||
| describe('HoverVisibilityContainer', () => { | ||
| const targetClass1 = 'Component1'; | ||
| const targetClass2 = 'Component2'; | ||
| const Component1 = () => <div className={targetClass1} />; | ||
| const Component2 = () => <div className={targetClass2} />; | ||
|
|
||
| test('it renders a transparent inspect button by default', () => { | ||
| const wrapper = mount( | ||
| <TestProviders> | ||
| <HoverVisibilityContainer targetClassNames={[targetClass1, targetClass2]}> | ||
| <Component1 /> | ||
| <Component2 /> | ||
| </HoverVisibilityContainer> | ||
| </TestProviders> | ||
| ); | ||
| expect(wrapper.find(`HoverVisibilityContainer`)).toHaveStyleRule('opacity', '0', { | ||
| modifier: `.${targetClass1}`, | ||
| }); | ||
| expect(wrapper.find(`HoverVisibilityContainer`)).toHaveStyleRule('opacity', '1', { | ||
| modifier: `:hover .${targetClass2}`, | ||
| }); | ||
| }); | ||
|
|
||
| test('it renders an opaque inspect button when it has mouse focus', () => { | ||
| const wrapper = mount( | ||
| <TestProviders> | ||
| <HoverVisibilityContainer targetClassNames={[targetClass1, targetClass2]}> | ||
| <Component1 /> | ||
| <Component2 /> | ||
| </HoverVisibilityContainer> | ||
| </TestProviders> | ||
| ); | ||
| expect(wrapper.find(`HoverVisibilityContainer`)).toHaveStyleRule('opacity', '1', { | ||
| modifier: `:hover .${targetClass1}`, | ||
| }); | ||
| expect(wrapper.find(`HoverVisibilityContainer`)).toHaveStyleRule('opacity', '1', { | ||
| modifier: `:hover .${targetClass2}`, | ||
| }); | ||
| }); | ||
| }); |
54 changes: 54 additions & 0 deletions
54
...k/plugins/security_solution/public/common/components/hover_visibility_container/index.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,54 @@ | ||
| /* | ||
| * 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 from 'react'; | ||
| import styled, { css } from 'styled-components'; | ||
| import { getOr } from 'lodash/fp'; | ||
|
|
||
| const StyledDiv = styled.div<{ targetClassNames: string[] }>` | ||
| width: 100%; | ||
| display: flex; | ||
| flex-grow: 1; | ||
| > * { | ||
| max-width: 100%; | ||
| } | ||
| ${({ targetClassNames }) => | ||
| css` | ||
| ${targetClassNames.map((cn) => `.${cn}`).join(', ')} { | ||
| pointer-events: none; | ||
| opacity: 0; | ||
| transition: opacity ${(props) => getOr(250, 'theme.eui.euiAnimSpeedNormal', props)} ease; | ||
| } | ||
| ${targetClassNames.map((cn) => `&:hover .${cn}`).join(', ')} { | ||
| pointer-events: auto; | ||
| opacity: 1; | ||
| } | ||
| `} | ||
| `; | ||
|
|
||
| interface HoverVisibilityContainerProps { | ||
| show?: boolean; | ||
| children: React.ReactNode; | ||
| targetClassNames: string[]; | ||
| } | ||
|
|
||
| export const HoverVisibilityContainer = React.memo<HoverVisibilityContainerProps>( | ||
| ({ show = true, targetClassNames, children }) => { | ||
| if (!show) return <>{children}</>; | ||
|
|
||
| return ( | ||
| <StyledDiv data-test-subj="hoverVisibilityContainer" targetClassNames={targetClassNames}> | ||
| {children} | ||
| </StyledDiv> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| HoverVisibilityContainer.displayName = 'HoverVisibilityContainer'; |
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
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
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
33 changes: 33 additions & 0 deletions
33
...ck/plugins/security_solution/public/hosts/components/host_risk_information/index.test.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,33 @@ | ||
| /* | ||
| * 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 { render, fireEvent } from '@testing-library/react'; | ||
| import React from 'react'; | ||
| import { HostRiskInformation } from '.'; | ||
| import { TestProviders } from '../../../common/mock'; | ||
|
|
||
| describe('Host Risk Flyout', () => { | ||
| it('renders', () => { | ||
| const { queryByTestId } = render(<HostRiskInformation />); | ||
|
|
||
| expect(queryByTestId('open-risk-information-flyout')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('opens and displays table with 5 rows', () => { | ||
| const NUMBER_OF_ROWS = 1 + 5; // 1 header row + 5 severity rows | ||
| const { getByTestId, queryByTestId, queryAllByRole } = render( | ||
| <TestProviders> | ||
| <HostRiskInformation /> | ||
| </TestProviders> | ||
| ); | ||
|
|
||
| fireEvent.click(getByTestId('open-risk-information-flyout')); | ||
|
|
||
| expect(queryByTestId('risk-information-table')).toBeInTheDocument(); | ||
| expect(queryAllByRole('row')).toHaveLength(NUMBER_OF_ROWS); | ||
| }); | ||
| }); |
Oops, something went wrong.