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 && (