Topics' filtration

kafka-ui-react-app/src/components/Topics/List/List.tsx

@@ -12,6 +12,9 @@ import { FetchTopicsListParams } from 'redux/actions';
 import ClusterContext from 'components/contexts/ClusterContext';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import Pagination from 'components/common/Pagination/Pagination';
+import { TopicColumnsToSort } from 'generated-sources';
+import SortableColumnHeader from 'components/common/table/SortableCulumnHeader/SortableColumnHeader';
+import Search from 'components/common/Search/Search';
 
 import ListItem from './ListItem';
 
@@ -27,6 +30,10 @@ interface Props {
     clusterName: ClusterName,
     partitions?: number[]
   ): void;
+  search: string;
+  orderBy: TopicColumnsToSort | null;
+  setTopicsSearch(search: string): void;
+  setTopicsOrderBy(orderBy: TopicColumnsToSort | null): void;
 }
 
 const List: React.FC<Props> = ({
@@ -37,29 +44,41 @@ const List: React.FC<Props> = ({
   fetchTopicsList,
   deleteTopic,
   clearTopicMessages,
+  search,
+  orderBy,
+  setTopicsSearch,
+  setTopicsOrderBy,
 }) => {
   const { isReadOnly } = React.useContext(ClusterContext);
   const { clusterName } = useParams<{ clusterName: ClusterName }>();
   const { page, perPage } = usePagination();
 
   React.useEffect(() => {
-    fetchTopicsList({ clusterName, page, perPage });
-  }, [fetchTopicsList, clusterName, page, perPage]);
+    fetchTopicsList({
+      clusterName,
+      page,
+      perPage,
+      orderBy: orderBy || undefined,
+      search,
+    });
+  }, [fetchTopicsList, clusterName, page, perPage, orderBy, search]);
 
   const [showInternal, setShowInternal] = React.useState<boolean>(true);
 
   const handleSwitch = React.useCallback(() => {
     setShowInternal(!showInternal);
   }, [showInternal]);
 
+  const handleSearch = (value: string) => setTopicsSearch(value);
+
   const items = showInternal ? topics : externalTopics;
 
   return (
     <div className="section">
       <Breadcrumb>{showInternal ? `All Topics` : `External Topics`}</Breadcrumb>
       <div className="box">
-        <div className="level">
-          <div className="level-item level-left">
+        <div className="columns">
+          <div className="column is-one-quarter is-align-items-center is-flex">
             <div className="field">
               <input
                 id="switchRoundedDefault"
@@ -72,7 +91,13 @@ const List: React.FC<Props> = ({
               <label htmlFor="switchRoundedDefault">Show Internal Topics</label>
             </div>
           </div>
-          <div className="level-item level-right">
+          <div className="column">
+            <Search
+              handleSearch={handleSearch}
+              placeholder="Search by Topic Name"
+            />
+          </div>
+          <div className="column is-2 is-justify-content-flex-end is-flex">
             {!isReadOnly && (
               <Link
                 className="button is-primary"
@@ -91,9 +116,24 @@ const List: React.FC<Props> = ({
           <table className="table is-fullwidth">
             <thead>
               <tr>
-                <th>Topic Name</th>
-                <th>Total Partitions</th>
-                <th>Out of sync replicas</th>
+                <SortableColumnHeader
+                  value={TopicColumnsToSort.NAME}
+                  title="Topic Name"
+                  orderBy={orderBy}
+                  setOrderBy={setTopicsOrderBy}
+                />
+                <SortableColumnHeader
+                  value={TopicColumnsToSort.TOTAL_PARTITIONS}
+                  title="Total Partitions"
+                  orderBy={orderBy}
+                  setOrderBy={setTopicsOrderBy}
+                />
+                <SortableColumnHeader
+                  value={TopicColumnsToSort.OUT_OF_SYNC_REPLICAS}
+                  title="Out of sync replicas"
+                  orderBy={orderBy}
+                  setOrderBy={setTopicsOrderBy}
+                />
                 <th>Type</th>
                 <th> </th>
               </tr>

kafka-ui-react-app/src/components/Topics/List/ListContainer.ts

@@ -4,12 +4,16 @@ import {
   fetchTopicsList,
   deleteTopic,
   clearTopicMessages,
+  setTopicsSearchAction,
+  setTopicsOrderByAction,
 } from 'redux/actions';
 import {
   getTopicList,
   getExternalTopicList,
   getAreTopicsFetching,
   getTopicListTotalPages,
+  getTopicsSearch,
+  getTopicsOrderBy,
 } from 'redux/reducers/topics/selectors';
 
 import List from './List';
@@ -19,12 +23,16 @@ const mapStateToProps = (state: RootState) => ({
   topics: getTopicList(state),
   externalTopics: getExternalTopicList(state),
   totalPages: getTopicListTotalPages(state),
+  search: getTopicsSearch(state),
+  orderBy: getTopicsOrderBy(state),
 });
 
 const mapDispatchToProps = {
   fetchTopicsList,
   deleteTopic,
   clearTopicMessages,
+  setTopicsSearch: setTopicsSearchAction,
+  setTopicsOrderBy: setTopicsOrderByAction,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(List);

kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx

@@ -24,6 +24,10 @@ describe('List', () => {
               fetchTopicsList={jest.fn()}
               deleteTopic={jest.fn()}
               clearTopicMessages={jest.fn()}
+              search=""
+              orderBy={null}
+              setTopicsSearch={jest.fn()}
+              setTopicsOrderBy={jest.fn()}
             />
           </ClusterContext.Provider>
         </StaticRouter>
@@ -33,29 +37,48 @@ describe('List', () => {
   });
 
   describe('when it does not have readonly flag', () => {
+    const mockFetch = jest.fn();
+    jest.useFakeTimers();
+    const component = mount(
+      <StaticRouter>
+        <ClusterContext.Provider
+          value={{
+            isReadOnly: false,
+            hasKafkaConnectConfigured: true,
+            hasSchemaRegistryConfigured: true,
+          }}
+        >
+          <List
+            areTopicsFetching={false}
+            topics={[]}
+            externalTopics={[]}
+            totalPages={1}
+            fetchTopicsList={mockFetch}
+            deleteTopic={jest.fn()}
+            clearTopicMessages={jest.fn()}
+            search=""
+            orderBy={null}
+            setTopicsSearch={jest.fn()}
+            setTopicsOrderBy={jest.fn()}
+          />
+        </ClusterContext.Provider>
+      </StaticRouter>
+    );
     it('renders the Add a Topic button', () => {
-      const component = mount(
-        <StaticRouter>
-          <ClusterContext.Provider
-            value={{
-              isReadOnly: false,
-              hasKafkaConnectConfigured: true,
-              hasSchemaRegistryConfigured: true,
-            }}
-          >
-            <List
-              areTopicsFetching={false}
-              topics={[]}
-              externalTopics={[]}
-              totalPages={1}
-              fetchTopicsList={jest.fn()}
-              deleteTopic={jest.fn()}
-              clearTopicMessages={jest.fn()}
-            />
-          </ClusterContext.Provider>
-        </StaticRouter>
-      );
       expect(component.exists('Link')).toBeTruthy();
     });
+    it('matches the snapshot', () => {
+      expect(component).toMatchSnapshot();
+    });
+
+    it('calls fetchTopicsList on input', () => {
+      const input = component.find('input').at(1);
+      input.simulate('change', { target: { value: 't' } });
+      expect(setTimeout).toHaveBeenCalledTimes(1);
+      expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 300);
+      setTimeout(() => {
+        expect(mockFetch).toHaveBeenCalledTimes(1);
+      }, 301);
+    });
   });
 });