[Infra] Add OTel metric charts to Hosts View (#229488)

closes [#226333](#226333)

## Summary

This PR adds Otel system metrics Lens formulas and enables them on the
hosts view



**ecs:**

<img width="900" height="645" alt="image"
src="https://github.com/user-attachments/assets/e79ac886-f398-41d4-99a3-eaeeeb598596"
/>

<img width="900" height="615" alt="image"
src="https://github.com/user-attachments/assets/586a6793-d536-4f0e-8ed5-6a9cc801e1ca"
/>

<img width="900" height="501" alt="image"
src="https://github.com/user-attachments/assets/fc52ea34-62e2-4c31-89b2-e1e2185849c8"
/>

<img width="900" height="176" alt="image"
src="https://github.com/user-attachments/assets/45e95934-400a-4f0f-b46d-656011affea8"
/>




**semconv:**

<img width="900" height="650" alt="image"
src="https://github.com/user-attachments/assets/6b4fb7f3-f81b-4e24-afab-a1efb7581d4b"
/>

<img width="900" height="635" alt="image"
src="https://github.com/user-attachments/assets/1ed5d709-d129-4737-883f-4b4b0518b5c1"
/>

<img width="900" height="501" alt="image"
src="https://github.com/user-attachments/assets/83eac473-f8f3-4fd8-8244-f9abca55ee07"
/>

<img width="900" height="177" alt="image"
src="https://github.com/user-attachments/assets/6985b0c6-de80-41eb-8ee4-60cf0ca861f4"
/>



>[!NOTE]
>Disk Space Available metric value is not the same between otel and
semconv, and that is because of the difference in how the `filesystem`
scrapper collects the same data
Here is the data broken down by mount point to help understand what
happens

| otel | beats |
|------|-----|
|<img width="861" height="496" alt="image"
src="https://github.com/user-attachments/assets/62a7e073-e661-40fa-8a0b-45d70edce714"
/>|<img width="1178" height="520" alt="image"
src="https://github.com/user-attachments/assets/d968f3f3-0cde-41c1-8984-424fbfa69df5"
/>|




### How to test:

- Clone:
https://github.com/crespocarlos/elastic-stack-docker-compose/tree/inframetricsreceiver-removal-test-env
- Spin up the docker containers
- Connect your local kibana to the elasticsearch container
- Set the `xpack.infra.featureFlags.hostOtelEnabled: true`
- Navigate to Infrastructure > Hosts

Author: crespocarlos

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -25897,7 +25897,6 @@
     "xpack.metricsData.assetDetails.metrics.label.diskReadIOPS": "Entrées et sorties par seconde en lecture sur le disque",
     "xpack.metricsData.assetDetails.metrics.label.diskReadThroughput": "Rendement de lecture du disque",
     "xpack.metricsData.assetDetails.metrics.label.diskSpaceAvailable": "Espace disque disponible",
-    "xpack.metricsData.assetDetails.metrics.label.diskSpaceAvailablity": "Disponibilité de l'espace disque",
     "xpack.metricsData.assetDetails.metrics.label.diskThroughput": "Rendement du disque",
     "xpack.metricsData.assetDetails.metrics.label.diskUsage": "Utilisation du disque",
     "xpack.metricsData.assetDetails.metrics.label.diskUsageAverage": "Utilisation moyenne du disque",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -25928,7 +25928,6 @@
     "xpack.metricsData.assetDetails.metrics.label.diskReadIOPS": "ディスク読み取りIOPS",
     "xpack.metricsData.assetDetails.metrics.label.diskReadThroughput": "ディスク読み取りスループット",
     "xpack.metricsData.assetDetails.metrics.label.diskSpaceAvailable": "空きディスク容量",
-    "xpack.metricsData.assetDetails.metrics.label.diskSpaceAvailablity": "空きディスク容量",
     "xpack.metricsData.assetDetails.metrics.label.diskThroughput": "Disk Throughput",
     "xpack.metricsData.assetDetails.metrics.label.diskUsage": "ディスク使用量",
     "xpack.metricsData.assetDetails.metrics.label.diskUsageAverage": "ディスク使用量（平均）",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -25918,7 +25918,6 @@
     "xpack.metricsData.assetDetails.metrics.label.diskReadIOPS": "磁盘读取 IOPS",
     "xpack.metricsData.assetDetails.metrics.label.diskReadThroughput": "磁盘读取吞吐量",
     "xpack.metricsData.assetDetails.metrics.label.diskSpaceAvailable": "可用磁盘空间",
-    "xpack.metricsData.assetDetails.metrics.label.diskSpaceAvailablity": "磁盘空间可用性",
     "xpack.metricsData.assetDetails.metrics.label.diskThroughput": "磁盘吞吐量",
     "xpack.metricsData.assetDetails.metrics.label.diskUsage": "磁盘使用率",
     "xpack.metricsData.assetDetails.metrics.label.diskUsageAverage": "磁盘使用率平均值",

x-pack/solutions/observability/plugins/infra/public/components/asset_details/components/kpis/host_kpi_charts.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import { EuiFlexItem } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
+import type { DataSchemaFormat } from '@kbn/metrics-data-access-plugin/common';
 import { Kpi } from './kpi';
 import { useHostKpiCharts } from '../../hooks/use_host_metrics_charts';
 
@@ -20,6 +21,8 @@ export interface HostKpiChartsProps {
   lastReloadRequestTime?: number;
   getSubtitle?: (formulaValue: string) => string;
   loading?: boolean;
+
+  schema?: DataSchemaFormat | null;
 }
 
 export const HostKpiCharts = ({
@@ -30,10 +33,12 @@ export const HostKpiCharts = ({
   query,
   lastReloadRequestTime,
   loading = false,
+  schema,
 }: HostKpiChartsProps) => {
   const charts = useHostKpiCharts({
     dataViewId: dataView?.id,
     getSubtitle,
+    schema,
   });
 
   return (

x-pack/solutions/observability/plugins/infra/public/components/asset_details/hooks/use_host_metrics_charts.ts

@@ -6,8 +6,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
-import { useMemo } from 'react';
+import { DataSchemaFormat, findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import useAsync from 'react-use/lib/useAsync';
 import type { HostMetricTypes } from '../charts/types';
 import { useChartSeriesColor } from './use_chart_series_color';
@@ -16,13 +15,20 @@ export const useHostCharts = ({
   metric,
   dataViewId,
   overview,
+  schema,
 }: {
   metric: HostMetricTypes;
   dataViewId?: string;
   overview?: boolean;
+  schema?: DataSchemaFormat | null;
 }) => {
   const { value: charts = [], error } = useAsync(async () => {
-    const hostCharts = await getHostsCharts({ metric, overview });
+    const hostCharts = await getHostsCharts({
+      metric,
+      overview,
+      schema: schema ?? DataSchemaFormat.ECS,
+    });
+
     return hostCharts.map((chart) => ({
       ...chart,
       ...(dataViewId && {
@@ -31,30 +37,38 @@ export const useHostCharts = ({
         },
       }),
     }));
-  }, [dataViewId, metric, overview]);
+  }, [dataViewId, metric, overview, schema]);
 
   return { charts, error };
 };
 
 export const useKubernetesCharts = ({
   dataViewId,
   overview,
+  schema,
 }: {
   dataViewId?: string;
   overview?: boolean;
+  schema?: DataSchemaFormat | null;
 }) => {
-  const model = useMemo(() => findInventoryModel('host'), []);
+  const model = findInventoryModel('host');
 
   const { value: charts = [], error } = useAsync(async () => {
-    const { kibernetesNode } = await model.metrics.getCharts();
+    const { kubernetesNode } = await model.metrics.getCharts({
+      schema: schema ?? DataSchemaFormat.ECS,
+    });
+
+    if (!kubernetesNode) {
+      return [];
+    }
 
     const items = overview
-      ? [kibernetesNode.xy.nodeCpuCapacity, kibernetesNode.xy.nodeMemoryCapacity]
+      ? [kubernetesNode.xy.nodeCpuCapacity, kubernetesNode.xy.nodeMemoryCapacity]
       : [
-          kibernetesNode.xy.nodeCpuCapacity,
-          kibernetesNode.xy.nodeMemoryCapacity,
-          kibernetesNode.xy.nodeDiskCapacity,
-          kibernetesNode.xy.nodePodCapacity,
+          kubernetesNode.xy.nodeCpuCapacity,
+          kubernetesNode.xy.nodeMemoryCapacity,
+          kubernetesNode.xy.nodeDiskCapacity,
+          kubernetesNode.xy.nodePodCapacity,
         ];
 
     return items.map((chart) => {
@@ -67,7 +81,7 @@ export const useKubernetesCharts = ({
         }),
       };
     });
-  }, [dataViewId, overview, model.metrics]);
+  }, [model.metrics, schema, overview, dataViewId]);
 
   return { charts, error };
 };
@@ -83,16 +97,20 @@ export const useHostKpiCharts = ({
   dataViewId,
   seriesColor,
   getSubtitle,
+  schema,
 }: {
   dataViewId?: string;
   seriesColor?: string;
   getSubtitle?: (formulaValue: string) => string;
+  schema?: DataSchemaFormat | null;
 }) => {
   seriesColor = useChartSeriesColor(seriesColor);
 
   const { value: charts = [] } = useAsync(async () => {
     const model = findInventoryModel('host');
-    const { cpu, memory, disk } = await model.metrics.getCharts();
+    const { cpu, memory, disk } = await model.metrics.getCharts({
+      schema: schema ?? DataSchemaFormat.ECS,
+    });
 
     return [
       cpu.metric.cpuUsage,
@@ -110,20 +128,25 @@ export const useHostKpiCharts = ({
         },
       }),
     }));
-  }, [dataViewId, seriesColor, getSubtitle]);
+  }, [dataViewId, seriesColor, getSubtitle, schema]);
 
   return charts;
 };
 
 const getHostsCharts = async ({
   metric,
   overview,
+  schema,
 }: {
   metric: HostMetricTypes;
   overview?: boolean;
+  schema?: DataSchemaFormat | null;
 }) => {
   const model = findInventoryModel('host');
-  const { cpu, memory, network, disk, logs } = await model.metrics.getCharts();
+
+  const { cpu, memory, network, disk, logs } = await model.metrics.getCharts({
+    schema: schema ?? DataSchemaFormat.ECS,
+  });
 
   switch (metric) {
     case 'cpu':

x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/components/kpis/kpi_charts.tsx

@@ -80,6 +80,7 @@ export const KpiCharts = () => {
       lastReloadRequestTime={afterLoadedState.reloadRequestTime}
       getSubtitle={afterLoadedState.getSubtitle}
       loading={loading}
+      schema={searchCriteria.preferredSchema}
     />
   );
 };

x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metrics_grid.tsx

@@ -12,10 +12,15 @@ import { Chart } from './chart';
 import { Popover } from '../../common/popover';
 import { useMetricsDataViewContext } from '../../../../../../containers/metrics_source';
 import { useMetricsCharts } from '../../../hooks/use_metrics_charts';
+import { useUnifiedSearchContext } from '../../../hooks/use_unified_search';
 
 export const MetricsGrid = () => {
   const { metricsView } = useMetricsDataViewContext();
-  const charts = useMetricsCharts({ dataViewId: metricsView?.dataViewReference.id });
+  const { searchCriteria } = useUnifiedSearchContext();
+  const charts = useMetricsCharts({
+    dataViewId: metricsView?.dataViewReference.id,
+    schema: searchCriteria.preferredSchema,
+  });
 
   return (
     <>

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

@@ -17,7 +17,7 @@ import useAsync from 'react-use/lib/useAsync';
 import { isEqual } from 'lodash';
 import { isNumber } from 'lodash/fp';
 import type { CloudProvider } from '@kbn/custom-icons';
-import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
+import { DataSchemaFormat, findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import { EuiToolTip } from '@elastic/eui';
 import { EuiBadge } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -42,6 +42,7 @@ 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';
+import { useUnifiedSearchContext } from './use_unified_search';
 
 /**
  * Columns and items types
@@ -153,11 +154,18 @@ export const useHostsTable = () => {
   const inventoryModel = findInventoryModel('host');
   const [selectedItems, setSelectedItems] = useState<HostNodeRow[]>([]);
   const { hostNodes } = useHostsViewContext();
+  const { searchCriteria } = useUnifiedSearchContext();
 
   const displayAlerts = hostNodes.some((item) => 'alertsCount' in item);
   const showApmHostTroubleshooting = hostNodes.some((item) => !item.hasSystemMetrics);
 
-  const { value: formulas } = useAsync(() => inventoryModel.metrics.getFormulas());
+  const { value: formulas } = useAsync(
+    () =>
+      inventoryModel.metrics.getFormulas({
+        schema: searchCriteria.preferredSchema ?? DataSchemaFormat.ECS,
+      }),
+    [inventoryModel.metrics, searchCriteria.preferredSchema]
+  );
 
   const [{ detailsItemId, pagination, sorting }, setProperties] = useHostsTableUrlState();
   const {
@@ -496,6 +504,7 @@ export const useHostsTable = () => {
         align: 'right',
       },
     ],
+
     [
       displayAlerts,
       showApmHostTroubleshooting,

x-pack/solutions/observability/plugins/infra/public/pages/metrics/hosts/hooks/use_metrics_charts.ts

@@ -7,13 +7,22 @@
 
 import useAsync from 'react-use/lib/useAsync';
 import type { LensBreakdownConfig } from '@kbn/lens-embeddable-utils/config_builder';
+import { DataSchemaFormat } from '@kbn/metrics-data-access-plugin/common';
 import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import { PAGE_SIZE_OPTIONS } from '../constants';
 
-export const useMetricsCharts = ({ dataViewId }: { dataViewId?: string }) => {
+export const useMetricsCharts = ({
+  dataViewId,
+  schema,
+}: {
+  dataViewId?: string;
+  schema?: DataSchemaFormat | null;
+}) => {
   const { value: charts = [] } = useAsync(async () => {
     const model = findInventoryModel('host');
-    const { cpu, disk, memory, network } = await model.metrics.getCharts();
+    const { cpu, disk, memory, network } = await model.metrics.getCharts({
+      schema: schema ?? DataSchemaFormat.ECS,
+    });
 
     return [
       cpu.xy.cpuUsage,
@@ -47,7 +56,7 @@ export const useMetricsCharts = ({ dataViewId }: { dataViewId?: string }) => {
         },
       }),
     }));
-  }, [dataViewId]);
+  }, [schema, dataViewId]);
 
   return charts;
 };