diff --git a/locales/en/plugin__kuadrant-console-plugin.json b/locales/en/plugin__kuadrant-console-plugin.json index 316983e..51b95ae 100644 --- a/locales/en/plugin__kuadrant-console-plugin.json +++ b/locales/en/plugin__kuadrant-console-plugin.json @@ -85,6 +85,7 @@ "Reference to an existing secret resource containing DNS provider credentials and configuration": "Reference to an existing secret resource containing DNS provider credentials and configuration", "Release Notes": "Release Notes", "Save": "Save", + "Search by {{filterValue}}...": "Search by {{filterValue}}...", "Select a gateway": "Select a gateway", "Select a Protocol": "Select a Protocol", "Select an ClusterIssuer": "Select an ClusterIssuer", diff --git a/src/components/KuadrantOverviewPage.tsx b/src/components/KuadrantOverviewPage.tsx index 9103387..bb5719e 100644 --- a/src/components/KuadrantOverviewPage.tsx +++ b/src/components/KuadrantOverviewPage.tsx @@ -171,7 +171,7 @@ const KuadrantOverviewPage: React.FC = () => { {t('Kuadrant')} - + {t('Kuadrant')} Overview
diff --git a/src/components/ResourceList.tsx b/src/components/ResourceList.tsx index ca9a36a..de655c7 100644 --- a/src/components/ResourceList.tsx +++ b/src/components/ResourceList.tsx @@ -11,20 +11,28 @@ import { EmptyStateBody, Title, Tooltip, + ToolbarItem, + ToolbarGroup, + Select, + MenuToggle, + InputGroup, + TextInput, + MenuToggleElement, + SelectOption, + Toolbar, + ToolbarContent, } from '@patternfly/react-core'; import { K8sResourceCommon, ResourceLink, useK8sWatchResources, VirtualizedTable, - useListPageFilter, Timestamp, TableData, RowProps, TableColumn, WatchK8sResource, ListPageBody, - ListPageFilter, } from '@openshift-console/dynamic-plugin-sdk'; import { SearchIcon } from '@patternfly/react-icons'; import { @@ -340,8 +348,12 @@ const ResourceList: React.FC = ({ resourceDescriptors, ); - const allData = Object.values(watchedResources).flatMap((res) => - res.loaded && !res.loadError ? (res.data as K8sResourceCommon[]) : [], + const allData = React.useMemo( + () => + Object.values(watchedResources).flatMap((res) => + res.loaded && !res.loadError ? (res.data as K8sResourceCommon[]) : [], + ), + [watchedResources], ); const allLoaded = Object.values(watchedResources).every((res) => res.loaded); @@ -353,7 +365,42 @@ const ResourceList: React.FC = ({ const combinedLoadError = loadErrors.length > 0 ? new Error(loadErrors.map((err) => err.message).join('; ')) : null; - const [data, filteredData, onFilterChange] = useListPageFilter(allData); + // Implement local filter state + const [filters, setFilters] = React.useState(''); + const [isOpen, setIsOpen] = React.useState(false); + const [filterSelected, setFilterSelected] = React.useState('Name'); + const [filteredData, setFilteredData] = React.useState([]); + + const onToggleClick = () => { + setIsOpen(!isOpen); + }; + + const onFilterSelect = ( + _event: React.MouseEvent | undefined, + selection: string, + ) => { + setFilterSelected(selection); + setIsOpen(false); + }; + + React.useEffect(() => { + let data = allData; + + if (filters) { + const filterValue = filters.toLowerCase(); + data = data.filter((item) => { + if (filterSelected === 'Name') { + return item.metadata.name.toLowerCase().includes(filterValue); + } else if (filterSelected === 'Namespace') { + return item.metadata.namespace?.toLowerCase().includes(filterValue); + } else if (filterSelected === 'Type') { + return item.kind.toLowerCase().includes(filterValue); + } + return true; + }); + } + setFilteredData(data); + }, [allData, filters]); const defaultColumns: TableColumn[] = [ { @@ -415,6 +462,11 @@ const ResourceList: React.FC = ({ setCurrentPage(1); }; + const handleFilterChange = (value: string) => { + setCurrentPage(1); + setFilters(value); + }; + const ResourceRow: React.FC> = ({ obj, activeColumnIDs }) => { const { apiVersion, kind } = obj; const [group, version] = apiVersion.includes('/') ? apiVersion.split('/') : ['', apiVersion]; @@ -442,10 +494,14 @@ const ResourceList: React.FC = ({ case 'namespace': return ( - + {obj.metadata.namespace ? ( + + ) : ( + '-' + )} ); case 'Status': @@ -490,7 +546,43 @@ const ResourceList: React.FC = ({ )}
- + + + + + + + + + + handleFilterChange(value)} + className="pf-v5-c-form-control co-text-filter-with-icon " + /> + + + + + {paginatedData.length === 0 && allLoaded ? ( @@ -504,7 +596,7 @@ const ResourceList: React.FC = ({ ) : ( data={paginatedData} - unfilteredData={data} + unfilteredData={filteredData} loaded={allLoaded} loadError={combinedLoadError} columns={usedColumns} @@ -512,7 +604,7 @@ const ResourceList: React.FC = ({ /> )} - {paginatedData.length > 0 && ( + {filteredData.length > 0 && (