feat(ui): faster topic-data search & sorting (#1209)

Co-authored-by: Max Bebök <[email protected]>
tchiotludo · Nov 6, 2022 · 2028cc9 · 2028cc9
1 parent 8ddb9cb
commit 2028cc9
Showing 1 changed file with 28 additions and 7 deletions.
diff --git a/client/src/containers/Topic/Topic/TopicData/TopicData.jsx b/client/src/containers/Topic/Topic/TopicData/TopicData.jsx
@@ -143,8 +143,11 @@ class TopicData extends Root {
   _startEventSource = (changePage) => {
     let { selectedCluster, selectedTopic, nextPage } = this.state;
 
+    let lastPercentVal = 0.0;
+    const percentUpdateDelta = 0.5;
+
     let self = this;
-    this.setState({ sortBy: 'Oldest', messages: [], pageNumber: 1, percent: 0, isSearching: true, recordCount: 0 }, () => {
+    this.setState({ messages: [], pageNumber: 1, percent: 0, isSearching: true, recordCount: 0 }, () => {
       const filters = this._buildFilters();
       if (changePage) {
         this._setUrlHistory(filters + '&after=' + nextPage );
@@ -157,9 +160,19 @@ class TopicData extends Root {
         const res = JSON.parse(e.data);
         const records = res.records || [];
         const nextPage = (res.after) ? res.after : self.state.nextPage;
-        self.setState({ nextPage, recordCount: self.state.recordCount + records.length , percent: res.percent.toFixed(2) }, () => {
-          self._handleMessages(records, true);
-        });
+
+        const percentDiff = res.percent - lastPercentVal;
+
+        // to avoid UI slowdowns, only update the percentage in fixed increments
+        if(percentDiff >= percentUpdateDelta) {
+          lastPercentVal = res.percent;
+          self.setState({ nextPage, recordCount: self.state.recordCount + records.length , percent: res.percent.toFixed(2) });
+        }
+
+        if(records.length) {
+          const tableMessages = self._handleMessages(records, true, self.state.sortBy === "Oldest");
+          self.setState({messages: tableMessages});
+        }
       });
 
       this.eventSource.addEventListener('searchEnd', function(e) {
@@ -428,8 +441,8 @@ class TopicData extends Root {
         });
   };
 
-  _handleMessages = (messages, append = false) => {
-    let tableMessages = append ? this.state.messages : [];
+  _handleMessages = (messages, append = false, insertAtEnd = true) => {
+    let tableMessages = append ? [...this.state.messages] : [];
     messages.forEach(message => {
       let messageToPush = {
         key: message.key || '',
@@ -443,7 +456,12 @@ class TopicData extends Root {
         schema: { key: message.keySchemaId, value: message.valueSchemaId },
         exceptions: message.exceptions || []
       };
-      tableMessages.push(messageToPush);
+
+      if (insertAtEnd) {
+        tableMessages.push(messageToPush);
+      } else {
+        tableMessages.unshift(messageToPush);
+      }
     });
     return tableMessages;
   };
@@ -1040,6 +1058,9 @@ class TopicData extends Root {
                 extraRow
                 noStripes
                 data={messages}
+                rowId={data => {
+                  return data.partition + '-' + data.offset;
+                }}
                 updateData={data => {
                   this.setState({ messages: data });
                 }}