[Infrastructure UI] Fix Lens charts for APM hosts (#156372)

## Summary

After the implementation of the new API and host limit, all charts now
load only after the table is loaded. This PR changes the filters the
page currently passes to Lens, to pass only a list of host names, the
same way Alerts and Logs tabs do it.

This also fixes a problem where filters remove documents containing
metrics data.


<img width="772" alt="image"
src="https://user-images.githubusercontent.com/2767137/235683301-35709698-49c2-4871-a724-2d2ca662f3f2.png">

<img width="772" alt="image"
src="https://user-images.githubusercontent.com/2767137/235683956-f7170213-afbd-400d-a190-a02087831af1.png">




### How to test

- Connect your local kibana to an oblt cluster
- Go to Hosts view
- Filter by `service.name: "opbeans-java"`

x-pack/plugins/infra/public/hooks/use_lens_attributes.ts

@@ -74,16 +74,22 @@ export const useLensAttributes = ({
     return visualizationAttributes;
   }, [dataView, formulaAPI, options, type, visualizationType]);
 
-  const injectFilters = (data: { filters: Filter[]; query: Query }): LensAttributes | null => {
+  const injectFilters = ({
+    filters,
+    query = { language: 'kuery', query: '' },
+  }: {
+    filters: Filter[];
+    query?: Query;
+  }): LensAttributes | null => {
     if (!attributes) {
       return null;
     }
     return {
       ...attributes,
       state: {
         ...attributes.state,
-        query: data.query,
-        filters: [...attributes.state.filters, ...data.filters],
+        query,
+        filters: [...attributes.state.filters, ...filters],
       },
     };
   };
@@ -95,7 +101,7 @@ export const useLensAttributes = ({
   }: {
     timeRange: TimeRange;
     filters: Filter[];
-    query: Query;
+    query?: Query;
   }) => {
     return {
       openInLens: {

x-pack/plugins/infra/public/pages/metrics/hosts/components/chart/lens_wrapper.tsx

@@ -19,7 +19,7 @@ export interface LensWrapperProps {
   id: string;
   attributes: LensAttributes | null;
   dateRange: TimeRange;
-  query: Query;
+  query?: Query;
   filters: Filter[];
   extraActions: Action[];
   lastReloadRequestTime?: number;

x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/tile.tsx

@@ -77,22 +77,18 @@ export const Tile = ({
     visualizationType: 'metricChart',
   });
 
-  const hostsFilterQuery = useMemo(() => {
-    return createHostsFilter(
-      hostNodes.map((p) => p.name),
-      dataView
-    );
+  const filters = useMemo(() => {
+    return [
+      createHostsFilter(
+        hostNodes.map((p) => p.name),
+        dataView
+      ),
+    ];
   }, [hostNodes, dataView]);
 
-  const filters = useMemo(
-    () => [...searchCriteria.filters, ...searchCriteria.panelFilters, ...[hostsFilterQuery]],
-    [hostsFilterQuery, searchCriteria.filters, searchCriteria.panelFilters]
-  );
-
   const extraActionOptions = getExtraActions({
     timeRange: searchCriteria.dateRange,
     filters,
-    query: searchCriteria.query,
   });
 
   const handleBrushEnd = ({ range }: BrushTriggerEvent['data']) => {
@@ -156,7 +152,6 @@ export const Tile = ({
             lastReloadRequestTime={afterLoadedState.lastReloadRequestTime}
             dateRange={afterLoadedState.dateRange}
             filters={afterLoadedState.filters}
-            query={afterLoadedState.query}
             onBrushEnd={handleBrushEnd}
             loading={loading}
           />

x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metric_chart.tsx

@@ -60,22 +60,18 @@ export const MetricChart = ({ title, type, breakdownSize }: MetricChartProps) =>
     visualizationType: 'lineChart',
   });
 
-  const hostsFilterQuery = useMemo(() => {
-    return createHostsFilter(
-      currentPage.map((p) => p.name),
-      dataView
-    );
+  const filters = useMemo(() => {
+    return [
+      createHostsFilter(
+        currentPage.map((p) => p.name),
+        dataView
+      ),
+    ];
   }, [currentPage, dataView]);
 
-  const filters = [
-    ...afterLoadedState.filters,
-    ...afterLoadedState.panelFilters,
-    ...[hostsFilterQuery],
-  ];
   const extraActionOptions = getExtraActions({
     timeRange: afterLoadedState.dateRange,
     filters,
-    query: afterLoadedState.query,
   });
 
   const extraActions: Action[] = [extraActionOptions.openInLens];
@@ -132,7 +128,6 @@ export const MetricChart = ({ title, type, breakdownSize }: MetricChartProps) =>
           lastReloadRequestTime={afterLoadedState.lastReloadRequestTime}
           dateRange={afterLoadedState.dateRange}
           filters={filters}
-          query={afterLoadedState.query}
           onBrushEnd={handleBrushEnd}
           loading={loading}
           hasTitle