[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
elastic · Aug 24, 2020 · 4186553 · 4186553
1 parent f0ce720
commit 4186553
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 36 deletions.
diff --git a/...a_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx b/...a_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/...ytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx b/...ytics/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}
     />
   );
 };