[APM][OTel] Encode service name in the APM URLs (elastic#217092)

Closes elastic#213943

## Summary

This PR ensures the service name is always encoded in the APM UIs. It's
a follow-up of elastic#215031 and aims to
find a better solution to the problem:
- Add the encoding directly to `formatRequest` as suggested there
- I saw that there are many places where we use legacy Url builders, so
I will try to replace them where possible and use
apm router link method where the path is encoded
([ref](https://github.com/elastic/kibana/blob/7158e0201bf6becb4f2b821fb693bf6ed6365b54/src/platform/packages/shared/kbn-typed-react-router-config/src/create_router.ts#L184-L185))
- The PR includes the changes to address the issue above:
   - Replaced and removed `LegacyAPMLink`
- Refactored `useAPMHref` to support encoding (and extracted and test
the encoding logic)
     - Example usage: 
        - Before: 
        ```js
           useAPMHref({
                path: `/services/${serviceName}/.....`,
                persistedFilters,
           });
        ```
        - After:
        ```js
          useAPMHref({
              path: '/services/{serviceName}/.......}',
              pathParams: { serviceName },
              persistedFilters,
         });
        ```
   - Used the APM router link method as much as possible


## Testing
- Run `node scripts/synthtrace trace_with_service_names_with_slashes.ts
--clean --live --uniqueIds --live`
- Go to service inventory and click the links:


https://github.com/user-attachments/assets/fcd4fbfc-4125-4cc8-9b00-53c5f375423f

Author: jennypavlova

src/platform/packages/shared/kbn-apm-synthtrace/src/scenarios/trace_with_service_names_with_slashes.ts

@@ -0,0 +1,105 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { ApmFields, apm, Instance } from '@kbn/apm-synthtrace-client';
+import { Scenario } from '../cli/scenario';
+import { getSynthtraceEnvironment } from '../lib/utils/get_synthtrace_environment';
+import { withClient } from '../lib/utils/with_client';
+
+const ENVIRONMENT = getSynthtraceEnvironment(__filename);
+
+const scenario: Scenario<ApmFields> = async (runOptions) => {
+  const { logger } = runOptions;
+  const { numServices = 3 } = runOptions.scenarioOpts || {};
+
+  return {
+    generate: ({ range, clients: { apmEsClient } }) => {
+      const transactionName = '240rpm/75% 1000ms';
+
+      const successfulTimestamps = range.interval('1m').rate(180);
+      const failedTimestamps = range.interval('1m').rate(180);
+
+      const instances = [...Array(numServices).keys()].map((index) =>
+        apm
+          .service({ name: `synth/node-${index}`, environment: ENVIRONMENT, agentName: 'nodejs' })
+          .instance('instance')
+      );
+      const instanceSpans = (instance: Instance) => {
+        const successfulTraceEvents = successfulTimestamps.generator((timestamp) =>
+          instance
+            .transaction({ transactionName })
+            .timestamp(timestamp)
+            .defaults({
+              'url.domain': 'foo.bar',
+            })
+            .duration(1000)
+            .success()
+            .children(
+              instance
+                .span({
+                  spanName: 'GET apm-*/_search',
+                  spanType: 'db',
+                  spanSubtype: 'elasticsearch',
+                })
+                .duration(1000)
+                .success()
+                .destination('elasticsearch')
+                .timestamp(timestamp),
+              instance
+                .span({ spanName: 'custom_operation', spanType: 'custom' })
+                .duration(100)
+                .success()
+                .timestamp(timestamp)
+            )
+        );
+
+        const failedTraceEvents = failedTimestamps.generator((timestamp) =>
+          instance
+            .transaction({ transactionName })
+            .timestamp(timestamp)
+            .duration(1000)
+            .failure()
+            .errors(
+              instance
+                .error({
+                  message: '[ResponseError] index_not_found_exception',
+                  type: 'ResponseError',
+                })
+                .timestamp(timestamp + 50)
+            )
+        );
+
+        const metricsets = range
+          .interval('30s')
+          .rate(1)
+          .generator((timestamp) =>
+            instance
+              .appMetrics({
+                'system.memory.actual.free': 800,
+                'system.memory.total': 1000,
+                'system.cpu.total.norm.pct': 0.6,
+                'system.process.cpu.total.norm.pct': 0.7,
+              })
+              .timestamp(timestamp)
+          );
+
+        return [successfulTraceEvents, failedTraceEvents, metricsets];
+      };
+
+      return withClient(
+        apmEsClient,
+        logger.perf('generating_apm_events', () =>
+          instances.flatMap((instance) => instanceSpans(instance))
+        )
+      );
+    },
+  };
+};
+
+export default scenario;

src/platform/packages/shared/kbn-server-route-repository-utils/src/format_request.test.ts

@@ -11,6 +11,15 @@ import { formatRequest } from './format_request';
 
 describe('formatRequest', () => {
   const version = 1;
+  it('should encode the path if the optional or required param is provided', () => {
+    const pathParams = { param: 'test/Param/>?%/' };
+    const resultOptionalEnd = formatRequest(`GET /api/endpoint/{param?} ${version}`, pathParams);
+    expect(resultOptionalEnd.pathname).toBe('/api/endpoint/test%2FParam%2F%3E%3F%25%2F');
+    const resultRequiredEnd = formatRequest(`GET /api/endpoint/{param} ${version}`, pathParams);
+    expect(resultRequiredEnd.pathname).toBe('/api/endpoint/test%2FParam%2F%3E%3F%25%2F');
+    const resultRequiredMid = formatRequest(`GET /api/{param}/endpoint/ ${version}`, pathParams);
+    expect(resultRequiredMid.pathname).toBe('/api/test%2FParam%2F%3E%3F%25%2F/endpoint/');
+  });
   it('should return the correct path if the optional or required param is provided', () => {
     const pathParams = { param: 'testParam' };
     const resultOptionalEnd = formatRequest(`GET /api/endpoint/{param?} ${version}`, pathParams);

src/platform/packages/shared/kbn-server-route-repository-utils/src/format_request.ts

@@ -21,8 +21,8 @@ export function formatRequest(endpoint: string, pathParams: Record<string, any>
 
   const pathname = Object.keys(pathParams).reduce((acc, paramName) => {
     return acc
-      .replace(`{${paramName}}`, pathParams[paramName])
-      .replace(`{${paramName}?}`, pathParams[paramName]);
+      .replace(`{${paramName}}`, encodeURIComponent(pathParams[paramName]))
+      .replace(`{${paramName}?}`, encodeURIComponent(pathParams[paramName]));
   }, rawPathname);
 
   if ((pathname.match(optionalReg) ?? [])?.length > 0) {

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

@@ -8,6 +8,7 @@
  */
 
 export * from './src/create_router';
+export * from './src/encode_path';
 export * from './src/types';
 export * from './src/outlet';
 export * from './src/route_renderer';

src/platform/packages/shared/kbn-typed-react-router-config/src/create_router.ts

@@ -19,6 +19,7 @@ import {
   RouteConfig as ReactRouterConfig,
 } from 'react-router-config';
 import { FlattenRoutesOf, Route, RouteMap, Router, RouteWithPath } from './types';
+import { encodePath } from './encode_path';
 
 function toReactRouterPath(path: string) {
   return path.replace(/(?:{([^\/]+)})/g, ':$1');
@@ -177,13 +178,7 @@ export function createRouter<TRoutes extends RouteMap>(routes: TRoutes): Router<
 
     const paramsWithBuiltInDefaults = merge({ path: {}, query: {} }, params);
 
-    path = path
-      .split('/')
-      .map((part) => {
-        const match = part.match(/(?:{([a-zA-Z]+)})/);
-        return match ? encodeURIComponent(paramsWithBuiltInDefaults.path[match[1]]) : part;
-      })
-      .join('/');
+    path = encodePath(path, paramsWithBuiltInDefaults?.path);
 
     const matchedRoutes = getRoutesToMatch(path);
 

src/platform/packages/shared/kbn-typed-react-router-config/src/encode_path.test.ts

@@ -0,0 +1,57 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { encodePath } from './encode_path';
+
+describe('encodePath', () => {
+  it('should return the same path if no pathParams are provided', () => {
+    const path = '/services/{serviceName}/transactions';
+    const result = encodePath(path);
+    expect(result).toBe(path);
+  });
+
+  it('should encode path parameters correctly', () => {
+    const path = '/services/{serviceName}/transactions';
+    const pathParams = { serviceName: 'my/service' };
+    const result = encodePath(path, pathParams);
+    expect(result).toBe('/services/my%2Fservice/transactions');
+  });
+
+  it('should handle two matching path parameters', () => {
+    const path = '/services/{serviceName}/transactions/{transactionId}';
+    const pathParams = { serviceName: 'my/service', transactionId: '123/456' };
+    const result = encodePath(path, pathParams);
+    expect(result).toBe('/services/my%2Fservice/transactions/123%2F456');
+  });
+
+  it('should handle multiple path parameters', () => {
+    const path = '/services/{serviceName}/transactions/{transactionId}/details/{detailId}';
+    const pathParams = {
+      serviceName: 'my/service',
+      transactionId: '123/456',
+      detailId: '111/222/333',
+    };
+    const result = encodePath(path, pathParams);
+    expect(result).toBe('/services/my%2Fservice/transactions/123%2F456/details/111%2F222%2F333');
+  });
+
+  it('should return the same path if no matching parameters are found', () => {
+    const path = '/services/{serviceName}/transactions';
+    const pathParams = { otherParam: 'value' };
+    const result = encodePath(path, pathParams);
+    expect(result).toBe(path);
+  });
+
+  it('should handle a path without placeholders', () => {
+    const path = '/services/transactions';
+    const pathParams = { serviceName: 'my/service' };
+    const result = encodePath(path, pathParams);
+    expect(result).toBe('/services/transactions');
+  });
+});

src/platform/packages/shared/kbn-typed-react-router-config/src/encode_path.ts

@@ -0,0 +1,19 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export const encodePath = (path: string, pathParams?: Record<string, string>) =>
+  pathParams && Object.keys(pathParams).length > 0
+    ? path
+        .split('/')
+        .map((part) => {
+          const match = part.match(/(?:{([a-zA-Z]+)})/);
+          return match && pathParams[match[1]] ? encodeURIComponent(pathParams[match[1]]) : part;
+        })
+        .join('/')
+    : path;

x-pack/solutions/observability/plugins/apm/common/environment_rt.ts

@@ -11,6 +11,7 @@ import { ENVIRONMENT_ALL, ENVIRONMENT_NOT_DEFINED } from './environment_filter_v
 export const environmentStringRt = t.union([
   t.literal(ENVIRONMENT_NOT_DEFINED.value),
   t.literal(ENVIRONMENT_ALL.value),
+  t.string,
   nonEmptyStringRt,
 ]);
 

x-pack/solutions/observability/plugins/apm/dev_docs/routing_and_linking.md

@@ -72,7 +72,7 @@ const serviceOverviewLink = apmRouter.link('/services/:serviceName', {
 
 If you're not in React context, you can also import `apmRouter` directly and call its `link` function - but you have to prepend the basePath manually in that case.
 
-We also have the [`getLegacyApmHref` function and `LegacyAPMLink` component](../public/components/shared/links/apm/apm_link.tsx), but we should consider them deprecated, in favor of `router.link`. Other components inside that directory contain other functions and components that provide the same functionality for linking to more specific sections inside the APM plugin.
+We also have the [`getLegacyApmHref` and `useAPMHref` functions](../public/components/shared/links/apm/apm_link_hooks.ts), but we should consider them deprecated, in favor of `router.link`. Other components inside that directory contain other functions and components that provide the same functionality for linking to more specific sections inside the APM plugin.
 
 ### Cross-app linking
 

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/service_overview/otel_service_overview_and_transactions.cy.ts

@@ -159,7 +159,6 @@ describe('Service Overview', () => {
       cy.getByTestSubj('apmHttpInfoRequestMethod').contains('GET');
       cy.getByTestSubj('apmHttpInfoUrl').should('exist');
       cy.getByTestSubj('apmHttpInfoUrl').contains('https://elastic.co/');
-      cy.getByTestSubj('apmHttpInfoRequestMethod').should('exist');
       cy.getByTestSubj('apmHttpStatusBadge').should('exist');
       cy.getByTestSubj('apmHttpStatusBadge').contains('OK');
     });