topoc config

src/main/resources/application.yml

@@ -29,7 +29,7 @@ spring:
     name: kafka-console-ui
   # h2 database
   datasource:
-    url: jdbc:h2:file:${data.dir:${user.dir}}/data/db/kafak-console
+    url: jdbc:h2:file:${data.dir:${user.dir}}/data/db/kafka-console
 #    url: jdbc:h2:mem:testdb
     driver-class-name: org.h2.Driver
     username: kafka
@@ -40,7 +40,8 @@ spring:
   h2:
     console:
       enabled: true
-
+#      settings:
+#        web-allow-others: true
 
 logging:
   home: ./

ui/src/utils/api.js

@@ -54,6 +54,10 @@ export const KafkaConfigApi = {
     url: "/config",
     method: "get",
   },
+  getTopicConfig: {
+    url: "/config/topic",
+    method: "get",
+  },
   getBrokerConfig: {
     url: "/config/broker",
     method: "get",
@@ -78,6 +82,14 @@ export const KafkaConfigApi = {
     url: "/config/broker/logger",
     method: "delete",
   },
+  setTopicConfig: {
+    url: "/config/topic",
+    method: "post",
+  },
+  deleteTopicConfig: {
+    url: "/config/topic",
+    method: "delete",
+  },
 };
 
 export const KafkaTopicApi = {

ui/src/views/topic/EditConfig.vue

@@ -0,0 +1,114 @@
+<template>
+  <a-modal
+    title="编辑配置"
+    :visible="show"
+    :width="1000"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <a-form
+          :form="form"
+          :label-col="{ span: 5 }"
+          :wrapper-col="{ span: 12 }"
+          @submit="handleSubmit"
+        >
+          <a-form-item label="属性">
+            <a-input
+              :disabled="true"
+              v-decorator="['name', { initialValue: record.name }]"
+              placeholder="name"
+            />
+          </a-form-item>
+          <a-form-item label="值">
+            <a-input
+              v-decorator="[
+                'value',
+                {
+                  initialValue: record.value,
+                  rules: [{ required: true, message: '输入属性值!' }],
+                },
+              ]"
+              placeholder="value"
+            />
+          </a-form-item>
+          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+            <a-button type="primary" html-type="submit"> 提交 </a-button>
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaConfigApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+export default {
+  name: "EditTopicConfig",
+  props: {
+    topic: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    record: {
+      default: {},
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      data: [],
+      loading: false,
+      form: this.$form.createForm(this, { name: "coordinated" }),
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    },
+  },
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.loading = true;
+          const api = KafkaConfigApi.setTopicConfig;
+          request({
+            url: api.url,
+            method: api.method,
+            data: Object.assign({ entity: this.topic }, values),
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.$message.success(res.msg);
+              this.$emit("closeEditConfigDialog", { refresh: true });
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeEditConfigDialog", { refresh: false });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/topic/Topic.vue

@@ -91,6 +91,13 @@
               @click="openConsumedDetailDialog(record.name)"
               >消费详情
             </a-button>
+            <a-button
+              size="small"
+              href="javascript:;"
+              class="operation-btn"
+              @click="openTopicConfigDialog(record.name)"
+              >属性配置
+            </a-button>
           </div>
         </a-table>
         <PartitionInfo
@@ -114,6 +121,11 @@
           @closeConsumedDetailDialog="closeConsumedDetailDialog"
         >
         </ConsumedDetail>
+        <TopicConfig
+          :visible="showTopicConfigDialog"
+          :topic="selectDetail.resourceName"
+          @closeTopicConfigDialog="closeTopicConfigDialog"
+        ></TopicConfig>
       </div>
     </a-spin>
   </div>
@@ -127,10 +139,17 @@ import PartitionInfo from "@/views/topic/PartitionInfo";
 import CreateTopic from "@/views/topic/CreateTopic";
 import AddPartition from "@/views/topic/AddPartition";
 import ConsumedDetail from "@/views/topic/ConsumedDetail";
+import TopicConfig from "@/views/topic/TopicConfig";
 
 export default {
   name: "Topic",
-  components: { PartitionInfo, CreateTopic, AddPartition, ConsumedDetail },
+  components: {
+    PartitionInfo,
+    CreateTopic,
+    AddPartition,
+    ConsumedDetail,
+    TopicConfig,
+  },
   data() {
     return {
       queryParam: { type: "normal" },
@@ -150,6 +169,7 @@ export default {
       showCreateTopic: false,
       showAddPartition: false,
       showConsumedDetailDialog: false,
+      showTopicConfigDialog: false,
     };
   },
   methods: {
@@ -223,6 +243,13 @@ export default {
     closeConsumedDetailDialog() {
       this.showConsumedDetailDialog = false;
     },
+    openTopicConfigDialog(topic) {
+      this.showTopicConfigDialog = true;
+      this.selectDetail.resourceName = topic;
+    },
+    closeTopicConfigDialog() {
+      this.showTopicConfigDialog = false;
+    },
   },
   created() {
     this.getTopicList();

ui/src/views/topic/TopicConfig.vue

@@ -0,0 +1,203 @@
+<template>
+  <a-modal
+    :title="topic + '配置'"
+    :visible="show"
+    :width="1400"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <div>
+          <a-input-search
+            placeholder="属性"
+            style="width: 200px"
+            v-model="search"
+            @input="searchData"
+            @search="searchData"
+          />
+          <br /><br />
+        </div>
+
+        <a-table
+          :columns="columns"
+          :data-source="filterData"
+          bordered
+          :rowKey="(record) => record.name"
+        >
+          <div slot="operation" slot-scope="record">
+            <a-button
+              size="small"
+              href="javascript:;"
+              class="operation-btn"
+              v-show="!record.readOnly"
+              @click="openEditConfigDialog(record)"
+              >编辑
+            </a-button>
+            <a-popconfirm
+              :title="'删除配置项: ' + record.name + '？'"
+              ok-text="确认"
+              cancel-text="取消"
+              v-show="isDynamic(record.source)"
+              @confirm="deleteTopicConfig(record)"
+            >
+              <a-button size="small" href="javascript:;" class="operation-btn"
+                >删除
+              </a-button>
+            </a-popconfirm>
+          </div>
+        </a-table>
+        <EditConfig
+          :visible="showEditConfigDialog"
+          :record="selectData"
+          :topic="topic"
+          @closeEditConfigDialog="closeEditConfigDialog"
+        ></EditConfig>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaConfigApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+import EditConfig from "@/views/topic/EditConfig";
+
+export default {
+  name: "TopicConfig",
+  components: { EditConfig },
+  props: {
+    topic: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      columns: columns,
+      show: this.visible,
+      data: [],
+      loading: false,
+      search: "",
+      filterData: [],
+      showEditConfigDialog: false,
+      selectData: {},
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.getTopicConfig();
+      }
+    },
+  },
+  methods: {
+    getTopicConfig() {
+      this.loading = true;
+      const api = KafkaConfigApi.getTopicConfig;
+      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.searchData();
+        }
+      });
+    },
+    deleteTopicConfig(record) {
+      this.selectData = record;
+      this.loading = true;
+      const api = KafkaConfigApi.deleteTopicConfig;
+      request({
+        url: api.url,
+        method: api.method,
+        data: {
+          name: record.name,
+          value: record.value,
+          entity: this.topic,
+        },
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.getTopicConfig();
+        }
+      });
+    },
+    searchData() {
+      this.filterData = this.data.filter(
+        (e) => e.name.indexOf(this.search) >= 0
+      );
+    },
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeTopicConfigDialog", {});
+    },
+    openEditConfigDialog(record) {
+      this.showEditConfigDialog = true;
+      this.selectData = record;
+    },
+    closeEditConfigDialog(params) {
+      this.showEditConfigDialog = false;
+      if (params.refresh) {
+        this.getTopicConfig();
+      }
+    },
+    isDynamic(source) {
+      return source.startsWith("DYNAMIC_");
+    },
+  },
+};
+
+const columns = [
+  {
+    title: "属性",
+    dataIndex: "name",
+    key: "name",
+    width: 300,
+  },
+  {
+    title: "值",
+    dataIndex: "value",
+    key: "value",
+  },
+  {
+    title: "属性源",
+    dataIndex: "source",
+    key: "source",
+    width: 200,
+  },
+  {
+    title: "操作",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+    width: 150,
+  },
+];
+</script>
+
+<style scoped>
+.operation-btn {
+  margin-right: 3%;
+}
+</style>