[Infra] Provide troubleshooting information on the host details page

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

@@ -18,9 +18,20 @@ import {
   type EuiPageHeaderProps,
 } 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;
+};
 
-export const FlyoutHeader = ({ title, tabs = [], rightSideItems = [] }: Props) => {
+export const FlyoutHeader = ({
+  title,
+  tabs = [],
+  rightSideItems = [],
+  hasSystemIntegration,
+  assetType,
+}: Props) => {
   const { euiTheme } = useEuiTheme();
 
   return (
@@ -39,7 +50,13 @@ export const FlyoutHeader = ({ title, tabs = [], rightSideItems = [] }: Props) =
           `}
         >
           <EuiTitle size="xs">
-            <h4>{title}</h4>
+            <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',
@@ -266,6 +272,7 @@ describe('#getAllFields', () => {
     const result: InfraMetadata = {
       id: 'host1',
       name: 'host1',
+      hasSystemIntegration: true,
       features: [
         {
           name: 'system.core',
@@ -349,6 +356,7 @@ describe('#getAllFields', () => {
     const result: InfraMetadata = {
       id: 'host1',
       name: 'host1',
+      hasSystemIntegration: true,
       features: [
         {
           name: 'system.core',

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

@@ -19,6 +19,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 +33,7 @@ export const Flyout = ({
   const {
     services: { telemetry },
   } = useKibanaContextForPlugin();
+  const { metadata, loading: metadataLoading } = useMetadataStateContext();
 
   useEffectOnce(() => {
     telemetry.reportAssetDetailsFlyoutViewed({
@@ -53,7 +55,7 @@ export const Flyout = ({
       data-component-name={ASSET_DETAILS_FLYOUT_COMPONENT_NAME}
       data-asset-type={asset.type}
     >
-      {loading ? (
+      {loading || metadataLoading ? (
         <InfraLoadingPanel
           height="100%"
           width="auto"
@@ -64,7 +66,13 @@ export const Flyout = ({
       ) : (
         <>
           <EuiFlyoutHeader hasBorder>
-            <FlyoutHeader title={asset.name} tabs={tabEntries} rightSideItems={rightSideItems} />
+            <FlyoutHeader
+              title={asset.name}
+              tabs={tabEntries}
+              rightSideItems={rightSideItems}
+              hasSystemIntegration={!!metadata?.hasSystemIntegration}
+              assetType={asset.type}
+            />
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
             <Content />

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

@@ -22,6 +22,7 @@ import { ContentTemplateProps } from '../types';
 import { getIntegrationsAvailable } from '../utils';
 import { InfraPageTemplate } from '../../shared/templates/infra_page_template';
 import { OnboardingFlow } from '../../shared/templates/no_data_config';
+import { PageTitleWithPopover } from '../header/page_title_with_popover';
 
 const DATA_AVAILABILITY_PER_TYPE: Partial<Record<InventoryItemType, string[]>> = {
   host: [SYSTEM_INTEGRATION],
@@ -83,7 +84,16 @@ export const Page = ({ tabs = [], links = [] }: ContentTemplateProps) => {
       onboardingFlow={asset.type === 'host' ? OnboardingFlow.Hosts : OnboardingFlow.Infra}
       dataAvailabilityModules={DATA_AVAILABILITY_PER_TYPE[asset.type] || undefined}
       pageHeader={{
-        pageTitle: loading ? <EuiLoadingSpinner size="m" /> : asset.name,
+        pageTitle: loading ? (
+          <EuiLoadingSpinner size="m" />
+        ) : asset.type === 'host' ? (
+          <PageTitleWithPopover
+            hasSystemMetrics={!!metadata?.hasSystemIntegration}
+            name={asset.name}
+          />
+        ) : (
+          asset.name
+        ),
         tabs: tabEntries,
         rightSideItems,
         breadcrumbs: headerBreadcrumbs,

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx

@@ -22,6 +22,7 @@ import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import { EuiToolTip } from '@elastic/eui';
 import { EuiBadge } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { APM_HOST_TROUBLESHOOTING_LINK } from '../../../../components/asset_details/constants';
 import { Popover } from '../../../../components/asset_details/tabs/common/popover';
 import { HOST_NAME_FIELD } from '../../../../../common/constants';
 import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
@@ -318,7 +319,7 @@ export const useHostsTable = () => {
                       <p>
                         <EuiLink
                           data-test-subj="hostsView-tableRow-hasSystemMetrics-learnMoreLink"
-                          href="https://ela.st/host-troubleshooting"
+                          href={APM_HOST_TROUBLESHOOTING_LINK}
                           target="_blank"
                         >
                           <FormattedMessage

x-pack/plugins/observability_solution/infra/server/routes/metadata/index.ts

@@ -78,17 +78,22 @@ export const initMetadataRoute = (libs: InfraBackendLibs) => {
       );
       const id = metricsMetadata.id;
       const name = metricsMetadata.name || id;
-      return response.ok({
-        body: InfraMetadataRT.encode({
-          id,
-          name,
-          features: [...metricFeatures, ...cloudMetricsFeatures],
-          info: {
-            ...info,
-            timestamp: info['@timestamp'],
-          },
-        }),
+
+      const responseBody = InfraMetadataRT.encode({
+        id,
+        name,
+        features: [...metricFeatures, ...cloudMetricsFeatures],
+        info: {
+          ...info,
+          timestamp: info['@timestamp'],
+        },
       });
+      if (nodeType === 'host') {
+        const hasSystemIntegration = metricsMetadata?.hasSystemIntegration;
+        return response.ok({ body: { ...responseBody, hasSystemIntegration } });
+      }
+
+      return response.ok({ body: responseBody });
     }
   );
 };