主页展示Broker API的版本兼容信息

ui/src/utils/api.js

@@ -203,6 +203,10 @@ export const KafkaClusterApi = {
     url: "/cluster/info/peek",
     method: "get",
   },
+  getBrokerApiVersionInfo: {
+    url: "/cluster/info/api/version",
+    method: "get",
+  },
 };
 
 export const KafkaOpApi = {

ui/src/views/Home.vue

@@ -1,25 +1,63 @@
 <template>
   <div class="home">
-    <a-card title="kafka console 配置" style="width: 100%">
-      <!--      <a slot="extra" href="#">more</a>-->
+    <a-card title="控制台默认配置" class="card-style">
       <p v-for="(v, k) in config" :key="k">{{ k }}={{ v }}</p>
     </a-card>
+    <p></p>
+    <hr />
+    <h3>kafka API 版本兼容性</h3>
+    <a-table
+      :columns="columns"
+      :data-source="brokerApiVersionInfo"
+      bordered
+      row-key="brokerId"
+    >
+      <div slot="operation" slot-scope="record">
+        <a-button
+          size="small"
+          href="javascript:;"
+          class="operation-btn"
+          @click="openApiVersionInfoDialog(record)"
+          >详情
+        </a-button>
+      </div>
+    </a-table>
+    <VersionInfo
+      :version-info="apiVersionInfo"
+      :visible="showApiVersionInfoDialog"
+      @closeApiVersionInfoDialog="closeApiVersionInfoDialog"
+    >
+    </VersionInfo>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
 import request from "@/utils/request";
-import { KafkaConfigApi } from "@/utils/api";
+import { KafkaConfigApi, KafkaClusterApi } from "@/utils/api";
 import notification from "ant-design-vue/lib/notification";
+import VersionInfo from "@/views/home/VersionInfo";
 export default {
   name: "Home",
-  components: {},
+  components: { VersionInfo },
   data() {
     return {
       config: {},
+      columns,
+      brokerApiVersionInfo: [],
+      showApiVersionInfoDialog: false,
+      apiVersionInfo: [],
     };
   },
+  methods: {
+    openApiVersionInfoDialog(record) {
+      this.apiVersionInfo = record.versionInfo;
+      this.showApiVersionInfoDialog = true;
+    },
+    closeApiVersionInfoDialog() {
+      this.showApiVersionInfoDialog = false;
+    },
+  },
 
   created() {
     request({
@@ -35,6 +73,51 @@ export default {
         });
       }
     });
+    request({
+      url: KafkaClusterApi.getBrokerApiVersionInfo.url,
+      method: KafkaClusterApi.getBrokerApiVersionInfo.method,
+    }).then((res) => {
+      if (res.code == 0) {
+        this.brokerApiVersionInfo = res.data;
+      } else {
+        notification.error({
+          message: "error",
+          description: res.msg,
+        });
+      }
+    });
   },
 };
+const columns = [
+  {
+    title: "id",
+    dataIndex: "brokerId",
+    key: "brokerId",
+  },
+  {
+    title: "地址",
+    dataIndex: "host",
+    key: "host",
+  },
+  {
+    title: "支持的api数量",
+    dataIndex: "supportNums",
+    key: "supportNums",
+  },
+  {
+    title: "不支持的api数量",
+    dataIndex: "unSupportNums",
+    key: "unSupportNums",
+  },
+  {
+    title: "操作",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+  },
+];
 </script>
+<style scoped>
+.card-style {
+  width: 100%;
+}
+</style>

ui/src/views/home/VersionInfo.vue

@@ -0,0 +1,61 @@
+<template>
+  <a-modal
+    title="API版本信息"
+    :visible="show"
+    :width="600"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <h3>格式说明</h3>
+      <p>请求类型(1)：0 to n(2) [usage: v](3)</p>
+      <ol>
+        <li>表示客户端发出的请求类型</li>
+        <li>该请求在broker中支持的版本号区间</li>
+        <li>
+          表示当前控制台的kafka客户端使用的是v版本，如果是UNSUPPORTED，说明broker版本太老，无法处理控制台的这些请求，可能影响相关功能的使用
+        </li>
+      </ol>
+
+      <hr />
+      <ol>
+        <li v-for="info in versionInfo" v-bind:key="info">{{ info }}</li>
+      </ol>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: "APIVersionInfo",
+  props: {
+    versionInfo: {
+      type: Array,
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    },
+  },
+  methods: {
+    handleCancel() {
+      this.$emit("closeApiVersionInfoDialog", {});
+    },
+  },
+};
+</script>
+
+<style scoped></style>