多集群支持，集群切换

ui/src/App.vue

@@ -11,8 +11,8 @@
       ><router-link to="/group-page" class="pad-l-r">消费组</router-link>
       <span>|</span
       ><router-link to="/message-page" class="pad-l-r">消息</router-link>
-      <span v-show="config.enableAcl">|</span
-      ><router-link to="/acl-page" class="pad-l-r" v-show="config.enableAcl"
+      <span v-show="enableSasl">|</span
+      ><router-link to="/acl-page" class="pad-l-r" v-show="enableSasl"
         >Acl</router-link
       >
       <span>|</span
@@ -23,7 +23,7 @@
   </div>
 </template>
 <script>
-import { KafkaConfigApi, KafkaClusterApi } from "@/utils/api";
+import { KafkaClusterApi } from "@/utils/api";
 import request from "@/utils/request";
 import { mapMutations, mapState } from "vuex";
 import { getClusterInfo } from "@/utils/local-cache";
@@ -37,13 +37,6 @@ export default {
     };
   },
   created() {
-    request({
-      url: KafkaConfigApi.getConfig.url,
-      method: KafkaConfigApi.getConfig.method,
-    }).then((res) => {
-      this.config = res.data;
-    });
-
     const clusterInfo = getClusterInfo();
     if (!clusterInfo) {
       request({
@@ -66,6 +59,7 @@ export default {
   computed: {
     ...mapState({
       clusterName: (state) => state.clusterInfo.clusterName,
+      enableSasl: (state) => state.clusterInfo.enableSasl,
     }),
   },
   methods: {

ui/src/store/index.js

@@ -10,12 +10,22 @@ export default new Vuex.Store({
     clusterInfo: {
       id: undefined,
       clusterName: undefined,
+      enableSasl: false,
     },
   },
   mutations: {
     [CLUSTER.SWITCH](state, clusterInfo) {
       state.clusterInfo.id = clusterInfo.id;
       state.clusterInfo.clusterName = clusterInfo.clusterName;
+      let enableSasl = false;
+      for (let p in clusterInfo.properties) {
+        if (enableSasl) {
+          break;
+        }
+        enableSasl =
+          clusterInfo.properties[p].indexOf("security.protocol=SASL") != -1;
+      }
+      state.clusterInfo.enableSasl = enableSasl;
       setClusterInfo(clusterInfo);
     },
   },

ui/src/utils/api.js

@@ -51,7 +51,7 @@ export const KafkaAclApi = {
 
 export const KafkaConfigApi = {
   getConfig: {
-    url: "/config",
+    url: "/config/console",
     method: "get",
   },
   getTopicConfig: {

ui/src/views/acl/Acl.vue

@@ -232,11 +232,13 @@ export default {
       }
     },
     onDeleteUser(row) {
+      this.loading = true;
       request({
         url: KafkaAclApi.deleteKafkaUser.url,
         method: KafkaAclApi.deleteKafkaUser.method,
         data: { username: row.username },
       }).then((res) => {
+        this.loading = false;
         this.getAclList();
         if (res.code == 0) {
           this.$message.success(res.msg);

ui/src/views/acl/UserDetail.vue

@@ -8,20 +8,22 @@
     :footer="null"
     @cancel="handleCancel"
   >
-    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
-      <a-form-item label="用户名">
-        <span>{{ user.username }}</span>
-      </a-form-item>
-      <a-form-item label="密码">
-        <span>{{ user.password }}</span>
-      </a-form-item>
-      <a-form-item label="凭证信息">
-        <span>{{ user.credentialInfos }}</span>
-      </a-form-item>
-      <a-form-item label="数据一致性说明">
-        <strong>{{ user.consistencyDescription }}</strong>
-      </a-form-item>
-    </a-form>
+    <a-spin :spinning="loading">
+      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+        <a-form-item label="用户名">
+          <span>{{ user.username }}</span>
+        </a-form-item>
+        <a-form-item label="密码">
+          <span>{{ user.password }}</span>
+        </a-form-item>
+        <a-form-item label="凭证信息">
+          <span>{{ user.credentialInfos }}</span>
+        </a-form-item>
+        <a-form-item label="数据一致性说明">
+          <strong>{{ user.consistencyDescription }}</strong>
+        </a-form-item>
+      </a-form>
+    </a-spin>
   </a-modal>
 </template>
 
@@ -47,6 +49,7 @@ export default {
       show: this.visible,
       form: this.$form.createForm(this, { name: "UserDetailForm" }),
       user: {},
+      loading: false,
     };
   },
   watch: {
@@ -63,11 +66,13 @@ export default {
     },
     getUserDetail() {
       const api = KafkaAclApi.getKafkaUserDetail;
+      this.loading = true;
       request({
         url: api.url,
         method: api.method,
         params: { username: this.username },
       }).then((res) => {
+        this.loading = false;
         if (res.code != 0) {
           this.$message.error(res.msg);
         } else {

ui/src/views/op/AddClusterInfo.vue

@@ -46,9 +46,9 @@
               rows="5"
               placeholder='可选参数，集群其它属性配置：
 request.timeout.ms=10000
-security-protocol=SASL_PLAINTEXT
-sasl-mechanism=SCRAM-SHA-256
-sasl-jaas-config=org.apache.kafka.common.security.scram.ScramLoginModule required username="name" password="password";
+security.protocol=SASL_PLAINTEXT
+sasl.mechanism=SCRAM-SHA-256
+sasl.jaas.config=org.apache.kafka.common.security.scram.ScramLoginModule required username="name" password="password";
 '
               v-decorator="[
                 'properties',

ui/src/views/op/ClusterInfo.vue

@@ -201,6 +201,7 @@ const columns = [
     dataIndex: "properties",
     key: "properties",
     scopedSlots: { customRender: "properties" },
+    width: 300,
   },
   {
     title: "操作",