多集群支持，集群切换

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: "操作",