From 2983e6128a76ebbb8b5b417b00e79a6340b4b937 Mon Sep 17 00:00:00 2001
From: tchiotludo <tchiot.ludo@gmail.com>
Date: Thu, 16 Sep 2021 21:11:02 +0200
Subject: [PATCH] fix(ui): fix live tail of topic

close #600
---
 client/src/components/Table/Table.jsx |  9 +++++--
 client/src/containers/Tail/Tail.jsx   | 36 +++++++++++++++++++++------
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Table/Table.jsx b/client/src/components/Table/Table.jsx
index 35dc93f44..3de78864f 100644
--- a/client/src/components/Table/Table.jsx
+++ b/client/src/components/Table/Table.jsx
@@ -423,11 +423,15 @@ class Table extends Component {
   }
 
   render() {
-    const { noStripes, loading } = this.props;
+    const { noStripes, loading, rowId } = this.props;
     let allItemRows = [];
     let data = this.props.data || [];
 
     data.forEach((item, index) => {
+      if (rowId !== undefined) {
+        index = rowId(item);
+      }
+
       if (!item.id) {
         item.id = index;
       }
@@ -481,7 +485,8 @@ Table.propTypes = {
   handleExtraExpand: PropTypes.func,
   handleExtraCollapse: PropTypes.func,
   loading: PropTypes.bool,
-  history: PropTypes.object
+  history: PropTypes.object,
+  rowId: PropTypes.func,
 };
 
 export default Table;
diff --git a/client/src/containers/Tail/Tail.jsx b/client/src/containers/Tail/Tail.jsx
index cc3871774..ec39e26e6 100644
--- a/client/src/containers/Tail/Tail.jsx
+++ b/client/src/containers/Tail/Tail.jsx
@@ -9,7 +9,7 @@ import AceEditor from 'react-ace';
 import 'ace-builds/webpack-resolver';
 import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-merbivore_soft';
-import Root from "../../components/Root";
+import Root from '../../components/Root';
 
 const STATUS = {
   STOPPED: 'STOPPED',
@@ -77,13 +77,16 @@ class Tail extends Root {
       let res = JSON.parse(e.data);
       let { data } = self.state;
 
+
       if (res.records) {
-        data.push(res.records[0]);
+        data = data.concat(res.records);
         if (data.length > maxRecords) {
           data = data.slice(data.length - maxRecords);
         }
       }
-      self.setState({ data });
+
+      self.setState({ data: data });
+      self.scrollToBottom();
     });
 
     this.eventSource.onerror = e => {
@@ -99,6 +102,15 @@ class Tail extends Root {
     this.startEventSource();
   };
 
+  scrollToBottom = () => {
+    const followScroll = (document.body.scrollTop || document.documentElement.scrollTop) + window.innerHeight >=
+        (document.documentElement.scrollHeight - document.documentElement.clientHeight)
+
+    if (followScroll) {
+      this.messagesEnd.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+
   handleChange = e => {
     this.setState({ [e.target.name]: [e.target.value] });
   };
@@ -184,11 +196,12 @@ class Tail extends Root {
       data,
       showFilters
     } = this.state;
+
     return (
       <div>
         <Header title="Live Tail" history={this.props.history} />
         <nav
-          className="navbar navbar-expand-lg navbar-light 
+          className="navbar navbar-expand-lg navbar-light
         bg-light mr-auto khq-data-filter khq-sticky khq-nav"
         >
           <button
@@ -363,12 +376,18 @@ class Tail extends Root {
         {selectedStatus !== STATUS.STOPPED && (
           <Table
             history={this.props.history}
+            rowId={data => {
+              return data.topic.name + '-' + data.partition + '-' + data.offset;
+            }}
             columns={[
               {
                 id: 'topic',
                 accessor: 'topic',
                 colName: 'Topic',
-                type: 'text'
+                type: 'text',
+                cell: obj => {
+                  return obj.topic.name;
+                }
               },
               {
                 id: 'key',
@@ -385,8 +404,7 @@ class Tail extends Root {
                 colName: 'Date',
                 type: 'text',
                 cell: obj => {
-                  let date = obj.timestamp.split('T')[0];
-                  return <div className="tail-headers">{date}</div>;
+                  return <div className="tail-headers">{obj.timestamp}</div>;
                 }
               },
               {
@@ -448,7 +466,7 @@ class Tail extends Root {
             noStripes
             data={data}
             updateData={data => {
-              this.setState({ data });
+              this.setState({ data: data });
             }}
             noContent={<tr />}
             onExpand={obj => {
@@ -489,6 +507,8 @@ class Tail extends Root {
             }}
           />
         )}
+        <div ref={(el) => { this.messagesEnd = el; }}>
+        </div>
       </div>
     );
   }