Skip to content

Add search functionality to filter Kafka clusters in UI #1894

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Akshaya-T wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add search functionality to filter Kafka clusters in UI #1894

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions api/src/main/java/io/kafbat/ui/service/acl/AclsService.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
import io.kafbat.ui.model.KafkaCluster;
import io.kafbat.ui.service.AdminClientService;
import io.kafbat.ui.service.ReactiveAdminClient;
import io.kafbat.ui.service.ReactiveAdminClient.SupportedFeature;
import io.kafbat.ui.service.index.AclBindingNgramFilter;
import java.util.ArrayList;
import java.util.Collection;
Expand Down Expand Up @@ -89,6 +90,7 @@ public Mono<Void> deleteAcl(KafkaCluster cluster, AclBinding aclBinding) {
public Flux<AclBinding> listAcls(KafkaCluster cluster, ResourcePatternFilter filter, String principalSearch,
Boolean fts) {
return adminClientService.get(cluster)
.filter(c -> c.getClusterFeatures().contains(SupportedFeature.AUTHORIZED_SECURITY_ENABLED))
.flatMap(c -> c.listAcls(filter))
.map(lst -> filter(new ArrayList<>(lst), principalSearch, fts))
.flatMapMany(Flux::fromIterable)
Expand Down
25 changes: 25 additions & 0 deletions api/src/main/resources/static/openapi/kafbat-ui-api.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3130,6 +3130,8 @@ components:
type: string
clientSecret:
type: string
clientAuthenticationMethod:
type: string
clientName:
type: string
redirectUri:
Expand Down Expand Up @@ -3306,6 +3308,29 @@ components:
type: string
password:
type: string
oauth:
type: object
properties:
tokenUrl:
type: string
clientId:
type: string
clientSecret:
type: string
scopes:
type: array
items:
type: string
tokenCacheEnabled:
type: boolean
default: true
tokenRefreshBuffer:
type: string
format: duration
maxRetries:
type: integer
format: int32
default: 1
schemaRegistrySsl:
type: object
properties:
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/components/Nav/Nav.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import styled from 'styled-components';
import { ClusterColorKey } from 'theme/theme';

export const SearchWrapper = styled.div`
padding: 4px 4px 8px;
`;

export const List = styled.ul.attrs({ role: 'menu' })`
& > & {
padding: 0 0 0 8px;
Expand Down
22 changes: 20 additions & 2 deletions frontend/src/components/Nav/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { type FC } from 'react';
import React, { type FC, useState } from 'react';
import { useClusters } from 'lib/hooks/api/clusters';
import useCurrentClusterName from 'lib/hooks/useCurrentClusterName';
import Search from 'components/common/Search/Search';

import * as S from './Nav.styled';
import MenuItem from './Menu/MenuItem';
Expand All @@ -9,14 +10,31 @@ import ClusterMenu from './ClusterMenu/ClusterMenu';
const Nav: FC = () => {
const clusters = useClusters();
const clusterName = useCurrentClusterName();
const [search, setSearch] = useState('');

const filteredClusters =
clusters.isSuccess && search.trim()
? clusters.data.filter((c) =>
c.name.toLowerCase().includes(search.toLowerCase())
)
: clusters.data;
Comment on lines +15 to +20

@coderabbitai coderabbitai Bot Jun 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Trim the search query before matching cluster names.

Line 16 checks search.trim(), but Line 18 matches with untrimmed search, so queries like " prod " can miss valid matches.

💡 Proposed fix 
-  const filteredClusters =
-    clusters.isSuccess && search.trim()
+  const normalizedSearch = search.trim().toLowerCase();
+  const filteredClusters =
+    clusters.isSuccess && normalizedSearch
       ? clusters.data.filter((c) =>
-          c.name.toLowerCase().includes(search.toLowerCase())
+          c.name.toLowerCase().includes(normalizedSearch)
         )
       : clusters.data;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const filteredClusters =
clusters.isSuccess && search.trim()
? clusters.data.filter((c) =>
c.name.toLowerCase().includes(search.toLowerCase())
)
: clusters.data;
const normalizedSearch = search.trim().toLowerCase();
const filteredClusters =
clusters.isSuccess && normalizedSearch
? clusters.data.filter((c) =>
c.name.toLowerCase().includes(normalizedSearch)
)
: clusters.data;
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/Nav/Nav.tsx` around lines 15 - 20, The cluster
filtering logic in Nav.tsx is checking search.trim() but still matching names
against the untrimmed search value, so whitespace-padded queries can fail.
Update the filteredClusters computation to use a single trimmed search string
for both the truthy check and the includes comparison, keeping the logic in the
Nav component and the search-based filter consistent.


return (
<aside aria-label="Sidebar Menu">
<S.List>
<MenuItem variant="primary" to="/" title="Dashboard" />
</S.List>
{clusters.isSuccess && clusters.data.length > 0 && (
<S.SearchWrapper>
<Search
placeholder="Search clusters..."
value={search}
onChange={setSearch}
/>
</S.SearchWrapper>
)}
{clusters.isSuccess &&
clusters.data.map((cluster) => (
filteredClusters?.map((cluster) => (
<ClusterMenu
key={cluster.name}
name={cluster.name}
Expand Down
Loading