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 = () => {
+
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 = ({ clusterName, name, consumers }) => {
const [isOpen, setIsOpen] = React.useState(false);
+
+ const getTotalMessagesBehind = () => {
+ let count = 0;
+ consumers.forEach((consumer) => {
+ count += consumer?.messagesBehind || 0;
+ });
+ return count;
+ };
+
return (
<>
@@ -29,6 +38,7 @@ const ListItem: React.FC = ({ clusterName, name, consumers }) => {
{name}
+ {getTotalMessagesBehind()} |
{isOpen && }
>
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();
});