根据时间戳重围消费位点

ui/src/views/group/ConsumerDetail.vue

@@ -40,7 +40,11 @@
             </a-button>
           </a-popconfirm>
 
-          <a-button size="small" type="danger" style="margin-right: 1%"
+          <a-button
+            size="small"
+            type="danger"
+            style="margin-right: 1%"
+            @click="openResetOffsetByTimeDialog(k)"
             >时间戳
           </a-button>
           <hr />
@@ -103,6 +107,12 @@
             </a-form-item>
           </a-form>
         </a-modal>
+        <ResetOffsetByTime
+          :visible="showResetOffsetByTimeDialog"
+          :group="group"
+          :topic="select.topic"
+          @closeResetOffsetByTimeDialog="closeResetOffsetByTimeDialog"
+        ></ResetOffsetByTime>
       </a-spin>
     </div>
   </a-modal>
@@ -112,9 +122,11 @@
 import request from "@/utils/request";
 import { KafkaConsumerApi } from "@/utils/api";
 import notification from "ant-design-vue/es/notification";
+import ResetOffsetByTime from "@/views/group/ResetOffsetByTime";
 
 export default {
   name: "ConsumerDetail",
+  components: { ResetOffsetByTime },
   props: {
     group: {
       type: String,
@@ -139,6 +151,7 @@ export default {
       resetPartitionOffsetForm: this.$form.createForm(this, {
         name: "resetPartitionOffsetForm",
       }),
+      showResetOffsetByTimeDialog: false,
     };
   },
   watch: {
@@ -221,6 +234,16 @@ export default {
         }
       });
     },
+    openResetOffsetByTimeDialog(topic) {
+      this.select.topic = topic;
+      this.showResetOffsetByTimeDialog = true;
+    },
+    closeResetOffsetByTimeDialog(params) {
+      this.showResetOffsetByTimeDialog = false;
+      if (params.refresh) {
+        this.getConsumerDetail();
+      }
+    },
   },
 };
 

ui/src/views/group/ResetOffsetByTime.vue

@@ -0,0 +1,116 @@
+<template>
+  <a-modal
+    title="重置消费位点"
+    :visible="show"
+    :width="600"
+    :mask="false"
+    :destroyOnClose="true"
+    :maskClosable="false"
+    @cancel="handleCancel"
+    @ok="resetOffset"
+    okText="提交"
+    cancelText="取消"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <a-form
+          :form="resetOffsetForm"
+          :label-col="{ span: 8 }"
+          :wrapper-col="{ span: 12 }"
+        >
+          <a-form-item label="重置消费位点到">
+            <a-date-picker
+              show-time
+              placeholder="选择重置到哪个时间"
+              :locale="locale"
+              v-decorator="[
+                'dateTime',
+                {
+                  rules: [{ required: true, message: '输入消费位点!' }],
+                },
+              ]"
+            />
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaConsumerApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+
+import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
+
+import moment from "moment";
+export default {
+  name: "ResetOffsetByTime",
+  props: {
+    group: {
+      type: String,
+      default: "",
+    },
+    topic: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      locale,
+      show: this.visible,
+      loading: false,
+      resetOffsetForm: this.$form.createForm(this, {
+        name: "resetOffsetForm",
+      }),
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    },
+  },
+  methods: {
+    handleCancel() {
+      this.$emit("closeResetOffsetByTimeDialog", {});
+    },
+    resetOffset() {
+      this.resetOffsetForm.validateFields((e, v) => {
+        if (e) {
+          return;
+        }
+        v.dateStr = moment(v.dateTime).format("YYYY-MM-DD HH:mm:ss");
+        const data = { dateStr: v.dateStr };
+        data.groupId = this.group;
+        data.topic = this.topic;
+        data.level = 1;
+        data.type = 3;
+        this.loading = true;
+        request({
+          url: KafkaConsumerApi.resetOffset.url,
+          method: KafkaConsumerApi.resetOffset.method,
+          data: data,
+        }).then((res) => {
+          this.loading = false;
+          if (res.code != 0) {
+            notification.error({
+              message: "error",
+              description: res.msg,
+            });
+          } else {
+            this.$emit("closeResetOffsetByTimeDialog", { refresh: true });
+          }
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style scoped></style>