-
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] - Timeline UI refactor (#168230)
## Summary This PR implements many small refactors in the Timeline UI. I have listed all the changes below which can help you while you are desk testing. ### EQL Bar |Before|After| |--|--| ||| ### Timeline Title Bar / Bottom Bar Below screenshots show how timeline bottom bar has changed. Things to note: - Favorite button is now just an icon with the title. User can simply click on it to favorite /un-favorite a timeline |Before | After| |---|---| ||| Below screenshots show how timeline title bar has changed. Things to note : - A new timeline action menu has been added to right to timeline title bar. - All actions such as create a new timeline, a new timeline template. adding timeline to case, etc can be performed from here. |Before|After| |---|---| ||| - On the left side of the Timeline Header below are the changes. - Timeline Title is not longer a button/link, so timeline cannot be closed by clicking on that. - ⊕ action menu is not longer available and corresponding actions are available in above screenshots. |Before|After| |--|--| ||| ### Timeline Header Panel Below timeline header panel has been completely removed.  ### Changes on how Data provider works 1. Data provider is by-default hidden in normal timeline but visible in template timeline. 2. Data provider can be toggled by the user on-demand. 3. Data Provider will automatically become visible if user wants to put a data grid column value in data provider and stars dragging it. Below videos shows how that interaction works. https://github.com/elastic/kibana/assets/7485038/c7232596-40aa-4687-9fcf-e4a707be8a76 ### KPI This PR also changes how KPIs are visible in empty and populated state. |Before|After| |---|---| ||| KPI bar has been completely removed till this issue resolves: #171569 ### Query Bar In contrast to current layout of the query bar, DataView picker, Query bar and Date Picker has been brought in the same line. This was done in an effort to make it uniform in looks w.r.t the global query bar. --------------- #### Before  -------------- #### After All the highlighted components are in the same line now + A button to toggle Data Provider ( as explained in Data Porvider/QueryBuilder Section) has also been added.  ### Spacing Uniformity In the existing version of timeline, spacing is different at many places. This PR aims to bring some uniformity to those spacing decisions ( primarily in EQL and Query Tab). The changes are very minor visually, please feel free to find and report any discrepancies. ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <[email protected]>
- Loading branch information
1 parent
f7fa846
commit 72d2457
Showing
108 changed files
with
3,229 additions
and
2,142 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
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
2 changes: 1 addition & 1 deletion
2
...curity_solution/public/common/components/header_section/__snapshots__/index.test.tsx.snap
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
139 changes: 139 additions & 0 deletions
139
...ck/plugins/security_solution/public/common/components/sourcerer/alerts_sourcerer.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,139 @@ | ||
| /* | ||
| * 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 { Sourcerer } from '.'; | ||
| import { sourcererModel } from '../../store/sourcerer'; | ||
| import { | ||
| createSecuritySolutionStorageMock, | ||
| kibanaObservable, | ||
| mockGlobalState, | ||
| SUB_PLUGINS_REDUCER, | ||
| TestProviders, | ||
| } from '../../mock'; | ||
| import { createStore } from '../../store'; | ||
| import { useSourcererDataView } from '../../containers/sourcerer'; | ||
| import { useSignalHelpers } from '../../containers/sourcerer/use_signal_helpers'; | ||
| import { fireEvent, render, screen, waitFor } from '@testing-library/react'; | ||
|
|
||
| const mockDispatch = jest.fn(); | ||
|
|
||
| jest.mock('../../containers/sourcerer'); | ||
| jest.mock('../../containers/sourcerer/use_signal_helpers'); | ||
| const mockUseUpdateDataView = jest.fn().mockReturnValue(() => true); | ||
| jest.mock('./use_update_data_view', () => ({ | ||
| useUpdateDataView: () => mockUseUpdateDataView, | ||
| })); | ||
| jest.mock('react-redux', () => { | ||
| const original = jest.requireActual('react-redux'); | ||
|
|
||
| return { | ||
| ...original, | ||
| useDispatch: () => mockDispatch, | ||
| }; | ||
| }); | ||
|
|
||
| jest.mock('@kbn/kibana-react-plugin/public', () => { | ||
| const original = jest.requireActual('@kbn/kibana-react-plugin/public'); | ||
|
|
||
| return { | ||
| ...original, | ||
| toMountPoint: jest.fn(), | ||
| }; | ||
| }); | ||
|
|
||
| const mockUpdateUrlParam = jest.fn(); | ||
| jest.mock('../../utils/global_query_string', () => { | ||
| const original = jest.requireActual('../../utils/global_query_string'); | ||
|
|
||
| return { | ||
| ...original, | ||
| useUpdateUrlParam: () => mockUpdateUrlParam, | ||
| }; | ||
| }); | ||
|
|
||
| let store: ReturnType<typeof createStore>; | ||
| const sourcererDataView = { | ||
| indicesExist: true, | ||
| loading: false, | ||
| }; | ||
| describe('sourcerer on alerts page or rules details page', () => { | ||
| const { storage } = createSecuritySolutionStorageMock(); | ||
| store = createStore(mockGlobalState, SUB_PLUGINS_REDUCER, kibanaObservable, storage); | ||
| const testProps = { | ||
| scope: sourcererModel.SourcererScopeName.detections, | ||
| }; | ||
|
|
||
| const pollForSignalIndexMock = jest.fn(); | ||
|
|
||
| beforeEach(async () => { | ||
| jest.clearAllMocks(); | ||
|
|
||
| (useSignalHelpers as jest.Mock).mockReturnValue({ | ||
| pollForSignalIndex: pollForSignalIndexMock, | ||
| signalIndexNeedsInit: false, | ||
| }); | ||
|
|
||
| (useSourcererDataView as jest.Mock).mockReturnValue({ | ||
| ...sourcererDataView, | ||
| indicesExist: true, | ||
| }); | ||
|
|
||
| render( | ||
| <TestProviders store={store}> | ||
| <Sourcerer {...testProps} /> | ||
| </TestProviders> | ||
| ); | ||
|
|
||
| fireEvent.click(screen.getByTestId('sourcerer-trigger')); | ||
| await waitFor(() => { | ||
| expect(screen.getByTestId('sourcerer-advanced-options-toggle')).toBeVisible(); | ||
| }); | ||
| fireEvent.click(screen.getByTestId('sourcerer-advanced-options-toggle')); | ||
| }); | ||
|
|
||
| it('renders an alerts badge in sourcerer button', () => { | ||
| expect(screen.getByTestId('sourcerer-advanced-options-toggle')).toHaveTextContent( | ||
| /Advanced options/ | ||
| ); | ||
| }); | ||
|
|
||
| it('renders a callout', () => { | ||
| expect(screen.getByTestId('sourcerer-callout')).toHaveTextContent( | ||
| 'Data view cannot be modified on this page' | ||
| ); | ||
| }); | ||
|
|
||
| it('disable data view selector', () => { | ||
| expect(screen.getByTestId('sourcerer-select')).toBeDisabled(); | ||
| }); | ||
|
|
||
| it('data view selector is default to Security Data View', () => { | ||
| expect(screen.getByTestId('sourcerer-select')).toHaveTextContent(/security data view/i); | ||
| }); | ||
|
|
||
| it('renders an alert badge in data view selector', () => { | ||
| expect(screen.getByTestId('security-alerts-option-badge')).toHaveTextContent('Alerts'); | ||
| }); | ||
|
|
||
| it('disable index pattern selector', () => { | ||
| expect(screen.getByTestId('sourcerer-combo-box')).toHaveAttribute('disabled'); | ||
| }); | ||
|
|
||
| it('shows signal index as index pattern option', () => { | ||
| expect(screen.getByTestId('euiComboBoxPill')).toHaveTextContent('.siem-signals-spacename'); | ||
| }); | ||
|
|
||
| it('does not render reset button', () => { | ||
| expect(screen.queryByTestId('sourcerer-reset')).toBeFalsy(); | ||
| }); | ||
|
|
||
| it('does not render save button', () => { | ||
| expect(screen.queryByTestId('sourcerer-save')).toBeFalsy(); | ||
| }); | ||
| }); |
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
Oops, something went wrong.