集群切换

ui/src/App.vue

@@ -17,13 +17,18 @@
       >
       <span>|</span
       ><router-link to="/op-page" class="pad-l-r">运维</router-link>
+      <span class="right">集群：{{ clusterName }}</span>
     </div>
     <router-view class="content" />
   </div>
 </template>
 <script>
-import { KafkaConfigApi } from "@/utils/api";
+import { KafkaConfigApi, KafkaClusterApi } from "@/utils/api";
 import request from "@/utils/request";
+import { mapMutations, mapState } from "vuex";
+import { getClusterInfo } from "@/utils/local-cache";
+import notification from "ant-design-vue/lib/notification";
+import { CLUSTER } from "@/store/mutation-types";
 
 export default {
   data() {
@@ -38,6 +43,35 @@ export default {
     }).then((res) => {
       this.config = res.data;
     });
+
+    const clusterInfo = getClusterInfo();
+    if (!clusterInfo) {
+      request({
+        url: KafkaClusterApi.peekClusterInfo.url,
+        method: KafkaClusterApi.peekClusterInfo.method,
+      }).then((res) => {
+        if (res.code == 0) {
+          this.switchCluster(res.data);
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    } else {
+      this.switchCluster(clusterInfo);
+    }
+  },
+  computed: {
+    ...mapState({
+      clusterName: (state) => state.clusterInfo.clusterName,
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      switchCluster: CLUSTER.SWITCH,
+    }),
   },
 };
 </script>
@@ -90,4 +124,10 @@ export default {
   top: 1%;
   position: absolute;
 }
+.right {
+  float: right;
+  right: 1%;
+  top: 2%;
+  position: absolute;
+}
 </style>

ui/src/store/index.js

@@ -1,11 +1,24 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import { CLUSTER } from "@/store/mutation-types";
+import { setClusterInfo } from "@/utils/local-cache";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
+  state: {
+    clusterInfo: {
+      id: undefined,
+      clusterName: undefined,
+    },
+  },
+  mutations: {
+    [CLUSTER.SWITCH](state, clusterInfo) {
+      state.clusterInfo.id = clusterInfo.id;
+      state.clusterInfo.clusterName = clusterInfo.clusterName;
+      setClusterInfo(clusterInfo);
+    },
+  },
   actions: {},
   modules: {},
 });

ui/src/store/mutation-types.js

@@ -0,0 +1,3 @@
+export const CLUSTER = {
+  SWITCH: "switchCluster",
+};

ui/src/utils/api.js

@@ -184,13 +184,25 @@ export const KafkaClusterApi = {
     method: "get",
   },
   getClusterInfoList: {
-    url: "/cluster/list",
+    url: "/cluster/info",
     method: "get",
   },
   addClusterInfo: {
-    url: "/cluster",
+    url: "/cluster/info",
     method: "post",
   },
+  deleteClusterInfo: {
+    url: "/cluster/info",
+    method: "delete",
+  },
+  updateClusterInfo: {
+    url: "/cluster/info",
+    method: "put",
+  },
+  peekClusterInfo: {
+    url: "/cluster/info/peek",
+    method: "get",
+  },
 };
 
 export const KafkaOpApi = {

ui/src/utils/constants.js

@@ -1,3 +1,7 @@
 export const ConstantEvent = {
   updateUserDialogData: "updateUserDialogData",
 };
+
+export const Cache = {
+  clusterInfo: "clusterInfo",
+};

ui/src/utils/local-cache.js

@@ -0,0 +1,10 @@
+import { Cache } from "@/utils/constants";
+
+export function setClusterInfo(clusterInfo) {
+  localStorage.setItem(Cache.clusterInfo, JSON.stringify(clusterInfo));
+}
+
+export function getClusterInfo() {
+  const str = localStorage.getItem(Cache.clusterInfo);
+  return str ? JSON.parse(str) : undefined;
+}

ui/src/utils/request.js

@@ -1,6 +1,7 @@
 import axios from "axios";
 import notification from "ant-design-vue/es/notification";
 import { VueAxios } from "./axios";
+import { getClusterInfo } from "@/utils/local-cache";
 
 // 创建 axios 实例
 const request = axios.create({
@@ -22,10 +23,14 @@ const errorHandler = (error) => {
 };
 
 // request interceptor
-// request.interceptors.request.use(config => {
-//
-//   return config
-// }, errorHandler)
+request.interceptors.request.use((config) => {
+  const clusterInfo = getClusterInfo();
+  if (clusterInfo) {
+    config.headers["X-Cluster-Info-Id"] = clusterInfo.id;
+    config.headers["X-Cluster-Info-Name"] = clusterInfo.clusterName;
+  }
+  return config;
+}, errorHandler);
 
 // response interceptor
 request.interceptors.response.use((response) => {

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) {