performance improvements

package.json

@@ -54,6 +54,7 @@
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.1",
     "react-router-dom": "^5.2.0",
+    "server-timing": "^3.3.1",
     "uuid": "^8.1.0"
   }
 }

src/client/kafka/messages/fetcher.tsx

@@ -157,7 +157,11 @@ export class Fetcher extends React.Component<Props, State> {
         await this.updateSearch()
         if (cancelToken.Aborted) return
         this.props.url.Subscribe(this.onUrlChanged)
-        await this.fetchMessages(10000, cancelToken)
+        let timeout = 10000
+        if (this.state.limit && this.state.limit > 100) {
+            timeout = 20000
+        }
+        await this.fetchMessages(timeout, cancelToken)
     }
 
     onFetchMessagesClicked = async () => {
@@ -238,7 +242,11 @@ export class Fetcher extends React.Component<Props, State> {
                 if (offsets === undefined) {
                     return
                 }
-                await this.setStateAsync({offset: parseInt(offsets.high) - this.state.limit})
+                let offset = parseInt(offsets.high) - this.state.limit
+                if (offset < parseInt(offsets.low)) {
+                    offset = parseInt(offsets.low)
+                }
+                await this.setStateAsync({offset})
                 out = await this.fetchMessagesForPartition(topic, timeout, partition, out, cancelToken)
             }
         }
@@ -321,8 +329,8 @@ export class Fetcher extends React.Component<Props, State> {
         }
         const max = cursor + this.state.limit
         let limit = this.state.limit
-        if (limit > 1000) {
-            limit = 1000
+        if (limit > 10000) {
+            limit = 10000
         }
         if (cursor >= max) {
             this.props.onDataFetched(out)

src/client/kafka/messages/multi_topics_input.tsx

@@ -115,7 +115,7 @@ export class MultiTopicsInput extends React.Component<Props, State> {
             toTime={this.props.toTime}
             searchBy={this.props.searchBy}
             onDataFetched={this.props.onDataFetched}
-            onDataFetchStarted={() => { this.setState({loadingMessages: true}); this.props.onDataFetchStarted} }
+            onDataFetchStarted={() => { this.setState({loadingMessages: true}); this.props.onDataFetchStarted(AllPartitions)} }
             onDataFetchCompleted={() => this.setState({loadingMessages: false})}
             loadingMessages={this.state.loadingMessages}
             error={this.state.error ?? ""}

src/client/kafka/messages/single_topic_input.tsx

@@ -134,7 +134,7 @@ export class SingleTopicInput extends React.Component<Props, State> {
                 toTime={this.props.toTime}
                 searchBy={this.props.searchBy}
                 onDataFetched={this.props.onDataFetched}
-                onDataFetchStarted={() => { this.setState({loadingMessages: true}); this.props.onDataFetchStarted} }
+                onDataFetchStarted={() => { this.setState({loadingMessages: true}); this.props.onDataFetchStarted(this.state.partition)} }
                 onDataFetchCompleted={() => this.setState({loadingMessages: false})}
                 loadingMessages={this.state.loadingMessages}
                 error={this.state.error ?? ""}