发送统计

ui/src/utils/api.js

@@ -129,6 +129,10 @@ export const KafkaTopicApi = {
     url: "/topic/replica/throttle",
     method: "post",
   },
+  sendStats: {
+    url: "/topic/send/stats",
+    method: "get",
+  },
 };
 
 export const KafkaConsumerApi = {

ui/src/views/topic/SendStats.vue

@@ -0,0 +1,115 @@
+<template>
+  <a-modal
+    :title="topic + '发送统计'"
+    :visible="show"
+    :width="1000"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <h4>今天发送消息数：{{ today.total }}</h4>
+        <a-table
+          :columns="columns"
+          :data-source="today.detail"
+          bordered
+          :rowKey="(record) => record.partition"
+        >
+        </a-table>
+        <hr />
+        <h4>昨天发送消息数：{{ yesterday.total }}</h4>
+        <a-table
+          :columns="columns"
+          :data-source="yesterday.detail"
+          bordered
+          :rowKey="(record) => record.partition"
+        >
+        </a-table>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaTopicApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+
+export default {
+  name: "SendStats",
+  props: {
+    topic: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      columns: columns,
+      show: this.visible,
+      data: [],
+      loading: false,
+      yesterday: {},
+      today: {},
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.sendStatus();
+      }
+    },
+  },
+  methods: {
+    sendStatus() {
+      this.loading = true;
+      const api = KafkaTopicApi.sendStats;
+      request({
+        url: api.url + "?topic=" + this.topic,
+        method: api.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.data = res.data;
+          this.yesterday = this.data.yesterday;
+          this.today = this.data.today;
+        }
+      });
+    },
+    handleCancel() {
+      this.data = [];
+      this.yesterday = {};
+      this.today = {};
+      this.$emit("closeMessageStatsDialog", {});
+    },
+  },
+};
+
+const columns = [
+  {
+    title: "分区",
+    dataIndex: "partition",
+    key: "partition",
+  },
+  {
+    title: "数量",
+    dataIndex: "num",
+    key: "num",
+  },
+];
+</script>
+
+<style scoped></style>

ui/src/views/topic/Topic.vue

@@ -109,7 +109,7 @@
               size="small"
               href="javascript:;"
               class="operation-btn"
-              @click="openMessageStatsDialog"
+              @click="openMessageStatsDialog(record.name)"
               >发送统计
             </a-button>
             <a-button
@@ -157,6 +157,11 @@
           :topic="selectDetail.resourceName"
           @closeThrottleDialog="closeThrottleDialog"
         ></ConfigTopicThrottle>
+        <SendStats
+          :visible="showSendStatsDialog"
+          :topic="selectDetail.resourceName"
+          @closeMessageStatsDialog="closeMessageStatsDialog"
+        ></SendStats>
       </div>
     </a-spin>
   </div>
@@ -173,6 +178,7 @@ import ConsumedDetail from "@/views/topic/ConsumedDetail";
 import TopicConfig from "@/views/topic/TopicConfig";
 import UpdateReplica from "@/views/topic/UpdateReplica";
 import ConfigTopicThrottle from "@/views/topic/ConfigTopicThrottle";
+import SendStats from "@/views/topic/SendStats";
 
 export default {
   name: "Topic",
@@ -184,6 +190,7 @@ export default {
     TopicConfig,
     UpdateReplica,
     ConfigTopicThrottle,
+    SendStats,
   },
   data() {
     return {
@@ -207,6 +214,7 @@ export default {
       showTopicConfigDialog: false,
       showUpdateReplicaDialog: false,
       showThrottleDialog: false,
+      showSendStatsDialog: false,
     };
   },
   methods: {
@@ -294,8 +302,12 @@ export default {
     closeUpdateReplicaDialog() {
       this.showUpdateReplicaDialog = false;
     },
-    openMessageStatsDialog() {
-      this.$message.info("此功能尚不支持，下个版本支持");
+    openMessageStatsDialog(topic) {
+      this.showSendStatsDialog = true;
+      this.selectDetail.resourceName = topic;
+    },
+    closeMessageStatsDialog() {
+      this.showSendStatsDialog = false;
     },
     openThrottleDialog(topic) {
       this.showThrottleDialog = true;