[ML] Use hook and add error toast for DFA job messages

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

@@ -10,8 +10,7 @@ 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 { toastNotificationServiceProvider } from '../../../../services/toast_notification_service';
-import { useMlKibana } from '../../../../contexts/kibana';
+import { useToastNotificationService } from '../../../../services/toast_notification_service';
 interface JobMessagesPaneProps {
   jobId: string;
 }
@@ -20,11 +19,7 @@ export const JobMessagesPane: FC<JobMessagesPaneProps> = ({ jobId }) => {
   const [messages, setMessages] = useState<JobMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-  const {
-    services: {
-      notifications: { toasts },
-    },
-  } = useMlKibana();
+  const toastNotificationService = useToastNotificationService();
 
   const fetchMessages = async () => {
     setIsLoading(true);
@@ -33,11 +28,10 @@ export const JobMessagesPane: FC<JobMessagesPaneProps> = ({ jobId }) => {
       setIsLoading(false);
     } catch (error) {
       setIsLoading(false);
-      const toastNotificationService = toastNotificationServiceProvider(toasts);
       toastNotificationService.displayErrorToast(
         error,
         i18n.translate('xpack.ml.jobService.jobAuditMessagesErrorTitle', {
-          defaultMessage: 'Job Audit Messages Error',
+          defaultMessage: 'Error loading job messages',
         })
       );