[Fleet] Show callout when EPR unavailable

docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md

@@ -236,6 +236,7 @@ readonly links: {
             fleetServerAddFleetServer: string;
             settings: string;
             settingsFleetServerHostSettings: string;
+            settingsFleetServerProxySettings: string;
             troubleshooting: string;
             elasticAgent: string;
             datastreams: string;
@@ -245,6 +246,7 @@ readonly links: {
             upgradeElasticAgent712lower: string;
             learnMoreBlog: string;
             apiKeysLearnMore: string;
+            onPremRegistry: string;
         }>;
         readonly ecs: {
             readonly guide: string;

src/core/public/doc_links/doc_links_service.ts

@@ -479,6 +479,7 @@ export class DocLinksService {
           fleetServerAddFleetServer: `${FLEET_DOCS}fleet-server.html#add-fleet-server`,
           settings: `${FLEET_DOCS}fleet-settings.html#fleet-server-hosts-setting`,
           settingsFleetServerHostSettings: `${FLEET_DOCS}fleet-settings.html#fleet-server-hosts-setting`,
+          settingsFleetServerProxySettings: `${KIBANA_DOCS}fleet-settings-kb.html#fleet-data-visualizer-settings`,
           troubleshooting: `${FLEET_DOCS}fleet-troubleshooting.html`,
           elasticAgent: `${FLEET_DOCS}elastic-agent-installation.html`,
           beatsAgentComparison: `${FLEET_DOCS}beats-agent-comparison.html`,
@@ -490,6 +491,7 @@ export class DocLinksService {
           upgradeElasticAgent712lower: `${FLEET_DOCS}upgrade-elastic-agent.html#upgrade-7.12-lower`,
           learnMoreBlog: `${ELASTIC_WEBSITE_URL}blog/elastic-agent-and-fleet-make-it-easier-to-integrate-your-systems-with-elastic`,
           apiKeysLearnMore: `${KIBANA_DOCS}api-keys.html`,
+          onPremRegistry: `${ELASTIC_WEBSITE_URL}guide/en/integrations-developer/${DOC_LINK_VERSION}/air-gapped.html`,
         },
         ecs: {
           guide: `${ELASTIC_WEBSITE_URL}guide/en/ecs/current/index.html`,
@@ -745,6 +747,7 @@ export interface DocLinksStart {
       fleetServerAddFleetServer: string;
       settings: string;
       settingsFleetServerHostSettings: string;
+      settingsFleetServerProxySettings: string;
       troubleshooting: string;
       elasticAgent: string;
       datastreams: string;
@@ -754,6 +757,7 @@ export interface DocLinksStart {
       upgradeElasticAgent712lower: string;
       learnMoreBlog: string;
       apiKeysLearnMore: string;
+      onPremRegistry: string;
     }>;
     readonly ecs: {
       readonly guide: string;

src/core/public/public.api.md

@@ -703,6 +703,7 @@ export interface DocLinksStart {
             fleetServerAddFleetServer: string;
             settings: string;
             settingsFleetServerHostSettings: string;
+            settingsFleetServerProxySettings: string;
             troubleshooting: string;
             elasticAgent: string;
             datastreams: string;
@@ -712,6 +713,7 @@ export interface DocLinksStart {
             upgradeElasticAgent712lower: string;
             learnMoreBlog: string;
             apiKeysLearnMore: string;
+            onPremRegistry: string;
         }>;
         readonly ecs: {
             readonly guide: string;

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/available_packages.tsx

@@ -9,13 +9,16 @@ import React, { memo, useMemo, useState } from 'react';
 import { useLocation, useHistory, useParams } from 'react-router-dom';
 import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiHorizontalRule,
   EuiFlexItem,
   EuiFlexGrid,
   EuiSpacer,
   EuiCard,
   EuiIcon,
+  EuiCallOut,
+  EuiLink,
 } from '@elastic/eui';
 
 import { useStartServices } from '../../../../hooks';
@@ -133,10 +136,13 @@ export const AvailablePackages: React.FC = memo(() => {
     history.replace(pagePathGetters.integrations_all({ searchTerm: search })[1]);
   }
 
-  const { data: eprPackages, isLoading: isLoadingAllPackages } = useGetPackages({
+  const {
+    data: eprPackages,
+    isLoading: isLoadingAllPackages,
+    error: eprPackageLoadingError,
+  } = useGetPackages({
     category: '',
   });
-
   const eprIntegrationList = useMemo(
     () => packageListToIntegrationsList(eprPackages?.response || []),
     [eprPackages]
@@ -166,18 +172,23 @@ export const AvailablePackages: React.FC = memo(() => {
     return a.title.localeCompare(b.title);
   });
 
-  const { data: eprCategories, isLoading: isLoadingCategories } = useGetCategories({
+  const {
+    data: eprCategories,
+    isLoading: isLoadingCategories,
+    error: eprCategoryLoadingError,
+  } = useGetCategories({
     include_policy_templates: true,
   });
 
   const categories = useMemo(() => {
-    const eprAndCustomCategories: CategoryFacet[] =
-      isLoadingCategories || !eprCategories
-        ? []
-        : mergeCategoriesAndCount(
-            eprCategories.response as Array<{ id: string; title: string; count: number }>,
-            cards
-          );
+    const eprAndCustomCategories: CategoryFacet[] = isLoadingCategories
+      ? []
+      : mergeCategoriesAndCount(
+          eprCategories
+            ? (eprCategories.response as Array<{ id: string; title: string; count: number }>)
+            : [],
+          cards
+        );
     return [
       {
         ...ALL_CATEGORY,
@@ -291,6 +302,54 @@ export const AvailablePackages: React.FC = memo(() => {
       setSelectedCategory={setSelectedCategory}
       onSearchChange={setSearchTerm}
       showMissingIntegrationMessage
+      callout={eprPackageLoadingError || eprCategoryLoadingError ? <NoEprCallout /> : undefined}
     />
   );
 });
+
+function NoEprCallout() {
+  return (
+    <EuiCallOut
+      title={i18n.translate('xpack.fleet.epmList.eprUnavailableCalloutTitle', {
+        defaultMessage: 'Update your package registry setting to view more integrations\n',
+      })}
+      iconType="iInCircle"
+      color={'warning'}
+    >
+      <p>
+        <FormattedMessage
+          id="xpack.fleet.epmList.eprUnavailableCalloutTitleMessage"
+          defaultMessage="Kibana cannot reach the Elastic Package Registry, which provides Elastic Agent integrations. To view these integrations, set the URL for a {registryproxy} or an {onpremregistry}."
+          values={{
+            registryproxy: <ProxyLink />,
+            onpremregistry: <OnPremLink />,
+          }}
+        />
+      </p>
+    </EuiCallOut>
+  );
+}
+
+function ProxyLink() {
+  const { docLinks } = useStartServices();
+
+  return (
+    <EuiLink href={docLinks.links.fleet.settingsFleetServerProxySettings} target="_blank">
+      {i18n.translate('xpack.fleet.epmList.proxyLinkSnippedText', {
+        defaultMessage: 'registry proxy',
+      })}
+    </EuiLink>
+  );
+}
+
+function OnPremLink() {
+  const { docLinks } = useStartServices();
+
+  return (
+    <EuiLink href={docLinks.links.fleet.onPremRegistry} target="_blank">
+      {i18n.translate('xpack.fleet.epmList.onPremLinkSnippetText', {
+        defaultMessage: 'on-prem registry',
+      })}
+    </EuiLink>
+  );
+}