增加消息转发功能.

ui/src/utils/api.js

@@ -300,6 +300,10 @@ export const KafkaMessageApi = {
     url: "/message/send/statistics",
     method: "post",
   },
+  forward: {
+    url: "/message/forward",
+    method: "post",
+  },
 };
 
 export const KafkaClientQuotaApi = {

ui/src/views/message/ForwardMessage.vue

@@ -0,0 +1,248 @@
+<template>
+  <a-modal
+    title="转发消息"
+    :visible="show"
+    :width="600"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="true"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <div>
+          <h4>选择集群</h4>
+          <hr />
+          <div class="message-detail" id="message-detail">
+            <a-form
+              :form="form"
+              :label-col="{ span: 5 }"
+              :wrapper-col="{ span: 18 }"
+              @submit="handleSubmit"
+            >
+              <a-form-item label="集群">
+                <a-select
+                  class="select-width"
+                  @change="clusterChange"
+                  v-decorator="[
+                    'targetClusterId',
+                    {
+                      rules: [{ required: true, message: '请选择一个集群!' }],
+                    },
+                  ]"
+                  placeholder="请选择一个集群"
+                >
+                  <a-select-option
+                    v-for="v in clusterList"
+                    :key="v.id"
+                    :value="v.id"
+                  >
+                    {{ v.clusterName }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+              <a-form-item label="Topic">
+                <a-select
+                  class="select-width"
+                  show-search
+                  option-filter-prop="children"
+                  v-decorator="[
+                    'targetTopic',
+                    {
+                      rules: [{ required: true, message: '请选择一个topic!' }],
+                    },
+                  ]"
+                  placeholder="请选择一个topic"
+                >
+                  <a-select-option v-for="v in topicList" :key="v" :value="v">
+                    {{ v }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+              <a-form-item label="相同分区">
+                <a-radio-group
+                  v-decorator="[
+                    'samePartition',
+                    {
+                      initialValue: 'false',
+                      rules: [{ required: true, message: '请选择!' }],
+                    },
+                  ]"
+                >
+                  <a-radio value="false"> 否</a-radio>
+                  <a-radio value="true"> 是</a-radio>
+                </a-radio-group>
+                <span class="mar-left">和原消息保持同一个分区</span>
+              </a-form-item>
+              <a-form-item>
+                <div class="form-footer">
+                  <a-button type="primary" html-type="submit"> 提交</a-button>
+                </div>
+              </a-form-item>
+            </a-form>
+          </div>
+        </div>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaClusterApi, KafkaMessageApi, KafkaTopicApi } from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+import moment from "moment";
+
+export default {
+  name: "ForwardMessage",
+  props: {
+    record: {},
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      data: {},
+      loading: false,
+      showForwardDialog: false,
+      targetClusterId: -1,
+      clusterList: [],
+      partition: -1,
+      topicList: [],
+      form: this.$form.createForm(this, { name: "ForwardMessageForm" }),
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.getClusterList();
+      }
+    },
+  },
+  methods: {
+    getClusterList() {
+      this.loading = true;
+      request({
+        url: KafkaClusterApi.getClusterInfoList.url,
+        method: KafkaClusterApi.getClusterInfoList.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.clusterList = res.data;
+          this.targetClusterId = this.clusterList[0].id;
+        }
+      });
+    },
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          const params = {
+            message: Object.assign({}, this.record),
+          };
+          this.forward({ ...params, ...values });
+        }
+      });
+    },
+    handleCancel() {
+      this.$emit("closeForwardDialog", { refresh: false });
+    },
+    formatTime(time) {
+      return time == -1 ? -1 : moment(time).format("YYYY-MM-DD HH:mm:ss:SSS");
+    },
+    clusterChange(e) {
+      this.getTopicNameList(e);
+    },
+    forward(params) {
+      this.loading = true;
+      request({
+        url: KafkaMessageApi.forward.url,
+        method: KafkaMessageApi.forward.method,
+        data: params,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.$message.success(res.msg);
+        }
+      });
+    },
+    openForwardDialog() {
+      this.showForwardDialog = true;
+    },
+    closeForwardDialog() {
+      this.showForwardDialog = false;
+    },
+    getTopicNameList(clusterInfoId) {
+      this.loading = true;
+      request({
+        url: KafkaTopicApi.getTopicNameList.url,
+        method: KafkaTopicApi.getTopicNameList.method,
+        headers: {
+          "X-Specific-Cluster-Info-Id": clusterInfoId,
+        },
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.topicList = res.data;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+  },
+};
+</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;
+}
+
+.center {
+  text-align: center;
+}
+
+.mar-left {
+  margin-left: 1%;
+}
+
+.select-width {
+  width: 80%;
+}
+
+.form-footer {
+  text-align: center;
+  margin-top: 3%;
+}
+</style>

ui/src/views/message/MessageDetail.vue

@@ -120,8 +120,22 @@
               重新发送
             </a-button>
           </a-popconfirm>
+          <a-button
+            type="dashed"
+            class="mar-left"
+            icon="plus"
+            v-action:message:forward
+            @click="openForwardDialog()"
+          >
+            转发消息
+          </a-button>
         </div>
       </a-spin>
+      <ForwardMessage
+        :visible="showForwardDialog"
+        :record="data"
+        @closeForwardDialog="closeForwardDialog"
+      ></ForwardMessage>
     </div>
   </a-modal>
 </template>
@@ -131,9 +145,11 @@ import request from "@/utils/request";
 import { KafkaMessageApi } from "@/utils/api";
 import notification from "ant-design-vue/lib/notification";
 import moment from "moment";
+import ForwardMessage from "@/views/message/ForwardMessage.vue";
 
 export default {
   name: "MessageDetail",
+  components: { ForwardMessage },
   props: {
     record: {},
     visible: {
@@ -151,6 +167,7 @@ export default {
       valueDeserializer: "String",
       consumerDetail: [],
       columns,
+      showForwardDialog: false,
     };
   },
   watch: {
@@ -232,6 +249,12 @@ export default {
         }
       });
     },
+    openForwardDialog() {
+      this.showForwardDialog = true;
+    },
+    closeForwardDialog() {
+      this.showForwardDialog = false;
+    },
   },
 };
 const columns = [
@@ -264,4 +287,7 @@ const columns = [
   max-width: 80% !important;
   vertical-align: top !important;
 }
+.mar-left {
+  margin-left: 1%;
+}
 </style>