[Infrastructure UI] Improve alerts query and fix import (#152549)

## 📓 Summary

Closes #152544 

The issue was caused by a wrong import, where we were directly importing
the hook implementation instead of the context hook exposed by
`constate`.

This PR also improves a bit the alerts status filtering switching from
`match_phrase` to a `term` query.

## 🧪 Testing
- Navigate to the Hosts View
- Open dev tools
- Refresh the page or trigger a new search
- Verify the `/snapshot` API is called once to retrieve the table
metrics

---------

Co-authored-by: Marco Antonio Ghiani <[email protected]>
Co-authored-by: kibanamachine <[email protected]>

x-pack/plugins/infra/public/pages/metrics/hosts/constants.ts

@@ -13,23 +13,34 @@ export const ALERT_STATUS_ALL = 'all';
 
 export const ALL_ALERTS: AlertStatusFilter = {
   status: ALERT_STATUS_ALL,
-  query: '',
   label: i18n.translate('xpack.infra.hostsViewPage.tabs.alerts.alertStatusFilter.showAll', {
     defaultMessage: 'Show all',
   }),
 };
 
 export const ACTIVE_ALERTS: AlertStatusFilter = {
   status: ALERT_STATUS_ACTIVE,
-  query: `${ALERT_STATUS}: "${ALERT_STATUS_ACTIVE}"`,
+  query: {
+    term: {
+      [ALERT_STATUS]: {
+        value: ALERT_STATUS_ACTIVE,
+      },
+    },
+  },
   label: i18n.translate('xpack.infra.hostsViewPage.tabs.alerts.alertStatusFilter.active', {
     defaultMessage: 'Active',
   }),
 };
 
 export const RECOVERED_ALERTS: AlertStatusFilter = {
   status: ALERT_STATUS_RECOVERED,
-  query: `${ALERT_STATUS}: "${ALERT_STATUS_RECOVERED}"`,
+  query: {
+    term: {
+      [ALERT_STATUS]: {
+        value: ALERT_STATUS_RECOVERED,
+      },
+    },
+  },
   label: i18n.translate('xpack.infra.hostsViewPage.tabs.alerts.alertStatusFilter.recovered', {
     defaultMessage: 'Recovered',
   }),

x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_alerts_query.ts

@@ -8,11 +8,11 @@ import { useCallback, useMemo, useState } from 'react';
 import createContainer from 'constate';
 import { getTime } from '@kbn/data-plugin/common';
 import { TIMESTAMP } from '@kbn/rule-data-utils';
-import { BoolQuery, buildEsQuery, Filter, Query } from '@kbn/es-query';
+import { BoolQuery, buildEsQuery, Filter } from '@kbn/es-query';
 import { SnapshotNode } from '../../../../../common/http_api';
 import { useUnifiedSearchContext } from './use_unified_search';
 import { HostsState } from './use_unified_search_url_state';
-import { useHostsView } from './use_hosts_view';
+import { useHostsViewContext } from './use_hosts_view';
 import { AlertStatus } from '../types';
 import { ALERT_STATUS_QUERY } from '../constants';
 
@@ -21,7 +21,7 @@ export interface AlertsEsQuery {
 }
 
 export const useAlertsQueryImpl = () => {
-  const { hostNodes } = useHostsView();
+  const { hostNodes } = useHostsViewContext();
 
   const { unifiedSearchDateRange } = useUnifiedSearchContext();
 
@@ -65,22 +65,21 @@ const createAlertsEsQuery = ({
   hostNodes: SnapshotNode[];
   status?: AlertStatus;
 }): AlertsEsQuery => {
-  const alertStatusQuery = createAlertStatusQuery(status);
+  const alertStatusFilter = createAlertStatusFilter(status);
 
   const dateFilter = createDateFilter(dateRange);
   const hostsFilter = createHostsFilter(hostNodes);
 
-  const queries = alertStatusQuery ? [alertStatusQuery] : [];
-  const filters = [hostsFilter, dateFilter].filter(Boolean) as Filter[];
+  const filters = [alertStatusFilter, dateFilter, hostsFilter].filter(Boolean) as Filter[];
 
-  return buildEsQuery(undefined, queries, filters);
+  return buildEsQuery(undefined, [], filters);
 };
 
 const createDateFilter = (date: HostsState['dateRange']) =>
   getTime(undefined, date, { fieldName: TIMESTAMP });
 
-const createAlertStatusQuery = (status: AlertStatus = 'all'): Query | null =>
-  ALERT_STATUS_QUERY[status] ? { query: ALERT_STATUS_QUERY[status], language: 'kuery' } : null;
+const createAlertStatusFilter = (status: AlertStatus = 'all'): Filter | null =>
+  ALERT_STATUS_QUERY[status] ? { query: ALERT_STATUS_QUERY[status], meta: {} } : null;
 
 const createHostsFilter = (hosts: SnapshotNode[]): Filter => ({
   query: {

x-pack/plugins/infra/public/pages/metrics/hosts/types.ts

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { Filter } from '@kbn/es-query';
 import { ALERT_STATUS_ACTIVE, ALERT_STATUS_RECOVERED } from '@kbn/rule-data-utils';
 import { ALERT_STATUS_ALL } from './constants';
 
@@ -15,6 +16,6 @@ export type AlertStatus =
 
 export interface AlertStatusFilter {
   status: AlertStatus;
-  query: string;
+  query?: Filter['query'];
   label: string;
 }