[Infra] Provide troubleshooting information on the host details page (#…

…191104)

Closes #190523 
## Summary

This PR provides troubleshooting information in the services section on
the host details page.

## Testing
Go to the hosts details page / host flyout
- using a host without services monitored with system integration

![image](https://github.com/user-attachments/assets/5226e4a1-7b19-4a22-b11d-2aae55f543e3)

- using a host without services not monitored with system integration (
only detected by APM )

![image](https://github.com/user-attachments/assets/f63513bd-d3f9-41eb-97a6-0011b2d11673)

- icon next to the title (same as the table)
<img width="1690" alt="image"
src="https://github.com/user-attachments/assets/b722b61d-29d0-46dd-a3d8-e9f594236bf1">


For hosts with services, nothing changes (the service is shown): 
<img width="474" alt="image"
src="https://github.com/user-attachments/assets/81f54a1a-485d-4e0b-a746-618fca5a864c">

x-pack/plugins/observability_solution/infra/common/http_api/metadata_api.ts

@@ -111,6 +111,7 @@ const InfraMetadataRequiredRT = rt.type({
 
 const InfraMetadataOptionalRT = rt.partial({
   info: InfraMetadataInfoResponseRT,
+  hasSystemIntegration: rt.boolean,
 });
 
 export const InfraMetadataRT = rt.intersection([InfraMetadataRequiredRT, InfraMetadataOptionalRT]);

x-pack/plugins/observability_solution/infra/public/components/asset_details/constants.ts

@@ -24,3 +24,5 @@ export const INTEGRATIONS = {
 
 export const DOCKER_METRIC_TYPES: DockerContainerMetrics[] = ['cpu', 'memory', 'network', 'disk'];
 export const KUBERNETES_METRIC_TYPES: KubernetesContainerMetrics[] = ['cpu', 'memory'];
+
+export const APM_HOST_TROUBLESHOOTING_LINK = 'https://ela.st/host-troubleshooting';

x-pack/plugins/observability_solution/infra/public/components/asset_details/header/flyout_header.tsx

@@ -16,11 +16,27 @@ import {
   useEuiTheme,
   useEuiMinBreakpoint,
   type EuiPageHeaderProps,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
-type Props = Pick<EuiPageHeaderProps, 'tabs' | 'title' | 'rightSideItems'>;
+import type { InventoryItemType } from '@kbn/metrics-data-access-plugin/common/inventory_models/types';
+import { PageTitleWithPopover } from './page_title_with_popover';
+type Props = Pick<EuiPageHeaderProps, 'tabs' | 'title' | 'rightSideItems'> & {
+  hasSystemIntegration: boolean;
+  assetType: InventoryItemType;
+  metadataLoading: boolean;
+  loading: boolean;
+};
 
-export const FlyoutHeader = ({ title, tabs = [], rightSideItems = [] }: Props) => {
+export const FlyoutHeader = ({
+  title,
+  tabs = [],
+  rightSideItems = [],
+  hasSystemIntegration,
+  assetType,
+  metadataLoading,
+  loading,
+}: Props) => {
   const { euiTheme } = useEuiTheme();
 
   return (
@@ -39,7 +55,20 @@ export const FlyoutHeader = ({ title, tabs = [], rightSideItems = [] }: Props) =
           `}
         >
           <EuiTitle size="xs">
-            <h4>{title}</h4>
+            {metadataLoading || loading ? (
+              <EuiLoadingSpinner size="m" />
+            ) : (
+              <h4>
+                {assetType === 'host' ? (
+                  <PageTitleWithPopover
+                    hasSystemMetrics={hasSystemIntegration}
+                    name={title ?? ''}
+                  />
+                ) : (
+                  title
+                )}
+              </h4>
+            )}
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem

x-pack/plugins/observability_solution/infra/public/components/asset_details/header/page_title_with_popover.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 { EuiText, EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { APM_HOST_TROUBLESHOOTING_LINK } from '../constants';
+import { Popover } from '../tabs/common/popover';
+
+export const PageTitleWithPopover = ({
+  hasSystemMetrics,
+  name,
+}: {
+  hasSystemMetrics: boolean;
+  name: string;
+}) => {
+  return !hasSystemMetrics ? (
+    <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+      <EuiFlexItem grow={false}>{name}</EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <Popover icon="questionInCircle" data-test-subj="assetDetailsTitleHasSystemMetricsPopover">
+          <EuiText size="xs">
+            <p>
+              <FormattedMessage
+                id="xpack.infra.assetDetails.title.tooltip.apmHostMessage"
+                defaultMessage="This host has been detected by {apm}"
+                values={{
+                  apm: (
+                    <EuiLink
+                      data-test-subj="assetDetailsTitleTooltipApmDocumentationLink"
+                      href=" https://www.elastic.co/guide/en/observability/current/apm.html"
+                      target="_blank"
+                    >
+                      <FormattedMessage
+                        id="xpack.infra.assetDetails.title.tooltip.apmHostMessage.apmDocumentationLink"
+                        defaultMessage="APM"
+                      />
+                    </EuiLink>
+                  ),
+                }}
+              />
+            </p>
+            <p>
+              <EuiLink
+                data-test-subj="assetDetailsTitleHasSystemMetricsLearnMoreLink"
+                href={APM_HOST_TROUBLESHOOTING_LINK}
+                target="_blank"
+              >
+                <FormattedMessage
+                  id="xpack.infra.assetDetails.title.tooltip.learnMoreLink"
+                  defaultMessage="Learn more"
+                />
+              </EuiLink>
+            </p>
+          </EuiText>
+        </Popover>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  ) : (
+    <>{name}</>
+  );
+};

x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/metadata/utils.test.ts

@@ -13,6 +13,7 @@ describe('#getAllFields', () => {
     architecture: 'x86_64',
     containerized: false,
     hostname: 'host1',
+    hasSystemIntegration: true,
     ip: [
       '10.10.10.10',
       '10.10.10.10',
@@ -63,6 +64,7 @@ describe('#getAllFields', () => {
     const result: InfraMetadata = {
       id: 'host1',
       name: 'host1',
+      hasSystemIntegration: true,
       features: [
         {
           name: 'system.core',
@@ -77,6 +79,7 @@ describe('#getAllFields', () => {
     const result: InfraMetadata = {
       id: 'host1',
       name: 'host1',
+      hasSystemIntegration: true,
       features: [
         {
           name: 'system.core',
@@ -96,6 +99,7 @@ describe('#getAllFields', () => {
     const result: InfraMetadata = {
       id: 'host1',
       name: 'host1',
+      hasSystemIntegration: true,
       features: [
         {
           name: 'system.core',
@@ -117,6 +121,7 @@ describe('#getAllFields', () => {
     const result = {
       id: 'host1',
       name: 'host1',
+      hasSystemIntegration: true,
       features: [
         {
           name: 'system.core',
@@ -163,6 +168,7 @@ describe('#getAllFields', () => {
     const result: InfraMetadata = {
       id: 'host1',
       name: 'host1',
+      hasSystemIntegration: true,
       features: [
         {
           name: 'system.core',
@@ -231,6 +237,7 @@ describe('#getAllFields', () => {
       { name: 'host.architecture', value: 'x86_64' },
       { name: 'host.containerized', value: 'false' },
       { name: 'host.hostname', value: 'host1' },
+      { name: 'host.hasSystemIntegration', value: 'true' },
       {
         name: 'host.ip',
         value: [
@@ -266,6 +273,7 @@ describe('#getAllFields', () => {
     const result: InfraMetadata = {
       id: 'host1',
       name: 'host1',
+      hasSystemIntegration: true,
       features: [
         {
           name: 'system.core',
@@ -282,6 +290,7 @@ describe('#getAllFields', () => {
       { name: 'host.architecture', value: 'x86_64' },
       { name: 'host.containerized', value: 'false' },
       { name: 'host.hostname', value: 'host1' },
+      { name: 'host.hasSystemIntegration', value: 'true' },
       {
         name: 'host.ip',
         value: [
@@ -349,6 +358,7 @@ describe('#getAllFields', () => {
     const result: InfraMetadata = {
       id: 'host1',
       name: 'host1',
+      hasSystemIntegration: true,
       features: [
         {
           name: 'system.core',
@@ -365,6 +375,7 @@ describe('#getAllFields', () => {
       { name: 'host.architecture', value: 'x86_64' },
       { name: 'host.containerized', value: 'false' },
       { name: 'host.hostname', value: 'host1' },
+      { name: 'host.hasSystemIntegration', value: 'true' },
       {
         name: 'host.ip',
         value: [

x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/overview/services.tsx

@@ -17,11 +17,12 @@ import { Section } from '../../components/section';
 import { ServicesSectionTitle } from './section_titles';
 import { HOST_NAME_FIELD } from '../../../../../common/constants';
 import { LinkToApmServices } from '../../links';
-import { APM_HOST_FILTER_FIELD } from '../../constants';
+import { APM_HOST_FILTER_FIELD, APM_HOST_TROUBLESHOOTING_LINK } from '../../constants';
 import { LinkToApmService } from '../../links/link_to_apm_service';
 import { useKibanaEnvironmentContext } from '../../../../hooks/use_kibana';
 import { useRequestObservable } from '../../hooks/use_request_observable';
 import { useTabSwitcherContext } from '../../hooks/use_tab_switcher';
+import { useMetadataStateContext } from '../../hooks/use_metadata_state';
 
 export const ServicesContent = ({
   hostName,
@@ -33,6 +34,7 @@ export const ServicesContent = ({
   const { isServerlessEnv } = useKibanaEnvironmentContext();
   const { request$ } = useRequestObservable();
   const { isActiveTab } = useTabSwitcherContext();
+  const { metadata, loading: metadataLoading } = useMetadataStateContext();
 
   const linkProps = useLinkProps({
     app: 'home',
@@ -92,7 +94,7 @@ export const ServicesContent = ({
             defaultMessage: 'An error occurred while fetching services.',
           })}
         </EuiCallOut>
-      ) : isPending(status) ? (
+      ) : isPending(status) || metadataLoading ? (
         <EuiLoadingSpinner size="m" />
       ) : hasServices ? (
         <EuiFlexGroup
@@ -111,15 +113,15 @@ export const ServicesContent = ({
             </EuiFlexItem>
           ))}
         </EuiFlexGroup>
-      ) : (
+      ) : metadata?.hasSystemIntegration ? (
         <p>
           <FormattedMessage
             id="xpack.infra.assetDetails.services.noServicesMsg"
             defaultMessage="No services found on this host. Click {apmTutorialLink} to instrument your services with APM."
             values={{
               apmTutorialLink: (
                 <EuiLink
-                  data-test-subj="assetDetailsTooltiAPMTutorialLink"
+                  data-test-subj="assetDetailsTooltipAPMTutorialLink"
                   href={isServerlessEnv ? serverlessLinkProps.href : linkProps.href}
                 >
                   <FormattedMessage
@@ -129,7 +131,34 @@ export const ServicesContent = ({
                 </EuiLink>
               ),
             }}
-          />
+          />{' '}
+          <EuiLink
+            data-test-subj="assetDetailsAPMTroubleshootingLink"
+            href={APM_HOST_TROUBLESHOOTING_LINK}
+            target="_blank"
+          >
+            <FormattedMessage
+              id="xpack.infra.assetDetails.table.services.noServices.troubleshootingLink"
+              defaultMessage="Troubleshooting"
+            />
+          </EuiLink>
+        </p>
+      ) : (
+        <p>
+          <FormattedMessage
+            id="xpack.infra.assetDetails.services.noServicesWithApmMessage"
+            defaultMessage="No services found on this host."
+          />{' '}
+          <EuiLink
+            data-test-subj="assetDetailsAPMHostTroubleshootingLink"
+            href={APM_HOST_TROUBLESHOOTING_LINK}
+            target="_blank"
+          >
+            <FormattedMessage
+              id="xpack.infra.assetDetails.table.services.noServices.troubleshootingLink"
+              defaultMessage="Troubleshooting"
+            />
+          </EuiLink>
         </p>
       )}
     </Section>

x-pack/plugins/observability_solution/infra/public/components/asset_details/template/flyout.tsx

@@ -6,11 +6,9 @@
  */
 
 import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import React, { useCallback } from 'react';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
-import { InfraLoadingPanel } from '../../loading';
 import { ASSET_DETAILS_FLYOUT_COMPONENT_NAME } from '../constants';
 import { Content } from '../content/content';
 import { FlyoutHeader } from '../header/flyout_header';
@@ -19,6 +17,7 @@ import { useAssetDetailsUrlState } from '../hooks/use_asset_details_url_state';
 import { usePageHeader } from '../hooks/use_page_header';
 import { useTabSwitcherContext } from '../hooks/use_tab_switcher';
 import type { ContentTemplateProps } from '../types';
+import { useMetadataStateContext } from '../hooks/use_metadata_state';
 
 export const Flyout = ({
   tabs = [],
@@ -32,6 +31,7 @@ export const Flyout = ({
   const {
     services: { telemetry },
   } = useKibanaContextForPlugin();
+  const { metadata, loading: metadataLoading } = useMetadataStateContext();
 
   useEffectOnce(() => {
     telemetry.reportAssetDetailsFlyoutViewed({
@@ -53,24 +53,22 @@ export const Flyout = ({
       data-component-name={ASSET_DETAILS_FLYOUT_COMPONENT_NAME}
       data-asset-type={asset.type}
     >
-      {loading ? (
-        <InfraLoadingPanel
-          height="100%"
-          width="auto"
-          text={i18n.translate('xpack.infra.waffle.loadingDataText', {
-            defaultMessage: 'Loading data',
-          })}
-        />
-      ) : (
-        <>
-          <EuiFlyoutHeader hasBorder>
-            <FlyoutHeader title={asset.name} tabs={tabEntries} rightSideItems={rightSideItems} />
-          </EuiFlyoutHeader>
-          <EuiFlyoutBody>
-            <Content />
-          </EuiFlyoutBody>
-        </>
-      )}
+      <>
+        <EuiFlyoutHeader hasBorder>
+          <FlyoutHeader
+            title={asset.name}
+            tabs={tabEntries}
+            rightSideItems={rightSideItems}
+            hasSystemIntegration={!!metadata?.hasSystemIntegration}
+            assetType={asset.type}
+            metadataLoading={metadataLoading}
+            loading={loading}
+          />
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <Content />
+        </EuiFlyoutBody>
+      </>
     </EuiFlyout>
   );
 };