[APM UI] Replace logs link-to routes with appropriate locator (#158365)

part of #157985 ## 📝 Summary After implementing [infra locators](#155156) to allow navigation to the logs UI we need to replace all usages of the old link-to routes so that we have strongly typed navigation to the logs UI. This PR focuses on replacing `link-to` usages in the APM plugin. ## ✅ Testing 1. Navigate to APM -> Services 2. Follow video below to navigate to where the logs links are located 3. Links should behave as before and maintain navigation params https://github.com/elastic/kibana/assets/11225826/c631ea31-c5d9-4d05-9219-7b208daf2c37
elastic · May 30, 2023 · adb05f6 · adb05f6
1 parent fd67e1b
commit adb05f6
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 88 deletions.
diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
@@ -48,6 +48,7 @@ export const renderApp = ({
     plugins: pluginsSetup,
     data: pluginsStart.data,
     inspector: pluginsStart.inspector,
+    infra: pluginsStart.infra,
     observability: pluginsStart.observability,
     observabilityShared: pluginsStart.observabilityShared,
     observabilityRuleTypeRegistry,

diff --git a/...nts/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx b/...nts/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx
@@ -40,7 +40,10 @@ export function InstanceActionsMenu({
   kuery,
   onClose,
 }: Props) {
-  const { core } = useApmPluginContext();
+  const {
+    core,
+    infra: { locators },
+  } = useApmPluginContext();
   const { data, status } = useInstanceDetailsFetcher({
     serviceName,
     serviceNodeName,
@@ -89,6 +92,7 @@ export function InstanceActionsMenu({
     basePath: core.http.basePath,
     onFilterByInstanceClick: handleFilterByInstanceClick,
     metricsHref,
+    infraLocators: locators,
   });
 
   return (

diff --git a/.../service_overview/service_overview_instances_table/instance_actions_menu/menu_sections.ts b/.../service_overview/service_overview_instances_table/instance_actions_menu/menu_sections.ts
@@ -8,6 +8,7 @@
 import { i18n } from '@kbn/i18n';
 import { IBasePath } from '@kbn/core/public';
 import moment from 'moment';
+import type { InfraLocators } from '@kbn/infra-plugin/public/locators';
 import { APIReturnType } from '../../../../../services/rest/create_call_apm_api';
 import { getInfraHref } from '../../../../shared/links/infra_link';
 import {
@@ -37,18 +38,21 @@ export function getMenuSections({
   basePath,
   onFilterByInstanceClick,
   metricsHref,
+  infraLocators,
 }: {
   instanceDetails: InstaceDetails;
   basePath: IBasePath;
   onFilterByInstanceClick: () => void;
   metricsHref: string;
+  infraLocators: InfraLocators;
 }) {
   const podId = instanceDetails.kubernetes?.pod?.uid;
   const containerId = instanceDetails.container?.id;
   const time = instanceDetails['@timestamp']
     ? new Date(instanceDetails['@timestamp']).valueOf()
     : undefined;
   const infraMetricsQuery = getInfraMetricsQuery(instanceDetails['@timestamp']);
+  const infraNodeLocator = infraLocators.nodeLogsLocator;
 
   const podActions: Action[] = [
     {
@@ -57,11 +61,10 @@ export function getMenuSections({
         'xpack.apm.serviceOverview.instancesTable.actionMenus.podLogs',
         { defaultMessage: 'Pod logs' }
       ),
-      href: getInfraHref({
-        app: 'logs',
-        basePath,
-        path: `/link-to/pod-logs/${podId}`,
-        query: { time },
+      href: infraNodeLocator.getRedirectUrl({
+        nodeId: podId!,
+        nodeType: 'pod',
+        time,
       }),
       condition: !!podId,
     },
@@ -88,11 +91,10 @@ export function getMenuSections({
         'xpack.apm.serviceOverview.instancesTable.actionMenus.containerLogs',
         { defaultMessage: 'Container logs' }
       ),
-      href: getInfraHref({
-        app: 'logs',
-        basePath,
-        path: `/link-to/container-logs/${containerId}`,
-        query: { time },
+      href: infraNodeLocator.getRedirectUrl({
+        nodeId: containerId!,
+        nodeType: 'container',
+        time,
       }),
       condition: !!containerId,
     },

diff --git a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.test.ts b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.test.ts
@@ -13,13 +13,21 @@ import {
   apmRouter as apmRouterBase,
   ApmRouter,
 } from '../../routing/apm_route_config';
+import { infraLocatorsMock } from '../../../context/apm_plugin/mock_apm_plugin_context';
 
 const apmRouter = {
   ...apmRouterBase,
   link: (...args: [any]) =>
     `some-basepath/app/apm${apmRouterBase.link(...args)}`,
 } as ApmRouter;
 
+const infraLocators = infraLocatorsMock;
+
+const expectInfraLocatorsToBeCalled = () => {
+  expect(infraLocators.nodeLogsLocator.getRedirectUrl).toBeCalledTimes(3);
+  expect(infraLocators.logsLocator.getRedirectUrl).toBeCalledTimes(1);
+};
+
 describe('Transaction action menu', () => {
   const basePath = {
     prepend: (url: string) => {
@@ -35,6 +43,10 @@ describe('Transaction action menu', () => {
   );
   const location = history.location;
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('shows required sections only', () => {
     const transaction = {
       timestamp,
@@ -48,6 +60,7 @@ describe('Transaction action menu', () => {
         basePath,
         location,
         apmRouter,
+        infraLocators,
         infraLinksAvailable: false,
       })
     ).toEqual([
@@ -60,7 +73,6 @@ describe('Transaction action menu', () => {
             {
               key: 'traceLogs',
               label: 'Trace logs',
-              href: 'some-basepath/app/logs/link-to/logs?time=1580986800&filter=trace.id:%22123%22%20OR%20(not%20trace.id:*%20AND%20%22123%22)',
               condition: true,
             },
           ],
@@ -93,6 +105,7 @@ describe('Transaction action menu', () => {
         },
       ],
     ]);
+    expectInfraLocatorsToBeCalled();
   });
 
   it('shows pod and required sections only', () => {
@@ -109,6 +122,7 @@ describe('Transaction action menu', () => {
         basePath,
         location,
         apmRouter,
+        infraLocators,
         infraLinksAvailable: true,
       })
     ).toEqual([
@@ -122,7 +136,6 @@ describe('Transaction action menu', () => {
             {
               key: 'podLogs',
               label: 'Pod logs',
-              href: 'some-basepath/app/logs/link-to/pod-logs/123?time=1580986800',
               condition: true,
             },
             {
@@ -141,7 +154,6 @@ describe('Transaction action menu', () => {
             {
               key: 'traceLogs',
               label: 'Trace logs',
-              href: 'some-basepath/app/logs/link-to/logs?time=1580986800&filter=trace.id:%22123%22%20OR%20(not%20trace.id:*%20AND%20%22123%22)',
               condition: true,
             },
           ],
@@ -174,6 +186,7 @@ describe('Transaction action menu', () => {
         },
       ],
     ]);
+    expectInfraLocatorsToBeCalled();
   });
 
   it('shows host and required sections only', () => {
@@ -190,6 +203,7 @@ describe('Transaction action menu', () => {
         basePath,
         location,
         apmRouter,
+        infraLocators,
         infraLinksAvailable: true,
       })
     ).toEqual([
@@ -202,7 +216,6 @@ describe('Transaction action menu', () => {
             {
               key: 'hostLogs',
               label: 'Host logs',
-              href: 'some-basepath/app/logs/link-to/host-logs/foo?time=1580986800',
               condition: true,
             },
             {
@@ -221,7 +234,6 @@ describe('Transaction action menu', () => {
             {
               key: 'traceLogs',
               label: 'Trace logs',
-              href: 'some-basepath/app/logs/link-to/logs?time=1580986800&filter=trace.id:%22123%22%20OR%20(not%20trace.id:*%20AND%20%22123%22)',
               condition: true,
             },
           ],
@@ -254,5 +266,6 @@ describe('Transaction action menu', () => {
         },
       ],
     ]);
+    expectInfraLocatorsToBeCalled();
   });
 });
diff --git a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.ts b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.ts
@@ -11,6 +11,7 @@ import { IBasePath } from '@kbn/core/public';
 import { isEmpty, pickBy } from 'lodash';
 import moment from 'moment';
 import url from 'url';
+import type { InfraLocators } from '@kbn/infra-plugin/public/locators';
 import type { Transaction } from '../../../../typings/es_schemas/ui/transaction';
 import { getDiscoverHref } from '../links/discover_links/discover_link';
 import { getDiscoverQuery } from '../links/discover_links/discover_transaction_link';
@@ -35,18 +36,21 @@ export const getSections = ({
   basePath,
   location,
   apmRouter,
+  infraLocators,
   infraLinksAvailable,
 }: {
   transaction?: Transaction;
   basePath: IBasePath;
   location: Location;
   apmRouter: ApmRouter;
+  infraLocators: InfraLocators;
   infraLinksAvailable: boolean;
 }) => {
   if (!transaction) return [];
   const hostName = transaction.host?.hostname;
   const podId = transaction.kubernetes?.pod?.uid;
   const containerId = transaction.container?.id;
+  const { nodeLogsLocator, logsLocator } = infraLocators;
 
   const time = Math.round(transaction.timestamp.us / 1000);
   const infraMetricsQuery = getInfraMetricsQuery(transaction);
@@ -78,11 +82,10 @@ export const getSections = ({
         'xpack.apm.transactionActionMenu.showPodLogsLinkLabel',
         { defaultMessage: 'Pod logs' }
       ),
-      href: getInfraHref({
-        app: 'logs',
-        basePath,
-        path: `/link-to/pod-logs/${podId}`,
-        query: { time },
+      href: nodeLogsLocator.getRedirectUrl({
+        nodeId: podId!,
+        nodeType: 'pod',
+        time,
       }),
       condition: !!podId,
     },
@@ -109,11 +112,10 @@ export const getSections = ({
         'xpack.apm.transactionActionMenu.showContainerLogsLinkLabel',
         { defaultMessage: 'Container logs' }
       ),
-      href: getInfraHref({
-        app: 'logs',
-        basePath,
-        path: `/link-to/container-logs/${containerId}`,
-        query: { time },
+      href: nodeLogsLocator.getRedirectUrl({
+        nodeId: containerId!,
+        nodeType: 'container',
+        time,
       }),
       condition: !!containerId,
     },
@@ -140,11 +142,10 @@ export const getSections = ({
         'xpack.apm.transactionActionMenu.showHostLogsLinkLabel',
         { defaultMessage: 'Host logs' }
       ),
-      href: getInfraHref({
-        app: 'logs',
-        basePath,
-        path: `/link-to/host-logs/${hostName}`,
-        query: { time },
+      href: nodeLogsLocator.getRedirectUrl({
+        nodeId: hostName!,
+        nodeType: 'host',
+        time,
       }),
       condition: !!hostName,
     },
@@ -171,14 +172,9 @@ export const getSections = ({
         'xpack.apm.transactionActionMenu.showTraceLogsLinkLabel',
         { defaultMessage: 'Trace logs' }
       ),
-      href: getInfraHref({
-        app: 'logs',
-        basePath,
-        path: `/link-to/logs`,
-        query: {
-          time,
-          filter: `trace.id:"${transaction.trace.id}" OR (not trace.id:* AND "${transaction.trace.id}")`,
-        },
+      href: logsLocator.getRedirectUrl({
+        filter: `trace.id:"${transaction.trace.id}" OR (not trace.id:* AND "${transaction.trace.id}")`,
+        time,
       }),
       condition: true,
     },