[Fleet] Handle errors happenning during Fleet setup in the UI (#87185) (

#87256)

x-pack/plugins/fleet/public/applications/fleet/hooks/use_fleet_status.tsx

@@ -13,6 +13,7 @@ interface FleetStatusState {
   enabled: boolean;
   isLoading: boolean;
   isReady: boolean;
+  error?: Error;
   missingRequirements?: GetFleetStatusResponse['missing_requirements'];
 }
 
@@ -44,7 +45,7 @@ export const FleetStatusProvider: React.FC = ({ children }) => {
         missingRequirements: res.data?.missing_requirements,
       }));
     } catch (error) {
-      setState((s) => ({ ...s, isLoading: true }));
+      setState((s) => ({ ...s, isLoading: false, error }));
     }
   }
   useEffect(() => {

x-pack/plugins/fleet/public/applications/fleet/sections/agents/index.tsx

@@ -4,16 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import { PAGE_ROUTING_PATHS } from '../../constants';
-import { Loading } from '../../components';
+import { Loading, Error } from '../../components';
 import { useConfig, useFleetStatus, useBreadcrumbs, useCapabilities } from '../../hooks';
 import { AgentListPage } from './agent_list_page';
 import { SetupPage } from './setup_page';
 import { AgentDetailsPage } from './agent_details_page';
 import { NoAccessPage } from './error_pages/no_access';
 import { EnrollmentTokenListPage } from './enrollment_token_list_page';
 import { ListLayout } from './components/list_layout';
+import { WithoutHeaderLayout } from '../../layouts';
 
 export const FleetApp: React.FunctionComponent = () => {
   useBreadcrumbs('fleet');
@@ -27,6 +29,22 @@ export const FleetApp: React.FunctionComponent = () => {
     return <Loading />;
   }
 
+  if (fleetStatus.error) {
+    return (
+      <WithoutHeaderLayout>
+        <Error
+          title={
+            <FormattedMessage
+              id="xpack.fleet.agentsInitializationErrorMessageTitle"
+              defaultMessage="Unable to initialize central management for Elastic Agents"
+            />
+          }
+          error={fleetStatus.error}
+        />
+      </WithoutHeaderLayout>
+    );
+  }
+
   if (fleetStatus.isReady === false) {
     return (
       <SetupPage