WAF显示拦截日志

web/views/@default/servers/components/waf/log.html

@@ -1,8 +1,49 @@
 {$layout}
+
+{$var "header"}
+<!-- datepicker -->
+<script type="text/javascript" src="/js/moment.min.js"></script>
+<script type="text/javascript" src="/js/pikaday.js"></script>
+<link rel="stylesheet" href="/js/pikaday.css"/>
+<link rel="stylesheet" href="/js/pikaday.theme.css"/>
+<link rel="stylesheet" href="/js/pikaday.triangle.css"/>
+{$end}
+
 {$template "/left_menu"}
 
 <div class="right-box">
 	{$template "waf_menu"}
 
-	<p class="ui message">此功能暂未开放，敬请期待。</p>
+	<first-menu>
+		<div class="item right">
+			<form class="ui form small" :action="path" autocomplete="off">
+				<input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
+				<div class="ui fields inline">
+					<div class="ui field">
+						<input type="text" name="day" maxlength="10" placeholder="选择日期" style="width:7.8em" id="day-input" v-model="day"/>
+					</div>
+					<div class="ui field">
+						<button class="ui button small" type="submit">查找</button>
+					</div>
+				</div>
+			</form>
+		</div>
+	</first-menu>
+
+	<p class="comment" v-if="accessLogs.length == 0">暂时还没有日志。</p>
+
+	<table class="ui table selectable" v-if="accessLogs.length > 0">
+		<!-- 这里之所以需要添加 :key，是因为要不然不会刷新显示 -->
+		<tr v-for="accessLog in accessLogs" :key="accessLog.requestId">
+			<td><http-access-log-box :v-access-log="accessLog"></http-access-log-box></td>
+		</tr>
+	</table>
+
+	<div v-if="accessLogs.length > 0">
+		<a :href="path + '?requestId=' + lastRequestId + '&day=' + day + '&firewallPolicyId=' + firewallPolicyId" v-if="hasPrev">上一页</a>
+		<span v-else class="disabled">上一页</span>
+		<span class="disabled">&nbsp; | &nbsp;</span>
+		<a :href="path + '?requestId=' + nextRequestId + '&day=' + day + '&firewallPolicyId=' + firewallPolicyId" v-if="hasMore">下一页</a>
+		<span v-else class="disabled">下一页</span>
+	</div>
 </div>

web/views/@default/servers/components/waf/log.js

@@ -0,0 +1,8 @@
+Tea.context(function () {
+	this.$delay(function () {
+		let that = this
+		teaweb.datepicker("day-input", function (day) {
+			that.day = day
+		})
+	})
+})