[ML] Fixes anomaly detection jobs list load if call to load job messages fails (#79792) (#80020)

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Kibana Machine <[email protected]>

Author: qn895

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx

@@ -12,6 +12,7 @@ import { ml } from '../../../../../services/ml_api_service';
 import { useRefreshAnalyticsList } from '../../../../common';
 import { JobMessages } from '../../../../../components/job_messages';
 import { JobMessage } from '../../../../../../../common/types/audit_message';
+import { useToastNotificationService } from '../../../../../services/toast_notification_service';
 
 interface Props {
   analyticsId: string;
@@ -21,6 +22,7 @@ export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId }) => {
   const [messages, setMessages] = useState<JobMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
+  const toastNotificationService = useToastNotificationService();
 
   const getMessages = useCallback(async () => {
     try {
@@ -30,6 +32,16 @@ export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId }) => {
       setMessages(messagesResp);
     } catch (error) {
       setIsLoading(false);
+      toastNotificationService.displayErrorToast(
+        error,
+        i18n.translate(
+          'xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.errorToastMessageTitle',
+          {
+            defaultMessage: 'Error loading job messages',
+          }
+        )
+      );
+
       setErrorMessage(
         i18n.translate('xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.errorMessage', {
           defaultMessage: 'Messages could not be loaded',

x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_messages_pane.tsx

@@ -5,9 +5,12 @@
  */
 
 import React, { FC, useCallback, useEffect, useState } from 'react';
+import { i18n } from '@kbn/i18n';
 import { ml } from '../../../../services/ml_api_service';
 import { JobMessages } from '../../../../components/job_messages';
 import { JobMessage } from '../../../../../../common/types/audit_message';
+import { extractErrorMessage } from '../../../../../../common/util/errors';
+import { useToastNotificationService } from '../../../../services/toast_notification_service';
 interface JobMessagesPaneProps {
   jobId: string;
 }
@@ -16,17 +19,23 @@ export const JobMessagesPane: FC<JobMessagesPaneProps> = ({ jobId }) => {
   const [messages, setMessages] = useState<JobMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
+  const toastNotificationService = useToastNotificationService();
 
   const fetchMessages = async () => {
     setIsLoading(true);
     try {
       setMessages(await ml.jobs.jobAuditMessages(jobId));
       setIsLoading(false);
-    } catch (e) {
+    } catch (error) {
       setIsLoading(false);
-      setErrorMessage(e);
-      // eslint-disable-next-line no-console
-      console.error('Job messages could not be loaded', e);
+      toastNotificationService.displayErrorToast(
+        error,
+        i18n.translate('xpack.ml.jobService.jobAuditMessagesErrorTitle', {
+          defaultMessage: 'Error loading job messages',
+        })
+      );
+
+      setErrorMessage(extractErrorMessage(error));
     }
   };
 

x-pack/plugins/ml/server/models/job_service/jobs.ts

@@ -152,11 +152,18 @@ export function jobsProvider(client: IScopedClusterClient) {
   async function jobsSummary(jobIds: string[] = []) {
     const fullJobsList: CombinedJobWithStats[] = await createFullJobsList();
     const fullJobsIds = fullJobsList.map((job) => job.job_id);
-    const auditMessages: AuditMessage[] = await getAuditMessagesSummary(fullJobsIds);
-    const auditMessagesByJob = auditMessages.reduce((acc, cur) => {
-      acc[cur.job_id] = cur;
-      return acc;
-    }, {} as { [id: string]: AuditMessage });
+    let auditMessagesByJob: { [id: string]: AuditMessage } = {};
+
+    // even if there are errors getting the audit messages, we still want to show the full list
+    try {
+      const auditMessages: AuditMessage[] = await getAuditMessagesSummary(fullJobsIds);
+      auditMessagesByJob = auditMessages.reduce((acc, cur) => {
+        acc[cur.job_id] = cur;
+        return acc;
+      }, auditMessagesByJob);
+    } catch (e) {
+      // fail silently
+    }
 
     const deletingStr = i18n.translate('xpack.ml.models.jobService.deletingJob', {
       defaultMessage: 'deleting',