查询消息详情信息

ui/src/utils/api.js

@@ -232,4 +232,12 @@ export const KafkaMessageApi = {
     url: "/message/search/offset",
     method: "post",
   },
+  searchDetail: {
+    url: "/message/search/detail",
+    method: "post",
+  },
+  deserializerList: {
+    url: "/message/deserializer/list",
+    method: "get",
+  },
 };

ui/src/views/message/MessageDetail.vue

@@ -0,0 +1,204 @@
+<template>
+  <a-modal
+    title="消息详情"
+    :visible="show"
+    :width="800"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <div>
+          <h4>消息信息</h4>
+          <hr />
+          <div class="message-detail" id="message-detail">
+            <p>
+              <label class="title">Topic: </label>
+              <span class="m-info">{{ data.topic }}</span>
+            </p>
+            <p>
+              <label class="title">分区: </label>
+              <span class="m-info">{{ data.partition }}</span>
+            </p>
+            <p>
+              <label class="title">偏移: </label>
+              <span class="m-info">{{ data.offset }}</span>
+            </p>
+            <p>
+              <label class="title">消息头: </label>
+              <span class="m-info">{{ data.headers }}</span>
+            </p>
+            <p>
+              <label class="title">时间类型: </label>
+              <span class="m-info"
+                >{{
+                  data.timestampType
+                }}(表示下面的时间是哪种类型：消息创建、写入日志亦或其它)</span
+              >
+            </p>
+            <p>
+              <label class="title">时间: </label>
+              <span class="m-info">{{ formatTime(data.timestamp) }}</span>
+            </p>
+            <p>
+              <label class="title">Key反序列化: </label>
+              <a-select
+                style="width: 120px"
+                v-model="keyDeserializer"
+                @change="keyDeserializerChange"
+              >
+                <a-select-option
+                  v-for="v in deserializerList"
+                  :key="v"
+                  :value="v"
+                >
+                  {{ v }}
+                </a-select-option>
+              </a-select>
+              <span>选一个合适反序列化器，要不可能乱码了</span>
+            </p>
+            <p>
+              <label class="title">Key: </label>
+              <span class="m-info">{{ data.key }}</span>
+            </p>
+            <p>
+              <label class="title">消息体反序列化: </label>
+              <a-select
+                v-model="valueDeserializer"
+                style="width: 120px"
+                @change="valueDeserializerChange"
+              >
+                <a-select-option
+                  v-for="v in deserializerList"
+                  :key="v"
+                  :value="v"
+                >
+                  {{ v }}
+                </a-select-option>
+              </a-select>
+              <span>选一个合适反序列化器，要不可能乱码了</span>
+            </p>
+            <p>
+              <label class="title">消息体: </label>
+              <a-textarea
+                type="textarea"
+                :value="data.value"
+                :rows="5"
+                :read-only="true"
+              ></a-textarea>
+            </p>
+          </div>
+        </div>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaMessageApi } from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+import moment from "moment";
+
+export default {
+  name: "MessageDetail",
+  props: {
+    record: {},
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      data: {},
+      loading: false,
+      deserializerList: [],
+      keyDeserializer: "String",
+      valueDeserializer: "String",
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.getMessageDetail();
+        this.getDeserializerList();
+      }
+    },
+  },
+  methods: {
+    getMessageDetail() {
+      this.loading = false;
+      const params = Object.assign({}, this.record, {
+        keyDeserializer: this.keyDeserializer,
+        valueDeserializer: this.valueDeserializer,
+      });
+      request({
+        url: KafkaMessageApi.searchDetail.url,
+        method: KafkaMessageApi.searchDetail.method,
+        data: params,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.data = res.data;
+        }
+      });
+    },
+    getDeserializerList() {
+      request({
+        url: KafkaMessageApi.deserializerList.url,
+        method: KafkaMessageApi.deserializerList.method,
+      }).then((res) => {
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.deserializerList = res.data;
+        }
+      });
+    },
+    handleCancel() {
+      this.data = {};
+      this.$emit("closeDetailDialog", { refresh: false });
+    },
+    formatTime(time) {
+      return moment(time).format("YYYY-MM-DD HH:mm:ss:SSS");
+    },
+    keyDeserializerChange() {
+      this.getMessageDetail();
+    },
+    valueDeserializerChange() {
+      this.getMessageDetail();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.m-info {
+  /*text-decoration: underline;*/
+}
+.title {
+  width: 15%;
+  display: inline-block;
+  text-align: right;
+  margin-right: 2%;
+  font-weight: bold;
+}
+.ant-spin-container #message-detail textarea {
+  max-width: 80% !important;
+  vertical-align: top !important;
+}
+</style>

ui/src/views/message/MessageList.vue

@@ -4,22 +4,36 @@
       :columns="columns"
       :data-source="data"
       bordered
-      row-key="(record,index)=>{return index}"
+      :row-key="
+        (record, index) => {
+          return index;
+        }
+      "
     >
-      <div slot="operation" slot-scope="{}">
-        <a-button size="small" href="javascript:;" class="operation-btn"
+      <div slot="operation" slot-scope="record">
+        <a-button
+          size="small"
+          href="javascript:;"
+          class="operation-btn"
+          @click="openDetailDialog(record)"
           >消息详情
         </a-button>
       </div>
     </a-table>
+    <MessageDetail
+      :visible="showDetailDialog"
+      :record="record"
+      @closeDetailDialog="closeDetailDialog"
+    ></MessageDetail>
   </div>
 </template>
 
 <script>
 import moment from "moment";
+import MessageDetail from "@/views/message/MessageDetail";
 export default {
   name: "MessageList",
-  components: {},
+  components: { MessageDetail },
   props: {
     data: {
       type: Array,
@@ -28,8 +42,19 @@ export default {
   data() {
     return {
       columns: columns,
+      showDetailDialog: false,
+      record: {},
     };
   },
+  methods: {
+    openDetailDialog(record) {
+      this.record = record;
+      this.showDetailDialog = true;
+    },
+    closeDetailDialog() {
+      this.showDetailDialog = false;
+    },
+  },
 };
 const columns = [
   {

ui/src/views/message/SearchByOffset.vue

@@ -147,7 +147,7 @@ export default {
     },
   },
 };
-const defaultData = { realNum: 0, maxNum: 0 };
+const defaultData = [];
 </script>
 
 <style scoped>