[ML] Add minor refresh button to DFA and AD Job Messages tabs (#67750)

* [ML] Add minor refresh button to DFA and AD Job Messages tabs

* [ML] Update refresh logic for DFA

[ML] Update refresh logic for DFA

* [ML] Update fetchMessages callback

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

Author: qn895

x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx

@@ -6,7 +6,7 @@
 
 import React, { FC } from 'react';
 
-import { EuiSpacer, EuiInMemoryTable } from '@elastic/eui';
+import { EuiSpacer, EuiInMemoryTable, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 // @ts-ignore
 import { formatDate } from '@elastic/eui/lib/services/format';
 import { i18n } from '@kbn/i18n';
@@ -21,16 +21,33 @@ interface JobMessagesProps {
   messages: JobMessage[];
   loading: boolean;
   error: string;
+  refreshMessage?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
 /**
  * Component for rendering job messages for anomaly detection
  * and data frame analytics jobs.
  */
-export const JobMessages: FC<JobMessagesProps> = ({ messages, loading, error }) => {
+export const JobMessages: FC<JobMessagesProps> = ({ messages, loading, error, refreshMessage }) => {
   const columns = [
     {
-      name: '',
+      name: refreshMessage ? (
+        <EuiToolTip
+          content={i18n.translate('xpack.ml.jobMessages.refreshLabel', {
+            defaultMessage: 'Refresh',
+          })}
+        >
+          <EuiButtonIcon
+            onClick={refreshMessage}
+            iconType="refresh"
+            aria-label={i18n.translate('xpack.ml.jobMessages.refreshAriaLabel', {
+              defaultMessage: 'Refresh',
+            })}
+          />
+        </EuiToolTip>
+      ) : (
+        ''
+      ),
       render: (message: JobMessage) => <JobIcon message={message} />,
       width: `${theme.euiSizeL}`,
     },

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

@@ -22,7 +22,6 @@ export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId }) => {
 
   const getMessagesFactory = () => {
     let concurrentLoads = 0;
-
     return async function getMessages() {
       try {
         concurrentLoads++;
@@ -52,8 +51,14 @@ export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId }) => {
       }
     };
   };
-
   useRefreshAnalyticsList({ onRefresh: getMessagesFactory() });
 
-  return <JobMessages messages={messages} loading={isLoading} error={errorMessage} />;
+  return (
+    <JobMessages
+      messages={messages}
+      loading={isLoading}
+      error={errorMessage}
+      refreshMessage={getMessagesFactory()}
+    />
+  );
 };

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

@@ -4,12 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, useEffect, useState } from 'react';
-
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import { ml } from '../../../../services/ml_api_service';
 import { JobMessages } from '../../../../components/job_messages';
 import { JobMessage } from '../../../../../../common/types/audit_message';
-
 interface JobMessagesPaneProps {
   jobId: string;
 }
@@ -32,9 +30,18 @@ export const JobMessagesPane: FC<JobMessagesPaneProps> = ({ jobId }) => {
     }
   };
 
+  const refreshMessage = useCallback(fetchMessages, [jobId]);
+
   useEffect(() => {
     fetchMessages();
   }, []);
 
-  return <JobMessages messages={messages} loading={isLoading} error={errorMessage} />;
+  return (
+    <JobMessages
+      refreshMessage={refreshMessage}
+      messages={messages}
+      loading={isLoading}
+      error={errorMessage}
+    />
+  );
 };