topic模糊查询，消息过滤页面配置

ui/src/views/message/SearchByTime.vue

@@ -59,6 +59,78 @@
               </a-form-item>
             </a-col>
           </a-row>
+          <hr class="hr" />
+          <a-row :gutter="24">
+            <a-col :span="5">
+              <a-form-item label="消息过滤">
+                <a-select
+                  class="filter-select"
+                  option-filter-prop="children"
+                  v-decorator="['filter', { initialValue: 'none' }]"
+                  @change="onFilterChange"
+                >
+                  <a-select-option value="none"> 不启用过滤 </a-select-option>
+                  <a-select-option value="body">
+                    根据消息体过滤
+                  </a-select-option>
+                  <a-select-option value="header">
+                    根据消息头过滤
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <div v-show="showBodyFilter">
+              <a-col :span="8">
+                <a-form-item label="消息内容">
+                  <a-input
+                    class="msg-body"
+                    v-decorator="['body']"
+                    placeholder="请输入消息内容"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item label="消息类型">
+                  <a-select
+                    v-decorator="['bodyType', { initialValue: 'String' }]"
+                    class="body-type"
+                  >
+                    <a-select-option
+                      v-for="v in deserializerList"
+                      :key="v"
+                      :value="v"
+                    >
+                      {{ v }}
+                    </a-select-option>
+                  </a-select>
+                  <span class="hint"
+                    >String类型模糊匹配，数字类型绝对匹配，其它不支持</span
+                  >
+                </a-form-item>
+              </a-col>
+            </div>
+            <div v-show="showHeaderFilter">
+              <a-col :span="5">
+                <a-form-item label="Key">
+                  <a-input
+                    v-decorator="['headerKey']"
+                    placeholder="消息头的key"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="11">
+                <a-form-item label="Value">
+                  <a-input
+                    v-decorator="['headerValue']"
+                    placeholder="消息头对应key的value"
+                  />
+                  <span class="hint"
+                    >消息头的value不是字符串类型，就不要输入用来过滤了</span
+                  >
+                </a-form-item>
+              </a-col>
+            </div>
+          </a-row>
         </a-form>
       </div>
       <p style="margin-top: 1%">
@@ -97,6 +169,9 @@ export default {
         rules: [{ type: "array", required: true, message: "请选择时间!" }],
       },
       data: defaultData,
+      deserializerList: [],
+      showBodyFilter: false,
+      showHeaderFilter: false,
     };
   },
   methods: {
@@ -151,6 +226,40 @@ export default {
       this.selectPartition = -1;
       this.getPartitionInfo(topic);
     },
+    onFilterChange(e) {
+      switch (e) {
+        case "body":
+          this.showBodyFilter = true;
+          this.showHeaderFilter = false;
+          break;
+        case "header":
+          this.showHeaderFilter = true;
+          this.showBodyFilter = false;
+          break;
+        default:
+          this.showBodyFilter = false;
+          this.showHeaderFilter = false;
+          break;
+      }
+    },
+    getDeserializerList() {
+      request({
+        url: KafkaMessageApi.deserializerList.url,
+        method: KafkaMessageApi.deserializerList.method,
+      }).then((res) => {
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.deserializerList = res.data;
+        }
+      });
+    },
+  },
+  created() {
+    this.getDeserializerList();
   },
 };
 const defaultData = { realNum: 0, maxNum: 0 };
@@ -195,7 +304,31 @@ const defaultData = { realNum: 0, maxNum: 0 };
   width: 400px !important;
 }
 
+.filter-select {
+  width: 160px !important;
+}
+
+.body-type {
+  width: 120px;
+}
+
+.msg-body {
+  width: 400px;
+}
+
 .type-select {
   width: 150px !important;
 }
+.hint {
+  font-size: smaller;
+  color: green;
+}
+.ant-advanced-search-form {
+  padding-bottom: 0px;
+}
+.hr {
+  height: 1px;
+  border: none;
+  border-top: 1px dashed #0066cc;
+}
 </style>

ui/src/views/topic/Topic.vue

@@ -15,6 +15,7 @@
                     placeholder="topic"
                     class="input-w"
                     v-decorator="['topic']"
+                    @change="onTopicUpdate"
                   />
                 </a-form-item>
               </a-col>
@@ -22,8 +23,9 @@
                 <a-form-item :label="`类型`">
                   <a-select
                     class="type-select"
-                    v-decorator="['type', { initialValue: 'normal' }]"
+                    v-model="type"
-                    placeholder="Please select a country"
+                    placeholder="选择类型"
+                    @change="getTopicList"
                   >
                     <a-select-option value="all"> 所有</a-select-option>
                     <a-select-option value="normal"> 普通</a-select-option>
@@ -34,10 +36,10 @@
 
               <a-col :span="8" :style="{ textAlign: 'right' }">
                 <a-form-item>
-                  <a-button type="primary" html-type="submit"> 搜索</a-button>
+                  <a-button type="primary" html-type="submit"> 刷新</a-button>
-                  <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
+                  <!--                  <a-button :style="{ marginLeft: '8px' }" @click="handleReset">-->
-                    重置
+                  <!--                    重置-->
-                  </a-button>
+                  <!--                  </a-button>-->
                 </a-form-item>
               </a-col>
             </a-row>
@@ -48,7 +50,12 @@
             >新增</a-button
           >
         </div>
-        <a-table :columns="columns" :data-source="data" bordered row-key="name">
+        <a-table
+          :columns="columns"
+          :data-source="filteredData"
+          bordered
+          row-key="name"
+        >
           <div slot="partitions" slot-scope="text, record">
             <a href="#" @click="openPartitionInfoDialog(record.name)"
               >{{ text }}
@@ -215,6 +222,9 @@ export default {
       showUpdateReplicaDialog: false,
       showThrottleDialog: false,
       showSendStatsDialog: false,
+      filterTopic: "",
+      filteredData: [],
+      type: "normal",
     };
   },
   methods: {
@@ -222,13 +232,12 @@ export default {
       e.preventDefault();
       this.getTopicList();
     },
-
     handleReset() {
       this.form.resetFields();
     },
-
     getTopicList() {
-      Object.assign(this.queryParam, this.form.getFieldsValue());
+      Object.assign(this.queryParam, { type: this.type });
+      // delete this.queryParam.topic;
       this.loading = true;
       request({
         url: KafkaTopicApi.getTopicList.url,
@@ -237,6 +246,7 @@ export default {
       }).then((res) => {
         this.loading = false;
         this.data = res.data;
+        this.filter();
       });
     },
     deleteTopic(topic) {
@@ -255,6 +265,15 @@ export default {
         }
       });
     },
+    onTopicUpdate(input) {
+      this.filterTopic = input.target.value;
+      this.filter();
+    },
+    filter() {
+      this.filteredData = this.data.filter(
+        (e) => e.name.indexOf(this.filterTopic) != -1
+      );
+    },
     openPartitionInfoDialog(topic) {
       this.selectDetail.resourceName = topic;
       this.showPartitionInfo = true;