From 9632ffdbdbf119c2e6de41b6d992a2bd9bec3a20 Mon Sep 17 00:00:00 2001
From: Winnie Chiu <113582273+winnie-chiu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 20:25:55 +0800
Subject: [PATCH] Add "Messages behind" for Topics within Consumer group
 profile (#2614)

Co-authored-by: winniechiu <winniechiu@cht.com.tw>
---
 .../src/components/ConsumerGroups/Details/Details.tsx  |  1 +
 .../src/components/ConsumerGroups/Details/ListItem.tsx | 10 ++++++++++
 .../ConsumerGroups/Details/__tests__/Details.spec.tsx  |  2 +-
 3 files changed, 12 insertions(+), 1 deletion(-)

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 d45685d763..a86252a386 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
@@ -128,6 +128,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 7fab2e8b73..313ad23409 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 e16eae8669..e086de8b63 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();
     });