Handle filter timeout separately

when the filter value population based on option selection times out,
don't error out the whole table

Author: mshriver

frontend/src/components/filtering/result-filter.js

@@ -82,9 +82,11 @@ const ResultFilter = ({ hideFilters, runs, maxHeight = '600px' }) => {
   // Dynamic metadata values
   const [valueOptions, setValueOptions] = useState([]);
   const [isValueOpen, setIsValueOpen] = useState(false);
+  const [loadError, setLoadError] = useState(null);
 
   useEffect(() => {
     if (fieldSelection && fieldSelection.startsWith('metadata.')) {
+      setLoadError(null);
       // Filter out project_id since we pass it as 'project' parameter
       const filtersWithoutProject = activeFilters.filter(
         (f) => f.field !== 'project_id',
@@ -96,16 +98,14 @@ const ResultFilter = ({ hideFilters, runs, maxHeight = '600px' }) => {
       const params = {
         group_field: fieldSelection,
         project: projectId,
+        days: 90,
       };
 
       // Only add additional_filters if there are filters to add
       if (apiFilter) {
         params.additional_filters = apiFilter;
       }
 
-      // Note: We don't include 'days' parameter to get all historical data
-      // If we want to limit to recent results, we could add: days: 30
-
       HttpClient.get(
         [Settings.serverUrl, 'widget', 'result-aggregator'],
         params,
@@ -117,9 +117,11 @@ const ResultFilter = ({ hideFilters, runs, maxHeight = '600px' }) => {
         .catch((error) => {
           console.error('Error fetching dynamic values:', error);
           setValueOptions([]);
+          setLoadError('Error loading values');
         });
     } else {
       setValueOptions([]);
+      setLoadError(null);
     }
   }, [fieldSelection, activeFilters, primaryObject]);
 
@@ -606,6 +608,17 @@ const ResultFilter = ({ hideFilters, runs, maxHeight = '600px' }) => {
                   </SelectList>
                 </Select>
               )}
+              {loadError && (
+                <div
+                  style={{
+                    color: 'var(--pf-v6-global--danger-color--100)',
+                    fontSize: 'var(--pf-v6-global--FontSize--sm)',
+                    marginTop: '0.25rem',
+                  }}
+                >
+                  {loadError}
+                </div>
+              )}
             </FlexItem>
           </Flex>
           <FlexItem>

frontend/src/components/filtering/result-filter.test.js

@@ -1,8 +1,11 @@
 /* eslint-env jest */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import ResultFilter from './result-filter';
 import { FilterContext } from '../contexts/filter-context';
+import { HttpClient } from '../../utilities/http';
+
+jest.mock('../../utilities/http');
 
 describe('ResultFilter', () => {
   const mockUpdateFilters = jest.fn();
@@ -831,4 +834,44 @@ describe('ResultFilter', () => {
       // Values should be trimmed
     });
   });
+
+  describe('Dynamic Metadata Values Error Handling', () => {
+    it('should display error message when dynamic values fetch fails', async () => {
+      HttpClient.get.mockReturnValue(Promise.reject(new Error('Fetch failed')));
+
+      renderComponent(
+        {},
+        {
+          fieldSelection: 'metadata.browser',
+          filterMode: 'text',
+          operationMode: 'single',
+        }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Error loading values')).toBeInTheDocument();
+      });
+    });
+
+    it('should fetch with days=90 parameter', async () => {
+      HttpClient.get.mockReturnValue(Promise.resolve({ ok: true, json: () => [] }));
+      HttpClient.handleResponse.mockReturnValue([]);
+
+      renderComponent(
+        {},
+        {
+          fieldSelection: 'metadata.browser',
+          filterMode: 'text',
+          operationMode: 'single',
+        }
+      );
+
+      await waitFor(() => {
+        expect(HttpClient.get).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({ days: 90 })
+        );
+      });
+    });
+  });
 });