diff --git a/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.styled.ts b/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.styled.ts new file mode 100644 index 00000000000..77768dc9980 --- /dev/null +++ b/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.styled.ts @@ -0,0 +1,6 @@ +import styled from 'styled-components'; + +export const SearchWrapper = styled.div` + margin: 10px; + width: 21%; +`; diff --git a/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.tsx b/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.tsx index 69948fd66d4..173c28c76e3 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.tsx @@ -5,14 +5,27 @@ import useAppParams from 'lib/hooks/useAppParams'; import { useTopicConsumerGroups } from 'lib/hooks/api/topics'; import { ColumnDef } from '@tanstack/react-table'; import Table, { LinkCell, TagCell } from 'components/common/NewTable'; +import Search from 'components/common/Search/Search'; + +import * as S from './TopicConsumerGroups.styled'; const TopicConsumerGroups: React.FC = () => { + const [keyword, setKeyword] = React.useState(''); const { clusterName, topicName } = useAppParams(); - const { data: consumerGroups = [] } = useTopicConsumerGroups({ + const { data = [] } = useTopicConsumerGroups({ clusterName, topicName, }); + + const consumerGroups = React.useMemo( + () => + data.filter( + (item) => item.groupId.toLocaleLowerCase().indexOf(keyword) > -1 + ), + [data, keyword] + ); + const columns = React.useMemo[]>( () => [ { @@ -61,12 +74,21 @@ const TopicConsumerGroups: React.FC = () => { [] ); return ( - + <> + + + +
+ ); };