[APM] Improvements to the ML Settings page (#71309)

x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/add_environments.tsx

@@ -50,6 +50,8 @@ export const AddEnvironments = ({
     disabled: currentEnvironments.includes(env),
   }));
 
+  const [isSaving, setIsSaving] = useState(false);
+
   const [selectedOptions, setSelected] = useState<
     Array<EuiComboBoxOptionOption<string>>
   >([]);
@@ -127,9 +129,12 @@ export const AddEnvironments = ({
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButton
+            isLoading={isSaving}
+            isDisabled={isSaving || selectedOptions.length === 0}
             fill
-            disabled={selectedOptions.length === 0}
             onClick={async () => {
+              setIsSaving(true);
+
               const selectedEnvironments = selectedOptions.map(
                 ({ value }) => value as string
               );
@@ -140,6 +145,7 @@ export const AddEnvironments = ({
               if (success) {
                 onCreateJobSuccess();
               }
+              setIsSaving(false);
             }}
           >
             {i18n.translate(

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

@@ -15,7 +15,11 @@ import { LicensePrompt } from '../../../shared/LicensePrompt';
 import { useLicense } from '../../../../hooks/useLicense';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 
-const DEFAULT_VALUE: APIReturnType<'/api/apm/settings/anomaly-detection'> = {
+export type AnomalyDetectionApiResponse = APIReturnType<
+  '/api/apm/settings/anomaly-detection'
+>;
+
+const DEFAULT_VALUE: AnomalyDetectionApiResponse = {
   jobs: [],
   hasLegacyJobs: false,
 };
@@ -80,7 +84,7 @@ export const AnomalyDetection = () => {
       ) : (
         <JobsList
           status={status}
-          anomalyDetectionJobsByEnv={data.jobs}
+          jobs={data.jobs}
           hasLegacyJobs={data.hasLegacyJobs}
           onAddEnvironments={() => {
             setViewAddEnvironments(true);

x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx

@@ -19,13 +19,15 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { FETCH_STATUS } from '../../../../hooks/useFetcher';
 import { ITableColumn, ManagedTable } from '../../../shared/ManagedTable';
 import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
-import { AnomalyDetectionJobByEnv } from '../../../../../typings/anomaly_detection';
 import { MLJobLink } from '../../../shared/Links/MachineLearningLinks/MLJobLink';
 import { MLLink } from '../../../shared/Links/MachineLearningLinks/MLLink';
 import { getEnvironmentLabel } from '../../../../../common/environment_filter_values';
 import { LegacyJobsCallout } from './legacy_jobs_callout';
+import { AnomalyDetectionApiResponse } from './index';
 
-const columns: Array<ITableColumn<AnomalyDetectionJobByEnv>> = [
+type Jobs = AnomalyDetectionApiResponse['jobs'];
+
+const columns: Array<ITableColumn<Jobs[0]>> = [
   {
     field: 'environment',
     name: i18n.translate(
@@ -57,13 +59,13 @@ const columns: Array<ITableColumn<AnomalyDetectionJobByEnv>> = [
 interface Props {
   status: FETCH_STATUS;
   onAddEnvironments: () => void;
-  anomalyDetectionJobsByEnv: AnomalyDetectionJobByEnv[];
+  jobs: Jobs;
   hasLegacyJobs: boolean;
 }
 export const JobsList = ({
   status,
   onAddEnvironments,
-  anomalyDetectionJobsByEnv,
+  jobs,
   hasLegacyJobs,
 }: Props) => {
   const isLoading =
@@ -128,7 +130,7 @@ export const JobsList = ({
           )
         }
         columns={columns}
-        items={isLoading || hasFetchFailure ? [] : anomalyDetectionJobsByEnv}
+        items={jobs}
       />
       <EuiSpacer size="l" />
 

x-pack/plugins/apm/server/lib/anomaly_detection/get_anomaly_detection_jobs.ts

@@ -6,7 +6,7 @@
 
 import { Logger } from 'kibana/server';
 import { Setup } from '../helpers/setup_request';
-import { getMlJobsWithAPMGroup } from './get_ml_jobs_by_group';
+import { getMlJobsWithAPMGroup } from './get_ml_jobs_with_apm_group';
 
 export async function getAnomalyDetectionJobs(setup: Setup, logger: Logger) {
   const { ml } = setup;

x-pack/plugins/apm/server/lib/anomaly_detection/has_legacy_jobs.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { Setup } from '../helpers/setup_request';
-import { getMlJobsWithAPMGroup } from './get_ml_jobs_by_group';
+import { getMlJobsWithAPMGroup } from './get_ml_jobs_with_apm_group';
 
 // Determine whether there are any legacy ml jobs.
 // A legacy ML job has a job id that ends with "high_mean_response_time" and created_by=ml-module-apm-transaction

x-pack/plugins/apm/server/routes/settings/anomaly_detection.ts

@@ -18,10 +18,13 @@ export const anomalyDetectionJobsRoute = createRoute(() => ({
   path: '/api/apm/settings/anomaly-detection',
   handler: async ({ context, request }) => {
     const setup = await setupRequest(context, request);
-    const jobs = await getAnomalyDetectionJobs(setup, context.logger);
+    const [jobs, legacyJobs] = await Promise.all([
+      getAnomalyDetectionJobs(setup, context.logger),
+      hasLegacyJobs(setup),
+    ]);
     return {
       jobs,
-      hasLegacyJobs: await hasLegacyJobs(setup),
+      hasLegacyJobs: legacyJobs,
     };
   },
 }));