OCPBUGS-81518: Fix ResourceListDropdown performance on large clusters

stefanonardo · claude · stefanonardo · commit 536dd7f4c8d2 · 2026-04-03T11:52:54.000+02:00
The Search page resource type dropdown was unusable on clusters with
1000+ API resources due to O(n²) filtering, missing memoization,
redundant computations on every render, and rendering all items to
the DOM without any limit.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/frontend/public/components/resource-dropdown.tsx b/frontend/public/components/resource-dropdown.tsx
@@ -1,5 +1,5 @@
 import type { FC, FormEvent, KeyboardEvent, Ref } from 'react';
-import { useState, useRef, useEffect, Fragment } from 'react';
+import { useState, useRef, useEffect, useMemo, Fragment } from 'react';
 import * as _ from 'lodash';
 import { connect } from 'react-redux';
 import { Map as ImmutableMap, Set as ImmutableSet } from 'immutable';
@@ -28,6 +28,7 @@ import {
 import { TimesIcon } from '@patternfly/react-icons';
 
 const RECENT_SEARCH_ITEMS = 5;
+const MAX_VISIBLE_ITEMS = 200;
 
 // Blacklist known duplicate resources.
 const blacklistGroups = ImmutableSet([
@@ -51,52 +52,68 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
     true,
   );
   const [selectedOptions, setSelectedOptions] = useState(selected);
-  const [initialSelectOptions, setInitialSelectOptions] = useState<ExtendedSelectOptionProps[]>([]);
-  const [selectOptions, setSelectOptions] = useState<ExtendedSelectOptionProps[]>(
-    initialSelectOptions,
-  );
   const [inputValue, setInputValue] = useState<string>('');
   const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
   const [activeItemId, setActiveItemId] = useState<string | null>(null);
   const placeholderTextDefault = t('public~Resources');
   const [placeholder, setPlaceholder] = useState(placeholderTextDefault);
   const textInputRef = useRef<HTMLInputElement>();
 
-  const resources = allModels
-    .filter(({ apiGroup, apiVersion, kind, verbs }) => {
-      // Remove blacklisted items.
-      if (
-        blacklistGroups.has(apiGroup) ||
-        blacklistResources.has(`${apiGroup}/${apiVersion}.${kind}`)
-      ) {
-        return false;
-      }
-
-      // Only show resources that can be listed.
-      if (!_.isEmpty(verbs) && !_.includes(verbs, 'list')) {
-        return false;
+  const resources = useMemo(() => {
+    // Pre-compute which group+kind combinations have a preferred version (O(n))
+    const preferredGroupKinds = new Set<string>();
+    allModels.forEach((m) => {
+      if (groupToVersionMap?.[m.apiGroup]?.preferredVersion === m.apiVersion) {
+        preferredGroupKinds.add(`${m.kind}~${m.apiGroup}`);
       }
+    });
 
-      // Only show preferred version for resources in the same API group.
-      const preferred = (m: K8sKind) =>
-        groupToVersionMap?.[m.apiGroup]?.preferredVersion === m.apiVersion;
+    return allModels
+      .filter(({ apiGroup, apiVersion, kind, verbs }) => {
+        // Remove blacklisted items.
+        if (
+          blacklistGroups.has(apiGroup) ||
+          blacklistResources.has(`${apiGroup}/${apiVersion}.${kind}`)
+        ) {
+          return false;
+        }
 
-      const sameGroupKind = (m: K8sKind) =>
-        m.kind === kind && m.apiGroup === apiGroup && m.apiVersion !== apiVersion;
+        // Only show resources that can be listed.
+        if (!_.isEmpty(verbs) && !_.includes(verbs, 'list')) {
+          return false;
+        }
 
-      return !allModels.find((m) => sameGroupKind(m) && preferred(m));
-    })
-    .toOrderedMap()
-    .sortBy(({ kind, apiGroup }) => `${kind} ${apiGroup}`);
+        // Only show preferred version for resources in the same API group.
+        // If a preferred version exists for this group+kind and this isn't it, skip.
+        const key = `${kind}~${apiGroup}`;
+        if (
+          preferredGroupKinds.has(key) &&
+          groupToVersionMap?.[apiGroup]?.preferredVersion !== apiVersion
+        ) {
+          return false;
+        }
 
-  useEffect(() => {
-    const resourcesToOption: SelectOptionProps[] = resources.toArray().map((resource) => {
-      const reference = referenceForModel(resource);
-      return { value: reference, children: reference, shortNames: resource.shortNames };
-    });
-    setInitialSelectOptions(resourcesToOption);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+        return true;
+      })
+      .toOrderedMap()
+      .sortBy(({ kind, apiGroup }) => `${kind} ${apiGroup}`);
+  }, [allModels, groupToVersionMap]);
+
+  const initialSelectOptions = useMemo<ExtendedSelectOptionProps[]>(
+    () =>
+      resources.toArray().map((resource) => {
+        const reference = referenceForModel(resource);
+        return {
+          value: reference,
+          children: reference,
+          shortNames: resource.shortNames,
+          // Pre-compute lowercase for filtering so we don't repeat it on every keystroke
+          searchableText: reference.toLowerCase(),
+          searchableShortNames: resource.shortNames?.map((s) => s.toLowerCase()),
+        };
+      }),
+    [resources],
+  );
 
   const filterGroupVersionKind = (resourceList: string[]): string[] => {
     return resourceList.filter((resource) => {
@@ -129,28 +146,25 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selected, setRecentSelected]);
 
-  useEffect(() => {
-    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
-
-    // Filter menu items based on the text input value when one exists
-    if (inputValue) {
-      newSelectOptions = initialSelectOptions.filter(
-        (menuItem) =>
-          String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase()) ||
-          menuItem.shortNames?.some((shortName) =>
-            shortName.toLowerCase().includes(inputValue.toLowerCase()),
-          ),
-      );
-
-      // Open the menu when the input value changes and the new value is not empty
-      if (!isOpen) {
-        setIsOpen(true);
-      }
+  const selectOptions = useMemo(() => {
+    if (!inputValue) {
+      return initialSelectOptions;
     }
+    const lower = inputValue.toLowerCase();
+    return initialSelectOptions.filter(
+      (menuItem) =>
+        menuItem.searchableText?.includes(lower) ||
+        menuItem.searchableShortNames?.some((shortName) => shortName.includes(lower)),
+    );
+  }, [inputValue, initialSelectOptions]);
 
-    setSelectOptions(newSelectOptions);
+  // Open the menu when the input value changes and the new value is not empty
+  useEffect(() => {
+    if (inputValue && !isOpen) {
+      setIsOpen(true);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputValue, initialSelectOptions]);
+  }, [inputValue]);
 
   useEffect(() => {
     setPlaceholder(
@@ -161,27 +175,37 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
   }, [placeholderTextDefault, selectedOptions, t]);
 
   const createItemId = (value: any) => `resource-dropdown-${value.replace(' ', '-')}`;
+
+  // Pre-compute a reference-to-model lookup map (O(1) per lookup instead of O(n))
+  const referenceToModelMap = useMemo(() => {
+    const map = new Map<string, K8sKind>();
+    resources.forEach((r) => map.set(referenceForModel(r), r));
+    return map;
+  }, [resources]);
+
   // Track duplicate names so we know when to show the group.
-  const kinds = resources.groupBy((m) => m.kind);
+  const kinds = useMemo(() => resources.groupBy((m) => m.kind), [resources]);
   const isDup = (kind) => kinds.get(kind).size > 1;
 
   const items = selectOptions.map((option: SelectOptionProps, index) => {
-    const model = resources.toArray().find((resource: K8sKind) => {
-      return option.value === referenceForModel(resource);
-    });
+    const ref = option.value as string;
+    const model = referenceToModelMap.get(ref);
+    if (!model) {
+      return null;
+    }
 
     return (
       <SelectOption
-        key={referenceForModel(model)}
-        value={referenceForModel(model)}
+        key={ref}
+        value={ref}
         hasCheckbox
-        isSelected={selected.includes(referenceForModel(model))}
+        isSelected={selected.includes(ref)}
         isFocused={focusedItemIndex === index}
-        id={createItemId(referenceForModel(model))}
+        id={createItemId(ref)}
       >
         <span className="co-resource-item">
           <span className="co-resource-icon--fixed-width">
-            <ResourceIcon kind={referenceForModel(model)} />
+            <ResourceIcon kind={ref} />
           </span>
           <span className="co-resource-item__resource-name">
             <span>
@@ -206,7 +230,7 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
   const recentSearches: JSX.Element[] =
     !_.isEmpty(recentSelectedList(recentSelected)) &&
     recentSelectedList(recentSelected)
-      .splice(0, RECENT_SEARCH_ITEMS)
+      .slice(0, RECENT_SEARCH_ITEMS)
       .map((modelRef: K8sResourceKindReference) => {
         const model: K8sKind = resources.find((m) => referenceForModel(m) === modelRef);
         if (model) {
@@ -273,10 +297,12 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
       );
       options.push(<Divider key={3} className="co-select-group-divider" />);
     }
+    const visibleItems =
+      items.length > MAX_VISIBLE_ITEMS ? items.slice(0, MAX_VISIBLE_ITEMS) : items;
     options.push(
       <Fragment key="resource-items">
-        {items.length > 0
-          ? items
+        {visibleItems.length > 0
+          ? visibleItems
           : [
               <SelectOption
                 value={NO_RESULTS}
@@ -286,6 +312,18 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
                 {t('public~No results found')}
               </SelectOption>,
             ]}
+        {items.length > MAX_VISIBLE_ITEMS && (
+          <SelectOption
+            value="type-to-filter"
+            key="select-multi-typeahead-type-to-filter"
+            isAriaDisabled={true}
+          >
+            {t('public~Showing {{visible}} of {{total}} resources. Type to filter.', {
+              visible: MAX_VISIBLE_ITEMS,
+              total: items.length,
+            })}
+          </SelectOption>
+        )}
       </Fragment>,
     );
     return options;
@@ -479,6 +517,10 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
 interface ExtendedSelectOptionProps extends SelectOptionProps {
   /** Searchable short names for the select options */
   shortNames?: string[];
+  /** Pre-computed lowercase text for filtering */
+  searchableText?: string;
+  /** Pre-computed lowercase short names for filtering */
+  searchableShortNames?: string[];
 }
 
 const resourceListDropdownStateToProps = ({ k8s }) => ({
diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json
@@ -1257,6 +1257,7 @@
   "Tech Preview": "Tech Preview",
   "Clear history": "Clear history",
   "Recently used": "Recently used",
+  "Showing {{visible}} of {{total}} resources. Type to filter.": "Showing {{visible}} of {{total}} resources. Type to filter.",
   "Clear input value": "Clear input value",
   "{{count}} resource reached quota_one": "{{count}} resource reached quota",
   "{{count}} resource reached quota_other": "{{count}} resource reached quotas",
