[APM] Encode spaces when creating ML job (#63683)

Closes #62370. Per https://github.com/elastic/elasticsearch/blob/95a7eed9aa35f47b228e402508709b5bd6703cf4/x-pack/plugin/core/src/main/java/org/elasticsearch/xpack/core/ml/utils/MlStrings.java#L20-L26, spaces are not supported in job and group ids.

x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx

@@ -57,7 +57,8 @@ export class MachineLearningFlyout extends Component<Props, State> {
   };
 
   public addErrorToast = () => {
-    const core = this.context;
+    const { core } = this.context;
+
     const { urlParams } = this.props;
     const { serviceName } = urlParams;
 

x-pack/legacy/plugins/apm/public/services/rest/ml.ts

@@ -12,7 +12,8 @@ import {
 } from '../../../../../../plugins/apm/common/elasticsearch_fieldnames';
 import {
   getMlJobId,
-  getMlPrefix
+  getMlPrefix,
+  encodeForMlApi
 } from '../../../../../../plugins/apm/common/ml_job_constants';
 import { callApi } from './callApi';
 import { ESFilter } from '../../../../../../plugins/apm/typings/elasticsearch';
@@ -53,13 +54,16 @@ export async function startMLJob({
   http: HttpSetup;
 }) {
   const transactionIndices = await getTransactionIndices(http);
-  const groups = ['apm', serviceName.toLowerCase()];
+  const groups = [
+    'apm',
+    encodeForMlApi(serviceName),
+    encodeForMlApi(transactionType)
+  ];
   const filter: ESFilter[] = [
     { term: { [SERVICE_NAME]: serviceName } },
     { term: { [PROCESSOR_EVENT]: 'transaction' } },
     { term: { [TRANSACTION_TYPE]: transactionType } }
   ];
-  groups.push(transactionType.toLowerCase());
   return callApi<StartedMLJobApiResponse>(http, {
     method: 'POST',
     pathname: `/api/ml/modules/setup/apm_transaction`,

x-pack/plugins/apm/common/ml_job_constants.test.ts

@@ -21,6 +21,12 @@ describe('ml_job_constants', () => {
     expect(getMlJobId('myServiceName', 'myTransactionType')).toBe(
       'myservicename-mytransactiontype-high_mean_response_time'
     );
+    expect(getMlJobId('my service name')).toBe(
+      'my_service_name-high_mean_response_time'
+    );
+    expect(getMlJobId('my service name', 'my transaction type')).toBe(
+      'my_service_name-my_transaction_type-high_mean_response_time'
+    );
   });
 
   it('getMlIndex', () => {

x-pack/plugins/apm/common/ml_job_constants.ts

@@ -6,7 +6,7 @@
 
 export function getMlPrefix(serviceName: string, transactionType?: string) {
   const maybeTransactionType = transactionType ? `${transactionType}-` : '';
-  return `${serviceName}-${maybeTransactionType}`.toLowerCase();
+  return encodeForMlApi(`${serviceName}-${maybeTransactionType}`);
 }
 
 export function getMlJobId(serviceName: string, transactionType?: string) {
@@ -16,3 +16,7 @@ export function getMlJobId(serviceName: string, transactionType?: string) {
 export function getMlIndex(serviceName: string, transactionType?: string) {
   return `.ml-anomalies-${getMlJobId(serviceName, transactionType)}`;
 }
+
+export function encodeForMlApi(value: string) {
+  return value.replace(/\s+/g, '_').toLowerCase();
+}