Add "Messages behind" for Topics within Consumer group profile (#2614)

Co-authored-by: winniechiu <winniechiu@cht.com.tw>

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>

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} />}
     </>

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();
     });