[Uptime] Refresh index and also show more info to user regardi… (#62606)

* Refresh index and also show more info to user

* updated type

* updated type

* updated test

* updated formatting

* update text

* updated types

* updated translation

* update

* fixed types

* updated code

* fixed types

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: shahzad31

x-pack/legacy/plugins/uptime/public/components/connected/empty_state/empty_state.tsx

@@ -7,26 +7,44 @@
 import React, { useContext, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { indexStatusAction } from '../../../state/actions';
-import { indexStatusSelector } from '../../../state/selectors';
+import { indexStatusSelector, selectDynamicSettings } from '../../../state/selectors';
 import { EmptyStateComponent } from '../../functional/empty_state/empty_state';
 import { UptimeRefreshContext } from '../../../contexts';
+import { getDynamicSettings } from '../../../state/actions/dynamic_settings';
 
 export const EmptyState: React.FC = ({ children }) => {
   const { data, loading, error } = useSelector(indexStatusSelector);
   const { lastRefresh } = useContext(UptimeRefreshContext);
 
+  const { settings } = useSelector(selectDynamicSettings);
+
+  const heartbeatIndices = settings?.heartbeatIndices || '';
+
   const dispatch = useDispatch();
 
   useEffect(() => {
-    dispatch(indexStatusAction.get());
+    if (!data || data?.docCount === 0 || data?.indexExists === false) {
+      dispatch(indexStatusAction.get());
+    }
+    // Don't add data , it will create endless loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, lastRefresh]);
 
+  useEffect(() => {
+    dispatch(indexStatusAction.get());
+  }, [dispatch, heartbeatIndices]);
+
+  useEffect(() => {
+    dispatch(getDynamicSettings());
+  }, [dispatch]);
+
   return (
     <EmptyStateComponent
       statesIndexStatus={data}
       loading={loading}
       errors={error ? [error] : undefined}
       children={children as React.ReactElement}
+      settings={settings}
     />
   );
 };