fix(ui): topic - consumer group lag is not displayed (#378)

close #368
tchiotludo · Aug 28, 2020 · 20eb5fd · 20eb5fd
1 parent 07a3fb9
commit 20eb5fd
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 10 deletions.
diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx
@@ -109,7 +109,7 @@ class ConsumerGroupList extends Component {
     const noPropagation = e => e.stopPropagation();
     return Object.keys(groupedTopicOffset).map(topicId => {
       const topicOffsets = groupedTopicOffset[topicId];
-      const offsetLag = calculateTopicOffsetLag(topicOffsets);
+      const offsetLag = calculateTopicOffsetLag(topicOffsets, topicId);
 
       return (
         <a

diff --git a/client/src/containers/Topic/Topic/TopicGroups/TopicGroups.jsx b/client/src/containers/Topic/Topic/TopicGroups/TopicGroups.jsx
@@ -50,7 +50,7 @@ class TopicGroups extends Component {
     if (!topics) return {};
     return topics.reduce(function(a, e) {
       let key = e.topic;
-      a[key] ? (a[key] = a[key] + e.offsetLag) : (a[key] = e.offsetLag);
+      a[key] ? (a[key] = a[key] + e.offsetLag) : (a[key] = e.offsetLag || 0);
       return a;
     }, {});
   }

diff --git a/client/src/containers/Topic/TopicList/TopicList.jsx b/client/src/containers/Topic/TopicList/TopicList.jsx
@@ -141,11 +141,10 @@ class TopicList extends Component {
     if (consumerGroups) {
       return consumerGroups.map(consumerGroup => {
         let className = 'btn btn-sm mb-1 mr-1 btn-';
-        let offsetLag = calculateTopicOffsetLag(consumerGroup.offsets);
+        let offsetLag = calculateTopicOffsetLag(consumerGroup.offsets, topicId);
 
-        if (consumerGroup.activeTopics) {
-          const activeTopic = consumerGroup.activeTopics.find(
-            activeTopic => activeTopic === topicId
+          const activeTopic = consumerGroup.activeTopics && consumerGroup.activeTopics.find(
+              activeTopic => activeTopic === topicId
           );
           activeTopic ? (className += 'success') : (className += 'warning');
 
@@ -161,8 +160,6 @@ class TopicList extends Component {
               {consumerGroup.id} <div className="badge badge-secondary"> Lag: {offsetLag}</div>
             </a>
           );
-        }
-        return null;
       });
     }
 

diff --git a/client/src/utils/converters.js b/client/src/utils/converters.js
@@ -2,12 +2,12 @@ import _ from 'lodash';
 import moment from 'moment';
 import { ROLE_TYPE } from './constants';
 
-export function calculateTopicOffsetLag(topicOffsets) {
+export function calculateTopicOffsetLag(topicOffsets, topicId) {
   let offsetLag = 0;
   let offset = 0;
   let lastOffset = 0;
 
-  topicOffsets.forEach(topicOffset => {
+  topicOffsets.filter(topicOffset => topicOffset.topic === topicId).forEach(topicOffset => {
     offset = topicOffset.offset || 0;
     lastOffset = topicOffset.lastOffset || 0;
     offsetLag += lastOffset - offset;