From 33d3f4090a167bea2d686ccc92b3fb0920b08f68 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Mon, 24 Aug 2020 11:46:18 -0400 Subject: [PATCH] [ML] DF Analytics list: ensure job messages and jobs load correctly (#75676) * 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 | 53 ++++++++----------- 2 files changed, 25 insertions(+), 34 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 81494a43193d..c4c7a8a4ca11 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 = ({ } }, [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 0dd9eba172e1..942e335526d6 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 = ({ analyticsId }) => { const [isLoading, setIsLoading] = useState(false); const [errorMessage, setErrorMessage] = useState(''); - const getMessagesFactory = () => { - let concurrentLoads = 0; - return async function getMessages() { - try { - concurrentLoads++; + 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', + }) + ); + } + }, []); - if (concurrentLoads > 1) { - return; - } + useEffect(() => { + getMessages(); + }, []); - 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() }); + useRefreshAnalyticsList({ onRefresh: getMessages }); return ( ); };