forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Discover] Move total hits counter from histogram to grid area. New c…
…ontrols in histogram. (elastic#171638) - Closes elastic#168825 - Closes elastic#171610 - Closes elastic#167427 - Partially addresses elastic#165192 This PR moves the total hits counter closer to the grid, updates histogram controls and introduces new panel toggle buttons for toggling fields sidebar and histogram. <img width="500" alt="Screenshot 2023-12-05 at 15 37 20" src="https://github.com/elastic/kibana/assets/1415710/5b9bd771-1052-4205-849f-18c21cc299b8"> <img width="500" alt="Screenshot 2023-12-05 at 15 37 29" src="https://github.com/elastic/kibana/assets/1415710/e5941b27-c497-4d7e-b461-68b66931475a"> <img width="500" alt="Screenshot 2023-12-05 at 15 37 37" src="https://github.com/elastic/kibana/assets/1415710/97abd32e-9ff2-4d9a-b7e7-b9d6d9cf64db"> <img width="500" alt="Screenshot 2023-12-05 at 15 37 50" src="https://github.com/elastic/kibana/assets/1415710/10f2b4f4-ec37-41c3-b78b-78c64e14d655"> <img width="400" alt="Screenshot 2023-12-05 at 15 37 59" src="https://github.com/elastic/kibana/assets/1415710/ef2e28b2-f6ba-4ccb-aea4-3946ba2d5839"> <img width="300" alt="Screenshot 2023-12-05 at 15 38 05" src="https://github.com/elastic/kibana/assets/1415710/07901ede-0bcb-46a6-a398-4562189fd54f"> <img width="500" alt="Screenshot 2023-12-05 at 15 40 38" src="https://github.com/elastic/kibana/assets/1415710/17830115-2111-4b8f-ae40-7b5875c06879"> <img width="500" alt="Screenshot 2023-12-05 at 15 40 56" src="https://github.com/elastic/kibana/assets/1415710/975d475b-280b-495a-b7b7-31c7ade5f21e"> <img width="500" alt="Screenshot 2023-12-05 at 15 43 08" src="https://github.com/elastic/kibana/assets/1415710/38b6053a-e260-48d8-9591-3f3409df2876"> When testing, please check collapsing/expanding the fields sidebar and histogram. Also for ES|QL mode with suggestions, legacy table, no results and error prompt, Field Statistics tab, data views without a time field, light/dark themes. - [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) - [x] [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 - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co> Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
- Loading branch information
Showing
82 changed files
with
2,434 additions
and
1,494 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
66 changes: 66 additions & 0 deletions
66
...fied-field-list/src/containers/unified_field_list_sidebar/get_sidebar_visibility.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,66 @@ | ||
| /* | ||
| * 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 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| import { act } from '@testing-library/react-hooks'; | ||
| import { getSidebarVisibility } from './get_sidebar_visibility'; | ||
|
|
||
| const localStorageKey = 'test-sidebar-visibility'; | ||
|
|
||
| describe('UnifiedFieldList getSidebarVisibility', () => { | ||
| beforeEach(() => { | ||
| localStorage.removeItem(localStorageKey); | ||
| }); | ||
|
|
||
| it('should toggle correctly', async () => { | ||
| const state = getSidebarVisibility({ localStorageKey }); | ||
|
|
||
| expect(state.isCollapsed$.getValue()).toBe(false); | ||
|
|
||
| act(() => { | ||
| state.toggle(true); | ||
| }); | ||
|
|
||
| expect(state.isCollapsed$.getValue()).toBe(true); | ||
| expect(localStorage.getItem(localStorageKey)).toBe('true'); | ||
|
|
||
| act(() => { | ||
| state.toggle(false); | ||
| }); | ||
|
|
||
| expect(state.isCollapsed$.getValue()).toBe(false); | ||
| expect(localStorage.getItem(localStorageKey)).toBe('false'); | ||
| }); | ||
|
|
||
| it('should restore collapsed state and expand from it', async () => { | ||
| localStorage.setItem(localStorageKey, 'true'); | ||
|
|
||
| const state = getSidebarVisibility({ localStorageKey }); | ||
|
|
||
| expect(state.isCollapsed$.getValue()).toBe(true); | ||
|
|
||
| act(() => { | ||
| state.toggle(false); | ||
| }); | ||
|
|
||
| expect(state.isCollapsed$.getValue()).toBe(false); | ||
| expect(localStorage.getItem(localStorageKey)).toBe('false'); | ||
| }); | ||
|
|
||
| it('should not persist if local storage key is not defined', async () => { | ||
| const state = getSidebarVisibility({ localStorageKey: undefined }); | ||
|
|
||
| expect(state.isCollapsed$.getValue()).toBe(false); | ||
|
|
||
| act(() => { | ||
| state.toggle(true); | ||
| }); | ||
|
|
||
| expect(state.isCollapsed$.getValue()).toBe(true); | ||
| expect(localStorage.getItem(localStorageKey)).toBe(null); | ||
| }); | ||
| }); |
59 changes: 59 additions & 0 deletions
59
...bn-unified-field-list/src/containers/unified_field_list_sidebar/get_sidebar_visibility.ts
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,59 @@ | ||
| /* | ||
| * 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 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| import { BehaviorSubject } from 'rxjs'; | ||
|
|
||
| export interface SidebarVisibility { | ||
| isCollapsed$: BehaviorSubject<boolean>; | ||
| toggle: (isCollapsed: boolean) => void; | ||
| } | ||
|
|
||
| export interface GetSidebarStateParams { | ||
| localStorageKey?: string; | ||
| } | ||
|
|
||
| /** | ||
| * For managing sidebar visibility state | ||
| * @param localStorageKey | ||
| */ | ||
| export const getSidebarVisibility = ({ | ||
| localStorageKey, | ||
| }: GetSidebarStateParams): SidebarVisibility => { | ||
| const isCollapsed$ = new BehaviorSubject<boolean>( | ||
| localStorageKey ? getIsCollapsed(localStorageKey) : false | ||
| ); | ||
|
|
||
| return { | ||
| isCollapsed$, | ||
| toggle: (isCollapsed) => { | ||
| isCollapsed$.next(isCollapsed); | ||
| if (localStorageKey) { | ||
| setIsCollapsed(localStorageKey, isCollapsed); | ||
| } | ||
| }, | ||
| }; | ||
| }; | ||
|
|
||
| function getIsCollapsed(localStorageKey: string) { | ||
| let isCollapsed = false; | ||
| try { | ||
| isCollapsed = localStorage?.getItem(localStorageKey) === 'true'; | ||
| } catch { | ||
| // nothing | ||
| } | ||
|
|
||
| return isCollapsed; | ||
| } | ||
|
|
||
| function setIsCollapsed(localStorageKey: string, isCollapsed: boolean) { | ||
| try { | ||
| localStorage?.setItem(localStorageKey, String(isCollapsed)); | ||
| } catch { | ||
| // nothing | ||
| } | ||
| } |
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.