From eb2a3ae978714fc5f1ec4f46b7edac6d5233e409 Mon Sep 17 00:00:00 2001
From: Harsh Pratap Singh <harshpratapsingh8210@gmail.com>
Date: Fri, 5 Jan 2024 12:03:39 +0530
Subject: [PATCH 1/2] Adding error box in targets

Signed-off-by: Harsh Pratap Singh <119954739+harsh-ps-2003@users.noreply.github.com>
---
 .../src/pages/targets/ScrapePoolList.tsx      | 10 ++++++++-
 .../react-app/src/pages/targets/Targets.tsx   | 22 +++++++++++++++----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/pkg/ui/react-app/src/pages/targets/ScrapePoolList.tsx b/pkg/ui/react-app/src/pages/targets/ScrapePoolList.tsx
index 65eeb8ceb1..95e1c497f1 100644
--- a/pkg/ui/react-app/src/pages/targets/ScrapePoolList.tsx
+++ b/pkg/ui/react-app/src/pages/targets/ScrapePoolList.tsx
@@ -111,10 +111,18 @@ ScrapePoolListContent.displayName = 'ScrapePoolListContent';
 
 const ScrapePoolListWithStatusIndicator = withStatusIndicator(ScrapePoolListContent);
 
-const ScrapePoolList: FC<PathPrefixProps> = ({ pathPrefix }) => {
+const ScrapePoolList: FC<PathPrefixProps & { onLoadingChange: (loadingState: boolean) => void }> = ({
+  pathPrefix,
+  onLoadingChange,
+}) => {
   const { response, error, isLoading } = useFetch<ScrapePoolListProps>(`${pathPrefix}/api/v1/targets?state=active`);
   const { status: responseStatus } = response;
   const badResponse = responseStatus !== 'success' && responseStatus !== 'start fetching';
+
+  useEffect(() => {
+    onLoadingChange(isLoading); // Inform Targets.tsx about the loading state
+  }, [isLoading, onLoadingChange]);
+
   return (
     <ScrapePoolListWithStatusIndicator
       {...response.data}
diff --git a/pkg/ui/react-app/src/pages/targets/Targets.tsx b/pkg/ui/react-app/src/pages/targets/Targets.tsx
index 9012002b12..b5315216f1 100644
--- a/pkg/ui/react-app/src/pages/targets/Targets.tsx
+++ b/pkg/ui/react-app/src/pages/targets/Targets.tsx
@@ -1,17 +1,31 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import Filter from './Filter';
 import ScrapePoolList from './ScrapePoolList';
 import PathPrefixProps from '../../types/PathPrefixProps';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { UncontrolledAlert } from 'reactstrap';
 
 const Targets: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => {
-  const scrapePoolListProps = { pathPrefix };
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleLoadingChange = (loadingState: boolean) => {
+    setIsLoading(loadingState);
+  };
 
   return (
     <>
-      <h2>Targets</h2>
-      <ScrapePoolList {...scrapePoolListProps} />
+      {isLoading ? (
+        <UncontrolledAlert color="danger">
+          Sometimes the targets page doesn't fully load because it takes too long to load targets from leaf nodes. Please
+          wait some time or try again later.
+        </UncontrolledAlert>
+      ) : (
+        <>
+          <h2>Targets</h2>
+          <ScrapePoolList pathPrefix={pathPrefix} onLoadingChange={handleLoadingChange} />
+        </>
+      )}
     </>
   );
 };

From b9d7c665e4bf98d3d712bd257b1d53ed1527c0b8 Mon Sep 17 00:00:00 2001
From: Harsh Pratap Singh <harshpratapsingh8210@gmail.com>
Date: Fri, 5 Jan 2024 12:05:06 +0530
Subject: [PATCH 2/2] fixing tests for error

Signed-off-by: Harsh Pratap Singh <119954739+harsh-ps-2003@users.noreply.github.com>
---
 pkg/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pkg/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx b/pkg/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx
index 8fa5d6c858..0edd661ba3 100644
--- a/pkg/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx
+++ b/pkg/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx
@@ -10,6 +10,7 @@ import { FetchMock } from 'jest-fetch-mock/types';
 describe('ScrapePoolList', () => {
   const defaultProps = {
     pathPrefix: '..',
+    onLoadingChange: jest.fn(),
   };
 
   beforeEach(() => {