集群名称支持中文，消息查询可选择时间展示顺序

ui/src/utils/request.js

@@ -27,7 +27,7 @@ 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;
+    // config.headers["X-Cluster-Info-Name"] = encodeURIComponent(clusterInfo.clusterName);
   }
   return config;
 }, errorHandler);

ui/src/views/message/MessageDetail.vue

@@ -203,7 +203,7 @@ export default {
       this.$emit("closeDetailDialog", { refresh: false });
     },
     formatTime(time) {
-      return moment(time).format("YYYY-MM-DD HH:mm:ss:SSS");
+      return time == -1 ? -1 : moment(time).format("YYYY-MM-DD HH:mm:ss:SSS");
     },
     keyDeserializerChange() {
       this.getMessageDetail();

ui/src/views/message/MessageList.vue

@@ -9,6 +9,7 @@
           return index;
         }
       "
+      @change="handleChange"
     >
       <div slot="operation" slot-scope="record">
         <a-button
@@ -41,9 +42,9 @@ export default {
   },
   data() {
     return {
-      columns: columns,
       showDetailDialog: false,
       record: {},
+      sortedInfo: null,
     };
   },
   methods: {
@@ -54,42 +55,56 @@ export default {
     closeDetailDialog() {
       this.showDetailDialog = false;
     },
-  },
-};
-const columns = [
-  {
-    title: "topic",
-    dataIndex: "topic",
-    key: "topic",
-    width: 300,
-  },
-  {
-    title: "分区",
-    dataIndex: "partition",
-    key: "partition",
-  },
-  {
-    title: "偏移",
-    dataIndex: "offset",
-    key: "offset",
-  },
-  {
-    title: "时间",
-    dataIndex: "timestamp",
-    key: "timestamp",
-    slots: { title: "timestamp" },
-    scopedSlots: { customRender: "timestamp" },
-    customRender: (text) => {
-      return moment(text).format("YYYY-MM-DD HH:mm:ss:SSS");
+    handleChange() {
+      this.sortedInfo = arguments[2];
     },
   },
-  {
-    title: "操作",
-    key: "operation",
-    scopedSlots: { customRender: "operation" },
-    width: 200,
+  computed: {
+    columns() {
+      let sortedInfo = this.sortedInfo || {};
+      const columns = [
+        {
+          title: "topic",
+          dataIndex: "topic",
+          key: "topic",
+          width: 300,
+        },
+        {
+          title: "分区",
+          dataIndex: "partition",
+          key: "partition",
+        },
+        {
+          title: "偏移",
+          dataIndex: "offset",
+          key: "offset",
+        },
+        {
+          title: "时间",
+          dataIndex: "timestamp",
+          key: "timestamp",
+          slots: { title: "timestamp" },
+          scopedSlots: { customRender: "timestamp" },
+          customRender: (text) => {
+            return text == -1
+              ? -1
+              : moment(text).format("YYYY-MM-DD HH:mm:ss:SSS");
+          },
+          sorter: (a, b) => a.timestamp - b.timestamp,
+          sortOrder: sortedInfo.columnKey === "timestamp" && sortedInfo.order,
+          sortDirections: ["ascend", "descend"],
+        },
+        {
+          title: "操作",
+          key: "operation",
+          scopedSlots: { customRender: "operation" },
+          width: 200,
+        },
+      ];
+      return columns;
+    },
   },
-];
+};
 </script>
 
 <style scoped></style>

ui/src/views/op/AddClusterInfo.vue

@@ -69,6 +69,9 @@ 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";
+import { getClusterInfo } from "@/utils/local-cache";
+import { mapMutations } from "vuex";
+import { CLUSTER } from "@/store/mutation-types";
 
 export default {
   name: "AddClusterInfo",
@@ -124,6 +127,17 @@ export default {
             if (res.code == 0) {
               this.$message.success(res.msg);
               this.$emit(this.closeDialogEvent, { refresh: true });
+              if (this.isModify) {
+                let clusterInfo = getClusterInfo();
+                if (
+                  clusterInfo &&
+                  clusterInfo.id &&
+                  clusterInfo.id == this.clusterInfo.id &&
+                  clusterInfo.clusterName != data.clusterName
+                ) {
+                  this.switchCluster(data);
+                }
+              }
             } else {
               notification.error({
                 message: "error",
@@ -138,6 +152,9 @@ export default {
       this.data = [];
       this.$emit(this.closeDialogEvent, { refresh: false });
     },
+    ...mapMutations({
+      switchCluster: CLUSTER.SWITCH,
+    }),
   },
 };
 const defaultInfo = { clusterName: "", address: "", properties: "" };