集群切换

ui/src/views/Home.vue

@@ -11,6 +11,7 @@
 // @ is an alias to /src
 import request from "@/utils/request";
 import { KafkaConfigApi } from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
 export default {
   name: "Home",
   components: {},
@@ -25,7 +26,14 @@ export default {
       url: KafkaConfigApi.getConfig.url,
       method: KafkaConfigApi.getConfig.method,
     }).then((res) => {
-      this.config = res.data;
+      if (res.code == 0) {
+        this.config = res.data;
+      } else {
+        notification.error({
+          message: "error",
+          description: res.msg,
+        });
+      }
     });
   },
 };

ui/src/views/cluster/Cluster.vue

@@ -45,6 +45,7 @@
 import request from "@/utils/request";
 import { KafkaClusterApi } from "@/utils/api";
 import BrokerConfig from "@/views/cluster/BrokerConfig";
+import notification from "ant-design-vue/lib/notification";
 
 export default {
   name: "Topic",
@@ -68,8 +69,15 @@ export default {
         method: KafkaClusterApi.getClusterInfo.method,
       }).then((res) => {
         this.loading = false;
-        this.data = res.data.nodes;
-        this.clusterId = res.data.clusterId;
+        if (res.code == 0) {
+          this.data = res.data.nodes;
+          this.clusterId = res.data.clusterId;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
       });
     },
     openBrokerConfigDialog(record, isLoggerConfig) {

ui/src/views/group/Group.vue

@@ -196,7 +196,14 @@ export default {
         data: this.queryParam,
       }).then((res) => {
         this.loading = false;
-        this.data = res.data.list;
+        if (res.code == 0) {
+          this.data = res.data.list;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
       });
     },
     deleteGroup(group) {

ui/src/views/op/AddClusterInfo.vue

@@ -21,7 +21,10 @@
             <a-input
               v-decorator="[
                 'clusterName',
-                { rules: [{ required: true, message: '输入集群名称!' }] },
+                {
+                  rules: [{ required: true, message: '输入集群名称!' }],
+                  initialValue: clusterInfo.clusterName,
+                },
               ]"
               placeholder="输入集群名称"
             />
@@ -30,7 +33,10 @@
             <a-input
               v-decorator="[
                 'address',
-                { rules: [{ required: true, message: '输入集群地址!' }] },
+                {
+                  rules: [{ required: true, message: '输入集群地址!' }],
+                  initialValue: clusterInfo.address,
+                },
               ]"
               placeholder="输入集群地址"
             />
@@ -44,11 +50,14 @@ 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']"
+              v-decorator="[
+                'properties',
+                { initialValue: clusterInfo.properties },
+              ]"
             />
           </a-form-item>
           <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
-            <a-button type="primary" html-type="submit"> 提交 </a-button>
+            <a-button type="primary" html-type="submit"> 提交</a-button>
           </a-form-item>
         </a-form>
       </a-spin>
@@ -60,6 +69,7 @@ sasl-jaas-config=org.apache.kafka.common.security.scram.ScramLoginModule require
 import request from "@/utils/request";
 import { KafkaClusterApi } from "@/utils/api";
 import notification from "ant-design-vue/es/notification";
+
 export default {
   name: "AddClusterInfo",
   props: {
@@ -67,6 +77,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    isModify: {
+      type: Boolean,
+      default: false,
+    },
+    clusterInfo: {
+      type: Object,
+      default: () => defaultInfo,
+    },
+    closeDialogEvent: {
+      type: String,
+      default: "closeAddClusterInfoDialog",
+    },
   },
   data() {
     return {
@@ -87,15 +109,21 @@ export default {
       this.form.validateFields((err, values) => {
         if (!err) {
           this.loading = true;
+          const api = this.isModify
+            ? KafkaClusterApi.updateClusterInfo
+            : KafkaClusterApi.addClusterInfo;
+          const data = this.isModify
+            ? Object.assign({}, this.clusterInfo, values)
+            : Object.assign({}, values);
           request({
-            url: KafkaClusterApi.addClusterInfo.url,
-            method: KafkaClusterApi.addClusterInfo.method,
-            data: values,
+            url: api.url,
+            method: api.method,
+            data: data,
           }).then((res) => {
             this.loading = false;
             if (res.code == 0) {
               this.$message.success(res.msg);
-              this.$emit("closeAddClusterInfoDialog", { refresh: true });
+              this.$emit(this.closeDialogEvent, { refresh: true });
             } else {
               notification.error({
                 message: "error",
@@ -108,10 +136,11 @@ export default {
     },
     handleCancel() {
       this.data = [];
-      this.$emit("closeAddClusterInfoDialog", { refresh: false });
+      this.$emit(this.closeDialogEvent, { refresh: false });
     },
   },
 };
+const defaultInfo = { clusterName: "", address: "", properties: "" };
 </script>
 
 <style scoped></style>

ui/src/views/op/ClusterInfo.vue

@@ -37,9 +37,14 @@
               size="small"
               href="javascript:;"
               class="operation-btn"
+              @click="switchCluster(record)"
               >切换
             </a-button>
-            <a-button size="small" href="javascript:;" class="operation-btn"
+            <a-button
+              size="small"
+              href="javascript:;"
+              class="operation-btn"
+              @click="openUpdateClusterInfoDialog(record)"
               >编辑
             </a-button>
             <a-popconfirm
@@ -63,6 +68,15 @@
           @closeAddClusterInfoDialog="closeAddClusterInfoDialog"
         >
         </AddClusterInfo>
+
+        <AddClusterInfo
+          :visible="showUpdateClusterInfoDialog"
+          closeDialogEvent="closeUpdateClusterInfoDialog"
+          @closeUpdateClusterInfoDialog="closeUpdateClusterInfoDialog"
+          :cluster-info="select"
+          :is-modify="true"
+        >
+        </AddClusterInfo>
       </a-spin>
     </div>
   </a-modal>
@@ -72,6 +86,9 @@
 import request from "@/utils/request";
 import { KafkaClusterApi } from "@/utils/api";
 import AddClusterInfo from "@/views/op/AddClusterInfo";
+import notification from "ant-design-vue/lib/notification";
+import { mapMutations } from "vuex";
+import { CLUSTER } from "@/store/mutation-types";
 
 export default {
   name: "Cluster",
@@ -89,6 +106,8 @@ export default {
       data: [],
       loading: false,
       showAddClusterInfoDialog: false,
+      showUpdateClusterInfoDialog: false,
+      select: {},
     };
   },
   watch: {
@@ -110,7 +129,24 @@ export default {
         this.data = res.data;
       });
     },
-    deleteClusterInfo() {},
+    deleteClusterInfo(record) {
+      request({
+        url: KafkaClusterApi.deleteClusterInfo.url,
+        method: KafkaClusterApi.deleteClusterInfo.method,
+        data: Object.assign({}, { id: record.id }),
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.$message.success(res.msg);
+          this.getClusterInfoList();
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
     handleCancel() {
       this.data = [];
       this.$emit("closeClusterInfoDialog", {});
@@ -124,6 +160,27 @@ export default {
         this.getClusterInfoList();
       }
     },
+    openUpdateClusterInfoDialog(record) {
+      this.showUpdateClusterInfoDialog = true;
+      const r = Object.assign({}, record);
+      if (r.properties) {
+        let str = "";
+        r.properties.forEach((e) => {
+          str = str + e + "\r\n";
+        });
+        r.properties = str;
+      }
+      this.select = r;
+    },
+    closeUpdateClusterInfoDialog(res) {
+      this.showUpdateClusterInfoDialog = false;
+      if (res.refresh) {
+        this.getClusterInfoList();
+      }
+    },
+    ...mapMutations({
+      switchCluster: CLUSTER.SWITCH,
+    }),
   },
 };
 

ui/src/views/op/Operation.vue

@@ -7,7 +7,9 @@
             集群切换
           </a-button>
           <label>说明：</label>
-          <span>多集群管理：增加、删除集群配置，切换集群</span>
+          <span
+            >多集群管理：增加、删除集群配置，切换选中集群为当前操作集群。</span
+          >
         </p>
       </a-card>
     </div>

ui/src/views/topic/Topic.vue

@@ -245,8 +245,15 @@ export default {
         params: this.queryParam,
       }).then((res) => {
         this.loading = false;
-        this.data = res.data;
-        this.filter();
+        if (res.code == 0) {
+          this.data = res.data;
+          this.filter();
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
       });
     },
     deleteTopic(topic) {