[APM] Keep selected tab in url to avoid changing when refreshing (#145257)

Closes https://github.com/elastic/kibana/issues/144961


https://user-images.githubusercontent.com/31922082/201953368-04f48fb9-73d2-46ea-a4d9-c20667038a80.mov

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

@@ -5,8 +5,9 @@
  * 2.0.
  */
 
-import { EuiTabbedContent, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiLoadingSpinner, EuiTabs, EuiTab } from '@elastic/eui';
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { useApmParams } from '../../../../hooks/use_apm_params';
 import { useTimeRange } from '../../../../hooks/use_time_range';
@@ -14,6 +15,7 @@ import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { EmptyPrompt } from './empty_prompt';
 import { FailurePrompt } from './failure_prompt';
 import { useTabs } from './use_tabs';
+import { push } from '../../../shared/links/url_helpers';
 
 const INITIAL_STATE = {
   containerIds: [],
@@ -23,8 +25,9 @@ const INITIAL_STATE = {
 
 export function InfraTabs() {
   const { serviceName } = useApmServiceContext();
+  const history = useHistory();
   const {
-    query: { environment, kuery, rangeFrom, rangeTo },
+    query: { environment, kuery, rangeFrom, rangeTo, detailTab },
   } = useApmParams('/services/{serviceName}/infrastructure');
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
@@ -89,13 +92,30 @@ export function InfraTabs() {
     );
   }
 
+  const currentTab = tabs.find(({ id }) => id === detailTab) ?? tabs[0];
+
   return (
     <>
-      <EuiTabbedContent
-        tabs={tabs}
-        initialSelectedTab={tabs[0]}
-        autoFocus="selected"
-      />
+      <EuiTabs>
+        {tabs.map(({ id, name }) => {
+          return (
+            <EuiTab
+              onClick={() => {
+                push(history, {
+                  query: {
+                    detailTab: id,
+                  },
+                });
+              }}
+              isSelected={currentTab.id === id}
+              id={id}
+            >
+              {name}
+            </EuiTab>
+          );
+        })}
+      </EuiTabs>
+      {currentTab.content}
     </>
   );
 }

x-pack/plugins/apm/public/components/app/infra_overview/infra_tabs/use_tabs.tsx

@@ -10,6 +10,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import type { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
 import React from 'react';
 import { EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { ApmPluginStartDeps } from '../../../../plugin';
 
 type Tab = NonNullable<EuiTabbedContentProps['tabs']>[0] & {
@@ -17,6 +18,12 @@ type Tab = NonNullable<EuiTabbedContentProps['tabs']>[0] & {
   hidden?: boolean;
 };
 
+export enum InfraTab {
+  containers = 'containers',
+  pods = 'pods',
+  hosts = 'hosts',
+}
+
 export function useTabs({
   containerIds,
   podNames,
@@ -102,20 +109,26 @@ export function useTabs({
 
   const tabs: Tab[] = [
     {
-      id: 'containers',
-      name: 'Containers',
+      id: InfraTab.containers,
+      name: i18n.translate('xpack.apm.views.infra.tabs.containers', {
+        defaultMessage: 'Containers',
+      }),
       content: containerMetricsTable,
       hidden: containerIds && containerIds.length <= 0,
     },
     {
-      id: 'pods',
-      name: 'Pods',
+      id: InfraTab.pods,
+      name: i18n.translate('xpack.apm.views.infra.tabs.pods', {
+        defaultMessage: 'Pods',
+      }),
       content: podMetricsTable,
       hidden: podNames && podNames.length <= 0,
     },
     {
-      id: 'hosts',
-      name: 'Hosts',
+      id: InfraTab.hosts,
+      name: i18n.translate('xpack.apm.views.infra.tabs.hosts', {
+        defaultMessage: 'Hosts',
+      }),
       content: hostMetricsTable,
     },
   ];

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

@@ -21,6 +21,7 @@ import { AlertsOverview } from '../../app/alerts_overview';
 import { ErrorGroupDetails } from '../../app/error_group_details';
 import { ErrorGroupOverview } from '../../app/error_group_overview';
 import { InfraOverview } from '../../app/infra_overview';
+import { InfraTab } from '../../app/infra_overview/infra_tabs/use_tabs';
 import { Metrics } from '../../app/metrics';
 import { MetricsDetails } from '../../app/metrics_details';
 import { ServiceDependencies } from '../../app/service_dependencies';
@@ -320,18 +321,27 @@ export const serviceDetail = {
           showKueryBar: false,
         },
       }),
-      '/services/{serviceName}/infrastructure': page({
-        tab: 'infrastructure',
-        title: i18n.translate('xpack.apm.views.infra.title', {
-          defaultMessage: 'Infrastructure',
+      '/services/{serviceName}/infrastructure': {
+        ...page({
+          tab: 'infrastructure',
+          title: i18n.translate('xpack.apm.views.infra.title', {
+            defaultMessage: 'Infrastructure',
+          }),
+          element: <InfraOverview />,
+          searchBarOptions: {
+            showKueryBar: false,
+          },
         }),
-        element: <InfraOverview />,
-        searchBarOptions: {
-          showKueryBar: false,
-          showTimeComparison: false,
-          showTransactionTypeSelector: false,
-        },
-      }),
+        params: t.partial({
+          query: t.partial({
+            detailTab: t.union([
+              t.literal(InfraTab.containers),
+              t.literal(InfraTab.pods),
+              t.literal(InfraTab.hosts),
+            ]),
+          }),
+        }),
+      },
       '/services/{serviceName}/alerts': page({
         tab: 'alerts',
         title: i18n.translate('xpack.apm.views.alerts.title', {