[Infra][ObsUX] Hosts & Container Logs only overview (elastic#202992)

## Summary

Enables a logs only overview for hosts & containers. Disables the
metrics tab as there's no data incoming for metrics, and provides Logs
charts on the overview page detailing the Log Rate (all logs generated)
and Log Error Rate (all recorded errors).

https://github.com/user-attachments/assets/ced14b6d-dd08-4514-9066-6c02c62d5ff8

Closes elastic#201752

## How to test

This is tested using synthtrace data, loading the scenario below:

```
node scripts/synthtrace traces_logs_entities.ts --live
```

This loads a logs-only host, though if other scenarios contain logs only
containers, feel free to use those as well.

* Go to Inventory page. Click on a host or container.
* If it is a logs only host/container, no metrics tab should be shown.
Metrics KPI charts should be replaced with Logs KPI charts (Log Rate and
Log Error Rate).
* If the host/container contains metrics, the metrics tab should be
visible and the normal Metrics KPI charts should be present.

---------

Co-authored-by: Elastic Machine <[email protected]>
(cherry picked from commit 305bb1b)

# Conflicts:
#	x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/overview/overview.tsx

x-pack/plugins/observability_solution/infra/public/components/asset_details/components/kpis/container_kpi_charts.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, useEuiTheme } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import { Kpi } from './kpi';
@@ -79,10 +79,8 @@ const DockerKpiCharts = ({
   searchSessionId,
   loading = false,
 }: ContainerKpiChartsProps) => {
-  const { euiTheme } = useEuiTheme();
   const charts = useDockerContainerKpiCharts({
     dataViewId: dataView?.id,
-    seriesColor: euiTheme.colors.lightestShade,
   });
 
   return (
@@ -112,10 +110,8 @@ const KubernetesKpiCharts = ({
   searchSessionId,
   loading = false,
 }: ContainerKpiChartsProps) => {
-  const { euiTheme } = useEuiTheme();
   const charts = useK8sContainerKpiCharts({
     dataViewId: dataView?.id,
-    seriesColor: euiTheme.colors.lightestShade,
   });
 
   return (

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

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, useEuiTheme } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import { Kpi } from './kpi';
@@ -31,11 +31,9 @@ export const HostKpiCharts = ({
   searchSessionId,
   loading = false,
 }: HostKpiChartsProps) => {
-  const { euiTheme } = useEuiTheme();
   const charts = useHostKpiCharts({
     dataViewId: dataView?.id,
     getSubtitle,
-    seriesColor: euiTheme.colors.lightestShade,
   });
 
   return (

x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_chart_series_color.test.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 { useEuiTheme } from '@elastic/eui';
+import { renderHook } from '@testing-library/react';
+import { useChartSeriesColor } from './use_chart_series_color';
+
+describe('useChartSeriesColor', () => {
+  let seriesDefaultColor: string;
+
+  beforeEach(() => {
+    const { result } = renderHook(() => useEuiTheme());
+
+    // Don't try to test a hardcoded value, just use what is provided by EUI.
+    // If in the future this value changes, the tests won't break.
+    seriesDefaultColor = result.current.euiTheme.colors.backgroundLightText;
+  });
+
+  it('returns a default color value if given no input', () => {
+    const { result } = renderHook(() => useChartSeriesColor());
+
+    expect(result.current).not.toBe('');
+    expect(result.current).toBe(seriesDefaultColor);
+  });
+
+  it('returns a default color value if given an empty string', () => {
+    const { result } = renderHook(() => useChartSeriesColor(''));
+
+    expect(result.current).not.toBe('');
+    expect(result.current).toBe(seriesDefaultColor);
+  });
+
+  it('returns the provided color input', () => {
+    const { result } = renderHook(() => useChartSeriesColor('#fff'));
+
+    expect(result.current).not.toBe(seriesDefaultColor);
+    expect(result.current).toBe('#fff');
+  });
+});

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

@@ -0,0 +1,21 @@
+/*
+ * 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 { useEuiTheme } from '@elastic/eui';
+
+/**
+ * Provides either the input color, or yields the default EUI theme
+ * color for use as the KPI chart series color.
+ * @param seriesColor A user-defined color value
+ * @returns Either the input `seriesColor` or the default color from EUI
+ */
+export const useChartSeriesColor = (seriesColor?: string): string => {
+  const { euiTheme } = useEuiTheme();
+
+  // Prevent empty string being used as a valid color
+  return seriesColor || euiTheme.colors.backgroundLightText;
+};

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

@@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import useAsync from 'react-use/lib/useAsync';
 import { ContainerMetricTypes } from '../charts/types';
+import { useChartSeriesColor } from './use_chart_series_color';
 
 const getSubtitleFromFormula = (value: string) =>
   value.startsWith('max')
@@ -106,6 +107,8 @@ export const useDockerContainerKpiCharts = ({
   dataViewId?: string;
   seriesColor?: string;
 }) => {
+  seriesColor = useChartSeriesColor(seriesColor);
+
   const { value: charts = [] } = useAsync(async () => {
     const model = findInventoryModel('container');
     const { cpu, memory } = await model.metrics.getCharts();
@@ -134,6 +137,8 @@ export const useK8sContainerKpiCharts = ({
   dataViewId?: string;
   seriesColor?: string;
 }) => {
+  seriesColor = useChartSeriesColor(seriesColor);
+
   const { value: charts = [] } = useAsync(async () => {
     const model = findInventoryModel('container');
     const { cpu, memory } = await model.metrics.getCharts();

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

@@ -10,6 +10,7 @@ import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import { useMemo } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { HostMetricTypes } from '../charts/types';
+import { useChartSeriesColor } from './use_chart_series_color';
 
 export const useHostCharts = ({
   metric,
@@ -87,6 +88,8 @@ export const useHostKpiCharts = ({
   seriesColor?: string;
   getSubtitle?: (formulaValue: string) => string;
 }) => {
+  seriesColor = useChartSeriesColor(seriesColor);
+
   const { value: charts = [] } = useAsync(async () => {
     const model = findInventoryModel('host');
     const { cpu, memory, disk } = await model.metrics.getCharts();

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

@@ -0,0 +1,77 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { useMemo } from 'react';
+import { LensConfig } from '@kbn/lens-embeddable-utils/config_builder';
+import { useChartSeriesColor } from './use_chart_series_color';
+
+const LOG_RATE = i18n.translate('xpack.infra.assetDetails.charts.logRate', {
+  defaultMessage: 'Log Rate',
+});
+
+const LOG_ERROR_RATE = i18n.translate('xpack.infra.assetDetails.charts.logErrorRate', {
+  defaultMessage: 'Log Error Rate',
+});
+
+const logRateMetric: LensConfig & { id: string } = {
+  id: 'logMetric',
+  chartType: 'metric',
+  title: LOG_RATE,
+  label: LOG_RATE,
+  trendLine: true,
+  value: 'count()',
+  format: 'number',
+  decimals: 1,
+  normalizeByUnit: 's',
+};
+
+const logErrorRateMetric: LensConfig & { id: string } = {
+  id: 'logErrorMetric',
+  chartType: 'metric',
+  title: LOG_ERROR_RATE,
+  label: LOG_ERROR_RATE,
+  trendLine: true,
+  value:
+    'count(kql=\'log.level: "error" OR log.level: "ERROR" OR error.log.level: "error" OR error.log.level: "ERROR"\')',
+  format: 'number',
+  decimals: 1,
+  normalizeByUnit: 's',
+};
+
+export const useLogsCharts = ({
+  dataViewId,
+  seriesColor,
+}: {
+  dataViewId?: string;
+  seriesColor?: string;
+}) => {
+  seriesColor = useChartSeriesColor(seriesColor);
+
+  return useMemo(() => {
+    const dataset = dataViewId && {
+      dataset: {
+        index: dataViewId,
+      },
+    };
+
+    return {
+      charts: [
+        {
+          ...logRateMetric,
+          ...dataset,
+          seriesColor,
+        },
+        {
+          ...logErrorRateMetric,
+          ...dataset,
+          seriesColor,
+        },
+      ],
+    };
+  }, [dataViewId, seriesColor]);
+};

x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_page_header.tsx

@@ -26,6 +26,8 @@ import { LinkToNodeDetails } from '../links';
 import { ContentTabIds, type LinkOptions, type Tab, type TabIds } from '../types';
 import { useAssetDetailsRenderPropsContext } from './use_asset_details_render_props';
 import { useTabSwitcherContext } from './use_tab_switcher';
+import { useEntitySummary } from './use_entity_summary';
+import { isMetricsSignal } from '../utils/get_data_stream_types';
 
 type TabItem = NonNullable<Pick<EuiPageHeaderProps, 'tabs'>['tabs']>[number];
 
@@ -140,9 +142,31 @@ const useFeatureFlagTabs = () => {
   };
 };
 
+const useMetricsTabs = () => {
+  const { asset } = useAssetDetailsRenderPropsContext();
+  const { dataStreams } = useEntitySummary({
+    entityType: asset.type,
+    entityId: asset.id,
+  });
+
+  const isMetrics = isMetricsSignal(dataStreams);
+
+  const hasMetricsTab = useCallback(
+    (tabItem: Tab) => {
+      return isMetrics || tabItem.id !== ContentTabIds.METRICS;
+    },
+    [isMetrics]
+  );
+
+  return {
+    hasMetricsTab,
+  };
+};
+
 const useTabs = (tabs: Tab[]) => {
   const { showTab, activeTabId } = useTabSwitcherContext();
   const { isTabEnabled } = useFeatureFlagTabs();
+  const { hasMetricsTab } = useMetricsTabs();
 
   const onTabClick = useCallback(
     (tabId: TabIds) => {
@@ -153,16 +177,18 @@ const useTabs = (tabs: Tab[]) => {
 
   const tabEntries: TabItem[] = useMemo(
     () =>
-      tabs.filter(isTabEnabled).map(({ name, ...tab }) => {
-        return {
-          ...tab,
-          'data-test-subj': `infraAssetDetails${capitalize(tab.id)}Tab`,
-          onClick: () => onTabClick(tab.id),
-          isSelected: tab.id === activeTabId,
-          label: name,
-        };
-      }),
-    [activeTabId, isTabEnabled, onTabClick, tabs]
+      tabs
+        .filter((tab) => isTabEnabled(tab) && hasMetricsTab(tab))
+        .map(({ name, ...tab }) => {
+          return {
+            ...tab,
+            'data-test-subj': `infraAssetDetails${capitalize(tab.id)}Tab`,
+            onClick: () => onTabClick(tab.id),
+            isSelected: tab.id === activeTabId,
+            label: name,
+          };
+        }),
+    [activeTabId, isTabEnabled, hasMetricsTab, onTabClick, tabs]
   );
 
   return { tabEntries };

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

@@ -0,0 +1,59 @@
+/*
+ * 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, { useMemo } from 'react';
+import type { DataView } from '@kbn/data-views-plugin/public';
+import type { TimeRange } from '@kbn/es-query';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import {
+  findInventoryFields,
+  type InventoryItemType,
+} from '@kbn/metrics-data-access-plugin/common';
+import { buildCombinedAssetFilter } from '../../../../utils/filters/build';
+import { useSearchSessionContext } from '../../../../hooks/use_search_session';
+import { useLogsCharts } from '../../hooks/use_log_charts';
+import { Kpi } from '../../components/kpis/kpi';
+
+interface Props {
+  dataView?: DataView;
+  assetId: string;
+  assetType: InventoryItemType;
+  dateRange: TimeRange;
+}
+
+export const LogsContent = ({ assetId, assetType, dataView, dateRange }: Props) => {
+  const { searchSessionId } = useSearchSessionContext();
+
+  const filters = useMemo(() => {
+    return [
+      buildCombinedAssetFilter({
+        field: findInventoryFields(assetType).id,
+        values: [assetId],
+        dataView,
+      }),
+    ];
+  }, [dataView, assetId, assetType]);
+
+  const { charts } = useLogsCharts({
+    dataViewId: dataView?.id,
+  });
+
+  return (
+    <EuiFlexGroup direction="row" gutterSize="s" data-test-subj="infraAssetDetailsLogsGrid">
+      {charts.map((chartProps, index) => (
+        <EuiFlexItem key={index}>
+          <Kpi
+            {...chartProps}
+            dateRange={dateRange}
+            filters={filters}
+            searchSessionId={searchSessionId}
+          />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+};