[APM] Integrate Alert Search bar in alert tab

x-pack/plugins/apm/common/environment_filter_values.ts

@@ -55,6 +55,18 @@ export function getEnvironmentEsField(environment: string) {
   return { [SERVICE_ENVIRONMENT]: environment };
 }
 
+export function getEnvironmentKuery(environment: string) {
+  if (
+    !environment ||
+    environment === ENVIRONMENT_NOT_DEFINED_VALUE ||
+    environment === ENVIRONMENT_ALL_VALUE
+  ) {
+    return null;
+  }
+
+  return `${[SERVICE_ENVIRONMENT]}: ${environment} `;
+}
+
 // returns the environment url param that should be used
 // based on the requested environment. If the requested
 // environment is different from the URL parameter, we'll

x-pack/plugins/apm/public/components/app/alerts_overview/index.tsx

@@ -6,82 +6,118 @@
  */
 
 import React, { useState, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+import { ObservabilityAlertSearchBar } from '@kbn/observability-plugin/public';
+import { AlertStatus } from '@kbn/observability-plugin/common/typings';
 import { EuiPanel, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
-import { ALERT_STATUS } from '@kbn/rule-data-utils';
+import { BoolQuery } from '@kbn/es-query';
 import { AlertConsumers } from '@kbn/rule-data-utils';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ApmPluginStartDeps } from '../../../plugin';
 import { useAnyOfApmParams } from '../../../hooks/use_apm_params';
 import { SERVICE_NAME } from '../../../../common/es_fields/apm';
-import { environmentQuery } from '../../../../common/utils/environment_query';
-import {
-  AlertsTableStatusFilter,
-  ALL_ALERTS_FILTER,
-  AlertStatusFilterButton,
-} from './alerts_table_status_filter';
+import { getEnvironmentKuery } from '../../../../common/environment_filter_values';
+import { push } from '../../shared/links/url_helpers';
+
+export const ALERT_STATUS_ALL = 'all';
 
 export function AlertsOverview() {
+  const history = useHistory();
   const {
     path: { serviceName },
-    query: { environment },
+    query: { environment, rangeFrom, rangeTo, kuery },
   } = useAnyOfApmParams(
     '/services/{serviceName}/alerts',
     '/mobile-services/{serviceName}/alerts'
   );
   const { services } = useKibana<ApmPluginStartDeps>();
   const [alertStatusFilter, setAlertStatusFilter] =
-    useState<AlertStatusFilterButton>(ALL_ALERTS_FILTER);
+    useState<AlertStatus>(ALERT_STATUS_ALL);
+  const [esQuery, setEsQuery] = useState<{ bool: BoolQuery }>();
 
   const {
     triggersActionsUi: {
       getAlertsStateTable: AlertsStateTable,
+      getAlertsSearchBar: AlertsSearchBar,
       alertsTableConfigurationRegistry,
     },
+    notifications,
+    data: {
+      query: {
+        timefilter: { timefilter: timeFilterService },
+      },
+    },
   } = services;
 
-  const alertQuery = useMemo(
-    () => ({
-      bool: {
-        filter: [
-          {
-            term: { [SERVICE_NAME]: serviceName },
-          },
-          ...(alertStatusFilter !== ALL_ALERTS_FILTER
-            ? [
-                {
-                  term: { [ALERT_STATUS]: alertStatusFilter },
-                },
-              ]
-            : []),
-          ...environmentQuery(environment),
-        ],
-      },
-    }),
-    [serviceName, alertStatusFilter, environment]
-  );
+  const useToasts = () => notifications!.toasts;
+
+  const apmQueries = useMemo(() => {
+    const environmentKuery = getEnvironmentKuery(environment);
+    let query = `${SERVICE_NAME}:${serviceName}`;
 
-  const alertStateProps = {
-    alertsTableConfigurationRegistry,
-    id: 'service-overview-alerts',
-    configurationId: AlertConsumers.OBSERVABILITY,
-    featureIds: [AlertConsumers.APM],
-    query: alertQuery,
-    showExpandToDetails: false,
-  };
+    if (environmentKuery) {
+      query += ` AND ${environmentKuery}`;
+    }
+    return [
+      {
+        query,
+        language: 'kuery',
+      },
+    ];
+  }, [serviceName, environment]);
 
   return (
     <EuiPanel borderRadius="none" hasShadow={false}>
       <EuiFlexGroup direction="column" gutterSize="s">
         <EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <AlertsTableStatusFilter
+            <ObservabilityAlertSearchBar
+              appName={'apmApp'}
+              kuery={kuery}
+              onRangeFromChange={(rangeFrom) =>
+                push(history, {
+                  query: {
+                    rangeFrom,
+                  },
+                })
+              }
+              onRangeToChange={(rangeTo) =>
+                push(history, {
+                  query: {
+                    rangeTo,
+                  },
+                })
+              }
+              onKueryChange={(kuery) =>
+                push(history, {
+                  query: {
+                    kuery,
+                  },
+                })
+              }
+              defaultSearchQueries={apmQueries}
+              onStatusChange={setAlertStatusFilter}
+              onEsQueryChange={setEsQuery}
+              rangeTo={rangeTo}
+              rangeFrom={rangeFrom}
               status={alertStatusFilter}
-              onChange={setAlertStatusFilter}
+              services={{ timeFilterService, AlertsSearchBar, useToasts }}
             />
           </EuiFlexItem>
         </EuiFlexItem>
         <EuiFlexItem>
-          <AlertsStateTable {...alertStateProps} />
+          {esQuery && (
+            <AlertsStateTable
+              alertsTableConfigurationRegistry={
+                alertsTableConfigurationRegistry
+              }
+              id={'service-overview-alerts'}
+              configurationId={AlertConsumers.OBSERVABILITY}
+              featureIds={[AlertConsumers.APM]}
+              query={esQuery}
+              showExpandToDetails={false}
+            />
+          )}
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>

x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx

@@ -213,6 +213,9 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
     query: queryFromUrl,
   } = useApmParams(`/services/{serviceName}/${selectedTab}` as const);
 
+  const { rangeFrom, rangeTo } = queryFromUrl;
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
+
   const { data: serviceAlertsCount = { alertsCount: 0 } } = useFetcher(
     (callApmApi) => {
       return callApmApi(
@@ -222,11 +225,15 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
             path: {
               serviceName,
             },
+            query: {
+              start,
+              end,
+            },
           },
         }
       );
     },
-    [serviceName]
+    [serviceName, start, end]
   );
 
   const query = omit(

x-pack/plugins/apm/server/routes/services/get_services/get_service_alerts.ts

@@ -9,7 +9,11 @@ import {
   AggregationsCardinalityAggregate,
   AggregationsFilterAggregate,
 } from '@elastic/elasticsearch/lib/api/types';
-import { kqlQuery } from '@kbn/observability-plugin/server';
+import {
+  kqlQuery,
+  termQuery,
+  rangeQuery,
+} from '@kbn/observability-plugin/server';
 import {
   ALERT_RULE_PRODUCER,
   ALERT_STATUS,
@@ -37,23 +41,28 @@ export async function getServicesAlerts({
   maxNumServices = MAX_NUMBER_OF_SERVICES,
   serviceGroup,
   serviceName,
+  start,
+  end,
 }: {
   apmAlertsClient: ApmAlertsClient;
   kuery?: string;
   maxNumServices?: number;
   serviceGroup?: ServiceGroup | null;
   serviceName?: string;
+  start: number;
+  end: number;
 }) {
   const params = {
     size: 0,
     query: {
       bool: {
         filter: [
-          { term: { [ALERT_RULE_PRODUCER]: 'apm' } },
-          { term: { [ALERT_STATUS]: ALERT_STATUS_ACTIVE } },
+          ...termQuery(ALERT_RULE_PRODUCER, 'apm'),
+          ...termQuery(ALERT_STATUS, ALERT_STATUS_ACTIVE),
+          ...rangeQuery(start, end),
           ...kqlQuery(kuery),
           ...serviceGroupQuery(serviceGroup),
-          ...(serviceName ? [{ term: { [SERVICE_NAME]: serviceName } }] : []),
+          ...termQuery(SERVICE_NAME, serviceName),
         ],
       },
     },

x-pack/plugins/apm/server/routes/services/route.ts

@@ -1220,6 +1220,7 @@ const serviceAlertsRoute = createApmServerRoute({
     path: t.type({
       serviceName: t.string,
     }),
+    query: rangeRt,
   }),
   options: { tags: ['access:apm'] },
   handler: async (
@@ -1229,13 +1230,17 @@ const serviceAlertsRoute = createApmServerRoute({
     alertsCount: number;
   }> => {
     const { params } = resources;
-
+    const {
+      query: { start, end },
+    } = params;
     const { serviceName } = params.path;
 
     const apmAlertsClient = await getApmAlertsClient(resources);
     const servicesAlerts = await getServicesAlerts({
       serviceName,
       apmAlertsClient,
+      start,
+      end,
     });
 
     return servicesAlerts.length > 0

x-pack/plugins/translations/translations/fr-FR.json

@@ -6966,10 +6966,6 @@
     "xpack.apm.alerts.action_variables.transactionType": "Type de transaction pour lequel l'alerte est créée",
     "xpack.apm.alerts.action_variables.triggerValue": "Valeur ayant dépassé le seuil et déclenché l'alerte",
     "xpack.apm.alerts.action_variables.viewInAppUrl": "Lien vers la vue ou la fonctionnalité d'Elastic qui peut être utilisée pour examiner l'alerte et son contexte de manière plus approfondie",
-    "xpack.apm.alerts.alertStatusFilter.active": "Actif",
-    "xpack.apm.alerts.alertStatusFilter.button.legend": "Filtrer par",
-    "xpack.apm.alerts.alertStatusFilter.recovered": "Récupéré",
-    "xpack.apm.alerts.alertStatusFilter.showAll": "Afficher tout",
     "xpack.apm.alerts.anomalySeverity.criticalLabel": "critique",
     "xpack.apm.alerts.anomalySeverity.majorLabel": "majeur",
     "xpack.apm.alerts.anomalySeverity.minor": "mineure",
@@ -36523,4 +36519,4 @@
     "xpack.painlessLab.title": "Painless Lab",
     "xpack.painlessLab.walkthroughButtonLabel": "Présentation"
   }
-}
+}

x-pack/plugins/translations/translations/ja-JP.json

@@ -6956,10 +6956,6 @@
     "xpack.apm.alerts.action_variables.transactionType": "アラートが作成されるトランザクションタイプ",
     "xpack.apm.alerts.action_variables.triggerValue": "しきい値に達し、アラートをトリガーした値",
     "xpack.apm.alerts.action_variables.viewInAppUrl": "アラートとコンテキストを調査するために使用できる、Elastic内のビューまたは機能へのリンク",
-    "xpack.apm.alerts.alertStatusFilter.active": "アクティブ",
-    "xpack.apm.alerts.alertStatusFilter.button.legend": "フィルタリング条件",
-    "xpack.apm.alerts.alertStatusFilter.recovered": "回復済み",
-    "xpack.apm.alerts.alertStatusFilter.showAll": "すべて表示",
     "xpack.apm.alerts.anomalySeverity.criticalLabel": "致命的",
     "xpack.apm.alerts.anomalySeverity.majorLabel": "メジャー",
     "xpack.apm.alerts.anomalySeverity.minor": "マイナー",
@@ -36491,4 +36487,4 @@
     "xpack.painlessLab.title": "Painless Lab",
     "xpack.painlessLab.walkthroughButtonLabel": "実地検証"
   }
-}
+}