diff --git a/README.md b/README.md index 4213808..56a48e3 100644 --- a/README.md +++ b/README.md @@ -2,95 +2,70 @@ 一款轻量级的kafka可视化管理平台，安装配置快捷、简单易用。 为了开发的省事，没有国际化支持，只支持中文展示。 用过rocketmq-console吧，对，前端展示风格跟那个有点类似。 -## 说明 -当前主分支及日后版本不再提供消息同步、迁移的解决方案，如有需要，可以使用single-data-sync分支的代码或者发布v1.0.2： [kafka-console-ui.zip](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.2/kafka-console-ui.zip) 的安装包 -v1.0.2版本及其之前的版本只支持单集群配置，但是对于SASL_SCRAM认证授权管理功能相当完善 +## 页面预览 +如果github能查看图片的话，可以点击[查看菜单页面]()，查看每个页面的样子 +## 集群迁移支持说明 +当前主分支及日后版本不再提供消息同步、集群迁移的解决方案，如有需要，查看：[集群迁移说明](./document/datasync/集群迁移.md) -后续版本会支持多集群管理，并将v1.0.2之前的部分功能去掉或优化，目的是做为一个足够轻量的管理工具，不再涉及其它属性 -## 安装包下载 -以下两种方式2选一，直接下载安装包或下载源码，手动打包 -* 点击下载(v1.0.2版本)：[kafka-console-ui.tar.gz](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.2/kafka-console-ui.tar.gz) 或 [kafka-console-ui.zip](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.2/kafka-console-ui.zip) -* 参考下面的打包部署，下载源码重新打包(提交的最新功能特性) ## 功能支持 +* 多集群支持 * 集群信息 * Topic管理 * 消费组管理 * 消息管理 -* 基于SASL_SCRAM认证授权管理 +* ACL * 运维 -![功能特性](./document/功能特性.png) -## 技术栈 -* spring boot -* java、scala -* kafka -* h2 -* vue -## kafka版本 -* 当前使用的kafka 2.8.0 -## 监控 -仅提供运维管理功能，监控、告警需要配合其它组件，使用请查看：https://blog.csdn.net/x763795151/article/details/119705372 -# 打包、部署 -## 打包 -环境要求 -* maven 3.6+ -* jdk 8 -* git + +功能明细看这个脑图： +![功能特性](./document/img/功能特性.png) + +## 安装包下载 +点击下载(v1.0.2版本)：[kafka-console-ui.zip](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.2/kafka-console-ui.zip) + +## 快速使用 +### Windows +1. 解压缩zip安装包 +2. 进入bin目录（必须在bin目录下），双击执行`start.bat`启动 +3. 停止：直接关闭启动的命令行窗口即可 + +### Linux或Mac OS ``` -git clone https://github.com/xxd763795151/kafka-console-ui.git -cd kafka-console-ui -# linux或mac执行 -sh package.sh -# windows执行 -package.bat -``` -打包成功，输出文件(以下2种归档类型)： -* target/kafka-console-ui.tar.gz -* target/kafka-console-ui.zip -## 部署 -### Mac OS 或 Linux -``` -# 解压缩(以tar.gz为例) -tar -zxvf kafka-console-ui.tar.gz +# 解压缩 +unzip kafka-console-ui.zip # 进入解压缩后的目录 cd kafka-console-ui -# 编辑配置 -vim config/application.yml # 启动 sh bin/start.sh # 停止 sh bin/shutdown.sh ``` -### Windows -1.解压缩zip安装包 -2.编辑配置文件 ：`config/application.yml` -3.进入bin目录（必须在bin目录下），执行`start.bat`启动 -启动完成，访问：http://127.0.0.1:7766 +### 访问地址 +启动完成，访问：http://127.0.0.1:7766 -# 开发环境 -* jdk 8 -* idea -* scala 2.13 -* maven >=3.6+ -* webstorm -除了webstorm是开发前端的ide可以根据自己需要代替，jdk scala是必须有的。 -# 本地开发配置 -以我自己为例，开发环境里的工具准备好，然后代码clone到本地。 -## 后端配置 -1. 用idea打开项目 -2. 打开idea的Project Structure(Settings) -> Modules -> 设置src/main/scala为Sources，因为约定src/main/java是源码目录，所以这里要再加一个 -3. 打开idea的Project Structure(Settings) -> Libraries 添加scala sdk，然后选择本地下载的scala 2.13的目录，确定添加进来 -## 前端 -前端代码在工程的ui目录下，找个前端开发的ide打开进行开发即可。 -## 注意 -前后分离，直接启动后端如果未编译前端代码是没有前端页面的，可以先打包进行编译`sh package.sh`，然后再用idea启动，或者前端部分单独启动 -# 页面示例 -如果未启用ACL配置，不会显示ACL的菜单页面，所以导航栏上没有Acl这一项 +### 配置集群 +第一次启动，打开浏览器后，因为还没有配置kafka集群信息，所以页面右上角可能会有错误信息，比如：No Cluster Info或者是没有集群信息，请先切换集群之类的提示。 -![集群](./document/集群.png) -![Topic](./document/Topic.png) -![消费组](./document/消费组.png) -![运维](./document/运维.png) -增加消息检索页面 -![消息](./document/消息.png) \ No newline at end of file +集群配置如下： +1. 点击页面上方导航栏的 [运维] 菜单 +2. 点击集群管理下的 [集群切换] 按钮 +3. 在弹框里点击 [新增集群] +4. 然后输入kafka集群地址和一个名称（随便起个名字） +5. 点击提交便增加成功了 +6. 增加成功可以看到会话框已经有这个集群信息，然后点击右侧的 [切换] 按钮，便切换该集群为当前集群 + +后续如果再增加其它集群，就可以按上面这个流程，如果想切换到哪个集群，点击切换按钮，便会切换到对应的集群，页面的右上角会显示当前是使用的哪个集群，如果不确定，可以刷新下页面。 + +在新增集群的时候，除了集群地址还可以输入集群的其它属性配置，比如请求超时，ACL配置等。如果开启了ACL，切换到该集群的时候，导航栏上便会出现ACL菜单，支持进行相关操作（目前是基于SASL_SCRAM认证授权管理支持的最完善，其它的我也没验证过，虽然是我开发的，但是我也没具体全部验证这一块功能，授权部分应该是通用的） + +## kafka版本 +* 当前使用的kafka 2.8.0 +## 监控 +仅提供运维管理功能，监控、告警需要配合其它组件，如有需要，建议请查看：https://blog.csdn.net/x763795151/article/details/119705372 + +## 源码打包 +如果想通过源码打包，查看：[源码打包说明](./document/package/源码打包.md) + +## 本地开发 +如果需要本地开发，开发环境配置查看：[本地开发](./document/develop/开发配置.md) diff --git a/document/Topic.png b/document/Topic.png deleted file mode 100644 index 84615fa..0000000 Binary files a/document/Topic.png and /dev/null differ diff --git a/document/datasync/集群迁移.md b/document/datasync/集群迁移.md new file mode 100644 index 0000000..ee780f1 --- /dev/null +++ b/document/datasync/集群迁移.md @@ -0,0 +1,11 @@ +# 集群迁移 +可能是有的同学看了我以前发的解决云上、云下集群迁移的方案，好奇看到了这里。 +当时发的文章链接在这里：[kafka新老集群平滑迁移实践](https://blog.csdn.net/x763795151/article/details/121070563) + +不过考虑到这些功能涉及到业务属性，已经在新的版本中都去掉了。 + +当前主分支及日后版本不再提供消息同步、集群迁移的解决方案，如有需要，可以使用single-data-sync分支的代码或者历史发布的v1.0.2(直接下载)： [kafka-console-ui.zip](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.2/kafka-console-ui.zip) 的安装包。 + +v1.0.2版本及其之前的版本只支持单集群配置，但是对于SASL_SCRAM认证授权管理功能相当完善。 + +后续版本会支持多集群管理，并将v1.0.2之前的部分功能去掉或优化，目的是做为一个足够轻量的管理工具，不再涉及其它属性。 \ No newline at end of file diff --git a/document/develop/开发配置.md b/document/develop/开发配置.md new file mode 100644 index 0000000..75ee88c --- /dev/null +++ b/document/develop/开发配置.md @@ -0,0 +1,31 @@ +# 本地开发配置说明 +## 技术栈 +* spring boot +* java、scala +* kafka +* h2 +* vue + +## 开发环境 +* jdk 8 +* idea +* scala 2.13 +* maven >=3.6+ +* webstorm + +除了webstorm是开发前端的ide可以根据自己需要代替，jdk scala是必须有的。 + +scala 2.13下载地址，在这个页面最下面：https://www.scala-lang.org/download/scala2.html +## 克隆代码 +以我自己为例，开发环境里的工具准备好，然后代码clone到本地。 +## 后端配置 +1. 用idea打开项目 +2. 打开idea的Project Structure(Settings) -> Modules -> 设置src/main/scala为Sources，因为约定src/main/java是源码目录，所以这里要再加一个源码目录 +3. 打开idea的Project Structure(Settings) -> Libraries 添加scala sdk，然后选择本地下载的scala 2.13的目录，确定添加进来（如果使用的idea可以直接勾选，也可以不用先下载到本地） +## 前端 +前端代码在工程的ui目录下，找个前端开发的ide如web storm打开进行开发即可。 + +## 注意 +前后分离，直接启动后端工程的话，src/main/resources目录下可能是没有静态文件的，所以直接通过浏览器访问应该是没页面的。 + +可以先打包编译一下前端文件，比如执行：`sh package.sh`，然后再用idea启动。或者是后端用idea启动完成后，找个前端的ide 比如web storm打开工程的ui目录下的前端项目，单独启动，进行开发。 \ No newline at end of file diff --git a/document/img/功能特性.png b/document/img/功能特性.png new file mode 100644 index 0000000..9c168fe Binary files /dev/null and b/document/img/功能特性.png differ diff --git a/document/overview/img/Broker配置.png b/document/overview/img/Broker配置.png new file mode 100644 index 0000000..3be3cb9 Binary files /dev/null and b/document/overview/img/Broker配置.png differ diff --git a/document/overview/img/Topic.png b/document/overview/img/Topic.png new file mode 100644 index 0000000..2a53175 Binary files /dev/null and b/document/overview/img/Topic.png differ diff --git a/document/overview/img/消息时间查询.png b/document/overview/img/消息时间查询.png new file mode 100644 index 0000000..94bc34b Binary files /dev/null and b/document/overview/img/消息时间查询.png differ diff --git a/document/overview/img/消息详情.png b/document/overview/img/消息详情.png new file mode 100644 index 0000000..64a5003 Binary files /dev/null and b/document/overview/img/消息详情.png differ diff --git a/document/overview/img/消费组.png b/document/overview/img/消费组.png new file mode 100644 index 0000000..13edae1 Binary files /dev/null and b/document/overview/img/消费组.png differ diff --git a/document/overview/img/运维.png b/document/overview/img/运维.png new file mode 100644 index 0000000..e848cb2 Binary files /dev/null and b/document/overview/img/运维.png differ diff --git a/document/overview/img/集群.png b/document/overview/img/集群.png new file mode 100644 index 0000000..73a8e7e Binary files /dev/null and b/document/overview/img/集群.png differ diff --git a/document/overview/img/集群切换.png b/document/overview/img/集群切换.png new file mode 100644 index 0000000..df467e9 Binary files /dev/null and b/document/overview/img/集群切换.png differ diff --git a/document/overview/概览.md b/document/overview/概览.md new file mode 100644 index 0000000..d718a75 --- /dev/null +++ b/document/overview/概览.md @@ -0,0 +1,32 @@ +# 菜单预览 +如果未启用ACL配置，不会显示ACL的菜单页面，所以导航栏上没有Acl这一项 +## 集群 +* 展示集群列表 +![集群](./img/集群.png) +* 查看或修改集群配置 +![Broker配置](./img/Broker配置.png) + + +## Topic +* Topic列表 +![Topic](./img/Topic.png) + + +## 消费组 +* 消费组列表 +![消费组](./img/消费组.png) + + +## 消息 +* 根据时间检索或过滤消息 +![消息时间查询](./img/消息时间查询.png) + +* 消息详情 +![消息详情](./img/消息详情.png) + + +## 运维 +* 运维页面 +![运维](./img/运维.png) +* 集群切换 +![集群切换](./img/集群切换.png) \ No newline at end of file diff --git a/document/package/源码打包.md b/document/package/源码打包.md new file mode 100644 index 0000000..7446e76 --- /dev/null +++ b/document/package/源码打包.md @@ -0,0 +1,32 @@ +# 源码打包说明 +可以直接下载最新代码，进行打包，最新代码相比已经发布的安装包可能会包含最新的特性 + +## 环境要求 +* maven 3.6+ +* jdk 8 +* git（非必须） + +maven是建议版本>=3.6版本，3.4+和3.5+我也没试过，3.3+的版本，在windows上我试了下打包有bug，可能把spring boot的application.yml打不到合适的目录。 + +如果3.6+在mac上也不行（也是上面这个问题），建议用最新版本试试。 + +## 源码下载 +``` +git clone https://github.com/xxd763795151/kafka-console-ui.git +``` +或者直接在页面下载源码 + +## 打包 +我已经写了个简单的打包脚本，直接执行即可。 +### Windows +``` +cd kafka-console-ui +# windows执行 +package.bat +``` +### Linux或Mac OS +``` +cd kafka-console-ui +# linux或mac执行 +sh package.sh +``` \ No newline at end of file diff --git a/document/功能特性.png b/document/功能特性.png deleted file mode 100644 index ba5a806..0000000 Binary files a/document/功能特性.png and /dev/null differ diff --git a/document/消息.png b/document/消息.png deleted file mode 100644 index e6f8ac7..0000000 Binary files a/document/消息.png and /dev/null differ diff --git a/document/消费组.png b/document/消费组.png deleted file mode 100644 index a78258d..0000000 Binary files a/document/消费组.png and /dev/null differ diff --git a/document/运维.png b/document/运维.png deleted file mode 100644 index e8a936d..0000000 Binary files a/document/运维.png and /dev/null differ diff --git a/document/集群.png b/document/集群.png deleted file mode 100644 index 4c4e043..0000000 Binary files a/document/集群.png and /dev/null differ diff --git a/ui/package-lock.json b/ui/package-lock.json index b9632f2..8e05f0c 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -1820,63 +1820,6 @@ "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=", "dev": true }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "optional": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "optional": true - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, "ssri": { "version": "8.0.1", "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz", @@ -1885,28 +1828,6 @@ "requires": { "minipass": "^3.1.1" } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.5.0", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz", - "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - } } } }, @@ -12176,6 +12097,87 @@ } } }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.8.3", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz", + "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "optional": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "optional": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "optional": true + }, + "loader-utils": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", + "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "vue-ref": { "version": "2.0.0", "resolved": "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz",