[8.9] [Infrastructure UI] Hosts view charts fix (#160736) (#161114)

# Backport

This will backport the following commits from `main` to `8.9`:
- [[Infrastructure UI] Hosts view charts fix
(#160736)](#160736)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Carlos
Crespo","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-07-03T15:12:39Z","message":"[Infrastructure
UI] Hosts view charts fix (#160736)\n\ncloses:
[#160734](https://github.com/elastic/kibana/issues/160734)\r\n\r\n##
Summary\r\n\r\nThis PR fixes an inconsistency between the table and
charts when there\r\nis no data to be displayed\r\n\r\n<img
width=\"600\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2767137/a74429ab-a132-42eb-9bee-9d19fb2ad255\">\r\n\r\n\r\nThe
Lens charts were not receiving the `query` property from
Unified\r\nSearch, causing them to run a query with incomplete
filters\r\n\r\n\r\n### How to test\r\n\r\n- Start a local Kibana
instance\r\n- Navigate to `Infrastructure > Hosts`\r\n- Use the unified
search using filters that won't match with any hosts\r\n- Verify the
charts\r\n - Navigate from a KPI and Metrics charts to
Lens\r\n\r\n---------\r\n\r\nCo-authored-by: Kibana Machine
<[email protected]>","sha":"ca6df02289d6f9b03795cf2ab4ada9787056bcb2","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Metrics
UI","Team:Infra Monitoring
UI","release_note:skip","backport:prev-minor","Feature:ObsHosts","v8.9.0","v8.10.0"],"number":160736,"url":"https://github.com/elastic/kibana/pull/160736","mergeCommit":{"message":"[Infrastructure
UI] Hosts view charts fix (#160736)\n\ncloses:
[#160734](https://github.com/elastic/kibana/issues/160734)\r\n\r\n##
Summary\r\n\r\nThis PR fixes an inconsistency between the table and
charts when there\r\nis no data to be displayed\r\n\r\n<img
width=\"600\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2767137/a74429ab-a132-42eb-9bee-9d19fb2ad255\">\r\n\r\n\r\nThe
Lens charts were not receiving the `query` property from
Unified\r\nSearch, causing them to run a query with incomplete
filters\r\n\r\n\r\n### How to test\r\n\r\n- Start a local Kibana
instance\r\n- Navigate to `Infrastructure > Hosts`\r\n- Use the unified
search using filters that won't match with any hosts\r\n- Verify the
charts\r\n - Navigate from a KPI and Metrics charts to
Lens\r\n\r\n---------\r\n\r\nCo-authored-by: Kibana Machine
<[email protected]>","sha":"ca6df02289d6f9b03795cf2ab4ada9787056bcb2"}},"sourceBranch":"main","suggestedTargetBranches":["8.9"],"targetPullRequestStates":[{"branch":"8.9","label":"v8.9.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/160736","number":160736,"mergeCommit":{"message":"[Infrastructure
UI] Hosts view charts fix (#160736)\n\ncloses:
[#160734](https://github.com/elastic/kibana/issues/160734)\r\n\r\n##
Summary\r\n\r\nThis PR fixes an inconsistency between the table and
charts when there\r\nis no data to be displayed\r\n\r\n<img
width=\"600\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2767137/a74429ab-a132-42eb-9bee-9d19fb2ad255\">\r\n\r\n\r\nThe
Lens charts were not receiving the `query` property from
Unified\r\nSearch, causing them to run a query with incomplete
filters\r\n\r\n\r\n### How to test\r\n\r\n- Start a local Kibana
instance\r\n- Navigate to `Infrastructure > Hosts`\r\n- Use the unified
search using filters that won't match with any hosts\r\n- Verify the
charts\r\n - Navigate from a KPI and Metrics charts to
Lens\r\n\r\n---------\r\n\r\nCo-authored-by: Kibana Machine
<[email protected]>","sha":"ca6df02289d6f9b03795cf2ab4ada9787056bcb2"}}]}]
BACKPORT-->

Co-authored-by: Carlos Crespo <[email protected]>

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

@@ -85,13 +85,14 @@ export const Tile = ({
 
   const filters = useMemo(() => {
     return [
+      ...searchCriteria.filters,
       buildCombinedHostsFilter({
         field: 'host.name',
         values: hostNodes.map((p) => p.name),
         dataView,
       }),
     ];
-  }, [hostNodes, dataView]);
+  }, [searchCriteria.filters, hostNodes, dataView]);
 
   const handleBrushEnd = useCallback(
     ({ range }: BrushTriggerEvent['data']) => {
@@ -122,9 +123,10 @@ export const Tile = ({
     () =>
       getExtraActions({
         timeRange: afterLoadedState.dateRange,
+        query: searchCriteria.query,
         filters,
       }),
-    [afterLoadedState.dateRange, filters, getExtraActions]
+    [afterLoadedState.dateRange, filters, getExtraActions, searchCriteria.query]
   );
 
   return (
@@ -168,6 +170,7 @@ 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

@@ -65,21 +65,23 @@ export const MetricChart = ({ title, type, breakdownSize }: MetricChartProps) =>
 
   const filters = useMemo(() => {
     return [
+      ...searchCriteria.filters,
       buildCombinedHostsFilter({
         field: 'host.name',
         values: currentPage.map((p) => p.name),
         dataView,
       }),
     ];
-  }, [currentPage, dataView]);
+  }, [currentPage, dataView, searchCriteria.filters]);
 
   const extraActions: Action[] = useMemo(
     () =>
       getExtraActions({
         timeRange: afterLoadedState.dateRange,
+        query: afterLoadedState.query,
         filters,
       }),
-    [afterLoadedState.dateRange, filters, getExtraActions]
+    [afterLoadedState.dateRange, afterLoadedState.query, filters, getExtraActions]
   );
 
   const handleBrushEnd = useCallback(
@@ -137,6 +139,7 @@ export const MetricChart = ({ title, type, breakdownSize }: MetricChartProps) =>
           lastReloadRequestTime={afterLoadedState.lastReloadRequestTime}
           dateRange={afterLoadedState.dateRange}
           filters={filters}
+          query={afterLoadedState.query}
           onBrushEnd={handleBrushEnd}
           loading={loading}
           hasTitle