DNS访问日志可以使用关键词搜索

internal/web/actions/default/ns/clusters/accessLogs/index.go

@@ -23,6 +23,7 @@ func (this *IndexAction) Init() {
 
 func (this *IndexAction) RunGet(params struct {
 	RequestId string
+	Keyword   string
 	Day       string
 }) {
 	day := strings.ReplaceAll(params.Day, "-", "")
@@ -30,6 +31,7 @@ func (this *IndexAction) RunGet(params struct {
 		day = timeutil.Format("Ymd")
 	}
 
+	this.Data["keyword"] = params.Keyword
 	this.Data["day"] = day[:4] + "-" + day[4:6] + "-" + day[6:]
 	this.Data["path"] = this.Request.URL.Path
 
@@ -42,6 +44,7 @@ func (this *IndexAction) RunGet(params struct {
 		NsRecordId: 0,
 		Size:       size,
 		Day:        day,
+		Keyword:    params.Keyword,
 		Reverse:    false,
 	})
 	if err != nil {
@@ -94,6 +97,7 @@ func (this *IndexAction) RunGet(params struct {
 			NsDomainId: 0,
 			NsRecordId: 0,
 			Day:        day,
+			Keyword:    params.Keyword,
 			Size:       size,
 			Reverse:    true,
 		})

web/public/js/components/common/keyword.js

@@ -0,0 +1,21 @@
+Vue.component("keyword", {
+	props: ["v-word"],
+	data: function () {
+		let word = this.vWord
+		if (word == null) {
+			word = ""
+		}
+
+		let slot = this.$slots["default"][0]
+		let text = slot.text
+		if (word.length > 0) {
+			text = text.replace(new RegExp(word, "g"), "<span style=\"border: 1px #ccc dashed\">" + word + "</span>")
+		}
+
+		return {
+			word: word,
+			text: text
+		}
+	},
+	template: `<span><span style="display: none"><slot></slot></span><span v-html="text"></span></span>`
+})

web/public/js/components/ns/ns-access-log-box.js

@@ -1,5 +1,5 @@
 Vue.component("ns-access-log-box", {
-	props: ["v-access-log"],
+	props: ["v-access-log", "v-keyword"],
 	data: function () {
 		let accessLog = this.vAccessLog
 		return {
@@ -33,6 +33,6 @@ Vue.component("ns-access-log-box", {
 		}
 	},
 	template: `<div class="access-log-row" :style="{'color': (accessLog.nsRecordId == null || accessLog.nsRecordId == 0) ? '#dc143c' : ''}" ref="box">
-	<span v-if="accessLog.region != null && accessLog.region.length > 0" class="grey">[{{accessLog.region}}]</span> {{accessLog.remoteAddr}} [{{accessLog.timeLocal}}] [{{accessLog.networking}}] <em>{{accessLog.questionType}} {{accessLog.questionName}}</em> -&gt; <em>{{accessLog.recordType}} {{accessLog.recordValue}}</em><!-- &nbsp; <a href="" @click.prevent="showLog" title="查看详情"><i class="icon expand"></i></a>-->
+	<span v-if="accessLog.region != null && accessLog.region.length > 0" class="grey">[{{accessLog.region}}]</span> <keyword :v-word="vKeyword">{{accessLog.remoteAddr}}</keyword> [{{accessLog.timeLocal}}] [{{accessLog.networking}}] <em>{{accessLog.questionType}} <keyword :v-word="vKeyword">{{accessLog.questionName}}</keyword></em> -&gt; <em>{{accessLog.recordType}} <keyword :v-word="vKeyword">{{accessLog.recordValue}}</keyword></em><!-- &nbsp; <a href="" @click.prevent="showLog" title="查看详情"><i class="icon expand"></i></a>-->
 </div>`
 })

web/views/@default/ns/clusters/accessLogs/index.html

@@ -13,6 +13,9 @@
     <div class="item right">
         <form method="get" class="ui form small" :action="path" autocomplete="off">
             <div class="ui fields inline">
+                <div class="ui field">
+                    <input type="text" name="keyword" v-model="keyword" placeholder="IP、域名、记录等..."/>
+                </div>
                 <div class="ui field">
                     <input type="text" name="day" maxlength="10" placeholder="选择日期" style="width:7.8em" id="day-input" v-model="day"/>
                 </div>
@@ -52,14 +55,14 @@
                 <link-icon :href="'/ns/domains/domain?domainId=' + accessLog.domain.id">{{accessLog.domain.name}}</link-icon>
             </div>
         </td>
-        <td><ns-access-log-box :v-access-log="accessLog"></ns-access-log-box></td>
+        <td><ns-access-log-box :v-access-log="accessLog" :v-keyword="keyword"></ns-access-log-box></td>
     </tr>
 </table>
 
 <div v-if="accessLogs.length > 0">
-    <a :href="path + '?requestId=' + lastRequestId + '&day=' + day" v-if="hasPrev">上一页</a>
+    <a :href="path + '?requestId=' + lastRequestId + '&day=' + day + '&keyword=' + keyword" v-if="hasPrev">上一页</a>
     <span v-else class="disabled">上一页</span>
     <span class="disabled">&nbsp; | &nbsp;</span>
-    <a :href="path + '?requestId=' + nextRequestId + '&day=' + day" v-if="hasMore">下一页</a>
+    <a :href="path + '?requestId=' + nextRequestId + '&day=' + day + '&keyword=' + keyword" v-if="hasMore">下一页</a>
     <span v-else class="disabled">下一页</span>
 </div>