Resource filtering

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

src/components/KuadrantOverviewPage.tsx

@@ -171,7 +171,7 @@ const KuadrantOverviewPage: React.FC = () => {
         <title data-test="example-page-title">{t('Kuadrant')}</title>
       </Helmet>
       <Page>
-        <PageSection>
+        <PageSection isFilled>
           <Title headingLevel="h1">{t('Kuadrant')} Overview</Title>
           <br />
 

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<ResourceListProps> = ({
     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<ResourceListProps> = ({
   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<string>('');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [filterSelected, setFilterSelected] = React.useState('Name');
+  const [filteredData, setFilteredData] = React.useState<K8sResourceCommon[]>([]);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onFilterSelect = (
+    _event: React.MouseEvent<Element, 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<K8sResourceCommon>[] = [
     {
@@ -415,6 +462,11 @@ const ResourceList: React.FC<ResourceListProps> = ({
     setCurrentPage(1);
   };
 
+  const handleFilterChange = (value: string) => {
+    setCurrentPage(1);
+    setFilters(value);
+  };
+
   const ResourceRow: React.FC<RowProps<K8sResourceCommon>> = ({ obj, activeColumnIDs }) => {
     const { apiVersion, kind } = obj;
     const [group, version] = apiVersion.includes('/') ? apiVersion.split('/') : ['', apiVersion];
@@ -442,10 +494,14 @@ const ResourceList: React.FC<ResourceListProps> = ({
             case 'namespace':
               return (
                 <TableData key={column.id} id={column.id} activeColumnIDs={activeColumnIDs}>
-                  <ResourceLink
-                    groupVersionKind={{ version: 'v1', kind: 'Namespace' }}
-                    name={obj.metadata.namespace}
-                  />
+                  {obj.metadata.namespace ? (
+                    <ResourceLink
+                      groupVersionKind={{ version: 'v1', kind: 'Namespace' }}
+                      name={obj.metadata.namespace}
+                    />
+                  ) : (
+                    '-'
+                  )}
                 </TableData>
               );
             case 'Status':
@@ -490,7 +546,43 @@ const ResourceList: React.FC<ResourceListProps> = ({
       )}
       <div className="kuadrant-policy-list-body">
         <ListPageBody>
-          <ListPageFilter data={data} loaded={allLoaded} onFilterChange={onFilterChange} />
+          <Toolbar>
+            <ToolbarContent>
+              <ToolbarGroup variant="filter-group">
+                <ToolbarItem>
+                  <Select
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+                        {filterSelected}
+                      </MenuToggle>
+                    )}
+                    onSelect={onFilterSelect}
+                    onOpenChange={setIsOpen}
+                    isOpen={isOpen}
+                  >
+                    {['Name', 'Namespace', 'Type'].map((option, index) => (
+                      <SelectOption key={index} value={option}>
+                        {option}
+                      </SelectOption>
+                    ))}
+                  </Select>
+                </ToolbarItem>
+
+                <ToolbarItem>
+                  <InputGroup className="pf-v5-c-input-group co-filter-group">
+                    <TextInput
+                      type="text"
+                      placeholder={t('Search by {{filterValue}}...', {
+                        filterValue: filterSelected.toLowerCase(),
+                      })}
+                      onChange={(_event, value) => handleFilterChange(value)}
+                      className="pf-v5-c-form-control co-text-filter-with-icon "
+                    />
+                  </InputGroup>
+                </ToolbarItem>
+              </ToolbarGroup>
+            </ToolbarContent>
+          </Toolbar>
           {paginatedData.length === 0 && allLoaded ? (
             <EmptyState>
               <EmptyStateIcon icon={SearchIcon} />
@@ -504,15 +596,15 @@ const ResourceList: React.FC<ResourceListProps> = ({
           ) : (
             <VirtualizedTable<K8sResourceCommon>
               data={paginatedData}
-              unfilteredData={data}
+              unfilteredData={filteredData}
               loaded={allLoaded}
               loadError={combinedLoadError}
               columns={usedColumns}
               Row={ResourceRow}
             />
           )}
 
-          {paginatedData.length > 0 && (
+          {filteredData.length > 0 && (
             <div className="kuadrant-pagination-left">
               <Pagination
                 itemCount={filteredData.length}

src/components/kuadrant.css

@@ -67,7 +67,9 @@
   padding: 1rem;
 }
 
-.kuadrant-dashboard-learning, .kuadrant-dashboard-feature-highlights, .kuadrant-dashboard-enhance  {
+.kuadrant-dashboard-learning,
+.kuadrant-dashboard-feature-highlights,
+.kuadrant-dashboard-enhance {
   margin-bottom: 0.5em;
 }
 
@@ -79,7 +81,7 @@
   color: var(--pf-global--palette--purple-700);
 }
 
-.pf-theme-dark .kuadrant-dashboard-learning  {
+.pf-theme-dark .kuadrant-dashboard-learning {
   color: var(--pf-v5-global--palette--purple-200);
 }
 
@@ -107,14 +109,15 @@
   font-size: 0.8rem;
   color: var(--pf-global--palette--black-600);
   margin-left: 1rem;
-  margin-right: 1rem
+  margin-right: 1rem;
 }
 
 .kuadrant-limits-header {
   margin: 1rem 0 0;
 }
 
-.kuadrant-limits-button, .pf-v5-c-label-group {
+.kuadrant-limits-button,
+.pf-v5-c-label-group {
   margin: 1rem;
 }
 
@@ -143,11 +146,12 @@
 
 .kuadrant-overview-create-button {
   position: absolute;
-  top: 0;   
-  right: 0; 
+  top: 0;
+  right: 0;
 }
 
-.kuadrant-overview-create-list, .kuadrant-overview-create-button {
+.kuadrant-overview-create-list,
+.kuadrant-overview-create-button {
   font-family: RedHatText, helvetica, arial, sans-serif;
-   }
+}