feat(ui): format offset lag numbers with toLocaleString (#1050)

Closes #911
tchiotludo · Apr 20, 2022 · 9e5e775 · 9e5e775
1 parent b665127
commit 9e5e775
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 7 deletions.
diff --git a/.../containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupTopics/ConsumerGroupTopics.jsx b/.../containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupTopics/ConsumerGroupTopics.jsx
@@ -39,7 +39,7 @@ class ConsumerGroupTopics extends Root {
   }
 
   handleOptional(optional) {
-    if (optional !== undefined && optional !== '') {
+    if (optional !== undefined && optional !== '' && optional !== 'NaN') {
       return <label>{optional}</label>;
     } else {
       return <label>-</label>;
@@ -115,7 +115,7 @@ class ConsumerGroupTopics extends Root {
               colName: 'Lag',
               type: 'text',
               cell: obj => {
-                return this.handleOptional(obj.lag);
+                return this.handleOptional(Number(obj.lag).toLocaleString());
               }
             }
           ]}

diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx
@@ -127,7 +127,7 @@ class ConsumerGroupList extends Root {
         >
           {topicId + ' '}
 
-          <div className="badge badge-secondary">Lag: {offsetLag}</div>
+          <div className="badge badge-secondary">Lag: {Number(offsetLag).toLocaleString()}</div>
         </Link>
       );
     });

diff --git a/client/src/containers/Node/NodeDetail/NodeLogs/NodeLogs.jsx b/client/src/containers/Node/NodeDetail/NodeLogs/NodeLogs.jsx
@@ -36,7 +36,7 @@ class NodeLogs extends Root {
         topic: log.topic,
         partition: log.partition,
         size: showBytes(log.size),
-        offsetLag: log.offsetLag
+        offsetLag: Number(log.offsetLag).toLocaleString()
       };
     });
     this.setState({ data: tableNodes, loading: false });

diff --git a/client/src/containers/Topic/Topic/TopicGroups/TopicGroups.jsx b/client/src/containers/Topic/Topic/TopicGroups/TopicGroups.jsx
@@ -76,7 +76,7 @@ class TopicGroups extends Root {
           onClick={noPropagation}
         >
           {topic}
-          <div className="badge badge-secondary">Lag: {topics[topic]}</div>
+          <div className="badge badge-secondary">Lag: {Number(topics[topic]).toLocaleString()}</div>
         </Link>
       );
     });

diff --git a/client/src/containers/Topic/Topic/TopicLogs/TopicLogs.jsx b/client/src/containers/Topic/Topic/TopicLogs/TopicLogs.jsx
@@ -30,7 +30,7 @@ class TopicLogs extends Root {
         topic: log.topic,
         partition: log.partition,
         size: log.size,
-        offsetLag: log.offsetLag
+        offsetLag: Number(log.offsetLag).toLocaleString()
       };
     });
     this.setState({ data: tableLogs, loading: false });

diff --git a/client/src/containers/Topic/TopicList/TopicList.jsx b/client/src/containers/Topic/TopicList/TopicList.jsx
@@ -249,7 +249,7 @@ class TopicList extends Root {
               className={className}
               onClick={noPropagation}
             >
-              {consumerGroup.id} <div className="badge badge-secondary"> Lag: {offsetLag}</div>
+              {consumerGroup.id} <div className="badge badge-secondary"> Lag: {Number(offsetLag).toLocaleString()}</div>
             </Link>
           );
       });