新增topic

ui/src/views/topic/CreateTopic.vue

@@ -0,0 +1,158 @@
+<template>
+  <a-modal
+    title="新增Topic"
+    :visible="show"
+    :width="800"
+    :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="Topic名称">
+            <a-input
+              v-decorator="[
+                'name',
+                { rules: [{ required: true, message: '输入topic名称!' }] },
+              ]"
+              placeholder="topic"
+            />
+          </a-form-item>
+          <a-form-item label="分区">
+            <a-input-number
+              :min="1"
+              :max="128"
+              v-decorator="[
+                'numPartitions',
+                {
+                  initialValue: 1,
+                  rules: [{ required: true, message: '输入分区数!' }],
+                },
+              ]"
+            />
+            <span class="ant-form-text"> 个分区 </span>
+          </a-form-item>
+          <a-form-item label="副本">
+            <a-input-number
+              :min="1"
+              :max="32"
+              v-decorator="[
+                'replicationFactor',
+                {
+                  initialValue: 1,
+                  rules: [{ required: true, message: '输入副本数!' }],
+                },
+              ]"
+            />
+            <span class="ant-form-text"> 个副本 </span>
+          </a-form-item>
+          <a-form-item label="属性">
+            <a-textarea
+              rows="5"
+              placeholder="格式示例如下：
+max.message.bytes=1024
+retention.bytes=1024
+retention.ms=3600000"
+              v-decorator="['configs']"
+            />
+          </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 { KafkaTopicApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+export default {
+  name: "CreateTopic",
+  props: {
+    topic: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      data: [],
+      loading: false,
+      form: this.$form.createForm(this, { name: "coordinated" }),
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.getPartitionInfo();
+      }
+    },
+  },
+  methods: {
+    getPartitionInfo() {
+      this.loading = false;
+    },
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          if (values.configs) {
+            const config = {};
+            values.configs.split("\n").forEach((e) => {
+              const c = e.split("=");
+              if (c.length > 1) {
+                let k = c[0].trim(),
+                  v = c[1].trim();
+                if (k && v) {
+                  config[k] = v;
+                }
+              }
+            });
+            values.configs = config;
+          }
+          this.loading = true;
+          request({
+            url: KafkaTopicApi.creatTopic.url,
+            method: KafkaTopicApi.creatTopic.method,
+            data: values,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.$message.success(res.msg);
+              this.$emit("closeCreateTopicDialog", { refresh: true });
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeCreateTopicDialog", { refresh: false });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/topic/Topic.vue

@@ -44,7 +44,9 @@
           </a-form>
         </div>
         <div class="operation-row-button">
-          <a-button type="primary" @click="handleReset">新增/更新</a-button>
+          <a-button type="primary" @click="openCreateTopicDialog"
+            >新增</a-button
+          >
         </div>
         <a-table :columns="columns" :data-source="data" bordered row-key="name">
           <div slot="partitions" slot-scope="text, record">
@@ -75,6 +77,11 @@
           :visible="showPartitionInfo"
           @closePartitionInfoDialog="closePartitionInfoDialog"
         ></PartitionInfo>
+        <CreateTopic
+          :visible="showCreateTopic"
+          @closeCreateTopicDialog="closeCreateTopicDialog"
+        >
+        </CreateTopic>
       </div>
     </a-spin>
   </div>
@@ -85,10 +92,11 @@ import request from "@/utils/request";
 import { KafkaTopicApi } from "@/utils/api";
 import notification from "ant-design-vue/es/notification";
 import PartitionInfo from "@/views/topic/PartitionInfo";
+import CreateTopic from "@/views/topic/CreateTopic";
 
 export default {
   name: "Topic",
-  components: { PartitionInfo },
+  components: { PartitionInfo, CreateTopic },
   data() {
     return {
       queryParam: { type: "normal" },
@@ -105,6 +113,7 @@ export default {
       },
       showPartitionInfo: false,
       loading: false,
+      showCreateTopic: false,
     };
   },
   methods: {
@@ -152,6 +161,15 @@ export default {
     closePartitionInfoDialog() {
       this.showPartitionInfo = false;
     },
+    openCreateTopicDialog() {
+      this.showCreateTopic = true;
+    },
+    closeCreateTopicDialog(res) {
+      this.showCreateTopic = false;
+      if (res.refresh) {
+        this.getTopicList();
+      }
+    },
   },
   created() {
     this.getTopicList();