Repository: provectus/kafka-ui
Issue: Add "Messages behind" for Topics within Consumer group profile
Labels: type/enhancement
good first issue
scope/frontend
status/accepted
hacktoberfest



**Describe the bug**
Add "Messages behind" for Topics within Consumer group profile

**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**
<!-- We'd like you to provide an example setup (via docker-compose, helm, etc.) 
to reproduce the problem, especially with a complex setups. -->
Steps to reproduce the behavior:

1. Navigate to Consumer group profile
2. Check the linked Topics list

**Expected behavior**
Should be displayed "Messages behind" for each Topic

**Screenshots**
<img width="1437" alt="messages behind" src="https://user-images.githubusercontent.com/104780608/189026697-d0fac45f-90eb-4429-9fec-30882ba55979.png">






Issue comments:
would be nice if that's possible to implement
I'd like to work on this. 

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
index f1ce947fdb7..0a5c76b9de4 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
@@ -113,6 +113,7 @@ const Details: React.FC = () => {
           <tr>
             <TableHeaderCell> </TableHeaderCell>
             <TableHeaderCell title="Topic" />
+            <TableHeaderCell title="Messages behind" />
           </tr>
         </thead>
         <tbody>
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.tsx
index 7fab2e8b736..313ad234098 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.tsx
@@ -18,6 +18,15 @@ interface Props {
 
 const ListItem: React.FC<Props> = ({ clusterName, name, consumers }) => {
   const [isOpen, setIsOpen] = React.useState(false);
+
+  const getTotalMessagesBehind = () => {
+    let count = 0;
+    consumers.forEach((consumer) => {
+      count += consumer?.messagesBehind || 0;
+    });
+    return count;
+  };
+
   return (
     <>
       <tr>
@@ -29,6 +38,7 @@ const ListItem: React.FC<Props> = ({ clusterName, name, consumers }) => {
         <TableKeyLink>
           <Link to={clusterTopicPath(clusterName, name)}>{name}</Link>
         </TableKeyLink>
+        <td>{getTotalMessagesBehind()}</td>
       </tr>
       {isOpen && <TopicContents consumers={consumers} />}
     </>
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
index 7a99ee07138..c83389c5af0 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
@@ -65,7 +65,7 @@ describe('Details component', () => {
       expect(screen.getByText(groupId)).toBeInTheDocument();
 
       expect(screen.getByRole('table')).toBeInTheDocument();
-      expect(screen.getAllByRole('columnheader').length).toEqual(2);
+      expect(screen.getAllByRole('columnheader').length).toEqual(3);
 
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });


Test patch: