inform user when communities filter is not availble

ui/src/app/components/filters/CommunitiesSelect.js

@@ -8,6 +8,7 @@ import { useReadableCommunity }
 import { FILTER_GROUP_COMMUNITIES
        , FILTER_GROUP_EXT_COMMUNITIES
        , FILTER_GROUP_LARGE_COMMUNITIES
+       , useFilters
        , useCommunitiesFilters
        , useExtCommunitiesFilters
        , useLargeCommunitiesFilters
@@ -86,6 +87,7 @@ const useUpdateFilters = (filter) => {
 
 
 const CommunitiesSelect = () => {
+  const { filters } = useFilters();
   const { apply, remove } = useUpdateFilters();
 
   const communitiesFilters = useCommunitiesFilters();
@@ -101,7 +103,20 @@ const CommunitiesSelect = () => {
     remove[group](value);
   }, [remove]);
 
-  // Nothing to do if we don't have filters
+  // Nothing to do if we don't have filters or if the community
+  // filter is disable because of a large result set.
+  const filtersNotAvailable = filters.notAvailable;
+  const isDisabled = filtersNotAvailable.includes("communities");
+
+  if (isDisabled) {
+    return (
+      <div className="text-muted">
+        Due to a large number of results, filtering by BGP communities
+        becomes availble only after selecting a route server.
+      </div>
+    );
+  }
+
   const hasAvailable =
       communitiesFilters.filters.available.length > 0 ||
       extCommunitiesFilters.filters.available.length > 0 ||

ui/src/app/context/filters.js

@@ -54,8 +54,6 @@ export const initializeFilterState = () => ([
   {"key": "large_communities", "filters": []},
 ]);
 
-
-
 // Compare values
 const cmpValue = (a, b) => a === b;
 
@@ -277,11 +275,12 @@ export const useFilters = () => useContext(FiltersContext);
 const useRoutesFilters = (routes) => {
   return useMemo(() => {
     if (!routes.requested || routes.loading) {
-      return { applied: [], available: [] };
+      return { applied: [], available: [], notAvailable: [] };
     }
     return {
       applied: routes.filtersApplied,
       available: routes.filtersAvailable,
+      notAvailable: routes.filtersNotAvailable,
     };
   }, [routes]);
 }
@@ -364,7 +363,11 @@ export const RoutesFiltersProvider = ({children}) => {
       filtered.available,
       noexport.available,
     );
-    return { applied, available };
+    let notAvailable = [];
+    if (received.notAvailable) {
+      notAvailable = received.notAvailable;
+    }
+    return { applied, available, notAvailable };
   }, [received, filtered, noexport]);
 
   const context = {filters, applyFilter, removeFilter};

ui/src/app/context/routes.js

@@ -98,9 +98,14 @@ export const paginationState = ({pagination}) => ({
   totalResults: pagination.total_results,
 })
 
-export const filtersState = ({filters_applied, filters_available}) => ({
+export const filtersState = ({
+    filters_applied,
+    filters_available,
+    filters_not_available,
+  }) => ({
   filtersApplied: filters_applied,
   filtersAvailable: filters_available,
+  filtersNotAvailable: filters_not_available,
 });
 
 export const apiStatusState = ({api, request_duration_ms}) => ({

ui/src/app/context/search.js

@@ -43,6 +43,7 @@ const initialRoutesState = {
   routes: [],
   filtersApplied: [],
   filtersAvailable: [],
+  filtersNotAvailable: [],
 
   apiStatus: {},
 };
@@ -104,6 +105,7 @@ const decodeSearchResult = (result) => {
     routes: result?.filtered?.routes,
     filtersApplied: [],
     filtersAvailable: [],
+    filtersNotAvailable: [],
   };
   const received = {
     requested: true,