From 3b21fc4cd8b05c0a911b527cc640b592117f02ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=99=93=E4=B8=9C?= <763795151@qq.com>
Date: Sun, 5 Dec 2021 23:18:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E4=B8=80=E4=B8=AA=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/App.vue                        |   4 +-
 ui/src/router/index.js                |   6 +
 ui/src/views/message/Message.vue      |  54 ++++++++
 ui/src/views/message/SearchByTime.vue | 173 ++++++++++++++++++++++++++
 4 files changed, 236 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/views/message/Message.vue
 create mode 100644 ui/src/views/message/SearchByTime.vue

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 0d92d81..23d88fb 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -9,6 +9,8 @@
       ><router-link to="/topic-page" class="pad-l-r">Topic</router-link>
       <span>|</span
       ><router-link to="/group-page" class="pad-l-r">消费组</router-link>
+      <span>|</span
+      ><router-link to="/message-page" class="pad-l-r">消息</router-link>
       <span v-show="config.enableAcl">|</span
       ><router-link to="/acl-page" class="pad-l-r" v-show="config.enableAcl"
         >Acl</router-link
@@ -45,7 +47,6 @@ export default {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
 }
 
@@ -60,6 +61,7 @@ export default {
   padding-top: 1%;
   padding-bottom: 1%;
   margin-bottom: 1%;
+  text-align: center;
 }
 
 #nav a {
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index e92c3f7..2904198 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -43,6 +43,12 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "cluster" */ "../views/cluster/Cluster.vue"),
   },
+  {
+    path: "/message-page",
+    name: "Message",
+    component: () =>
+      import(/* webpackChunkName: "cluster" */ "../views/message/Message.vue"),
+  },
 ];
 
 const router = new VueRouter({
diff --git a/ui/src/views/message/Message.vue b/ui/src/views/message/Message.vue
new file mode 100644
index 0000000..cd0af11
--- /dev/null
+++ b/ui/src/views/message/Message.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="content">
+    <a-spin :spinning="loading">
+      <a-tabs default-active-key="1" size="large" tabPosition="top">
+        <a-tab-pane key="1" tab="根据时间查询消息">
+          <SearchByTime :topic-list="topicList"></SearchByTime>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="根据位移查询消息" force-render>
+          根据位移查询消息
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="消息发送"> 消息发送1 </a-tab-pane>
+      </a-tabs>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import SearchByTime from "@/views/message/SearchByTime";
+import request from "@/utils/request";
+import { KafkaTopicApi } from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+export default {
+  name: "Message",
+  components: { SearchByTime },
+  data() {
+    return {
+      loading: false,
+      topicList: [],
+    };
+  },
+  methods: {
+    getTopicNameList() {
+      request({
+        url: KafkaTopicApi.getTopicNameList.url,
+        method: KafkaTopicApi.getTopicNameList.method,
+      }).then((res) => {
+        if (res.code == 0) {
+          this.topicList = res.data;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+  },
+  created() {
+    this.getTopicNameList();
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/ui/src/views/message/SearchByTime.vue b/ui/src/views/message/SearchByTime.vue
new file mode 100644
index 0000000..e8e14a5
--- /dev/null
+++ b/ui/src/views/message/SearchByTime.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="tab-content">
+    <a-spin :spinning="loading">
+      <div id="components-form-advanced-search">
+        <a-form
+          class="ant-advanced-search-form"
+          :form="form"
+          @submit="handleSearch"
+        >
+          <a-row :gutter="24">
+            <a-col :span="6">
+              <a-form-item label="topic">
+                <a-select
+                  class="type-select"
+                  @change="handleTopicChange"
+                  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-col>
+            <a-col :span="6">
+              <a-form-item label="分区">
+                <a-select
+                  class="type-select"
+                  show-search
+                  option-filter-prop="children"
+                  v-model="selectPartition"
+                  placeholder="请选择一个分区"
+                >
+                  <a-select-option v-for="v in partitions" :key="v" :value="v">
+                    <span v-if="v == -1">全部</span> <span v-else>{{ v }}</span>
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="10">
+              <a-form-item label="时间">
+                <a-range-picker
+                  v-decorator="['time', rangeConfig]"
+                  show-time
+                  format="YYYY-MM-DD HH:mm:ss"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="2" :style="{ textAlign: 'right' }">
+              <a-form-item>
+                <a-button type="primary" html-type="submit"> 搜索</a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaTopicApi } from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+
+export default {
+  name: "SearchByTime",
+  components: {},
+  props: {
+    topicList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: this.$form.createForm(this, { name: "message_search_time" }),
+      partitions: [],
+      selectPartition: undefined,
+      rangeConfig: {
+        rules: [{ type: "array", required: true, message: "请选择时间!" }],
+      },
+    };
+  },
+  methods: {
+    handleSearch() {},
+    getPartitionInfo(topic) {
+      this.loading = true;
+      request({
+        url: KafkaTopicApi.getPartitionInfo.url + "?topic=" + topic,
+        method: KafkaTopicApi.getPartitionInfo.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.partitions = res.data.map((v) => v.partition);
+          this.partitions.splice(0, 0, -1);
+        }
+      });
+    },
+    handleTopicChange(topic) {
+      this.selectPartition = -1;
+      this.getPartitionInfo(topic);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tab-content {
+  width: 100%;
+  height: 100%;
+}
+
+.ant-advanced-search-form {
+  padding: 24px;
+  background: #fbfbfb;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+}
+
+.ant-advanced-search-form .ant-form-item {
+  display: flex;
+}
+
+.ant-advanced-search-form .ant-form-item-control-wrapper {
+  flex: 1;
+}
+
+#components-form-topic-advanced-search .ant-form {
+  max-width: none;
+  margin-bottom: 1%;
+}
+
+#components-form-advanced-search .search-result-list {
+  margin-top: 16px;
+  border: 1px dashed #e9e9e9;
+  border-radius: 6px;
+  background-color: #fafafa;
+  min-height: 200px;
+  text-align: center;
+  padding-top: 80px;
+}
+
+.input-w {
+  width: 400px;
+}
+
+.operation-row-button {
+  height: 4%;
+  text-align: left;
+  margin-bottom: 8px;
+}
+
+.operation-btn {
+  margin-right: 3%;
+}
+
+.type-select {
+  width: 200px !important;
+}
+</style>