broker config

ui/src/utils/api.js

@@ -58,6 +58,14 @@ export const KafkaConfigApi = {
     url: "/config/broker",
     method: "get",
   },
+  setBrokerConfig: {
+    url: "/config/broker",
+    method: "post",
+  },
+  deleteBrokerConfig: {
+    url: "/config/broker",
+    method: "delete",
+  },
 };
 
 export const KafkaTopicApi = {

ui/src/views/cluster/BrokerConfig.vue

@@ -2,7 +2,7 @@
   <a-modal
     title="Broker配置"
     :visible="show"
-    :width="1200"
+    :width="1400"
     :mask="false"
     :destroyOnClose="true"
     :footer="null"
@@ -11,23 +11,51 @@
   >
     <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="data"
+          :data-source="filterData"
           bordered
-          :rowKey="(record) => record.memberId"
+          :rowKey="(record) => record.name"
         >
-          <ul slot="partitions" slot-scope="text">
-            <ol v-for="i in text" :key="i.topic + i.partition">
-              {{
-                i.topic
-              }}:
-              {{
-                i.partition
-              }}
-            </ol>
-          </ul>
+          <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="deleteBrokerConfig(record)"
+            >
+              <a-button size="small" href="javascript:;" class="operation-btn"
+                >删除
+              </a-button>
+            </a-popconfirm>
+          </div>
         </a-table>
+        <EditConfig
+          :visible="showEditConfigDialog"
+          :record="selectData"
+          :broker-id="id"
+          @closeEditConfigDialog="closeEditConfigDialog"
+        ></EditConfig>
       </a-spin>
     </div>
   </a-modal>
@@ -37,9 +65,11 @@
 import request from "@/utils/request";
 import { KafkaConfigApi } from "@/utils/api";
 import notification from "ant-design-vue/es/notification";
+import EditConfig from "@/views/cluster/EditConfig";
 
 export default {
   name: "BrokerConfig",
+  components: { EditConfig },
   props: {
     group: {
       type: String,
@@ -60,18 +90,22 @@ export default {
       show: this.visible,
       data: [],
       loading: false,
+      search: "",
+      filterData: [],
+      showEditConfigDialog: false,
+      selectData: {},
     };
   },
   watch: {
     visible(v) {
       this.show = v;
       if (this.show) {
-        this.getPartitionInfo();
+        this.getBrokerConfig();
       }
     },
   },
   methods: {
-    getPartitionInfo() {
+    getBrokerConfig() {
       this.loading = true;
       request({
         url: KafkaConfigApi.getBrokerConfig.url + "?brokerId=" + this.id,
@@ -85,13 +119,55 @@ export default {
           });
         } else {
           this.data = res.data;
+          this.searchData();
         }
       });
     },
+    deleteBrokerConfig(record) {
+      this.selectData = record;
+      this.loading = true;
+      request({
+        url: KafkaConfigApi.deleteBrokerConfig.url,
+        method: KafkaConfigApi.deleteBrokerConfig.method,
+        data: {
+          name: record.name,
+          value: record.value,
+          entity: this.id,
+        },
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.getBrokerConfig();
+        }
+      });
+    },
+    searchData() {
+      this.filterData = this.data.filter(
+        (e) => e.name.indexOf(this.search) >= 0
+      );
+    },
     handleCancel() {
       this.data = [];
       this.$emit("closeBrokerConfigDialog", {});
     },
+    openEditConfigDialog(record) {
+      this.showEditConfigDialog = true;
+      this.selectData = record;
+    },
+    closeEditConfigDialog(params) {
+      this.showEditConfigDialog = false;
+      if (params.refresh) {
+        this.getBrokerConfig();
+      }
+    },
+    isDynamic(source) {
+      return source.startsWith("DYNAMIC_");
+    },
   },
 };
 
@@ -113,7 +189,17 @@ const columns = [
     key: "source",
     width: 200,
   },
+  {
+    title: "操作",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+    width: 150,
+  },
 ];
 </script>
 
-<style scoped></style>
+<style scoped>
+.operation-btn {
+  margin-right: 3%;
+}
+</style>

ui/src/views/cluster/Cluster.vue

@@ -26,7 +26,7 @@
       </div>
       <BrokerConfig
         :visible="showBrokerConfigDialog"
-        :id="this.select.id"
+        :id="this.select.idString"
         @closeBrokerConfigDialog="closeBrokerConfigDialog"
       ></BrokerConfig>
     </a-spin>

ui/src/views/cluster/EditConfig.vue

@@ -0,0 +1,117 @@
+<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: "EditConfig",
+  props: {
+    topic: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    record: {
+      default: {},
+    },
+    brokerId: {
+      type: String,
+      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;
+          request({
+            url: KafkaConfigApi.setBrokerConfig.url,
+            method: KafkaConfigApi.setBrokerConfig.method,
+            data: Object.assign({ entity: this.brokerId }, 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>