From 8545cba28ec35cd4367097ffa56055d659672215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=99=93=E4=B8=9C?= <763795151@qq.com>
Date: Mon, 25 Oct 2021 21:02:33 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9B=86=E7=BE=A4=E5=90=8C=E6=AD=A5-=E3=80=8B?=
 =?UTF-8?q?=E6=9C=80=E5=B0=8F=E4=BD=8D=E7=A7=BB=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/op/MinOffsetAlignment.vue | 200 +++++++++++++++++++++++++
 ui/src/views/op/Operation.vue          |  51 +++++--
 ui/src/views/op/SyncConsumerOffset.vue |   2 +-
 3 files changed, 242 insertions(+), 11 deletions(-)
 create mode 100644 ui/src/views/op/MinOffsetAlignment.vue

diff --git a/ui/src/views/op/MinOffsetAlignment.vue b/ui/src/views/op/MinOffsetAlignment.vue
new file mode 100644
index 0000000..588116a
--- /dev/null
+++ b/ui/src/views/op/MinOffsetAlignment.vue
@@ -0,0 +1,200 @@
+<template>
+  <a-modal
+    title="最小位移对齐"
+    :visible="show"
+    :width="1000"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <a-form
+          :form="form"
+          :label-col="{ span: 5 }"
+          :wrapper-col="{ span: 12 }"
+          @submit="handleSubmit"
+        >
+          <a-form-item label="消费组">
+            <a-select
+              @change="handleGroupChange"
+              show-search
+              option-filter-prop="children"
+              v-decorator="[
+                'groupId',
+                { rules: [{ required: true, message: '请选择一个消费组!' }] },
+              ]"
+              placeholder="请选择一个消费组"
+            >
+              <a-select-option v-for="v in groupIdList" :key="v" :value="v">
+                {{ v }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="topic">
+            <a-select
+              show-search
+              option-filter-prop="children"
+              v-decorator="[
+                'topic',
+                { 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="kafka地址">
+            <a-input
+              v-decorator="[
+                'address',
+                {
+                  rules: [{ required: true, message: '输入待同步kafka地址!' }],
+                },
+              ]"
+              placeholder="输入待同步kafka地址"
+            />
+          </a-form-item>
+          <a-form-item label="kafka属性">
+            <a-textarea
+              rows="5"
+              placeholder="除了地址，其它kafka属性配置，如：
+request.timeout.ms=6000"
+              v-decorator="['properties']"
+            />
+          </a-form-item>
+          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+            <a-button type="primary" html-type="submit"> 提交</a-button>
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaConsumerApi, KafkaOpApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+
+export default {
+  name: "MinOffsetAlignment",
+  props: {
+    topic: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      data: [],
+      loading: false,
+      form: this.$form.createForm(this, { name: "coordinated" }),
+      topicList: [],
+      groupIdList: [],
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.getGroupIdList();
+      }
+    },
+  },
+  methods: {
+    getGroupIdList() {
+      request({
+        url: KafkaConsumerApi.getGroupIdList.url,
+        method: KafkaConsumerApi.getGroupIdList.method,
+      }).then((res) => {
+        if (res.code == 0) {
+          this.groupIdList = res.data;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          if (values.properties) {
+            const properties = {};
+            values.properties.split("\n").forEach((e) => {
+              const c = e.split("=");
+              c.split;
+              if (c.length > 1) {
+                let k = c[0].trim(),
+                  v = c[1].trim();
+                for (let j = 2; j < c.length; j++) {
+                  v += "=" + c[j];
+                }
+                if (k && v) {
+                  properties[k] = v;
+                }
+              }
+            });
+            values.properties = properties;
+          } else {
+            values.properties = {};
+          }
+          this.loading = true;
+          request({
+            url: KafkaOpApi.syncConsumerOffset.url,
+            method: KafkaOpApi.syncConsumerOffset.method,
+            data: values,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.$message.success(res.msg);
+              this.$emit("closeMinOffsetAlignmentDialog", { refresh: true });
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    handleCancel() {
+      this.groupIdList = [];
+      this.topicList = [];
+      this.$emit("closeMinOffsetAlignmentDialog", { refresh: false });
+    },
+    handleGroupChange(groupId) {
+      this.loading = true;
+      request({
+        url: KafkaConsumerApi.getSubscribeTopicList.url + "?groupId=" + groupId,
+        method: KafkaConsumerApi.getSubscribeTopicList.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.topicList = res.data;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/ui/src/views/op/Operation.vue b/ui/src/views/op/Operation.vue
index 64395c0..b4da1bb 100644
--- a/ui/src/views/op/Operation.vue
+++ b/ui/src/views/op/Operation.vue
@@ -1,7 +1,34 @@
 <template>
   <div class="content">
+    <div class="content-module">
+      <a-card title="副本管理" style="width: 100%; text-align: left">
+        <p>
+          <a-button type="primary"> 首选副本作为leader </a-button>
+          <label>说明：</label>
+          <span>将集群中所有分区leader副本设置为首选副本</span>
+        </p>
+      </a-card>
+    </div>
     <div class="content-module">
       <a-card title="数据同步" style="width: 100%; text-align: left">
+        <!--        <p>-->
+        <!--          <a-button type="primary" @click="openSyncConsumerOffsetDialog">-->
+        <!--            数据同步方案-->
+        <!--          </a-button>-->
+        <!--          <label>说明：</label>-->
+        <!--          <span-->
+        <!--          >数据同步方案</span-->
+        <!--          >-->
+        <!--        </p>-->
+        <p>
+          <a-button type="primary" @click="openMinOffsetAlignmentDialog">
+            最小位移对齐
+          </a-button>
+          <label>说明：</label>
+          <span
+            >同步消费位点时需要获取两端集群中订阅分区的最小位移进行消费位点计算，如需后面同步消费位点，在进行数据同步前，先进行最小位移对齐</span
+          >
+        </p>
         <p>
           <a-button type="primary" @click="openSyncConsumerOffsetDialog">
             同步消费位点
@@ -13,32 +40,30 @@
         </p>
       </a-card>
     </div>
-    <div class="content-module">
-      <a-card title="副本管理" style="width: 100%; text-align: left">
-        <p>
-          <a-button type="primary"> 首选副本作为leader </a-button>
-          <label>说明：</label>
-          <span>将集群中所有分区leader副本设置为首选副本</span>
-        </p>
-      </a-card>
-    </div>
     <SyncConsumerOffset
       :visible="syncData.showSyncConsumerOffsetDialog"
       @closeSyncConsumerOffsetDialog="closeSyncConsumerOffsetDialog"
     >
     </SyncConsumerOffset>
+    <MinOffsetAlignment
+      :visible="syncData.showMinOffsetAlignmentDialog"
+      @closeMinOffsetAlignmentDialog="closeMinOffsetAlignmentDialog"
+    >
+    </MinOffsetAlignment>
   </div>
 </template>
 
 <script>
 import SyncConsumerOffset from "@/views/op/SyncConsumerOffset";
+import MinOffsetAlignment from "@/views/op/MinOffsetAlignment";
 export default {
   name: "Operation",
-  components: { SyncConsumerOffset },
+  components: { SyncConsumerOffset, MinOffsetAlignment },
   data() {
     return {
       syncData: {
         showSyncConsumerOffsetDialog: false,
+        showMinOffsetAlignmentDialog: false,
       },
     };
   },
@@ -49,6 +74,12 @@ export default {
     closeSyncConsumerOffsetDialog() {
       this.syncData.showSyncConsumerOffsetDialog = false;
     },
+    openMinOffsetAlignmentDialog() {
+      this.syncData.showMinOffsetAlignmentDialog = true;
+    },
+    closeMinOffsetAlignmentDialog() {
+      this.syncData.showMinOffsetAlignmentDialog = false;
+    },
   },
 };
 </script>
diff --git a/ui/src/views/op/SyncConsumerOffset.vue b/ui/src/views/op/SyncConsumerOffset.vue
index 6c65434..e63b2fd 100644
--- a/ui/src/views/op/SyncConsumerOffset.vue
+++ b/ui/src/views/op/SyncConsumerOffset.vue
@@ -2,7 +2,7 @@
   <a-modal
     title="同步消费位点"
     :visible="show"
-    :width="800"
+    :width="1000"
     :mask="false"
     :destroyOnClose="true"
     :footer="null"