[Inventory][ECO] Show empty state when no entities are found.

x-pack/plugins/observability_solution/inventory/public/components/app_root/header_action_menu/add_data_action_menu.tsx

@@ -15,26 +15,18 @@ import {
   EuiIcon,
   EuiPopover,
 } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import {
   OBSERVABILITY_ONBOARDING_LOCATOR,
   ObservabilityOnboardingLocatorParams,
 } from '@kbn/deeplinks-observability';
 import { useKibana } from '../../../hooks/use_kibana';
 import type { InventoryAddDataParams } from '../../../services/telemetry/types';
-
-const addDataTitle = i18n.translate('xpack.inventory.addDataContextMenu.link', {
-  defaultMessage: 'Add data',
-});
-const addDataItem = i18n.translate('xpack.inventory.add.apm.agent.button.', {
-  defaultMessage: 'Add data',
-});
-
-const associateServiceLogsItem = i18n.translate('xpack.inventory.associate.service.logs.button', {
-  defaultMessage: 'Associate existing service logs',
-});
-
-const ASSOCIATE_LOGS_LINK = 'https://ela.st/new-experience-associate-service-logs';
+import {
+  ASSOCIATE_LOGS_LINK,
+  addDataItem,
+  addDataTitle,
+  associateServiceLogsItem,
+} from '../../shared/add_data_buttons/buttons';
 
 export function AddDataContextMenu() {
   const [popoverOpen, setPopoverOpen] = useState(false);

x-pack/plugins/observability_solution/inventory/public/components/empty_states/empty_state.tsx

@@ -0,0 +1,137 @@
+/*
+ * 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 {
+  COLOR_MODES_STANDARD,
+  EuiCallOut,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiImage,
+  EuiLink,
+  EuiText,
+  EuiTextColor,
+  useEuiTheme,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { dashboardsLight, dashboardsDark } from '@kbn/shared-svg';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+import { AddData, AssociateServiceLogs } from '../shared/add_data_buttons/buttons';
+import { useKibana } from '../../hooks/use_kibana';
+import { InventoryAddDataParams } from '../../services/telemetry/types';
+
+export function EmptyState() {
+  const { services } = useKibana();
+
+  const [isDismissed, setDismissed] = useLocalStorage<boolean>(
+    'inventory.emptyStateDismissed',
+    false
+  );
+
+  function reportButtonClick(journey: InventoryAddDataParams['journey']) {
+    services.telemetry.reportInventoryAddData({
+      view: 'empty_state',
+      journey,
+    });
+  }
+
+  const { colorMode } = useEuiTheme();
+
+  return (
+    <EuiFlexGroup direction="column">
+      {!isDismissed && (
+        <EuiFlexItem>
+          <EuiCallOut
+            css={{ textAlign: 'left' }}
+            onDismiss={() => setDismissed(true)}
+            title={i18n.translate('xpack.inventory.noEntitiesEmptyState.callout.title', {
+              defaultMessage: 'Trying for the first time?',
+            })}
+          >
+            <p>
+              {i18n.translate('xpack.inventory.noEntitiesEmptyState.description', {
+                defaultMessage:
+                  'It can take a couple of minutes for your entities to show. Try refreshing in a minute or two.',
+              })}
+            </p>
+            <EuiLink
+              external
+              target="_blank"
+              data-test-subj="inventoryEmptyStateLink"
+              href="https://ela.st/inventory-first-time"
+            >
+              {i18n.translate('xpack.inventory.noEntitiesEmptyState.learnMore.link', {
+                defaultMessage: 'Learn more',
+              })}
+            </EuiLink>
+          </EuiCallOut>
+        </EuiFlexItem>
+      )}
+      <EuiFlexItem>
+        <EuiEmptyPrompt
+          hasShadow={false}
+          hasBorder={false}
+          id="inventoryEmptyState"
+          icon={
+            <EuiImage
+              size="fullWidth"
+              src={colorMode === COLOR_MODES_STANDARD.dark ? dashboardsDark : dashboardsLight}
+              alt=""
+            />
+          }
+          title={
+            <h2>
+              {i18n.translate('xpack.inventory.noEntitiesEmptyState.title', {
+                defaultMessage: 'No entities available',
+              })}
+            </h2>
+          }
+          layout={'horizontal'}
+          color="plain"
+          body={
+            <>
+              <p>
+                {i18n.translate('xpack.inventory.noEntitiesEmptyState.body.description', {
+                  defaultMessage:
+                    'See all of your observed entities in one place by collecting some data.',
+                })}
+              </p>
+              <EuiHorizontalRule margin="m" />
+              <EuiText textAlign="left">
+                <h5>
+                  <EuiTextColor color="default">
+                    {i18n.translate('xpack.inventory.noEntitiesEmptyState.actions.title', {
+                      defaultMessage: 'Start observing your entities:',
+                    })}
+                  </EuiTextColor>
+                </h5>
+              </EuiText>
+            </>
+          }
+          actions={
+            <EuiFlexGroup responsive={false} wrap gutterSize="xl" direction="column">
+              <EuiFlexGroup direction="row" gutterSize="xs">
+                <AddData
+                  onClick={() => {
+                    reportButtonClick('add_data');
+                  }}
+                />
+                <AssociateServiceLogs
+                  onClick={() => {
+                    reportButtonClick('associate_existing_service_logs');
+                  }}
+                />
+              </EuiFlexGroup>
+            </EuiFlexGroup>
+          }
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

x-pack/plugins/observability_solution/inventory/public/components/inventory_page_template/index.tsx

@@ -7,15 +7,24 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { EuiEmptyPrompt, EuiLoadingLogo } from '@elastic/eui';
 import { useKibana } from '../../hooks/use_kibana';
 import { SearchBar } from '../search_bar';
 import { getEntityManagerEnablement } from './no_data_config';
 import { useEntityManager } from '../../hooks/use_entity_manager';
 import { Welcome } from '../entity_enablement/welcome_modal';
+import { useInventoryAbortableAsync } from '../../hooks/use_inventory_abortable_async';
+import { EmptyState } from '../empty_states/empty_state';
+
+const pageTitle = {
+  pageTitle: i18n.translate('xpack.inventory.inventoryPageHeaderLabel', {
+    defaultMessage: 'Inventory',
+  }),
+};
 
 export function InventoryPageTemplate({ children }: { children: React.ReactNode }) {
   const {
-    services: { observabilityShared },
+    services: { observabilityShared, inventoryAPIClient },
   } = useKibana();
 
   const { PageTemplate: ObservabilityPageTemplate } = observabilityShared.navigation;
@@ -32,30 +41,47 @@ export function InventoryPageTemplate({ children }: { children: React.ReactNode
     toggleWelcomedModal();
   };
 
+  const { value = { hasData: false }, loading } = useInventoryAbortableAsync(
+    ({ signal }) => {
+      return inventoryAPIClient.fetch('GET /internal/inventory/has_data', {
+        signal,
+      });
+    },
+    [inventoryAPIClient]
+  );
+
+  if (isEnablementLoading || loading) {
+    return (
+      <ObservabilityPageTemplate pageHeader={pageTitle}>
+        <EuiEmptyPrompt icon={<EuiLoadingLogo logo="logoObservability" size="xl" />} />
+      </ObservabilityPageTemplate>
+    );
+  }
+
   return (
     <ObservabilityPageTemplate
       noDataConfig={getEntityManagerEnablement({
         enabled: isEntityManagerEnabled,
         loading: isEnablementLoading,
         onSuccess: handleSuccess,
       })}
-      pageHeader={{
-        pageTitle: i18n.translate('xpack.inventory.inventoryPageHeaderLabel', {
-          defaultMessage: 'Inventory',
-        }),
-      }}
+      pageHeader={pageTitle}
     >
-      <EuiFlexGroup direction="column">
-        <EuiFlexItem>
-          <SearchBar />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          {children}
-          {showWelcomedModal ? (
-            <Welcome onClose={toggleWelcomedModal} onConfirm={toggleWelcomedModal} />
-          ) : null}
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      {value.hasData ? (
+        <EuiFlexGroup direction="column">
+          <EuiFlexItem>
+            <SearchBar />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            {children}
+            {showWelcomedModal ? (
+              <Welcome onClose={toggleWelcomedModal} onConfirm={toggleWelcomedModal} />
+            ) : null}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ) : (
+        <EmptyState />
+      )}
     </ObservabilityPageTemplate>
   );
 }

x-pack/plugins/observability_solution/inventory/public/components/shared/add_data_buttons/buttons.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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.
+ */
+
+// Disabling it for now until the EUI team fixes it
+
+/* eslint-disable @elastic/eui/href-or-on-click */
+import React from 'react';
+import {
+  OBSERVABILITY_ONBOARDING_LOCATOR,
+  ObservabilityOnboardingLocatorParams,
+} from '@kbn/deeplinks-observability';
+import { EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '../../../hooks/use_kibana';
+
+export const addDataTitle = i18n.translate('xpack.inventory.addDataContextMenu.link', {
+  defaultMessage: 'Add data',
+});
+export const addDataItem = i18n.translate('xpack.inventory.add.apm.agent.button.', {
+  defaultMessage: 'Add data',
+});
+
+export const associateServiceLogsItem = i18n.translate(
+  'xpack.inventory.associate.service.logs.button',
+  {
+    defaultMessage: 'Associate existing service logs',
+  }
+);
+
+export const ASSOCIATE_LOGS_LINK = 'https://ela.st/new-experience-associate-service-logs';
+
+export function AssociateServiceLogs({ onClick }: { onClick?: () => void }) {
+  return (
+    <EuiButton
+      data-test-subj="associateServiceLogsButton"
+      size="s"
+      onClick={onClick}
+      href={ASSOCIATE_LOGS_LINK}
+      target="_blank"
+      iconType="popout"
+      iconSide="right"
+    >
+      {associateServiceLogsItem}
+    </EuiButton>
+  );
+}
+
+export function AddData({ onClick }: { onClick?: () => void }) {
+  const {
+    services: { share },
+  } = useKibana();
+  const onboardingLocator = share.url.locators.get<ObservabilityOnboardingLocatorParams>(
+    OBSERVABILITY_ONBOARDING_LOCATOR
+  );
+  return (
+    <EuiButton
+      iconType="plusInCircle"
+      data-test-subj="addDataButton"
+      size="s"
+      onClick={onClick}
+      color="primary"
+      fill
+      href={onboardingLocator?.getRedirectUrl({ category: '' })}
+    >
+      {addDataItem}
+    </EuiButton>
+  );
+}

x-pack/plugins/observability_solution/inventory/public/services/telemetry/types.ts

@@ -12,7 +12,7 @@ export interface TelemetryServiceSetupParams {
 }
 
 export interface InventoryAddDataParams {
-  view: 'add_data_button';
+  view: 'add_data_button' | 'empty_state';
   journey?: 'add_data' | 'associate_existing_service_logs';
 }
 

x-pack/plugins/observability_solution/inventory/server/routes/get_global_inventory_route_repository.ts

@@ -6,10 +6,12 @@
  */
 
 import { entitiesRoutes } from './entities/route';
+import { hasDataRoutes } from './has_data/route';
 
 export function getGlobalInventoryServerRouteRepository() {
   return {
     ...entitiesRoutes,
+    ...hasDataRoutes,
   };
 }