elastic
diff --git a/‎x-pack/solutions/observability/plugins/infra/public/pages/metrics/header/is_metrics_header_portal_excluded.test.ts‎
Lines changed: 4 additions & 3 deletions b/‎x-pack/solutions/observability/plugins/infra/public/pages/metrics/header/is_metrics_header_portal_excluded.test.ts‎
Lines changed: 4 additions & 3 deletions
diff --git a/‎x-pack/solutions/observability/plugins/infra/public/pages/metrics/header/is_metrics_header_portal_excluded.ts‎
Lines changed: 2 additions & 1 deletion b/‎x-pack/solutions/observability/plugins/infra/public/pages/metrics/header/is_metrics_header_portal_excluded.ts‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/components/hosts_onboarding_page.tsx‎
Lines changed: 35 additions & 0 deletions b/‎x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/components/hosts_onboarding_page.tsx‎
Lines changed: 35 additions & 0 deletions
diff --git a/‎x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_has_data.ts‎
Lines changed: 33 additions & 0 deletions b/‎x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_has_data.ts‎
Lines changed: 33 additions & 0 deletions
diff --git a/‎x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/index.test.tsx‎
Lines changed: 181 additions & 0 deletions b/‎x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/index.test.tsx‎
Lines changed: 181 additions & 0 deletions
@@ -9,10 +9,11 @@ import { isMetricsHeaderPortalExcluded } from './is_metrics_header_portal_exclud
 import { METRICS_INVENTORY_PATH, METRICS_DETAIL_PATH } from './metrics_header_paths';
 
 describe('isMetricsHeaderPortalExcluded', () => {
-  it('excludes Inventory once that route consumes AppHeader', () => {
+  it('excludes Inventory and Hosts once those routes consume AppHeader', () => {
     expect(isMetricsHeaderPortalExcluded('/inventory')).toBe(true);
     expect(isMetricsHeaderPortalExcluded('/inventory/extra')).toBe(true);
-    expect(isMetricsHeaderPortalExcluded('/hosts')).toBe(false);
+    expect(isMetricsHeaderPortalExcluded('/hosts')).toBe(true);
+    expect(isMetricsHeaderPortalExcluded('/hosts/extra')).toBe(true);
     expect(isMetricsHeaderPortalExcluded('/detail/host/web-01')).toBe(false);
   });
 
@@ -21,7 +22,7 @@ describe('isMetricsHeaderPortalExcluded', () => {
     expect(isMetricsHeaderPortalExcluded('/snapshot')).toBe(true);
     expect(isMetricsHeaderPortalExcluded('/snapshot/x')).toBe(true);
     expect(isMetricsHeaderPortalExcluded('/snapshot-other')).toBe(false);
-    expect(isMetricsHeaderPortalExcluded('/hosts')).toBe(false);
+    expect(isMetricsHeaderPortalExcluded('/explorer')).toBe(false);
   });
 
   it('matches a parent path and its nested segments', () => {
 
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { METRICS_INVENTORY_PATH } from './metrics_header_paths';
+import { METRICS_HOSTS_PATH, METRICS_INVENTORY_PATH } from './metrics_header_paths';
 
 /**
  * Metrics parent paths that already render AppHeader and must not also mount HeaderMenuPortal.
@@ -15,6 +15,7 @@ import { METRICS_INVENTORY_PATH } from './metrics_header_paths';
  */
 export const METRICS_HEADER_PORTAL_EXCLUDED_PATHS: readonly string[] = [
   METRICS_INVENTORY_PATH,
+  METRICS_HOSTS_PATH,
   '/snapshot',
   '/',
 ];
 
@@ -0,0 +1,35 @@
+/*
+ * 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 { NoDataPage } from '@kbn/shared-ux-page-no-data';
+import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
+import {
+  getNoDataConfig,
+  OnboardingFlow,
+} from '../../../../components/shared/templates/no_data_config';
+
+/** Renders the Hosts onboarding card as page body so AppHeader can stay mounted. */
+export const HostsOnboardingPage = (): React.ReactElement | null => {
+  const {
+    services: { share, docLinks },
+  } = useKibanaContextForPlugin();
+
+  const noDataConfig = getNoDataConfig({
+    hasData: false,
+    loading: false,
+    onboardingFlow: OnboardingFlow.Hosts,
+    docsLink: docLinks.links.observability.guide,
+    locators: share.url.locators,
+  });
+
+  if (!noDataConfig) {
+    return null;
+  }
+
+  return <NoDataPage {...noDataConfig} />;
+};
@@ -0,0 +1,33 @@
+/*
+ * 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 type { GetHasDataResponse } from '../../../../../common/metrics_sources/get_has_data';
+import { isPending, isSuccess, useFetcher } from '../../../../hooks/use_fetcher';
+
+export interface HostsHasData {
+  hasData: boolean;
+  loading: boolean;
+  showOnboarding: boolean;
+}
+
+/** Cluster-level host metrics existence (`source=host`), not the current table time range. */
+export const useHostsHasData = (): HostsHasData => {
+  const { data, status } = useFetcher(async (callApi) => {
+    return await callApi<GetHasDataResponse>('/api/metrics/source/hasData', {
+      method: 'GET',
+      query: { source: 'host' },
+    });
+  }, []);
+
+  const hasData = Boolean(data?.hasData);
+
+  return {
+    hasData,
+    loading: isPending(status),
+    showOnboarding: isSuccess(status) && !hasData,
+  };
+};
@@ -0,0 +1,181 @@
+/*
+ * 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 { render, screen } from '@testing-library/react';
+import { EuiProvider } from '@elastic/eui';
+import { APP_HEADER_TEST_SUBJECTS } from '@kbn/app-header';
+import { MockAppHeaderProvider } from '@kbn/app-header/mocks';
+import { HostsPage } from '.';
+import { hostsTitle } from '../../../translations';
+
+jest.mock('@kbn/core/public', () => ({
+  APP_WRAPPER_CLASS: 'kbnAppWrapper',
+}));
+
+type MockFetchStatus = 'loading' | 'success' | 'failure' | 'not_initiated' | 'pending';
+
+const mockFetcherState: { hasData: boolean; status: MockFetchStatus } = {
+  hasData: true,
+  status: 'success',
+};
+
+jest.mock('@kbn/observability-shared-plugin/public', () => ({
+  useTrackPageview: jest.fn(),
+}));
+
+jest.mock('../../../hooks/use_metrics_breadcrumbs', () => ({
+  useMetricsBreadcrumbs: jest.fn(),
+}));
+
+jest.mock('../../../hooks/use_fetcher', () => ({
+  FETCH_STATUS: {
+    LOADING: 'loading',
+    SUCCESS: 'success',
+    FAILURE: 'failure',
+    NOT_INITIATED: 'not_initiated',
+    PENDING: 'pending',
+  },
+  isPending: (status: string) =>
+    status === 'loading' || status === 'not_initiated' || status === 'pending',
+  isSuccess: (status: string) => status === 'success',
+  useFetcher: () => ({
+    data: mockFetcherState.status === 'failure' ? undefined : { hasData: mockFetcherState.hasData },
+    status: mockFetcherState.status,
+  }),
+}));
+
+jest.mock('../../../hooks/use_kibana', () => ({
+  useKibanaContextForPlugin: () => ({
+    services: {
+      share: {
+        url: {
+          locators: {
+            get: () => ({ getRedirectUrl: () => '/app/observabilityOnboarding' }),
+          },
+        },
+      },
+      docLinks: { links: { observability: { guide: 'https://docs.elastic.co' } } },
+    },
+  }),
+}));
+
+jest.mock('@kbn/shared-ux-page-no-data', () => ({
+  NoDataPage: () => <div data-test-subj="kbnNoDataPage" />,
+}));
+
+let lastInfraPageTemplateProps: { hasDataOverride?: boolean } = {};
+
+jest.mock('../../../components/shared/templates/infra_page_template', () => ({
+  InfraPageTemplate: ({
+    children,
+    hasDataOverride,
+    header,
+  }: {
+    children: React.ReactNode;
+    hasDataOverride?: boolean;
+    header?: React.ReactNode;
+  }) => {
+    lastInfraPageTemplateProps = { hasDataOverride };
+    return (
+      <div data-test-subj="infraPageTemplate">
+        {header}
+        {children}
+      </div>
+    );
+  },
+}));
+
+jest.mock('./components/hosts_container', () => ({
+  HostsContainer: () => <div data-test-subj="hostsContainer" />,
+}));
+
+jest.mock('./components/search_bar/search_bar', () => ({
+  SearchBar: () => <div data-test-subj="hostsSearchBar" />,
+}));
+
+jest.mock('./hooks/use_unified_search', () => ({
+  UnifiedSearchProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+jest.mock('./hooks/use_hosts_metadata_provider', () => ({
+  HostsTimeRangeMetadataProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+jest.mock('../header/use_metrics_app_header_menu', () => ({
+  useMetricsAppHeaderMenu: () => ({
+    menu: { items: [] },
+    flyouts: null,
+  }),
+}));
+
+const renderHostsPage = () =>
+  render(
+    <EuiProvider>
+      <MockAppHeaderProvider>
+        <HostsPage />
+      </MockAppHeaderProvider>
+    </EuiProvider>
+  );
+
+describe('HostsPage', () => {
+  beforeEach(() => {
+    mockFetcherState.hasData = true;
+    mockFetcherState.status = 'success';
+    lastInfraPageTemplateProps = {};
+  });
+
+  it('renders AppHeader with the hosts title and no back control when host data exists', async () => {
+    renderHostsPage();
+
+    expect(await screen.findByTestId(APP_HEADER_TEST_SUBJECTS.title)).toHaveTextContent(hostsTitle);
+    expect(screen.queryByTestId(APP_HEADER_TEST_SUBJECTS.back)).not.toBeInTheDocument();
+    expect(screen.getByTestId('hostsSearchBar')).toBeInTheDocument();
+    expect(screen.getByTestId('hostsContainer')).toBeInTheDocument();
+    expect(screen.queryByTestId('kbnNoDataPage')).not.toBeInTheDocument();
+    expect(lastInfraPageTemplateProps.hasDataOverride).toBe(true);
+  });
+
+  it('keeps AppHeader and shows onboarding instead of search and table when there is no host data', async () => {
+    mockFetcherState.hasData = false;
+
+    renderHostsPage();
+
+    expect(await screen.findByTestId(APP_HEADER_TEST_SUBJECTS.title)).toHaveTextContent(hostsTitle);
+    expect(screen.queryByTestId(APP_HEADER_TEST_SUBJECTS.back)).not.toBeInTheDocument();
+    expect(screen.getByTestId('kbnNoDataPage')).toBeInTheDocument();
+    expect(screen.queryByTestId('hostsSearchBar')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('hostsContainer')).not.toBeInTheDocument();
+    expect(lastInfraPageTemplateProps.hasDataOverride).toBe(false);
+  });
+
+  it('does not show onboarding while host data is loading', async () => {
+    mockFetcherState.hasData = false;
+    mockFetcherState.status = 'loading';
+
+    renderHostsPage();
+
+    expect(await screen.findByTestId(APP_HEADER_TEST_SUBJECTS.title)).toHaveTextContent(hostsTitle);
+    expect(screen.queryByTestId('kbnNoDataPage')).not.toBeInTheDocument();
+    expect(screen.getByTestId('hostsSearchBar')).toBeInTheDocument();
+    expect(screen.getByTestId('hostsContainer')).toBeInTheDocument();
+    expect(lastInfraPageTemplateProps.hasDataOverride).toBe(true);
+  });
+
+  it('keeps search and table mounted when the has-data check fails', async () => {
+    mockFetcherState.hasData = false;
+    mockFetcherState.status = 'failure';
+
+    renderHostsPage();
+
+    expect(await screen.findByTestId(APP_HEADER_TEST_SUBJECTS.title)).toHaveTextContent(hostsTitle);
+    expect(screen.queryByTestId('kbnNoDataPage')).not.toBeInTheDocument();
+    expect(screen.getByTestId('hostsSearchBar')).toBeInTheDocument();
+    expect(screen.getByTestId('hostsContainer')).toBeInTheDocument();
+    expect(lastInfraPageTemplateProps.hasDataOverride).toBe(true);
+  });
+});