数据同步方案

ui/src/views/op/DataSyncScheme.vue

@@ -0,0 +1,56 @@
+<template>
+  <a-modal
+    title="数据同步方案"
+    :visible="show"
+    :width="800"
+    :mask="false"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      不同方案针对场景不一样。
+      <h3>方案一</h3>
+      双读、双写。
+      <p />
+      <h3>方案二</h3>
+      将新集群的节点添加进来，副本重分配，最后移除老节点。
+      <p />
+      <h3>方案三</h3>
+      迁移流程：<a
+        href="https://blog.csdn.net/x763795151/article/details/121070563"
+        >kafka新老集群平滑迁移实践</a
+      >，需要使用到下面的同步功能。
+      <p />
+    </div>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: "DataSyncScheme",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    },
+  },
+  methods: {
+    handleCancel() {
+      this.$emit("closeDataSyncSchemeDialog", { refresh: false });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/op/Operation.vue

@@ -14,7 +14,9 @@
     <div class="content-module">
       <a-card title="数据同步" style="width: 100%; text-align: left">
         <p v-show="false">
-          <a-button type="primary"> 数据同步方案 </a-button>
+          <a-button type="primary" @click="openDataSyncSchemeDialog">
+            数据同步方案
+          </a-button>
           <label>说明：</label>
           <span>新老集群迁移、数据同步解决方案</span>
         </p>
@@ -59,6 +61,11 @@
       :visible="replicationManager.showElectPreferredLeaderDialog"
       @closeElectPreferredLeaderDialog="closeElectPreferredLeaderDialog"
     ></ElectPreferredLeader>
+    <DataSyncScheme
+      :visible="syncData.showDataSyncSchemeDialog"
+      @closeDataSyncSchemeDialog="closeDataSyncSchemeDialog"
+    >
+    </DataSyncScheme>
   </div>
 </template>
 
@@ -67,6 +74,7 @@ import SyncConsumerOffset from "@/views/op/SyncConsumerOffset";
 import MinOffsetAlignment from "@/views/op/MinOffsetAlignment";
 import OffsetAlignmentTable from "@/views/op/OffsetAlignmentTable";
 import ElectPreferredLeader from "@/views/op/ElectPreferredLeader";
+import DataSyncScheme from "@/views/op/DataSyncScheme";
 export default {
   name: "Operation",
   components: {
@@ -74,6 +82,7 @@ export default {
     MinOffsetAlignment,
     OffsetAlignmentTable,
     ElectPreferredLeader,
+    DataSyncScheme,
   },
   data() {
     return {
@@ -81,6 +90,7 @@ export default {
         showSyncConsumerOffsetDialog: false,
         showMinOffsetAlignmentDialog: false,
         showOffsetAlignmentInfoDialog: false,
+        showDataSyncSchemeDialog: false,
       },
       replicationManager: {
         showElectPreferredLeaderDialog: false,
@@ -106,6 +116,12 @@ export default {
     closeOffsetAlignmentInfoDialog() {
       this.syncData.showOffsetAlignmentInfoDialog = false;
     },
+    openDataSyncSchemeDialog() {
+      this.syncData.showDataSyncSchemeDialog = true;
+    },
+    closeDataSyncSchemeDialog() {
+      this.syncData.showDataSyncSchemeDialog = false;
+    },
     openElectPreferredLeaderDialog() {
       this.replicationManager.showElectPreferredLeaderDialog = true;
     },