From e8fe2ea1c799a0c50622c8b86b7dc7bb816e8851 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=99=93=E4=B8=9C?= <763795151@qq.com>
Date: Thu, 13 Jan 2022 14:19:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9B=86=E7=BE=A4=E5=90=8D=E7=A7=B0=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E4=B8=AD=E6=96=87=EF=BC=8C=E6=B6=88=E6=81=AF=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E5=8F=AF=E9=80=89=E6=8B=A9=E6=97=B6=E9=97=B4=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E9=A1=BA=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/utils/request.js                |  2 +-
 ui/src/views/message/MessageDetail.vue |  2 +-
 ui/src/views/message/MessageList.vue   | 83 +++++++++++++++-----------
 ui/src/views/op/AddClusterInfo.vue     | 17 ++++++
 4 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/ui/src/utils/request.js b/ui/src/utils/request.js
index 02f3ebd..119e8d8 100644
--- a/ui/src/utils/request.js
+++ b/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);
diff --git a/ui/src/views/message/MessageDetail.vue b/ui/src/views/message/MessageDetail.vue
index c2d6986..eaa7094 100644
--- a/ui/src/views/message/MessageDetail.vue
+++ b/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();
diff --git a/ui/src/views/message/MessageList.vue b/ui/src/views/message/MessageList.vue
index 36f5080..1a11647 100644
--- a/ui/src/views/message/MessageList.vue
+++ b/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>
diff --git a/ui/src/views/op/AddClusterInfo.vue b/ui/src/views/op/AddClusterInfo.vue
index 83faf7b..030d691 100644
--- a/ui/src/views/op/AddClusterInfo.vue
+++ b/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: "" };