diff --git a/src/components/ResourceList.tsx b/src/components/ResourceList.tsx index 8779284..9937915 100644 --- a/src/components/ResourceList.tsx +++ b/src/components/ResourceList.tsx @@ -11,6 +11,7 @@ import { EmptyStateBody, Title, Tooltip, + SearchInput, } from '@patternfly/react-core'; import { K8sResourceCommon, @@ -356,29 +357,23 @@ const ResourceList: React.FC = ({ loadErrors.length > 0 ? new Error(loadErrors.map((err) => err.message).join('; ')) : null; // Implement local filter state - const [filters, setFilters] = React.useState<{ [key: string]: string }>({}); + const [filters, setFilters] = React.useState(''); const [filteredData, setFilteredData] = React.useState([]); React.useEffect(() => { let data = allData; - // Apply filters - Object.keys(filters).forEach((key) => { - const value = filters[key]; - if (value) { - data = data.filter((item) => { - if (key === 'name') { - return item.metadata.name.toLowerCase().includes(value.toLowerCase()); - } else if (key === 'namespace') { - return item.metadata.namespace?.toLowerCase().includes(value.toLowerCase()); - } else if (key === 'type') { - return item.kind.toLowerCase().includes(value.toLowerCase()); - } - return true; - }); - } - }); - + if (filters) { + const search = filters.toLowerCase().trim().split(/\s+/); // Split by spaces + data = data.filter((item) => { + return search.every( + (searchValue) => + item.metadata?.name?.toLowerCase().includes(searchValue) || + item.metadata?.namespace?.toLowerCase().includes(searchValue) || + item.kind?.toLowerCase().includes(searchValue), + ); + }); + } setFilteredData(data); }, [allData, filters]); @@ -442,6 +437,16 @@ const ResourceList: React.FC = ({ setCurrentPage(1); }; + const handleFilterChange = (value: string) => { + setCurrentPage(1); + setFilters(value); + }; + + const handleClear = () => { + setFilters(''); + setCurrentPage(1); + }; + const ResourceRow: React.FC> = ({ obj, activeColumnIDs }) => { const { apiVersion, kind } = obj; const [group, version] = apiVersion.includes('/') ? apiVersion.split('/') : ['', apiVersion]; @@ -521,36 +526,14 @@ const ResourceList: React.FC = ({ )}
- {/* Filter UI */} -
- { - setCurrentPage(1); - setFilters({ ...filters, name: e.target.value }); - }} - style={{ marginRight: '8px' }} - /> - { - setCurrentPage(1); - setFilters({ ...filters, namespace: e.target.value }); - }} - style={{ marginRight: '8px' }} - /> - { - setCurrentPage(1); - setFilters({ ...filters, type: e.target.value }); - }} +
+ handleFilterChange(value)} + onClear={handleClear} + aria-label="Global search input" + style={{ marginRight: '8px', width: '350px' }} />