Move itemId into the hosts table URL state + other PR comments

elastic · Aug 29, 2023 · 8da5194 · 8da5194
1 parent 8928efe
commit 8da5194
Show file tree

Hide file tree

Showing 17 changed files with 86 additions and 104 deletions.
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
@@ -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,16 +21,16 @@ export const ContextProviders = ({
   return (
     <DateRangeProvider initialDateRange={dateRange}>
       <MetadataStateProvider asset={asset} assetType={assetType}>
-        <AssetDetailsStateProvider
-          state={{
+        <AssetDetailsRenderPropsProvider
+          props={{
             asset,
             assetType,
             overrides,
             renderMode,
           }}
         >
           {children}
-        </AssetDetailsStateProvider>
+        </AssetDetailsRenderPropsProvider>
       </MetadataStateProvider>
     </DateRangeProvider>
   );

diff --git a/..._details/hooks/use_asset_details_state.ts → ...s/hooks/use_asset_details_render_props.ts b/..._details/hooks/use_asset_details_state.ts → ...s/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<AssetDetailsProps, 'asset' | 'assetType' | 'overrides' | 'renderMode'>;
+export interface UseAssetDetailsRenderProps {
+  props: Pick<AssetDetailsProps, 'asset' | 'assetType' | 'overrides' | 'renderMode'>;
 }
 
-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
@@ -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
@@ -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
@@ -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<LinkOptions, JSX.Element> = 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<Query>(() =>

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
@@ -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
@@ -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
@@ -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<HostNodeRow[]>([]);
   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<HTMLDivElement>(null);
   const tableRef = useRef<EuiBasicTable | null>(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<HostNodeRow> = {
@@ -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
@@ -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
@@ -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';