[Infra][Hosts] Display N/A badge for APM hosts without system metrics

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/table/add_data_troubleshooting_popover.tsx

@@ -0,0 +1,111 @@
+/*
+ * 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 {
+  EuiBadge,
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiPopover,
+  EuiPopoverFooter,
+  EuiPopoverTitle,
+  EuiText,
+} from '@elastic/eui';
+
+import {
+  ObservabilityOnboardingLocatorParams,
+  OBSERVABILITY_ONBOARDING_LOCATOR,
+} from '@kbn/deeplinks-observability';
+import { i18n } from '@kbn/i18n';
+import { useBoolean } from '@kbn/react-hooks';
+
+import { useKibanaContextForPlugin } from '../../../../../hooks/use_kibana';
+import { APM_HOST_TROUBLESHOOTING_LINK } from '../../../../../components/asset_details/constants';
+
+const popoverContent = {
+  title: i18n.translate('xpack.infra.addDataPopover.wantToSeeMorePopoverTitleLabel', {
+    defaultMessage: 'Want to see more?',
+  }),
+  content: i18n.translate('xpack.infra.addDataPopover.understandHostPerformanceByTextLabel', {
+    defaultMessage: 'Understand host performance by collecting more metrics.',
+  }),
+  button: i18n.translate('xpack.infra.addDataPopover.understandHostPerformanceByTextLabel', {
+    defaultMessage: 'Add data',
+  }),
+  link: i18n.translate('xpack.infra.addDataPopover.troubleshootingLinkLabel', {
+    defaultMessage: 'Troubleshooting',
+  }),
+};
+
+const badgeContent = i18n.translate('xpack.infra.addDataPopover.naBadgeLabel', {
+  defaultMessage: 'N/A',
+});
+
+export const AddDataTroubleshootingPopover = () => {
+  const [isPopoverOpen, { off: closePopover, toggle: togglePopover }] = useBoolean(false);
+
+  const {
+    services: { share },
+  } = useKibanaContextForPlugin();
+  const addDataLinkHref = share.url.locators
+    .get<ObservabilityOnboardingLocatorParams>(OBSERVABILITY_ONBOARDING_LOCATOR)
+    ?.getRedirectUrl({ category: 'logs' });
+
+  const onButtonClick = () => togglePopover();
+
+  return (
+    <EuiPopover
+      button={
+        <EuiBadge
+          color="hollow"
+          iconType="iInCircle"
+          iconSide="left"
+          onClick={onButtonClick}
+          onClickAriaLabel={popoverContent.title}
+          iconOnClick={onButtonClick}
+          iconOnClickAriaLabel={popoverContent.title}
+        >
+          {badgeContent}
+        </EuiBadge>
+      }
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+    >
+      <EuiPopoverTitle>{popoverContent.title}</EuiPopoverTitle>
+      <EuiText size="s" style={{ width: 300 }}>
+        {popoverContent.content}
+      </EuiText>
+      <EuiPopoverFooter>
+        <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              size="s"
+              href={addDataLinkHref}
+              data-test-subj="infraHostsTableWithoutSystemMetricsPopoverAddMoreButton"
+            >
+              {popoverContent.button}
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText size="s">
+              <EuiLink
+                href={APM_HOST_TROUBLESHOOTING_LINK}
+                target="_blank"
+                data-test-subj="infraHostsTableWithoutSystemMetricsPopoverTroubleshootingLink"
+                external
+              >
+                {popoverContent.link}
+              </EuiLink>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPopoverFooter>
+    </EuiPopover>
+  );
+};

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useHostsTable } from './use_hosts_table';
+import { type HostNodeRow, useHostsTable } from './use_hosts_table';
 import { renderHook } from '@testing-library/react-hooks';
 import { InfraAssetMetricsItem } from '../../../../../common/http_api';
 import * as useUnifiedSearchHooks from './use_unified_search';
@@ -158,7 +158,7 @@ describe('useHostTable hook', () => {
     } as unknown as ReturnType<typeof useKibanaContextForPluginHook.useKibanaContextForPlugin>);
   });
   it('it should map the nodes returned from the snapshot api to a format matching eui table items', () => {
-    const expected = [
+    const expected: Array<Partial<HostNodeRow>> = [
       {
         name: 'host-0',
         os: '-',

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

@@ -40,6 +40,7 @@ import { ColumnHeader } from '../components/table/column_header';
 import { TABLE_COLUMN_LABEL, TABLE_CONTENT_LABEL } from '../translations';
 import { METRICS_TOOLTIP } from '../../../../common/visualizations';
 import { buildCombinedAssetFilter } from '../../../../utils/filters/build';
+import { AddDataTroubleshootingPopover } from '../components/table/add_data_troubleshooting_popover';
 
 /**
  * Columns and items types
@@ -67,6 +68,18 @@ const formatMetric = (type: InfraAssetMetricType, value: number | undefined | nu
   return value || value === 0 ? createInventoryMetricFormatter({ type })(value) : 'N/A';
 };
 
+const buildMetricCell = (
+  value: number,
+  formatType: InfraAssetMetricType,
+  hasSystemMetrics?: boolean
+) => {
+  if (!hasSystemMetrics && value === null) {
+    return <AddDataTroubleshootingPopover />;
+  }
+
+  return formatMetric(formatType, value);
+};
+
 const buildItemsList = (nodes: InfraAssetMetricsItem[]): HostNodeRow[] => {
   return nodes.map(({ metrics, metadata, name, alertsCount, hasSystemMetrics }) => {
     const metadataKeyValue = metadata.reduce(
@@ -89,7 +102,7 @@ const buildItemsList = (nodes: InfraAssetMetricsItem[]): HostNodeRow[] => {
       ...metrics.reduce(
         (acc, curr) => ({
           ...acc,
-          [curr.name]: curr.value ?? 0,
+          [curr.name]: curr.value,
         }),
         {} as HostMetrics
       ),
@@ -104,12 +117,15 @@ const isTitleColumn = (cell: HostNodeRow[keyof HostNodeRow]): cell is HostNodeRo
 };
 
 const sortValues = (aValue: any, bValue: any, { direction }: Sorting) => {
-  if (typeof aValue === 'string' && typeof bValue === 'string') {
-    return direction === 'desc' ? bValue.localeCompare(aValue) : aValue.localeCompare(bValue);
+  const a = aValue ?? -1;
+  const b = bValue ?? -1;
+
+  if (typeof a === 'string' && typeof b === 'string') {
+    return direction === 'desc' ? b.localeCompare(a) : a.localeCompare(b);
   }
 
-  if (isNumber(aValue) && isNumber(bValue)) {
-    return direction === 'desc' ? bValue - aValue : aValue - bValue;
+  if (isNumber(a) && isNumber(b)) {
+    return direction === 'desc' ? b - a : a - b;
   }
 
   return 1;
@@ -358,7 +374,8 @@ export const useHostsTable = () => {
         field: 'cpuV2',
         sortable: true,
         'data-test-subj': 'hostsView-tableRow-cpuUsage',
-        render: (avg: number) => formatMetric('cpuV2', avg),
+        render: (avg: number, { hasSystemMetrics }: HostNodeRow) =>
+          buildMetricCell(avg, 'cpuV2', hasSystemMetrics),
         align: 'right',
       },
       {
@@ -373,7 +390,8 @@ export const useHostsTable = () => {
         field: 'normalizedLoad1m',
         sortable: true,
         'data-test-subj': 'hostsView-tableRow-normalizedLoad1m',
-        render: (avg: number) => formatMetric('normalizedLoad1m', avg),
+        render: (avg: number, { hasSystemMetrics }: HostNodeRow) =>
+          buildMetricCell(avg, 'normalizedLoad1m', hasSystemMetrics),
         align: 'right',
       },
       {
@@ -388,7 +406,8 @@ export const useHostsTable = () => {
         field: 'memory',
         sortable: true,
         'data-test-subj': 'hostsView-tableRow-memoryUsage',
-        render: (avg: number) => formatMetric('memory', avg),
+        render: (avg: number, { hasSystemMetrics }: HostNodeRow) =>
+          buildMetricCell(avg, 'memory', hasSystemMetrics),
         align: 'right',
       },
       {
@@ -403,7 +422,8 @@ export const useHostsTable = () => {
         field: 'memoryFree',
         sortable: true,
         'data-test-subj': 'hostsView-tableRow-memoryFree',
-        render: (avg: number) => formatMetric('memoryFree', avg),
+        render: (avg: number, { hasSystemMetrics }: HostNodeRow) =>
+          buildMetricCell(avg, 'memoryFree', hasSystemMetrics),
         align: 'right',
       },
       {
@@ -418,7 +438,8 @@ export const useHostsTable = () => {
         field: 'diskSpaceUsage',
         sortable: true,
         'data-test-subj': 'hostsView-tableRow-diskSpaceUsage',
-        render: (max: number) => formatMetric('diskSpaceUsage', max),
+        render: (max: number, { hasSystemMetrics }: HostNodeRow) =>
+          buildMetricCell(max, 'diskSpaceUsage', hasSystemMetrics),
         align: 'right',
       },
       {
@@ -433,7 +454,8 @@ export const useHostsTable = () => {
         field: 'rxV2',
         sortable: true,
         'data-test-subj': 'hostsView-tableRow-rx',
-        render: (avg: number) => formatMetric('rx', avg),
+        render: (avg: number, { hasSystemMetrics }: HostNodeRow) =>
+          buildMetricCell(avg, 'rx', hasSystemMetrics),
         align: 'right',
       },
       {
@@ -448,7 +470,8 @@ export const useHostsTable = () => {
         field: 'txV2',
         sortable: true,
         'data-test-subj': 'hostsView-tableRow-tx',
-        render: (avg: number) => formatMetric('tx', avg),
+        render: (avg: number, { hasSystemMetrics }: HostNodeRow) =>
+          buildMetricCell(avg, 'tx', hasSystemMetrics),
         align: 'right',
       },
     ],