From 8da51942e9ec9ea01029d9e5c7a26b82a22bc22a Mon Sep 17 00:00:00 2001 From: Mykola Harmash Date: Tue, 29 Aug 2023 11:24:39 +0200 Subject: [PATCH] Move itemId into the hosts table URL state + other PR comments --- .../asset_details/context_providers.tsx | 8 +-- ...e.ts => use_asset_details_render_props.ts} | 13 ++--- .../hooks/use_asset_details_url_state.ts | 2 - .../asset_details/hooks/use_date_range.ts | 2 +- .../asset_details/hooks/use_page_header.tsx | 6 +-- .../tabs/anomalies/anomalies.tsx | 4 +- .../asset_details/tabs/logs/logs.tsx | 4 +- .../asset_details/tabs/metadata/metadata.tsx | 4 +- .../asset_details/tabs/overview/overview.tsx | 4 +- .../tabs/processes/processes.tsx | 4 +- .../asset_details/template/flyout.tsx | 4 +- .../asset_details/template/page.tsx | 4 +- .../metrics/hosts/hooks/use_hosts_table.tsx | 26 ++++----- .../hosts/hooks/use_hosts_table_url_state.ts | 4 +- .../metric_detail/asset_detail_page.tsx | 2 +- .../test/functional/apps/infra/hosts_view.ts | 53 ------------------- .../functional/apps/infra/node_details.ts | 46 +++++++++++++++- 17 files changed, 86 insertions(+), 104 deletions(-) rename x-pack/plugins/infra/public/components/asset_details/hooks/{use_asset_details_state.ts => use_asset_details_render_props.ts} (65%) diff --git a/x-pack/plugins/infra/public/components/asset_details/context_providers.tsx b/x-pack/plugins/infra/public/components/asset_details/context_providers.tsx index 3561e2e604774..a275849e18edf 100644 --- a/x-pack/plugins/infra/public/components/asset_details/context_providers.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/context_providers.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { AssetDetailsStateProvider } from './hooks/use_asset_details_state'; +import { AssetDetailsRenderPropsProvider } from './hooks/use_asset_details_render_props'; import { DateRangeProvider } from './hooks/use_date_range'; import { MetadataStateProvider } from './hooks/use_metadata_state'; import { AssetDetailsProps } from './types'; @@ -21,8 +21,8 @@ export const ContextProviders = ({ return ( - {children} - + ); diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_state.ts b/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_render_props.ts similarity index 65% rename from x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_state.ts rename to x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_render_props.ts index fced15b67f2e6..6ddba44e6da7e 100644 --- a/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_state.ts +++ b/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_render_props.ts @@ -9,13 +9,13 @@ import createContainer from 'constate'; import type { AssetDetailsProps } from '../types'; import { useMetadataStateProviderContext } from './use_metadata_state'; -export interface UseAssetDetailsStateProps { - state: Pick; +export interface UseAssetDetailsRenderProps { + props: Pick; } -export function useAssetDetailsState({ state }: UseAssetDetailsStateProps) { +export function useAssetDetailsRenderProps({ props }: UseAssetDetailsRenderProps) { const { metadata } = useMetadataStateProviderContext(); - const { asset, assetType, overrides, renderMode } = state; + const { asset, assetType, overrides, renderMode } = props; // When the asset asset.name is known we can load the page faster // Otherwise we need to use metadata response. @@ -33,5 +33,6 @@ export function useAssetDetailsState({ state }: UseAssetDetailsStateProps) { }; } -export const AssetDetailsState = createContainer(useAssetDetailsState); -export const [AssetDetailsStateProvider, useAssetDetailsStateContext] = AssetDetailsState; +export const AssetDetailsRenderProps = createContainer(useAssetDetailsRenderProps); +export const [AssetDetailsRenderPropsProvider, useAssetDetailsRenderPropsContext] = + AssetDetailsRenderProps; diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_url_state.ts b/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_url_state.ts index 497bbf3a91278..370778555f7d0 100644 --- a/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_url_state.ts +++ b/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_url_state.ts @@ -13,7 +13,6 @@ import { FlyoutTabIds } from '../types'; import { useUrlState } from '../../../utils/use_url_state'; export const DEFAULT_STATE: AssetDetailsState = { - itemId: '', tabId: FlyoutTabIds.OVERVIEW, processSearch: undefined, metadataSearch: undefined, @@ -55,7 +54,6 @@ const TabIdRT = rt.union([ const AssetDetailsStateRT = rt.intersection([ rt.type({ - itemId: rt.string, tabId: TabIdRT, }), rt.partial({ diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_date_range.ts b/x-pack/plugins/infra/public/components/asset_details/hooks/use_date_range.ts index 4f07b0231f4bb..7e98c56834529 100644 --- a/x-pack/plugins/infra/public/components/asset_details/hooks/use_date_range.ts +++ b/x-pack/plugins/infra/public/components/asset_details/hooks/use_date_range.ts @@ -24,7 +24,7 @@ export interface UseDateRangeProviderProps { export function useDateRangeProvider({ initialDateRange }: UseDateRangeProviderProps) { const [urlState, setUrlState] = useAssetDetailsUrlState(); - const dateRange: TimeRange = urlState?.dateRange || initialDateRange; + const dateRange: TimeRange = urlState?.dateRange ?? initialDateRange; const setDateRange = useCallback( (newDateRange: TimeRange) => { diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_page_header.tsx b/x-pack/plugins/infra/public/components/asset_details/hooks/use_page_header.tsx index da8d99b433821..07baa3c5f589b 100644 --- a/x-pack/plugins/infra/public/components/asset_details/hooks/use_page_header.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/hooks/use_page_header.tsx @@ -13,7 +13,7 @@ import { capitalize } from 'lodash'; import { APM_HOST_FILTER_FIELD } from '../constants'; import { LinkToAlertsRule, LinkToApmServices, LinkToNodeDetails } from '../links'; import { FlyoutTabIds, type LinkOptions, type Tab, type TabIds } from '../types'; -import { useAssetDetailsStateContext } from './use_asset_details_state'; +import { useAssetDetailsRenderPropsContext } from './use_asset_details_render_props'; import { useDateRangeProviderContext } from './use_date_range'; import { useTabSwitcherContext } from './use_tab_switcher'; @@ -28,7 +28,7 @@ export const usePageHeader = (tabs: Tab[], links?: LinkOptions[]) => { const useRightSideItems = (links?: LinkOptions[]) => { const { getDateRangeInTimestamp } = useDateRangeProviderContext(); - const { asset, assetType, overrides } = useAssetDetailsStateContext(); + const { asset, assetType, overrides } = useAssetDetailsRenderPropsContext(); const topCornerLinkComponents: Record = useMemo( () => ({ @@ -55,7 +55,7 @@ const useRightSideItems = (links?: LinkOptions[]) => { const useTabs = (tabs: Tab[]) => { const { showTab, activeTabId } = useTabSwitcherContext(); - const { asset } = useAssetDetailsStateContext(); + const { asset } = useAssetDetailsRenderPropsContext(); const { euiTheme } = useEuiTheme(); const onTabClick = useCallback( diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/anomalies/anomalies.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/anomalies/anomalies.tsx index 001678d6e6c01..7d6cabc54c3ab 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/anomalies/anomalies.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/anomalies/anomalies.tsx @@ -7,12 +7,12 @@ import React from 'react'; import { AnomaliesTable } from '../../../../pages/metrics/inventory_view/components/ml/anomaly_detection/anomalies_table/anomalies_table'; -import { useAssetDetailsStateContext } from '../../hooks/use_asset_details_state'; +import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details_render_props'; import { useDateRangeProviderContext } from '../../hooks/use_date_range'; export const Anomalies = () => { const { dateRange } = useDateRangeProviderContext(); - const { asset, overrides } = useAssetDetailsStateContext(); + const { asset, overrides } = useAssetDetailsRenderPropsContext(); const { onClose = () => {} } = overrides?.anomalies ?? {}; return ( diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/logs/logs.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/logs/logs.tsx index b96162ef5142b..a19861968335c 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/logs/logs.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/logs/logs.tsx @@ -16,7 +16,7 @@ import { DEFAULT_LOG_VIEW, LogViewReference } from '@kbn/logs-shared-plugin/comm import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana'; import { findInventoryFields } from '../../../../../common/inventory_models'; import { InfraLoadingPanel } from '../../../loading'; -import { useAssetDetailsStateContext } from '../../hooks/use_asset_details_state'; +import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details_render_props'; import { useDataViewsProviderContext } from '../../hooks/use_data_views'; import { useDateRangeProviderContext } from '../../hooks/use_date_range'; import { useAssetDetailsUrlState } from '../../hooks/use_asset_details_url_state'; @@ -26,7 +26,7 @@ const TEXT_QUERY_THROTTLE_INTERVAL_MS = 500; export const Logs = () => { const { getDateRangeInTimestamp } = useDateRangeProviderContext(); const [urlState, setUrlState] = useAssetDetailsUrlState(); - const { asset, assetType } = useAssetDetailsStateContext(); + const { asset, assetType } = useAssetDetailsRenderPropsContext(); const { logs } = useDataViewsProviderContext(); const { loading: logViewLoading, reference: logViewReference } = logs ?? {}; diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx index 0622dcfc63204..7c7d4b92f468f 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx @@ -12,7 +12,7 @@ import { FormattedMessage } from '@kbn/i18n-react'; import { Table } from './table'; import { getAllFields } from './utils'; import { useMetadataStateProviderContext } from '../../hooks/use_metadata_state'; -import { useAssetDetailsStateContext } from '../../hooks/use_asset_details_state'; +import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details_render_props'; import { useAssetDetailsUrlState } from '../../hooks/use_asset_details_url_state'; export interface MetadataSearchUrlState { @@ -22,7 +22,7 @@ export interface MetadataSearchUrlState { export const Metadata = () => { const [urlState, setUrlState] = useAssetDetailsUrlState(); - const { overrides } = useAssetDetailsStateContext(); + const { overrides } = useAssetDetailsRenderPropsContext(); const { metadata, loading: metadataLoading, diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx index 3104fdf6b5f85..b9a3cea8dd886 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx @@ -14,14 +14,14 @@ import { MetadataSummaryList } from './metadata_summary/metadata_summary_list'; import { AlertsSummaryContent } from './alerts'; import { KPIGrid } from './kpis/kpi_grid'; import { MetricsGrid } from './metrics/metrics_grid'; -import { useAssetDetailsStateContext } from '../../hooks/use_asset_details_state'; +import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details_render_props'; import { useMetadataStateProviderContext } from '../../hooks/use_metadata_state'; import { useDataViewsProviderContext } from '../../hooks/use_data_views'; import { useDateRangeProviderContext } from '../../hooks/use_date_range'; export const Overview = () => { const { dateRange } = useDateRangeProviderContext(); - const { asset, assetType, renderMode } = useAssetDetailsStateContext(); + const { asset, assetType, renderMode } = useAssetDetailsRenderPropsContext(); const { metadata, loading: metadataLoading, diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx index d32d121ab718d..f0568332328dc 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx @@ -29,7 +29,7 @@ import { ProcessListContextProvider, } from '../../../../pages/metrics/inventory_view/hooks/use_process_list'; import { getFieldByType } from '../../../../../common/inventory_models'; -import { useAssetDetailsStateContext } from '../../hooks/use_asset_details_state'; +import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details_render_props'; import { useDateRangeProviderContext } from '../../hooks/use_date_range'; import { useAssetDetailsUrlState } from '../../hooks/use_asset_details_url_state'; @@ -41,7 +41,7 @@ const options = Object.entries(STATE_NAMES).map(([value, view]: [string, string] export const Processes = () => { const { getDateRangeInTimestamp } = useDateRangeProviderContext(); const [urlState, setUrlState] = useAssetDetailsUrlState(); - const { asset, assetType } = useAssetDetailsStateContext(); + const { asset, assetType } = useAssetDetailsRenderPropsContext(); const [searchText, setSearchText] = useState(urlState?.processSearch ?? ''); const [searchBarState, setSearchBarState] = useState(() => diff --git a/x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx b/x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx index 3673173c5af89..f45aca765610d 100644 --- a/x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx @@ -14,7 +14,7 @@ import { InfraLoadingPanel } from '../../loading'; import { ASSET_DETAILS_FLYOUT_COMPONENT_NAME } from '../constants'; import { Content } from '../content/content'; import { FlyoutHeader } from '../header/flyout_header'; -import { useAssetDetailsStateContext } from '../hooks/use_asset_details_state'; +import { useAssetDetailsRenderPropsContext } from '../hooks/use_asset_details_render_props'; import { usePageHeader } from '../hooks/use_page_header'; import { useTabSwitcherContext } from '../hooks/use_tab_switcher'; import type { ContentTemplateProps } from '../types'; @@ -23,7 +23,7 @@ export const Flyout = ({ header: { tabs = [], links = [] }, closeFlyout, }: ContentTemplateProps & { closeFlyout: () => void }) => { - const { asset, assetType, loading } = useAssetDetailsStateContext(); + const { asset, assetType, loading } = useAssetDetailsRenderPropsContext(); const { rightSideItems, tabEntries } = usePageHeader(tabs, links); const { activeTabId } = useTabSwitcherContext(); const { diff --git a/x-pack/plugins/infra/public/components/asset_details/template/page.tsx b/x-pack/plugins/infra/public/components/asset_details/template/page.tsx index a95638bfca55a..bbf23196bf7ee 100644 --- a/x-pack/plugins/infra/public/components/asset_details/template/page.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/template/page.tsx @@ -12,12 +12,12 @@ import React from 'react'; import { useKibanaHeader } from '../../../hooks/use_kibana_header'; import { InfraLoadingPanel } from '../../loading'; import { Content } from '../content/content'; -import { useAssetDetailsStateContext } from '../hooks/use_asset_details_state'; +import { useAssetDetailsRenderPropsContext } from '../hooks/use_asset_details_render_props'; import { usePageHeader } from '../hooks/use_page_header'; import type { ContentTemplateProps } from '../types'; export const Page = ({ header: { tabs = [], links = [] } }: ContentTemplateProps) => { - const { asset, loading } = useAssetDetailsStateContext(); + const { asset, loading } = useAssetDetailsRenderPropsContext(); const { rightSideItems, tabEntries } = usePageHeader(tabs, links); const { headerHeight } = useKibanaHeader(); diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx index fd6b4e825e676..19ba258e91b11 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx @@ -24,7 +24,6 @@ import type { InfraAssetMetricsItem, InfraAssetMetricType, } from '../../../../../common/http_api'; -import { useAssetDetailsUrlState } from '../../../../components/asset_details/hooks/use_asset_details_url_state'; import { Sorting, useHostsTableUrlState } from './use_hosts_table_url_state'; import { useHostsViewContext } from './use_hosts_view'; import { useMetricsDataViewContext } from './use_data_view'; @@ -129,7 +128,7 @@ export const useHostsTable = () => { const [selectedItems, setSelectedItems] = useState([]); const { hostNodes } = useHostsViewContext(); const { parsedDateRange } = useUnifiedSearchContext(); - const [{ pagination, sorting }, setProperties] = useHostsTableUrlState(); + const [{ detailsItemId, pagination, sorting }, setProperties] = useHostsTableUrlState(); const { services: { telemetry, @@ -140,11 +139,10 @@ export const useHostsTable = () => { } = useKibanaContextForPlugin(); const { dataView } = useMetricsDataViewContext(); - const [hostFlyoutState, setHostFlyoutState] = useAssetDetailsUrlState(); const popoverContainerRef = useRef(null); const tableRef = useRef(null); - const closeFlyout = useCallback(() => setHostFlyoutState(null), [setHostFlyoutState]); + const closeFlyout = useCallback(() => setProperties({ detailsItemId: null }), [setProperties]); const onSelectionChange = (newSelectedItems: HostNodeRow[]) => { setSelectedItems(newSelectedItems); @@ -195,8 +193,8 @@ export const useHostsTable = () => { const items = useMemo(() => buildItemsList(hostNodes), [hostNodes]); const clickedItem = useMemo( - () => items.find(({ id }) => id === hostFlyoutState?.itemId), - [hostFlyoutState?.itemId, items] + () => items.find(({ id }) => id === detailsItemId), + [detailsItemId, items] ); const currentPage = useMemo(() => { @@ -218,19 +216,13 @@ export const useHostsTable = () => { { name: TABLE_COLUMN_LABEL.toggleDialogAction, description: TABLE_COLUMN_LABEL.toggleDialogAction, - icon: ({ id }) => - hostFlyoutState?.itemId && id === hostFlyoutState?.itemId ? 'minimize' : 'expand', + icon: ({ id }) => (id === detailsItemId ? 'minimize' : 'expand'), type: 'icon', 'data-test-subj': 'hostsView-flyout-button', onClick: ({ id }) => { - setHostFlyoutState({ - itemId: id, + setProperties({ + detailsItemId: id === detailsItemId ? null : id, }); - if (id === hostFlyoutState?.itemId) { - setHostFlyoutState(null); - } else { - setHostFlyoutState({ itemId: id }); - } }, }, ], @@ -351,7 +343,7 @@ export const useHostsTable = () => { width: '120px', }, ], - [hostFlyoutState?.itemId, parsedDateRange, reportHostEntryClick, setHostFlyoutState] + [detailsItemId, parsedDateRange, reportHostEntryClick, setProperties] ); const selection: EuiTableSelectionType = { @@ -365,7 +357,7 @@ export const useHostsTable = () => { currentPage, closeFlyout, items, - isFlyoutOpen: !!hostFlyoutState?.itemId, + isFlyoutOpen: detailsItemId !== null, onTableChange, pagination, sorting, diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table_url_state.ts b/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table_url_state.ts index 760ada008c8c0..c1dcafefaccc3 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table_url_state.ts +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table_url_state.ts @@ -16,6 +16,7 @@ import { useUrlState } from '../../../../utils/use_url_state'; import { DEFAULT_PAGE_SIZE, LOCAL_STORAGE_PAGE_SIZE_KEY } from '../constants'; export const GET_DEFAULT_TABLE_PROPERTIES: TableProperties = { + detailsItemId: null, sorting: { direction: 'asc', field: 'name', @@ -29,7 +30,7 @@ export const GET_DEFAULT_TABLE_PROPERTIES: TableProperties = { const HOST_TABLE_PROPERTIES_URL_STATE_KEY = 'tableProperties'; const reducer = (prevState: TableProperties, params: Payload) => { - const payload = Object.fromEntries(Object.entries(params).filter(([_, v]) => !!v)); + const payload = Object.fromEntries(Object.entries(params).filter(([_, v]) => v !== undefined)); return { ...prevState, @@ -77,6 +78,7 @@ const SortingRT = rt.intersection([ ]); const TableStateRT = rt.type({ + detailsItemId: rt.union([rt.string, rt.null]), pagination: PaginationRT, sorting: SortingRT, }); diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/asset_detail_page.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/asset_detail_page.tsx index 2b31047af4ef6..10af65db3fdd9 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/asset_detail_page.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/asset_detail_page.tsx @@ -8,7 +8,7 @@ import React, { useMemo } from 'react'; import { useLocation, useRouteMatch } from 'react-router-dom'; import { i18n } from '@kbn/i18n'; -import { TimeRange } from '@kbn/es-query'; +import type { TimeRange } from '@kbn/es-query'; import { NoRemoteCluster } from '../../../components/empty_states'; import { SourceErrorPage } from '../../../components/source_error_page'; import { SourceLoadingPage } from '../../../components/source_loading_page'; diff --git a/x-pack/test/functional/apps/infra/hosts_view.ts b/x-pack/test/functional/apps/infra/hosts_view.ts index 5eb46a5e0b168..a225ea4c476e4 100644 --- a/x-pack/test/functional/apps/infra/hosts_view.ts +++ b/x-pack/test/functional/apps/infra/hosts_view.ts @@ -168,16 +168,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { (await pageObjects.infraHostsView.isKPIChartsLoaded()) ); - const refreshPageWithDelay = async () => { - /** - * Delay gives React a chance to finish - * running effects (like updating the URL) before - * refreshing the page. - */ - await pageObjects.common.sleep(1000); - await browser.refresh(); - }; - describe('Hosts View', function () { before(async () => { await Promise.all([ @@ -294,16 +284,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { }); }); - it('preserves selected tab between page reloads', async () => { - await testSubjects.missingOrFail('infraAssetDetailsMetadataTable'); - await pageObjects.assetDetails.clickMetadataTab(); - await pageObjects.assetDetails.metadataTableExists(); - - await refreshPageWithDelay(); - - await pageObjects.assetDetails.metadataTableExists(); - }); - describe('Overview Tab', () => { before(async () => { await pageObjects.assetDetails.clickOverviewTab(); @@ -362,17 +342,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await pageObjects.assetDetails.metadataRemovePinExists(); expect(removeFilterShouldNotExist).to.be(false); }); - - it('preserves search term between page reloads', async () => { - const searchInput = await pageObjects.assetDetails.getMetadataSearchField(); - - expect(await searchInput.getAttribute('value')).to.be(''); - - await searchInput.type('test'); - await refreshPageWithDelay(); - - expect(await searchInput.getAttribute('value')).to.be('test'); - }); }); describe('Processes Tab', () => { @@ -383,17 +352,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { it('should show processes table', async () => { await pageObjects.assetDetails.processesTableExists(); }); - - it('preserves search term between page reloads', async () => { - const searchInput = await pageObjects.assetDetails.getProcessesSearchField(); - - expect(await searchInput.getAttribute('value')).to.be(''); - - await searchInput.type('test'); - await refreshPageWithDelay(); - - expect(await searchInput.getAttribute('value')).to.be('test'); - }); }); describe('Logs Tab', () => { @@ -404,17 +362,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { it('should render logs tab', async () => { await pageObjects.assetDetails.logsExists(); }); - - it('preserves search term between page reloads', async () => { - const searchInput = await pageObjects.assetDetails.getLogsSearchField(); - - expect(await searchInput.getAttribute('value')).to.be(''); - - await searchInput.type('test'); - await refreshPageWithDelay(); - - expect(await searchInput.getAttribute('value')).to.be('test'); - }); }); describe('Flyout links', () => { diff --git a/x-pack/test/functional/apps/infra/node_details.ts b/x-pack/test/functional/apps/infra/node_details.ts index caa0ceae0538a..1175e733e2568 100644 --- a/x-pack/test/functional/apps/infra/node_details.ts +++ b/x-pack/test/functional/apps/infra/node_details.ts @@ -123,8 +123,8 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { ); it('preserves selected date range between page reloads', async () => { - const start = moment.utc('2023-08-28T10:20:00.000Z').format(DATE_PICKER_FORMAT); - const end = moment.utc('2023-08-28T21:00:00.000Z').format(DATE_PICKER_FORMAT); + const start = moment.utc(START_HOST_ALERTS_DATE).format(DATE_PICKER_FORMAT); + const end = moment.utc(END_HOST_ALERTS_DATE).format(DATE_PICKER_FORMAT); await pageObjects.timePicker.setAbsoluteRange(start, end); await refreshPageWithDelay(); @@ -214,6 +214,20 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await pageObjects.assetDetails.clickRemoveMetadataPin(); expect(await pageObjects.assetDetails.metadataRemovePinExists()).to.be(false); }); + + it('preserves search term between page reloads', async () => { + const searchInput = await pageObjects.assetDetails.getMetadataSearchField(); + + expect(await searchInput.getAttribute('value')).to.be(''); + + await searchInput.type('test'); + await refreshPageWithDelay(); + + await retry.try(async () => { + expect(await searchInput.getAttribute('value')).to.be('test'); + }); + await searchInput.clearValue(); + }); }); describe('Processes Tab', () => { @@ -233,6 +247,20 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await pageObjects.assetDetails.getProcessesTableBody(); await pageObjects.assetDetails.clickProcessesTableExpandButton(); }); + + it('preserves search term between page reloads', async () => { + const searchInput = await pageObjects.assetDetails.getProcessesSearchField(); + + expect(await searchInput.getAttribute('value')).to.be(''); + + await searchInput.type('test'); + await refreshPageWithDelay(); + + await retry.try(async () => { + expect(await searchInput.getAttribute('value')).to.be('test'); + }); + await searchInput.clearValue(); + }); }); describe('Logs Tab', () => { @@ -243,6 +271,20 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { it('should render logs tab', async () => { await testSubjects.existOrFail('infraAssetDetailsLogsTabContent'); }); + + it('preserves search term between page reloads', async () => { + const searchInput = await pageObjects.assetDetails.getLogsSearchField(); + + expect(await searchInput.getAttribute('value')).to.be(''); + + await searchInput.type('test'); + await refreshPageWithDelay(); + + await retry.try(async () => { + expect(await searchInput.getAttribute('value')).to.be('test'); + }); + await searchInput.clearValue(); + }); }); describe('Osquery Tab', () => {