[Inventory][ECO] Enable elastic entity model from inventory (elastic#…

…193557) ## Summary closes elastic#192328 > [!Note] > Empty state will be handled in a different ticket ### Checklist ### Enable with permissions https://github.com/user-attachments/assets/c7a5390b-2d7c-4897-a167-485da74ac336 https://github.com/user-attachments/assets/44e30654-04bd-42c3-9c1e-a24042b4cb40 ### Enable without permissions https://github.com/user-attachments/assets/b5f16f43-1cd4-48a7-bf04-3926b03e5a30 https://github.com/user-attachments/assets/be17ddf7-de7a-4573-b0c4-caadeece3cc5 ### TODO - [x] add dark screenshot of inventory
darnautov · Sep 23, 2024 · b5a061e · b5a061e
1 parent 636baad
commit b5a061e
Show file tree

Hide file tree

Showing 10 changed files with 403 additions and 0 deletions.
diff --git a/x-pack/plugins/observability_solution/inventory/.storybook/get_mock_inventory_context.tsx b/x-pack/plugins/observability_solution/inventory/.storybook/get_mock_inventory_context.tsx
@@ -6,6 +6,7 @@
  */
 
 import { coreMock } from '@kbn/core/public/mocks';
+import { EntityManagerPublicPluginStart } from '@kbn/entityManager-plugin/public';
 import type { ObservabilitySharedPluginStart } from '@kbn/observability-shared-plugin/public';
 import type { InferencePublicStart } from '@kbn/inference-plugin/public';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
@@ -17,6 +18,7 @@ export function getMockInventoryContext(): InventoryKibanaContext {
 
   return {
     ...coreStart,
+    entityManager: {} as unknown as EntityManagerPublicPluginStart,
     observabilityShared: {} as unknown as ObservabilitySharedPluginStart,
     inference: {} as unknown as InferencePublicStart,
     share: {} as unknown as SharePluginStart,

diff --git a/...gins/observability_solution/inventory/public/assets/entities_inventory_dark.png b/...gins/observability_solution/inventory/public/assets/entities_inventory_dark.png
diff --git a/...ins/observability_solution/inventory/public/assets/entities_inventory_light.png b/...ins/observability_solution/inventory/public/assets/entities_inventory_light.png
diff --git a/...ity_solution/inventory/public/components/entity_enablement/enable_entity_model_button.tsx b/...ity_solution/inventory/public/components/entity_enablement/enable_entity_model_button.tsx
@@ -0,0 +1,68 @@
+/*
+ * 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 { EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useState } from 'react';
+import { EntityManagerUnauthorizedError } from '@kbn/entityManager-plugin/public';
+import type { IHttpFetchError, ResponseErrorBody } from '@kbn/core/public';
+import { useKibana } from '../../hooks/use_kibana';
+import { Unauthorized } from './unauthorized_modal';
+
+export function EnableEntityModelButton({ onSuccess }: { onSuccess: () => void }) {
+  const {
+    services: { entityManager, notifications },
+  } = useKibana();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [showModal, setModalVisible] = useState(false);
+
+  const handleEnablement = async () => {
+    setIsLoading(true);
+    try {
+      const response = await entityManager.entityClient.enableManagedEntityDiscovery();
+
+      if (response.success) {
+        setIsLoading(false);
+        onSuccess();
+      } else {
+        throw new Error(response.message);
+      }
+    } catch (error) {
+      setIsLoading(false);
+
+      if (error instanceof EntityManagerUnauthorizedError) {
+        setModalVisible(true);
+        return;
+      }
+
+      const err = error as Error | IHttpFetchError<ResponseErrorBody>;
+      notifications.toasts.addDanger({
+        title: i18n.translate('xpack.inventory.eemEnablement.errorTitle', {
+          defaultMessage: 'Error while enabling the new entity model',
+        }),
+        text: 'response' in err ? err.body?.message ?? err.response?.statusText : err.message,
+      });
+    }
+  };
+
+  return (
+    <>
+      <EuiButton
+        isLoading={isLoading}
+        data-test-subj="inventoryInventoryPageTemplateFilledButton"
+        fill
+        onClick={handleEnablement}
+      >
+        {i18n.translate('xpack.inventory.noData.card.button', {
+          defaultMessage: 'Enable',
+        })}
+      </EuiButton>
+      {showModal ? <Unauthorized onClose={() => setModalVisible(false)} /> : null}
+    </>
+  );
+}
diff --git a/...servability_solution/inventory/public/components/entity_enablement/unauthorized_modal.tsx b/...servability_solution/inventory/public/components/entity_enablement/unauthorized_modal.tsx
@@ -0,0 +1,100 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import {
+  EuiButton,
+  EuiConfirmModal,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiImage,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+  useEuiTheme,
+  COLOR_MODES_STANDARD,
+} from '@elastic/eui';
+import inventoryLight from '../../assets/entities_inventory_light.png';
+import inventoryDark from '../../assets/entities_inventory_dark.png';
+
+export function Unauthorized({ onClose }: { onClose: () => void }) {
+  const { colorMode } = useEuiTheme();
+
+  return (
+    <EuiConfirmModal
+      style={{
+        width: '630px',
+      }}
+      onCancel={onClose}
+      onConfirm={onClose}
+      confirmButtonText={
+        <EuiButton data-test-subj="xpack.inventory.unauthorised.button" fill size="s">
+          {i18n.translate('xpack.inventory.unauthorised.button', {
+            defaultMessage: 'OK',
+          })}
+        </EuiButton>
+      }
+      cancelButtonText={
+        <EuiLink
+          target="_blank"
+          data-test-subj="inventoryUnauthorizedLinkExternal"
+          href="https://ela.st/docs-entity-inventory"
+          external
+        >
+          {i18n.translate('xpack.inventory.unauthorized.linkLabel', {
+            defaultMessage: 'Learn more',
+          })}
+        </EuiLink>
+      }
+      defaultFocusedButton="confirm"
+    >
+      <EuiPanel hasShadow={false}>
+        <EuiFlexGroup direction="column" justifyContent="center" alignItems="center" gutterSize="m">
+          <EuiFlexItem>
+            <EuiIcon type="lock" size="l" />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiTitle>
+              <h2>
+                {i18n.translate('xpack.inventory.unauthorised.title', {
+                  defaultMessage: 'Insufficient permissions',
+                })}
+              </h2>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+
+      <EuiPanel hasShadow={false} paddingSize="s">
+        <EuiText grow={false} textAlign="center">
+          <p>
+            {i18n.translate('xpack.inventory.unauthorised.body', {
+              defaultMessage:
+                "You don't have permissions to turn on the Elastic Entity Model. Please ask your administrator to enable this for you so you can see everything you have in one place.",
+            })}
+          </p>
+        </EuiText>
+      </EuiPanel>
+      <EuiSpacer size="m" />
+      <EuiPanel hasBorder paddingSize="none">
+        <EuiImage
+          allowFullScreen
+          size="xl"
+          src={colorMode === COLOR_MODES_STANDARD.dark ? inventoryDark : inventoryLight}
+          alt={i18n.translate('xpack.inventory.unauthorised.image.at,', {
+            defaultMessage:
+              'Image of the new experience of the entities inventory, showing services, hosts and containers',
+          })}
+        />
+      </EuiPanel>
+    </EuiConfirmModal>
+  );
+}
diff --git a/...ns/observability_solution/inventory/public/components/entity_enablement/welcome_modal.tsx b/...ns/observability_solution/inventory/public/components/entity_enablement/welcome_modal.tsx
@@ -0,0 +1,100 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import {
+  EuiButton,
+  EuiConfirmModal,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiImage,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+  useEuiTheme,
+  COLOR_MODES_STANDARD,
+} from '@elastic/eui';
+import inventoryLight from '../../assets/entities_inventory_light.png';
+import inventoryDark from '../../assets/entities_inventory_dark.png';
+
+export function Welcome({ onClose, onConfirm }: { onClose: () => void; onConfirm: () => void }) {
+  const { colorMode } = useEuiTheme();
+
+  return (
+    <EuiConfirmModal
+      style={{
+        width: '630px',
+      }}
+      onCancel={onClose}
+      onConfirm={onConfirm}
+      confirmButtonText={
+        <EuiButton data-test-subj="xpack.inventory.welcome.button.open" fill size="s">
+          {i18n.translate('xpack.inventory.welcome.button', {
+            defaultMessage: 'OK',
+          })}
+        </EuiButton>
+      }
+      cancelButtonText={
+        <EuiLink
+          target="_blank"
+          data-test-subj="inventoryWelcomeLinkExternal"
+          href="https://ela.st/docs-entity-inventory"
+          external
+        >
+          {i18n.translate('xpack.inventory.welcome.linkLabel', {
+            defaultMessage: 'Learn more',
+          })}
+        </EuiLink>
+      }
+      defaultFocusedButton="confirm"
+    >
+      <EuiPanel hasShadow={false}>
+        <EuiFlexGroup direction="column" justifyContent="center" alignItems="center" gutterSize="m">
+          <EuiFlexItem>
+            <EuiIcon type="logoElastic" size="l" />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiTitle>
+              <h2>
+                {i18n.translate('xpack.inventory.welcome.title', {
+                  defaultMessage: 'See everything you have in one place!',
+                })}
+              </h2>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+
+      <EuiPanel hasShadow={false} paddingSize="s">
+        <EuiText grow={false} textAlign="center">
+          <p>
+            {i18n.translate('xpack.inventory.welcome.body', {
+              defaultMessage:
+                'The inventory will show all of your observed entities in one place so you can detect and resolve problems with them faster.',
+            })}
+          </p>
+        </EuiText>
+      </EuiPanel>
+      <EuiSpacer size="m" />
+      <EuiPanel hasBorder paddingSize="none">
+        <EuiImage
+          size="xl"
+          src={colorMode === COLOR_MODES_STANDARD.dark ? inventoryDark : inventoryLight}
+          allowFullScreen
+          alt={i18n.translate('xpack.inventory.welcome.image.alt', {
+            defaultMessage:
+              'Image of the new experience of the entities inventory, showing services, hosts and containers',
+          })}
+        />
+      </EuiPanel>
+    </EuiConfirmModal>
+  );
+}
diff --git a/...gins/observability_solution/inventory/public/components/inventory_page_template/index.tsx b/...gins/observability_solution/inventory/public/components/inventory_page_template/index.tsx
@@ -7,23 +7,46 @@
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useKibana } from '../../hooks/use_kibana';
+import { getEntityManagerEnablement } from './no_data_config';
+import { useEntityManager } from '../../hooks/use_entity_manager';
+import { Welcome } from '../entity_enablement/welcome_modal';
 
 export function InventoryPageTemplate({ children }: { children: React.ReactNode }) {
   const {
     services: { observabilityShared },
   } = useKibana();
 
   const { PageTemplate: ObservabilityPageTemplate } = observabilityShared.navigation;
+  const {
+    isEntityManagerEnabled,
+    isEnablementLoading,
+    refresh,
+    showWelcomedModal,
+    toggleWelcomedModal,
+  } = useEntityManager();
+
+  const handleSuccess = () => {
+    refresh();
+    toggleWelcomedModal();
+  };
 
   return (
     <ObservabilityPageTemplate
+      noDataConfig={getEntityManagerEnablement({
+        enabled: isEntityManagerEnabled,
+        loading: isEnablementLoading,
+        onSuccess: handleSuccess,
+      })}
       pageHeader={{
         pageTitle: i18n.translate('xpack.inventory.inventoryPageHeaderLabel', {
           defaultMessage: 'Inventory',
         }),
       }}
     >
       {children}
+      {showWelcomedModal ? (
+        <Welcome onClose={toggleWelcomedModal} onConfirm={toggleWelcomedModal} />
+      ) : null}
     </ObservabilityPageTemplate>
   );
 }