diff --git a/locales/en/plugin__kuadrant-console-plugin.json b/locales/en/plugin__kuadrant-console-plugin.json
index 6638bab..252e479 100644
--- a/locales/en/plugin__kuadrant-console-plugin.json
+++ b/locales/en/plugin__kuadrant-console-plugin.json
@@ -85,7 +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 across name, namespace and/or resource type": "Search across name, namespace and/or resource type",
+ "Search by": "Search by",
"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 2df70a1..2a1618a 100644
--- a/src/components/ResourceList.tsx
+++ b/src/components/ResourceList.tsx
@@ -11,7 +11,16 @@ import {
EmptyStateBody,
Title,
Tooltip,
- SearchInput,
+ ToolbarItem,
+ ToolbarGroup,
+ Select,
+ MenuToggle,
+ InputGroup,
+ TextInput,
+ MenuToggleElement,
+ SelectOption,
+ Toolbar,
+ ToolbarContent,
} from '@patternfly/react-core';
import {
K8sResourceCommon,
@@ -358,24 +367,36 @@ const ResourceList: React.FC = ({
// 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 search = filters.toLowerCase().trim().split(/\s+/).filter(Boolean);
+ const filterValue = filters.toLowerCase();
data = data.filter((item) => {
- const name = item.metadata?.name?.toLowerCase() || '';
- const namespace = item.metadata?.namespace?.toLowerCase() || '';
- const kind = item.kind?.toLowerCase() || '';
- const matches = search.some(
- (searchValue) =>
- name.includes(searchValue) ||
- namespace.includes(searchValue) ||
- kind.includes(searchValue),
- );
- return matches;
+ 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);
@@ -446,11 +467,6 @@ const ResourceList: React.FC = ({
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];
@@ -530,17 +546,41 @@ const ResourceList: React.FC = ({
)}
-
- handleFilterChange(value)}
- onClear={handleClear}
- aria-label="Global search input"
- style={{ marginRight: '8px', width: '350px' }}
- />
-
-
+
+
+
+
+
+
+
+
+
+ handleFilterChange(value)}
+ className="pf-v5-c-form-control co-text-filter-with-icon "
+ />
+
+
+
+
+
{paginatedData.length === 0 && allLoaded ? (
diff --git a/src/components/kuadrant.css b/src/components/kuadrant.css
index d2c7022..c56ea79 100644
--- a/src/components/kuadrant.css
+++ b/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;
- }
+}