[Infra][ObsUX] Hosts & Container Logs only overview

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

@@ -82,7 +82,7 @@ const DockerKpiCharts = ({
   const { euiTheme } = useEuiTheme();
   const charts = useDockerContainerKpiCharts({
     dataViewId: dataView?.id,
-    seriesColor: euiTheme.colors.lightestShade,
+    seriesColor: euiTheme.colors.backgroundLightText,
   });
 
   return (
@@ -115,7 +115,7 @@ const KubernetesKpiCharts = ({
   const { euiTheme } = useEuiTheme();
   const charts = useK8sContainerKpiCharts({
     dataViewId: dataView?.id,
-    seriesColor: euiTheme.colors.lightestShade,
+    seriesColor: euiTheme.colors.backgroundLightText,
   });
 
   return (

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

@@ -35,7 +35,7 @@ export const HostKpiCharts = ({
   const charts = useHostKpiCharts({
     dataViewId: dataView?.id,
     getSubtitle,
-    seriesColor: euiTheme.colors.lightestShade,
+    seriesColor: euiTheme.colors.backgroundLightText,
   });
 
   return (

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

@@ -0,0 +1,74 @@
+/*
+ * 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';
+
+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',
+});
+
+export const logMetric: LensConfig & { id: string } = {
+  id: 'logMetric',
+  chartType: 'metric',
+  title: LOG_RATE,
+  label: LOG_RATE,
+  trendLine: true,
+  value: 'count()',
+  format: 'number',
+  decimals: 1,
+  normalizeByUnit: 's',
+};
+
+export const logErrorMetric: 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;
+}) => {
+  return useMemo(() => {
+    const dataset = dataViewId && {
+      dataset: {
+        index: dataViewId,
+      },
+    };
+
+    return {
+      charts: [
+        {
+          ...logMetric,
+          ...dataset,
+          seriesColor,
+        },
+        {
+          ...logErrorMetric,
+          ...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 useLogsOnlyTabs = () => {
+  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 } = useLogsOnlyTabs();
 
   const onTabClick = useCallback(
     (tabId: TabIds) => {
@@ -153,16 +177,19 @@ 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(isTabEnabled)
+        .filter(hasMetricsTab)
+        .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,61 @@
+/*
+ * 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, useEuiTheme } 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 { euiTheme } = useEuiTheme();
+  const { charts } = useLogsCharts({
+    dataViewId: dataView?.id,
+    seriesColor: euiTheme.colors.backgroundLightText,
+  });
+
+  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>
+  );
+};

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

@@ -26,7 +26,8 @@ import { MetricsContent } from './metrics/metrics';
 import { AddMetricsCallout } from '../../add_metrics_callout';
 import { AddMetricsCalloutKey } from '../../add_metrics_callout/constants';
 import { useEntitySummary } from '../../hooks/use_entity_summary';
-import { isMetricsSignal } from '../../utils/get_data_stream_types';
+import { isMetricsSignal, isLogsSignal } from '../../utils/get_data_stream_types';
+import { LogsContent } from './logs';
 
 export const Overview = () => {
   const { dateRange } = useDatePickerContext();
@@ -36,7 +37,7 @@ export const Overview = () => {
     loading: metadataLoading,
     error: fetchMetadataError,
   } = useMetadataStateContext();
-  const { metrics } = useDataViewsContext();
+  const { metrics, logs } = useDataViewsContext();
   const isFullPageView = renderMode.mode === 'page';
   const { dataStreams, status: dataStreamsStatus } = useEntitySummary({
     entityType: asset.type,
@@ -59,6 +60,10 @@ export const Overview = () => {
     />
   );
 
+  const isMetrics = isMetricsSignal(dataStreams);
+  const isLogs = isLogsSignal(dataStreams);
+  const isLogsOnly = !isMetrics && isLogs;
+
   const shouldShowCallout = () => {
     if (
       dataStreamsStatus !== 'success' ||
@@ -68,14 +73,14 @@ export const Overview = () => {
       return false;
     }
 
-    return !isMetricsSignal(dataStreams);
+    return !isMetrics;
   };
 
   const showAddMetricsCallout = shouldShowCallout();
 
   return (
     <EuiFlexGroup direction="column" gutterSize="m">
-      {showAddMetricsCallout ? (
+      {showAddMetricsCallout && (
         <EuiFlexItem grow={false}>
           <AddMetricsCallout
             id={addMetricsCalloutId}
@@ -84,6 +89,16 @@ export const Overview = () => {
             }}
           />
         </EuiFlexItem>
+      )}
+      {isLogsOnly ? (
+        <EuiFlexItem grow={false}>
+          <LogsContent
+            assetId={asset.id}
+            assetType={asset.type}
+            dateRange={dateRange}
+            dataView={logs.dataView}
+          />
+        </EuiFlexItem>
       ) : (
         <EuiFlexItem grow={false}>
           <KPIGrid
@@ -111,14 +126,16 @@ export const Overview = () => {
           <SectionSeparator />
         </EuiFlexItem>
       ) : null}
-      <EuiFlexItem grow={false}>
-        <MetricsContent
-          assetId={asset.id}
-          assetType={asset.type}
-          dateRange={dateRange}
-          dataView={metrics.dataView}
-        />
-      </EuiFlexItem>
+      {isMetrics ? (
+        <EuiFlexItem grow={false}>
+          <MetricsContent
+            assetId={asset.id}
+            assetType={asset.type}
+            dateRange={dateRange}
+            dataView={metrics.dataView}
+          />
+        </EuiFlexItem>
+      ) : null}
     </EuiFlexGroup>
   );
 };