From 41865537106b1ac7cd30a594746946493a3787ed Mon Sep 17 00:00:00 2001
From: Melissa Alvarez <melissa.alvarez@elastic.co>
Date: Mon, 24 Aug 2020 13:31:43 -0400
Subject: [PATCH] [ML] DF Analytics list: ensure job messages and jobs load
 correctly  (#75676) (#75774)

* ensure messages load on first open

* ensure analytics management list does not load infinitely
---
 .../analytics_list/analytics_list.tsx         |  6 +-
 .../expanded_row_messages_pane.tsx            | 57 ++++++++-----------
 2 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx
index 81494a43193dc..c4c7a8a4ca11a 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, useState, useEffect } from 'react';
+import React, { FC, useCallback, useState, useEffect } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
@@ -119,11 +119,13 @@ export const DataFrameAnalyticsList: FC<Props> = ({
     }
   }, [selectedIdFromUrlInitialized, analytics]);
 
+  const getAnalyticsCallback = useCallback(() => getAnalytics(true), []);
+
   // Subscribe to the refresh observable to trigger reloading the analytics list.
   useRefreshAnalyticsList(
     {
       isLoading: setIsLoading,
-      onRefresh: () => getAnalytics(true),
+      onRefresh: getAnalyticsCallback,
     },
     isManagementTable
   );
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
index 0dd9eba172e1c..942e335526d68 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, useState } from 'react';
+import React, { FC, useState, useEffect, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { ml } from '../../../../../services/ml_api_service';
 import { useRefreshAnalyticsList } from '../../../../common';
@@ -20,45 +20,34 @@ export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
 
-  const getMessagesFactory = () => {
-    let concurrentLoads = 0;
-    return async function getMessages() {
-      try {
-        concurrentLoads++;
-
-        if (concurrentLoads > 1) {
-          return;
-        }
-
-        setIsLoading(true);
-        const messagesResp = await ml.dataFrameAnalytics.getAnalyticsAuditMessages(analyticsId);
-        setIsLoading(false);
-        setMessages(messagesResp);
-
-        concurrentLoads--;
-
-        if (concurrentLoads > 0) {
-          concurrentLoads = 0;
-          getMessages();
-        }
-      } catch (error) {
-        setIsLoading(false);
-        setErrorMessage(
-          i18n.translate('xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.errorMessage', {
-            defaultMessage: 'Messages could not be loaded',
-          })
-        );
-      }
-    };
-  };
-  useRefreshAnalyticsList({ onRefresh: getMessagesFactory() });
+  const getMessages = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const messagesResp = await ml.dataFrameAnalytics.getAnalyticsAuditMessages(analyticsId);
+      setIsLoading(false);
+      setMessages(messagesResp);
+    } catch (error) {
+      setIsLoading(false);
+      setErrorMessage(
+        i18n.translate('xpack.ml.dfAnalyticsList.analyticsDetails.messagesPane.errorMessage', {
+          defaultMessage: 'Messages could not be loaded',
+        })
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    getMessages();
+  }, []);
+
+  useRefreshAnalyticsList({ onRefresh: getMessages });
 
   return (
     <JobMessages
       messages={messages}
       loading={isLoading}
       error={errorMessage}
-      refreshMessage={getMessagesFactory()}
+      refreshMessage={getMessages}
     />
   );
 };