github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Infrastructure UI] Hosts view remove flyout state from the url after the flyout is closed (#155317)

Browse source 
Closes #154564

## Summary

This PR removes the flyout state from the URL if the flyout is closed
and set the default state if the flyout is open again

## Testing

- Open a single host flyout and change the tab/add filter or search (do
not close the flyout yet)
- Copy the URL and verify that you see the same flyout data in a new
browser tab/window
- Close the flyout
   - Check the URL (the flyout state should not be there)
- Copy the URL and verify that you see the flyout data is not there
(flyout is still closed and when it's open it has default state
(metadata page open)
- if there are any metadata filters applied they should still be part of
the unified search bar


https://user-images.githubusercontent.com/14139027/233397203-d99fc04a-a118-43f8-a43b-6b01d34ab3b8.mov
This commit is contained in:
jennypavlova 2023-04-24 12:17:37 +02:00 • committed by GitHub
parent 6fe3a674a7
commit f5034e60a5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

29
x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_host_flyout_open_url_state.ts
View file

@ -25,19 +25,29 @@ export const GET_DEFAULT_TABLE_PROPERTIES = {
const HOST_TABLE_PROPERTIES_URL_STATE_KEY = 'hostFlyoutOpen';
type Action = rt.TypeOf<typeof ActionRT>;
type SetNewHostFlyoutOpen = (newProps: Action) => void;
type SetNewHostFlyoutOpen = (newProp: Action) => void;
type SetNewHostFlyoutClose = () => void;
export const useHostFlyoutOpen = (): [HostFlyoutOpen, SetNewHostFlyoutOpen] => {
const [urlState, setUrlState] = useUrlState<HostFlyoutOpen>({
defaultState: GET_DEFAULT_TABLE_PROPERTIES,
export const useHostFlyoutOpen = (): [
HostFlyoutOpen,
SetNewHostFlyoutOpen,
SetNewHostFlyoutClose
] => {
const [urlState, setUrlState] = useUrlState<HostFlyoutUrl>({
defaultState: '',
decodeUrlState,
encodeUrlState,
urlStateKey: HOST_TABLE_PROPERTIES_URL_STATE_KEY,
});
const setHostFlyoutOpen = (newProps: Action) => setUrlState({ ...urlState, ...newProps });
const setHostFlyoutOpen = (newProps: Action) =>
typeof urlState !== 'string'
? setUrlState({ ...urlState, ...newProps })
: setUrlState({ ...GET_DEFAULT_TABLE_PROPERTIES, ...newProps });
return [urlState, setHostFlyoutOpen];
const setFlyoutClosed = () => setUrlState('');
return [urlState as HostFlyoutOpen, setHostFlyoutOpen, setFlyoutClosed];
};
const FlyoutTabIdRT = rt.union([rt.literal('metadata'), rt.literal('processes')]);
@ -74,9 +84,12 @@ const HostFlyoutOpenRT = rt.type({
metadataSearch: SearchFilterRT,
});
const HostFlyoutUrlRT = rt.union([HostFlyoutOpenRT, rt.string]);
type HostFlyoutUrl = rt.TypeOf<typeof HostFlyoutUrlRT>;
type HostFlyoutOpen = rt.TypeOf<typeof HostFlyoutOpenRT>;
const encodeUrlState = HostFlyoutOpenRT.encode;
const encodeUrlState = HostFlyoutUrlRT.encode;
const decodeUrlState = (value: unknown) => {
return pipe(HostFlyoutOpenRT.decode(value), fold(constant(undefined), identity));
return pipe(HostFlyoutUrlRT.decode(value), fold(constant('undefined'), identity));
};

8
x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx
View file

@ -125,9 +125,9 @@ export const useHostsTable = (nodes: SnapshotNode[], { time }: HostTableParams)
services: { telemetry },
} = useKibanaContextForPlugin();
const [hostFlyoutOpen, setHostFlyoutOpen] = useHostFlyoutOpen();
const [hostFlyoutOpen, setHostFlyoutOpen, setFlyoutClosed] = useHostFlyoutOpen();
const closeFlyout = () => setHostFlyoutOpen({ clickedItemId: '' });
const closeFlyout = () => setFlyoutClosed();
const reportHostEntryClick = useCallback(
({ name, cloudProvider }: HostNodeRow['title']) => {
@ -166,7 +166,7 @@ export const useHostsTable = (nodes: SnapshotNode[], { time }: HostTableParams)
clickedItemId: id,
});
if (id === hostFlyoutOpen.clickedItemId) {
setHostFlyoutOpen({ clickedItemId: '' });
setFlyoutClosed();
} else {
setHostFlyoutOpen({ clickedItemId: id });
}
@ -244,7 +244,7 @@ export const useHostsTable = (nodes: SnapshotNode[], { time }: HostTableParams)
align: 'right',
},
],
[hostFlyoutOpen.clickedItemId, reportHostEntryClick, setHostFlyoutOpen, time]
[hostFlyoutOpen.clickedItemId, reportHostEntryClick, setFlyoutClosed, setHostFlyoutOpen, time]
);
return {