[Infra UI] Centralize chart components (#163283)

closes [#161957](#161957)

## Summary

This PR encapsulates the styling and logic to render the Lens charts
components. Doing so simplifies the usage in places that render these
charts, eliminating the previously necessary code duplication


### How to test
- Start a local Kibana instance
- Navigate to `Infrastructure` > `Hosts`
- Confirm that all charts still work
  - Play with the filters
  - Verify whether only charts above the fold are rendered
  - Open the flyout
    - Switch hosts with the flyout open

---------

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/infra/public/common/visualizations/lens/dashboards/host/kpi_grid_config.ts

@@ -5,24 +5,32 @@
  * 2.0.
  */
 
-import { TypedLensByValueInput } from '@kbn/lens-plugin/public';
 import { i18n } from '@kbn/i18n';
-import { Layer } from '../../../../../hooks/use_lens_attributes';
+import type { TypedLensByValueInput } from '@kbn/lens-plugin/public';
+import type { Layer } from '../../../../../hooks/use_lens_attributes';
 import { hostLensFormulas } from '../../../constants';
-import { FormulaConfig } from '../../../types';
 import { TOOLTIP } from './translations';
-import { MetricLayerOptions } from '../../visualization_types/layers';
 
-export interface KPIChartProps
-  extends Pick<TypedLensByValueInput, 'id' | 'title' | 'overrides' | 'style'> {
+import type { FormulaConfig } from '../../../types';
+import type { MetricLayerOptions } from '../../visualization_types';
+
+export const KPI_CHART_HEIGHT = 150;
+export const AVERAGE_SUBTITLE = i18n.translate(
+  'xpack.infra.assetDetailsEmbeddable.overview.kpi.subtitle.average',
+  {
+    defaultMessage: 'Average',
+  }
+);
+
+export interface KPIChartProps extends Pick<TypedLensByValueInput, 'id' | 'title' | 'overrides'> {
   layers: Layer<MetricLayerOptions, FormulaConfig, 'data'>;
   toolTip: string;
 }
 
 export const KPI_CHARTS: KPIChartProps[] = [
   {
     id: 'cpuUsage',
-    title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.cpuUsage.title', {
+    title: i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.kpi.cpuUsage.title', {
       defaultMessage: 'CPU Usage',
     }),
     layers: {
@@ -45,9 +53,12 @@ export const KPI_CHARTS: KPIChartProps[] = [
   },
   {
     id: 'normalizedLoad1m',
-    title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.normalizedLoad1m.title', {
-      defaultMessage: 'CPU Usage',
-    }),
+    title: i18n.translate(
+      'xpack.infra.assetDetailsEmbeddable.overview.kpi.normalizedLoad1m.title',
+      {
+        defaultMessage: 'CPU Usage',
+      }
+    ),
     layers: {
       data: {
         ...hostLensFormulas.normalizedLoad1m,
@@ -68,7 +79,7 @@ export const KPI_CHARTS: KPIChartProps[] = [
   },
   {
     id: 'memoryUsage',
-    title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.memoryUsage.title', {
+    title: i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.kpi.memoryUsage.title', {
       defaultMessage: 'CPU Usage',
     }),
     layers: {
@@ -91,7 +102,7 @@ export const KPI_CHARTS: KPIChartProps[] = [
   },
   {
     id: 'diskSpaceUsage',
-    title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.diskSpaceUsage.title', {
+    title: i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.kpi.diskSpaceUsage.title', {
       defaultMessage: 'CPU Usage',
     }),
     layers: {

x-pack/plugins/infra/public/components/asset_details/constants.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export const METRIC_CHART_HEIGHT = 300;

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

@@ -4,21 +4,55 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React from 'react';
+
+import React, { useMemo } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { Tile, type TileProps } from './tile';
-import { KPI_CHARTS } from '../../../../../common/visualizations/lens/dashboards/host/kpi_grid_config';
+import type { DataView } from '@kbn/data-views-plugin/public';
+import type { TimeRange } from '@kbn/es-query';
+import { LensChart, TooltipContent } from '../../../../lens';
+import { buildCombinedHostsFilter } from '../../../../../utils/filters/build';
+import {
+  KPI_CHARTS,
+  KPI_CHART_HEIGHT,
+  AVERAGE_SUBTITLE,
+} from '../../../../../common/visualizations/lens/dashboards/host/kpi_grid_config';
+
+interface Props {
+  dataView?: DataView;
+  nodeName: string;
+  timeRange: TimeRange;
+}
+
+export const KPIGrid = React.memo(({ nodeName, dataView, timeRange }: Props) => {
+  const filters = useMemo(() => {
+    return [
+      buildCombinedHostsFilter({
+        field: 'host.name',
+        values: [nodeName],
+        dataView,
+      }),
+    ];
+  }, [dataView, nodeName]);
 
-export const KPIGrid = React.memo(({ nodeName, dataView, timeRange: dateRange }: TileProps) => {
   return (
-    <>
-      <EuiFlexGroup direction="row" gutterSize="s" data-test-subj="assetDetailsKPIGrid">
-        {KPI_CHARTS.map((chartProp, index) => (
-          <EuiFlexItem key={index}>
-            <Tile {...chartProp} nodeName={nodeName} dataView={dataView} timeRange={dateRange} />
-          </EuiFlexItem>
-        ))}
-      </EuiFlexGroup>
-    </>
+    <EuiFlexGroup direction="row" gutterSize="s" data-test-subj="assetDetailsKPIGrid">
+      {KPI_CHARTS.map(({ id, layers, title, toolTip }, index) => (
+        <EuiFlexItem key={index}>
+          <LensChart
+            id={`infraAssetDetailsKPI${id}`}
+            dataView={dataView}
+            dateRange={timeRange}
+            layers={{ ...layers, options: { ...layers.options, subtitle: AVERAGE_SUBTITLE } }}
+            height={KPI_CHART_HEIGHT}
+            filters={filters}
+            title={title}
+            toolTip={<TooltipContent description={toolTip} />}
+            visualizationType="lnsMetric"
+            disableTriggers
+            hidePanelTitles
+          />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
   );
 });