Fix infinite loading of APM alert table (elastic#161134)

Fixes elastic#161095

## Summary

This PR fixes triggering and immediately canceling /bsearch requests
infinitely.

(cherry picked from commit 023b23f)

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import { ObservabilityAlertSearchBar } from '@kbn/observability-plugin/public';
 import { AlertStatus } from '@kbn/observability-plugin/common/typings';
@@ -72,6 +72,11 @@ export function AlertsOverview() {
     ];
   }, [serviceName, environment]);
 
+  const onKueryChange = useCallback(
+    (value) => push(history, { query: { kuery: value } }),
+    [history]
+  );
+
   return (
     <EuiPanel borderRadius="none" hasShadow={false}>
       <EuiFlexGroup direction="column" gutterSize="s">
@@ -86,9 +91,7 @@ export function AlertsOverview() {
               onRangeToChange={(value) =>
                 push(history, { query: { rangeTo: value } })
               }
-              onKueryChange={(value) =>
-                push(history, { query: { kuery: value } })
-              }
+              onKueryChange={onKueryChange}
               defaultSearchQueries={apmQueries}
               onStatusChange={setAlertStatusFilter}
               onEsQueryChange={setEsQuery}

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

@@ -387,5 +387,6 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
       prepend,
       append,
       isSelected: key === selectedTab,
+      'data-test-subj': `${key}Tab`,
     }));
 }

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

@@ -222,5 +222,6 @@ function useTabs({ selectedTabKey }: { selectedTabKey: Tab['key'] }) {
       label,
       append,
       isSelected: key === selectedTabKey,
+      'data-test-subj': `${key}Tab`,
     }));
 }

x-pack/test/functional/apps/apm/correlations/failed_transaction_correlations.ts

@@ -16,6 +16,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'error', 'timePicker', 'security']);
   const testSubjects = getService('testSubjects');
   const appsMenu = getService('appsMenu');
+  const observability = getService('observability');
 
   const testData = {
     correlationsTab: 'Failed transaction correlations',
@@ -150,6 +151,18 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
           );
         });
       });
+
+      it('navigates to the alerts tab', async function () {
+        await find.clickByCssSelector(`[data-test-subj="alertsTab"]`);
+
+        await PageObjects.timePicker.timePickerExists();
+        await PageObjects.timePicker.setCommonlyUsedTime('Last_15 minutes');
+
+        // Should show no data message
+        await retry.try(async () => {
+          await observability.overview.common.getAlertsTableNoDataOrFail();
+        });
+      });
     });
   });
 }