Add infrastructure tab to service-details (#123037)

* Add infrastructure tab to service-details

* Fix ts recursive limit

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

packages/kbn-typed-react-router-config/src/types/index.ts

@@ -257,6 +257,18 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
       MapRoute<TRoutes[8], TParents> &
       MapRoute<TRoutes[7], TParents> &
       MapRoute<TRoutes[9], TParents>
+  : TRoutes extends [Route, Route, Route, Route, Route, Route, Route, Route, Route, Route, Route]
+  ? MapRoute<TRoutes[0], TParents> &
+      MapRoute<TRoutes[1], TParents> &
+      MapRoute<TRoutes[2], TParents> &
+      MapRoute<TRoutes[3], TParents> &
+      MapRoute<TRoutes[4], TParents> &
+      MapRoute<TRoutes[5], TParents> &
+      MapRoute<TRoutes[6], TParents> &
+      MapRoute<TRoutes[8], TParents> &
+      MapRoute<TRoutes[7], TParents> &
+      MapRoute<TRoutes[9], TParents> &
+      MapRoute<TRoutes[10], TParents>
   : {};
 
 // const element = null as any;

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

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiEmptyPrompt, EuiLoadingLogo } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+export function InfraOverview() {
+  return (
+    <EuiEmptyPrompt
+      icon={<EuiLoadingLogo logo="logoMetrics" size="xl" />}
+      title={
+        <h2>
+          {i18n.translate('xpack.apm.infra.announcement', {
+            defaultMessage: 'Infrastructure data coming soon',
+          })}
+        </h2>
+      }
+    />
+  );
+}

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

@@ -27,6 +27,7 @@ import { TransactionDetails } from '../../app/transaction_details';
 import { ServiceProfiling } from '../../app/service_profiling';
 import { ServiceDependencies } from '../../app/service_dependencies';
 import { ServiceLogs } from '../../app/service_logs';
+import { InfraOverview } from '../../app/infra_overview';
 
 function page<TPath extends string>({
   path,
@@ -265,6 +266,17 @@ export const serviceDetail = {
       }),
       element: <ServiceProfiling />,
     }),
+    page({
+      path: '/services/{serviceName}/infra',
+      tab: 'infra',
+      title: i18n.translate('xpack.apm.views.infra.title', {
+        defaultMessage: 'Infrastructure',
+      }),
+      element: <InfraOverview />,
+      searchBarOptions: {
+        hidden: true,
+      },
+    }),
     {
       path: '/services/{serviceName}/',
       element: <RedirectToDefaultServiceRouteView />,

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

@@ -42,6 +42,7 @@ type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
     | 'errors'
     | 'metrics'
     | 'nodes'
+    | 'infra'
     | 'service-map'
     | 'logs'
     | 'profiling';
@@ -240,6 +241,16 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
       }),
       hidden: isJVMsTabHidden({ agentName, runtimeName }),
     },
+    {
+      key: 'infra',
+      href: router.link('/services/{serviceName}/infra', {
+        path: { serviceName },
+        query,
+      }),
+      label: i18n.translate('xpack.apm.home.infraTabLabel', {
+        defaultMessage: 'Infrastructure',
+      }),
+    },
     {
       key: 'service-map',
       href: router.link('/services/{serviceName}/service-map', {