Merge branch 'dev' of github.com:cenk1cenk2/akhq into dev

tchiotludo · May 27, 2024 · f6a076f · f6a076f
2 parents 6ecb8ad + aaebc5d
commit f6a076f
Show file tree

Hide file tree

Showing 28 changed files with 239 additions and 185 deletions.
diff --git a/.gitignore b/.gitignore
@@ -52,10 +52,12 @@ docker-compose.override.yml
 helm/akhq/README.md
 helm/akhq/LICENSE
 
-
 ## Docs
 docs/node_modules
 docs/.vuepress/.temp
 docs/.vuepress/.cache
 docs/.vuepress/public/contributors.html
 docs/.vuepress/dist
+
+/.factorypath
+/client/.settings
diff --git a/README.md b/README.md
@@ -18,53 +18,13 @@
 ## Documentation
 * The official AKHQ documentation can be found under: [akhq.io](https://akhq.io/docs)
 
-
-## Sponsors
-<table>
-<tr>
-<td>
-  <img width="1000" height="0">
-    <a href="https://upstash.com/?utm_source=AKHQ" >
-  <img src="./docs/.vuepress/public/assets/images/logo-infosupport.svg" alt="Upstash" width="260" align="right">
-  </a>
-
-<h3>InfoSupport</h3>
-
-  <p>Info Support is the specialist in developing high quality software<br />
-    solutions and leading in the field of artificial intelligence (AI), <br />
-    cloud architecture, managed services and IT training.
-</p>
-
-[Discover](https://infosupport.com/?utm_source=AKHQ)
-</td>
-</tr>
-<tr>
-<td>
-  <img width="1000" height="0">
-    <a href="https://upstash.com/?utm_source=AKHQ" >
-  <img src="https://raw.githubusercontent.com/upstash/sponsorship/master/kafka.png" alt="Upstash" width="260" align="right">
-  </a>
-
-<h3>Upstash: Serverless Kafka</h3>
-
-  <ul>
-    <li>True Serverless Kafka with per-request-pricing</li>
-    <li>Managed Apache Kafka, works with all Kafka clients</li>
-    <li>Built-in REST API designed for serverless and edge functions</li>
-  </ul>
-
-[Start for free in 30 seconds!](https://upstash.com/?utm_source=AKHQ)
-</td>
-</tr>
-</table>
-
 ## From AKHQ project creator
 <table>
 <tr>
 <td>
   <img width="1000" height="0">
     <a href="https://github.com/kestra-io/kestra?utm_source=AKHQ" >
-  <img src="https://kestra.io/video.gif" alt="Upstash" width="320" align="right">
+  <img src="https://kestra.io/video.gif" alt="Kestra" width="320" align="right">
   </a>
 
 <h3>Kestra: Open source data orchestration and scheduling platform</h3>
@@ -91,6 +51,7 @@ Kestra is an infinitely scalable orchestration and scheduling platform, creating
 * [BMW Group](https://www.bmwgroup.com)
 * [Boulanger](https://www.boulanger.com/)
 * [BPCE-IT](https://www.bpce-it.fr/)
+* [CEVA Logistics](https://www.cevalogistics.com)
 * [Decathlon](https://www.decathlon.fr/)
 * [Depop](https://www.depop.com)
 * [Doximity](https://www.doximity.com)

diff --git a/build.gradle b/build.gradle
@@ -1,12 +1,12 @@
 plugins {
     // micronaut
     id "com.github.johnrengelman.shadow" version "8.1.1"
-    id "io.micronaut.application" version "4.3.6"
+    id "io.micronaut.application" version "4.3.8"
 
     // akhq
-    id "com.gorylenko.gradle-git-properties" version "2.4.1"
+    id "com.gorylenko.gradle-git-properties" version "2.4.2"
     id 'com.adarshr.test-logger' version '4.0.0'
-    id 'org.gradle.test-retry' version '1.5.8'
+    id 'org.gradle.test-retry' version '1.5.9'
     id 'com.github.psxpaul.execfork' version '0.2.2'
     id "com.github.ben-manes.versions" version "0.51.0"
     id "com.github.davidmc24.gradle.plugin.avro" version "1.9.1"
@@ -21,7 +21,7 @@ application {
     mainClass.set("org.akhq.App")
 }
 group "org.akhq"
-version "0.24.0"
+version "0.25.0"
 
 repositories {
     mavenLocal()
@@ -222,7 +222,7 @@ dependencies {
     testImplementation group: 'org.apache.kafka', name: 'kafka-streams', version: kafkaVersion
     testImplementation group: "io.confluent", name: "kafka-streams-avro-serde", version: confluentVersion
     testImplementation "io.confluent:kafka-connect-avro-converter:" + confluentVersion
-    testImplementation group: 'commons-codec', name: 'commons-codec', version: '1.16.1'
+    testImplementation group: 'commons-codec', name: 'commons-codec', version: '1.17.0'
     testImplementation 'org.hamcrest:hamcrest:2.2'
     testImplementation 'org.hamcrest:hamcrest-library:2.2'
     testImplementation 'org.mockito:mockito-junit-jupiter'

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "akhq-front-end",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "private": true,
   "type": "module",
   "homepage": "./ui",

diff --git a/client/src/components/Table/Table.test.jsx b/client/src/components/Table/Table.test.jsx
@@ -16,6 +16,7 @@ import { Simulate } from 'react-dom/test-utils';
 vi.mock('react-router-dom', () => ({
   useLocation: vi.fn(),
   useNavigate: vi.fn(),
+  useNavigationType: vi.fn(),
   useParams: vi.fn(),
   Link: el => <div {...el}></div>
 }));

diff --git a/client/src/containers/Topic/Topic/TopicData/TopicData.jsx b/client/src/containers/Topic/Topic/TopicData/TopicData.jsx
@@ -243,26 +243,33 @@ class TopicData extends Root {
           .pipe(map(e => JSON.parse(e.data) || {}))
           .pipe(scan((acc, one) => [...acc, one], []))
           .subscribe(results => {
-            const lastResult = results.slice(-1);
-            const percentDiff = lastResult.percent - lastPercentVal;
-
-            // to avoid UI slowdowns, only update the percentage in fixed increments
-            if (percentDiff >= percentUpdateDelta) {
-              lastPercentVal = lastResult.percent;
-              self.setState({
-                recordCount: self.state.recordCount + lastResult.records.length,
-                percent: lastResult.percent.toFixed(2)
-              });
-            }
-
-            const records = results
-              .map(result => result.records)
-              .filter(records => records?.length > 0)
-              .reduce((acc, all) => [...acc, ...all], []);
+            if (results.length > 0) {
+              const lastResult = results[results.length - 1];
+              const percentDiff = lastResult.percent - lastPercentVal;
+
+              // to avoid UI slowdowns, only update the percentage in fixed increments
+              if (percentDiff >= percentUpdateDelta) {
+                lastPercentVal = lastResult.percent;
+                self.setState({
+                  nextPage: lastResult.after ? lastResult.after : self.state.nextPage,
+                  recordCount: self.state.recordCount + lastResult.records.length,
+                  percent: lastResult.percent.toFixed(2)
+                });
+              }
 
-            if (records.length) {
-              const tableMessages = self._handleMessages(records, self.state.sortBy === 'Oldest');
-              self.setState({ recordCount: tableMessages.length, messages: tableMessages, loading: false });
+              const records = results
+                .map(result => result.records)
+                .filter(records => records?.length > 0)
+                .reduce((acc, all) => [...acc, ...all], []);
+
+              if (records.length) {
+                const tableMessages = self._handleMessages(records, self.state.sortBy === 'Oldest');
+                self.setState({
+                  recordCount: tableMessages.length,
+                  messages: tableMessages,
+                  loading: false
+                });
+              }
             }
           });
 
@@ -944,11 +951,11 @@ class TopicData extends Root {
                   <Dropdown.Toggle className="nav-link dropdown-toggle">
                     <strong>Partition:</strong> ({partition})
                   </Dropdown.Toggle>
-                    <Dropdown.Menu>
-                      <div style={{ minWidth: '300px' }} className="khq-offset-navbar">
-                        {this._renderPartitionOptions()}
-                      </div>
-                    </Dropdown.Menu>
+                  <Dropdown.Menu>
+                    <div style={{ minWidth: '300px' }} className="khq-offset-navbar">
+                      {this._renderPartitionOptions()}
+                    </div>
+                  </Dropdown.Menu>
                 </Dropdown>
               </li>
               <li className="nav-item dropdown">
@@ -982,46 +989,46 @@ class TopicData extends Root {
                           'DD-MM-YYYY HH:mm'
                         )}
                   </Dropdown.Toggle>
-                    <Dropdown.Menu>
-                      <div style={{ display: 'flex' }}>
-                        <div>
-                          <DatePicker
-                            label="Start"
-                            onClear={() => {
-                              this.setState({ datetime: '' }, () => {
-                                this._searchMessages();
-                              });
-                            }}
-                            showDateTimeInput
-                            showTimeSelect
-                            value={datetime}
-                            onChange={value => {
-                              this.setState({ datetime: value }, () => {
-                                this._searchMessages();
-                              });
-                            }}
-                          />
-                        </div>
-                        <div>
-                          <DatePicker
-                            label="End"
-                            onClear={() => {
-                              this.setState({ endDatetime: '' }, () => {
-                                this._searchMessages();
-                              });
-                            }}
-                            showDateTimeInput
-                            showTimeSelect
-                            value={endDatetime}
-                            onChange={value => {
-                              this.setState({ endDatetime: value }, () => {
-                                this._searchMessages();
-                              });
-                            }}
-                          />
-                        </div>
+                  <Dropdown.Menu>
+                    <div style={{ display: 'flex' }}>
+                      <div>
+                        <DatePicker
+                          label="Start"
+                          onClear={() => {
+                            this.setState({ datetime: '' }, () => {
+                              this._searchMessages();
+                            });
+                          }}
+                          showDateTimeInput
+                          showTimeSelect
+                          value={datetime}
+                          onChange={value => {
+                            this.setState({ datetime: value }, () => {
+                              this._searchMessages();
+                            });
+                          }}
+                        />
+                      </div>
+                      <div>
+                        <DatePicker
+                          label="End"
+                          onClear={() => {
+                            this.setState({ endDatetime: '' }, () => {
+                              this._searchMessages();
+                            });
+                          }}
+                          showDateTimeInput
+                          showTimeSelect
+                          value={endDatetime}
+                          onChange={value => {
+                            this.setState({ endDatetime: value }, () => {
+                              this._searchMessages();
+                            });
+                          }}
+                        />
                       </div>
-                    </Dropdown.Menu>
+                    </div>
+                  </Dropdown.Menu>
                 </Dropdown>
               </li>
               <li className="nav-item dropdown">
@@ -1037,35 +1044,35 @@ class TopicData extends Root {
                   <Dropdown.Toggle className="nav-link dropdown-toggle">
                     <strong>Offsets:</strong>
                   </Dropdown.Toggle>
-                    <Dropdown.Menu>
-                      <div style={{ minWidth: '300px' }} className="khq-offset-navbar">
-                        <div className="input-group">
-                          <table>{this._renderOffsetsOptions()}</table>
-                          <div className="input-group-append">
-                            <button
-                              className="btn btn-primary offsets-ok"
-                              type="button"
-                              onClick={() => {
-                                let offsetsSearch = '';
-                                for (let i = 0; i < Object.keys(offsets).length; i++) {
-                                  if (Object.values(offsets)[i] !== '') {
-                                    if (offsetsSearch !== '') {
-                                      offsetsSearch += '_';
-                                    }
-                                    offsetsSearch += `${i}-${Object.values(offsets)[i]}`;
+                  <Dropdown.Menu>
+                    <div style={{ minWidth: '300px' }} className="khq-offset-navbar">
+                      <div className="input-group">
+                        <table>{this._renderOffsetsOptions()}</table>
+                        <div className="input-group-append">
+                          <button
+                            className="btn btn-primary offsets-ok"
+                            type="button"
+                            onClick={() => {
+                              let offsetsSearch = '';
+                              for (let i = 0; i < Object.keys(offsets).length; i++) {
+                                if (Object.values(offsets)[i] !== '') {
+                                  if (offsetsSearch !== '') {
+                                    offsetsSearch += '_';
                                   }
+                                  offsetsSearch += `${i}-${Object.values(offsets)[i]}`;
                                 }
-                                this.setState({ offsetsSearch }, () => {
-                                  this._searchMessages();
-                                });
-                              }}
-                            >
-                              OK
-                            </button>
-                          </div>
+                              }
+                              this.setState({ offsetsSearch }, () => {
+                                this._searchMessages();
+                              });
+                            }}
+                          >
+                            OK
+                          </button>
                         </div>
                       </div>
-                    </Dropdown.Menu>
+                    </div>
+                  </Dropdown.Menu>
                 </Dropdown>
               </li>
               <li>

diff --git a/client/src/containers/Topic/TopicCreate/TopicCreate.jsx b/client/src/containers/Topic/TopicCreate/TopicCreate.jsx
@@ -57,7 +57,7 @@ class TopicCreate extends Form {
       partition: formData.partition,
       replication: formData.replication,
       configs: {
-        'cleanup.policy': formData.cleanup === 'deleteAndCompact' ? '' : formData.cleanup,
+        'cleanup.policy': formData.cleanup === 'deleteAndCompact' ? 'compact,delete' : formData.cleanup,
         'retention.ms': formData.retention
       }
     };

diff --git a/client/src/containers/Topic/TopicList/TopicList.jsx b/client/src/containers/Topic/TopicList/TopicList.jsx
@@ -96,12 +96,15 @@ class TopicList extends Root {
         );
       } else if (this.props.location.search === '') {
         // Handle sidebar click on topics from the component
-        this.setState({
-          pageNumber: 1,
-          searchData : { ...searchData, search: '' }
-        }, () => {
-          this._initializeVars(this.getTopics);
-        });
+        this.setState(
+          {
+            pageNumber: 1,
+            searchData: { ...searchData, search: '' }
+          },
+          () => {
+            this._initializeVars(this.getTopics);
+          }
+        );
       }
     }
   }

diff --git a/client/src/containers/Topic/TopicProduce/TopicProduce.test.jsx b/client/src/containers/Topic/TopicProduce/TopicProduce.test.jsx
@@ -12,6 +12,7 @@ vi.mock('./../../../prefix', () => ({
 vi.mock('react-router-dom', () => ({
   useLocation: vi.fn(),
   useNavigate: vi.fn(),
+  useNavigationType: vi.fn(),
   useParams: () => ({ clusterId: '123', topicId: '456' })
 }));