WIP: [issues#121] Topic Details: Display consumers

kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/ConsumerGroups.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Topic, TopicDetails, ConsumerGroup } from 'generated-sources';
+import { ClusterName, TopicName } from 'redux/interfaces';
+import ListItem from 'components/ConsumerGroups/List/ListItem';
+
+interface Props extends Topic, TopicDetails {
+  clusterName: ClusterName;
+  topicName: TopicName;
+  consumerGroups: Array<ConsumerGroup>;
+  fetchTopicConsumerGroups(
+    clusterName: ClusterName,
+    topicName: TopicName
+  ): void;
+}
+
+const TopicConsumerGroups: React.FC<Props> = ({
+  consumerGroups,
+  fetchTopicConsumerGroups,
+  clusterName,
+  topicName,
+}) => {
+  React.useEffect(() => {
+    fetchTopicConsumerGroups(clusterName, topicName);
+  }, []);
+
+  return (
+    <div className="box">
+      {consumerGroups.length > 0 ? (
+        <div>
+          <table className="table is-striped is-fullwidth is-hoverable">
+            <thead>
+              <tr>
+                <th>Consumer group ID</th>
+                <th>Num of consumers</th>
+                <th>Num of topics</th>
+              </tr>
+            </thead>
+            <tbody>
+              {consumerGroups.map((consumerGroup) => (
+                <ListItem
+                  key={consumerGroup.consumerGroupId}
+                  consumerGroup={consumerGroup}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        'No active consumer groups'
+      )}
+    </div>
+  );
+};
+
+export default TopicConsumerGroups;

kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/ConsumerGroupsContainer.tsx

@@ -0,0 +1,36 @@
+import { connect } from 'react-redux';
+import { RootState, TopicName, ClusterName } from 'redux/interfaces';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { fetchTopicConsumerGroups } from 'redux/actions';
+import TopicConsumerGroups from 'components/Topics/Topic/Details/ConsumerGroups/ConsumerGroups';
+import { getTopicConsumerGroups } from 'redux/reducers/topics/selectors';
+
+interface RouteProps {
+  clusterName: ClusterName;
+  topicName: TopicName;
+}
+
+type OwnProps = RouteComponentProps<RouteProps>;
+
+const mapStateToProps = (
+  state: RootState,
+  {
+    match: {
+      params: { topicName, clusterName },
+    },
+  }: OwnProps
+) => {
+  return {
+    consumerGroups: { ...getTopicConsumerGroups(state) },
+    topicName,
+    clusterName,
+  };
+};
+
+const mapDispatchToProps = {
+  fetchTopicConsumerGroups,
+};
+
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(TopicConsumerGroups)
+);

kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx

@@ -7,12 +7,14 @@ import {
   clusterTopicPath,
   clusterTopicMessagesPath,
   clusterTopicsPath,
+  clusterTopicConsumerGroupsPath,
   clusterTopicEditPath,
 } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
 
 import OverviewContainer from './Overview/OverviewContainer';
+import TopicConsumerGroupsContainer from './ConsumerGroups/ConsumerGroupsContainer';
 import MessagesContainer from './Messages/MessagesContainer';
 import SettingsContainer from './Settings/SettingsContainer';
 
@@ -64,6 +66,14 @@ const Details: React.FC<Props> = ({
           >
             Messages
           </NavLink>
+          <NavLink
+            exact
+            to={clusterTopicConsumerGroupsPath(clusterName, topicName)}
+            className="navbar-item is-tab"
+            activeClassName="is-active"
+          >
+            Consumers
+          </NavLink>
           <NavLink
             exact
             to={clusterTopicSettingsPath(clusterName, topicName)}
@@ -128,6 +138,11 @@ const Details: React.FC<Props> = ({
           path="/ui/clusters/:clusterName/topics/:topicName"
           component={OverviewContainer}
         />
+        <Route
+          exact
+          path="/ui/clusters/:clusterName/topics/:topicName/consumergroups"
+          component={TopicConsumerGroupsContainer}
+        />
       </Switch>
     </div>
   );

kafka-ui-react-app/src/lib/paths.ts

@@ -50,6 +50,10 @@ export const clusterTopicEditPath = (
   clusterName: ClusterName,
   topicName: TopicName
 ) => `${clusterTopicsPath(clusterName)}/${topicName}/edit`;
+export const clusterTopicConsumerGroupsPath = (
+  clusterName: ClusterName,
+  topicName: TopicName
+) => `${clusterTopicsPath(clusterName)}/${topicName}/consumergroups`;
 
 // Kafka Connect
 export const clusterConnectorsPath = (clusterName: ClusterName) =>

kafka-ui-react-app/src/redux/actions/actions.ts

@@ -180,3 +180,9 @@ export const deleteConnectorAction = createAsyncAction(
   'DELETE_CONNECTOR__SUCCESS',
   'DELETE_CONNECTOR__FAILURE'
 )<undefined, ConnectState, { alert?: FailurePayload }>();
+
+export const fetchTopicConsumerGroupsAction = createAsyncAction(
+  'GET_TOPIC_CONSUMER_GROUPS__REQUEST',
+  'GET_TOPIC_CONSUMER_GROUPS__SUCCESS',
+  'GET_TOPIC_CONSUMER_GROUPS__FAILURE'
+)<undefined, TopicsState, undefined>();

kafka-ui-react-app/src/redux/actions/thunks/topics.ts

@@ -7,6 +7,7 @@ import {
   TopicCreation,
   TopicUpdate,
   TopicConfig,
+  ConsumerGroupsApi,
 } from 'generated-sources';
 import {
   PromiseThunkResult,
@@ -25,6 +26,9 @@ import { getResponse } from 'lib/errorHandling';
 const apiClientConf = new Configuration(BASE_PARAMS);
 export const topicsApiClient = new TopicsApi(apiClientConf);
 export const messagesApiClient = new MessagesApi(apiClientConf);
+export const topicConsumerGroupsApiClient = new ConsumerGroupsApi(
+  apiClientConf
+);
 
 export interface FetchTopicsListParams {
   clusterName: ClusterName;
@@ -310,3 +314,34 @@ export const deleteTopic = (
     dispatch(actions.deleteTopicAction.failure());
   }
 };
+
+export const fetchTopicConsumerGroups = (
+  clusterName: ClusterName,
+  topicName: TopicName
+): PromiseThunkResult => async (dispatch, getState) => {
+  dispatch(actions.fetchTopicConsumerGroupsAction.request());
+  try {
+    const topicDetails = await topicConsumerGroupsApiClient.getTopicConsumerGroups(
+      {
+        clusterName,
+        topicName,
+      }
+    );
+    const state = getState().topics;
+    const newState = {
+      ...state,
+      byName: {
+        ...state.byName,
+        [topicName]: {
+          ...state.byName[topicName],
+          consumerGroups: {
+            ...topicDetails,
+          },
+        },
+      },
+    };
+    dispatch(actions.fetchTopicConsumerGroupsAction.success(newState));
+  } catch (e) {
+    dispatch(actions.fetchTopicConsumerGroupsAction.failure());
+  }
+};

kafka-ui-react-app/src/redux/interfaces/topic.ts

@@ -5,6 +5,7 @@ import {
   TopicConfig,
   TopicCreation,
   GetTopicMessagesRequest,
+  ConsumerGroup,
 } from 'generated-sources';
 
 export type TopicName = Topic['name'];
@@ -45,6 +46,7 @@ export interface TopicsState {
   allNames: TopicName[];
   totalPages: number;
   messages: TopicMessage[];
+  consumerGroups: ConsumerGroup[];
 }
 
 export type TopicFormFormattedParams = TopicCreation['configs'];

kafka-ui-react-app/src/redux/reducers/topics/__test__/reducer.spec.ts

@@ -13,6 +13,7 @@ const state = {
   allNames: [topic.name],
   messages: [],
   totalPages: 1,
+  consumerGroups: [],
 };
 
 describe('topics reducer', () => {
@@ -22,6 +23,7 @@ describe('topics reducer', () => {
       allNames: [],
       messages: [],
       totalPages: 1,
+      consumerGroups: [],
     });
   });
 

kafka-ui-react-app/src/redux/reducers/topics/reducer.ts

@@ -8,6 +8,7 @@ export const initialState: TopicsState = {
   allNames: [],
   totalPages: 1,
   messages: [],
+  consumerGroups: [],
 };
 
 const transformTopicMessages = (
@@ -41,6 +42,7 @@ const reducer = (state = initialState, action: Action): TopicsState => {
     case getType(actions.fetchTopicDetailsAction.success):
     case getType(actions.fetchTopicConfigAction.success):
     case getType(actions.createTopicAction.success):
+    case getType(actions.fetchTopicConsumerGroupsAction.success):
     case getType(actions.updateTopicAction.success):
       return action.payload;
     case getType(actions.fetchTopicMessagesAction.success):

kafka-ui-react-app/src/redux/reducers/topics/selectors.ts

@@ -16,6 +16,8 @@ export const getTopicMessages = (state: RootState) =>
   topicsState(state).messages;
 export const getTopicListTotalPages = (state: RootState) =>
   topicsState(state).totalPages;
+export const getTopicConsumerGroups = (state: RootState) =>
+  topicsState(state).consumerGroups;
 
 const getTopicListFetchingStatus = createFetchingSelector('GET_TOPICS');
 const getTopicDetailsFetchingStatus = createFetchingSelector(