Merge pull request #9941 from rlankfo/agent-status-page-alertmanagers

disable fetching alertmanagers on status page in agent mode

web/ui/react-app/src/App.tsx

@@ -103,7 +103,7 @@ const App: FC<AppProps> = ({ consolesLink, agentMode }) => {
                 <ServiceDiscoveryPage />
               </Route>
               <Route path="/status">
-                <StatusPage />
+                <StatusPage agentMode={agentMode} />
               </Route>
               <Route path="/tsdb-status">
                 <TSDBStatusPage />

web/ui/react-app/src/pages/status/Status.tsx

@@ -83,18 +83,8 @@ const StatusWithStatusIndicator = withStatusIndicator(StatusContent);
 
 StatusContent.displayName = 'Status';
 
-const Status: FC = () => {
-  const pathPrefix = usePathPrefix();
-  const path = `${pathPrefix}/${API_PATH}`;
-
-  return (
-    <>
-      {[
-        { fetchResult: useFetch<Record<string, string>>(`${path}/status/runtimeinfo`), title: 'Runtime Information' },
-        { fetchResult: useFetch<Record<string, string>>(`${path}/status/buildinfo`), title: 'Build Information' },
-        { fetchResult: useFetch<Record<string, string>>(`${path}/alertmanagers`), title: 'Alertmanagers' },
-      ].map(({ fetchResult, title }) => {
-        const { response, isLoading, error } = fetchResult;
+const StatusResult: FC<{ fetchPath: string; title: string }> = ({ fetchPath, title }) => {
+  const { response, isLoading, error } = useFetch(fetchPath);
   return (
     <StatusWithStatusIndicator
       key={title}
@@ -105,6 +95,23 @@ const Status: FC = () => {
       componentTitle={title}
     />
   );
+};
+
+const Status: FC<{ agentMode: boolean }> = ({ agentMode }) => {
+  const pathPrefix = usePathPrefix();
+  const path = `${pathPrefix}/${API_PATH}`;
+
+  return (
+    <>
+      {[
+        { fetchPath: `${path}/status/runtimeinfo`, title: 'Runtime Information' },
+        { fetchPath: `${path}/status/buildinfo`, title: 'Build Information' },
+        { fetchPath: `${path}/alertmanagers`, title: 'Alertmanagers' },
+      ].map(({ fetchPath, title }) => {
+        if (agentMode && title === 'Alertmanagers') {
+          return null;
+        }
+        return <StatusResult fetchPath={fetchPath} title={title} />;
       })}
     </>
   );