OCPBUGS-81518: Fix ResourceListDropdown performance on large clusters

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 <noreply@anthropic.com>

Author: stefanonardo

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 = 100;
 
 // Blacklist known duplicate resources.
 const blacklistGroups = ImmutableSet([
@@ -44,59 +45,70 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
   const { selected, onChange, recentList, allModels, groupToVersionMap, className } = props;
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
-  const [clearItems, setClearItems] = useState(false);
   const [recentSelected, setRecentSelected] = useUserPreference<string>(
     'console.search.recentlySearched',
     '[]',
     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(() => {
+    const isVisible = (m: K8sKind) =>
+      !blacklistGroups.has(m.apiGroup) &&
+      !blacklistResources.has(`${m.apiGroup}/${m.apiVersion}.${m.kind}`) &&
+      (_.isEmpty(m.verbs) || _.includes(m.verbs, 'list'));
+
+    // Pre-compute which group+kind combinations have a visible preferred version (O(n))
+    const preferredGroupKinds = new Set<string>();
+    allModels.forEach((m) => {
+      if (groupToVersionMap?.[m.apiGroup]?.preferredVersion === m.apiVersion && isVisible(m)) {
+        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;
-
-      const sameGroupKind = (m: K8sKind) =>
-        m.kind === kind && m.apiGroup === apiGroup && m.apiVersion !== apiVersion;
+    return allModels
+      .filter((m) => {
+        if (!isVisible(m)) {
+          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 = `${m.kind}~${m.apiGroup}`;
+        if (
+          preferredGroupKinds.has(key) &&
+          groupToVersionMap?.[m.apiGroup]?.preferredVersion !== m.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) => {
@@ -116,40 +128,18 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
 
   useEffect(() => {
     setSelectedOptions(selected);
-    !_.isEmpty(selected) &&
-      setRecentSelected(
-        JSON.stringify(
-          _.union(
-            !clearItems ? filterGroupVersionKind(selected.reverse()) : [],
-            recentSelectedList(recentSelected),
-          ),
-        ),
-      );
-    setClearItems(false);
-    // 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()),
-          ),
-      );
+  }, [selected]);
 
-      // 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;
     }
-
-    setSelectOptions(newSelectOptions);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const lower = inputValue.toLowerCase();
+    return initialSelectOptions.filter(
+      (menuItem) =>
+        menuItem.searchableText?.includes(lower) ||
+        menuItem.searchableShortNames?.some((shortName) => shortName.includes(lower)),
+    );
   }, [inputValue, initialSelectOptions]);
 
   useEffect(() => {
@@ -161,27 +151,38 @@ 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 visibleSelectOptions = selectOptions.slice(0, MAX_VISIBLE_ITEMS);
+  const items = visibleSelectOptions.map((option: SelectOptionProps, index) => {
+    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,9 +207,9 @@ 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);
+        const model = referenceToModelMap.get(modelRef);
         if (model) {
           return (
             <SelectOption
@@ -245,7 +246,6 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
       .filter((item) => item !== null);
 
   const onClear = () => {
-    setClearItems(true);
     setRecentSelected(JSON.stringify([]));
   };
   const NO_RESULTS = 'no results';
@@ -273,10 +273,11 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
       );
       options.push(<Divider key={3} className="co-select-group-divider" />);
     }
+    const cleanItems = items.filter(Boolean);
     options.push(
       <Fragment key="resource-items">
-        {items.length > 0
-          ? items
+        {cleanItems.length > 0
+          ? cleanItems
           : [
               <SelectOption
                 value={NO_RESULTS}
@@ -286,6 +287,18 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
                 {t('public~No results found')}
               </SelectOption>,
             ]}
+        {selectOptions.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: selectOptions.length,
+            })}
+          </SelectOption>
+        )}
       </Fragment>,
     );
     return options;
@@ -318,36 +331,51 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
   const onTextInputChange = (_event: FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
     resetActiveAndFocusedItem();
+    if (value && !isOpen) {
+      setIsOpen(true);
+    }
   };
 
   const onSelect = (value: string) => {
     if (value && value !== NO_RESULTS) {
-      setSelectedOptions(
-        selected.includes(value)
-          ? selected.filter((selection) => selection !== value)
-          : [...selected, value],
-      );
+      const newSelected = selected.includes(value)
+        ? selected.filter((selection) => selection !== value)
+        : [...selected, value];
+      setSelectedOptions(newSelected);
       onChange(value);
+
+      // Update recently used resources
+      if (!_.isEmpty(newSelected)) {
+        setRecentSelected(
+          JSON.stringify(
+            _.union(
+              filterGroupVersionKind([...newSelected].reverse()),
+              recentSelectedList(recentSelected),
+            ),
+          ),
+        );
+      }
     }
 
     textInputRef.current?.focus();
   };
 
   const handleMenuArrowKeys = (key: string) => {
     let indexToFocus = 0;
+    const maxIndex = Math.min(selectOptions.length, MAX_VISIBLE_ITEMS) - 1;
 
     if (!isOpen) {
       setIsOpen(true);
     }
 
-    if (selectOptions.every((option) => option.isDisabled)) {
+    if (maxIndex < 0 || selectOptions.every((option) => option.isDisabled)) {
       return;
     }
 
     if (key === 'ArrowUp') {
       // When no index is set or at the first index, focus to the last, otherwise decrement focus index
       if (focusedItemIndex === null || focusedItemIndex === 0) {
-        indexToFocus = selectOptions.length - 1;
+        indexToFocus = maxIndex;
       } else {
         indexToFocus = focusedItemIndex - 1;
       }
@@ -356,14 +384,14 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
       while (selectOptions[indexToFocus].isDisabled) {
         indexToFocus--;
         if (indexToFocus === -1) {
-          indexToFocus = selectOptions.length - 1;
+          indexToFocus = maxIndex;
         }
       }
     }
 
     if (key === 'ArrowDown') {
       // When no index is set or at the last index, focus to the first, otherwise increment focus index
-      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+      if (focusedItemIndex === null || focusedItemIndex === maxIndex) {
         indexToFocus = 0;
       } else {
         indexToFocus = focusedItemIndex + 1;
@@ -372,7 +400,7 @@ const ResourceListDropdown_: FC<ResourceListDropdownProps> = (props) => {
       // Skip disabled options
       while (selectOptions[indexToFocus].isDisabled) {
         indexToFocus++;
-        if (indexToFocus === selectOptions.length) {
+        if (indexToFocus > maxIndex) {
           indexToFocus = 0;
         }
       }
@@ -479,6 +507,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 }) => ({

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",