mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-06 14:50:25 +08:00
访问日志增加更容易可视化的时间显示
This commit is contained in:
@@ -9,6 +9,7 @@ Vue.component("http-access-log-box", {
|
|||||||
accessLog.scheme = "wss"
|
accessLog.scheme = "wss"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
accessLog: accessLog
|
accessLog: accessLog
|
||||||
}
|
}
|
||||||
@@ -48,7 +49,7 @@ Vue.component("http-access-log-box", {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
template: `<div :style="{'color': (accessLog.status >= 400) ? '#dc143c' : ''}" ref="box">
|
template: `<div :style="{'color': (accessLog.status >= 400) ? '#dc143c' : ''}" ref="box">
|
||||||
<span v-if="accessLog.region != null && accessLog.region.length > 0" class="grey">[{{accessLog.region}}]</span> <keyword :v-word="vKeyword">{{accessLog.remoteAddr}}</keyword> [{{accessLog.timeLocal}}] <em>"<keyword :v-word="vKeyword">{{accessLog.requestMethod}}</keyword> {{accessLog.scheme}}://<keyword :v-word="vKeyword">{{accessLog.host}}</keyword><keyword :v-word="vKeyword">{{accessLog.requestURI}}</keyword> <a :href="accessLog.scheme + '://' + accessLog.host + accessLog.requestURI" target="_blank" title="新窗口打开" class="disabled"><i class="external icon tiny"></i> </a> {{accessLog.proto}}" </em> <keyword :v-word="vKeyword">{{accessLog.status}}</keyword> <code-label v-if="accessLog.attrs != null && accessLog.attrs['cache.status'] == 'HIT'">cache hit</code-label> <code-label v-if="accessLog.attrs != null && accessLog.attrs['waf.action'] != null && accessLog.attrs['waf.action'].length > 0">waf {{accessLog.attrs['waf.action']}}</code-label> - 耗时:{{formatCost(accessLog.requestTime)}} ms
|
<span v-if="accessLog.region != null && accessLog.region.length > 0" class="grey">[{{accessLog.region}}]</span> <keyword :v-word="vKeyword">{{accessLog.remoteAddr}}</keyword> [{{accessLog.timeLocal}}] <em>"<keyword :v-word="vKeyword">{{accessLog.requestMethod}}</keyword> {{accessLog.scheme}}://<keyword :v-word="vKeyword">{{accessLog.host}}</keyword><keyword :v-word="vKeyword">{{accessLog.requestURI}}</keyword> <a :href="accessLog.scheme + '://' + accessLog.host + accessLog.requestURI" target="_blank" title="新窗口打开" class="disabled"><i class="external icon tiny"></i> </a> {{accessLog.proto}}" </em> <keyword :v-word="vKeyword">{{accessLog.status}}</keyword> <code-label v-if="accessLog.attrs != null && accessLog.attrs['cache.status'] == 'HIT'">cache hit</code-label> <code-label v-if="accessLog.attrs != null && accessLog.attrs['waf.action'] != null && accessLog.attrs['waf.action'].length > 0">waf {{accessLog.attrs['waf.action']}}</code-label> - 耗时:{{formatCost(accessLog.requestTime)}} ms <span v-if="accessLog.humanTime != null && accessLog.humanTime.length > 0" class="grey small"> ({{accessLog.humanTime}})</span>
|
||||||
<a href="" @click.prevent="showLog" title="查看详情"><i class="icon expand"></i></a>
|
<a href="" @click.prevent="showLog" title="查看详情"><i class="icon expand"></i></a>
|
||||||
</div>`
|
</div>`
|
||||||
})
|
})
|
||||||
@@ -156,6 +156,10 @@ Tea.context(function () {
|
|||||||
this.$post(".wafLogs")
|
this.$post(".wafLogs")
|
||||||
.success(function (resp) {
|
.success(function (resp) {
|
||||||
if (resp.data.accessLogs != null) {
|
if (resp.data.accessLogs != null) {
|
||||||
|
let that = this
|
||||||
|
resp.data.accessLogs.forEach(function (v) {
|
||||||
|
that.formatTime(v)
|
||||||
|
})
|
||||||
this.accessLogs = resp.data.accessLogs
|
this.accessLogs = resp.data.accessLogs
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -163,4 +167,17 @@ Tea.context(function () {
|
|||||||
this.$delay(this.reloadAccessLogs, 10000)
|
this.$delay(this.reloadAccessLogs, 10000)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.formatTime = function (accessLog) {
|
||||||
|
let elapsedSeconds = Math.ceil(new Date().getTime() / 1000) - accessLog.timestamp
|
||||||
|
if (elapsedSeconds >= 0) {
|
||||||
|
if (elapsedSeconds < 60) {
|
||||||
|
accessLog.humanTime = elapsedSeconds + "秒前"
|
||||||
|
} else if (elapsedSeconds < 3600) {
|
||||||
|
accessLog.humanTime = Math.ceil(elapsedSeconds / 60) + "分钟前"
|
||||||
|
} else if (elapsedSeconds < 3600 * 24) {
|
||||||
|
accessLog.humanTime = Math.ceil(elapsedSeconds / 3600) + "小时前"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
@@ -16,14 +16,16 @@ Tea.context(function () {
|
|||||||
.success(function (resp) {
|
.success(function (resp) {
|
||||||
this.accessLogs = resp.data.accessLogs.concat(this.accessLogs)
|
this.accessLogs = resp.data.accessLogs.concat(this.accessLogs)
|
||||||
|
|
||||||
// 添加区域信息
|
// 添加区域信息
|
||||||
this.accessLogs.forEach(function (accessLog) {
|
let that = this
|
||||||
if (typeof (resp.data.regions[accessLog.remoteAddr]) == "string") {
|
this.accessLogs.forEach(function (accessLog) {
|
||||||
accessLog.region = resp.data.regions[accessLog.remoteAddr]
|
that.formatTime(accessLog)
|
||||||
} else {
|
if (typeof (resp.data.regions[accessLog.remoteAddr]) == "string") {
|
||||||
accessLog.region = ""
|
accessLog.region = resp.data.regions[accessLog.remoteAddr]
|
||||||
}
|
} else {
|
||||||
})
|
accessLog.region = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
let max = 100
|
let max = 100
|
||||||
if (this.accessLogs.length > max) {
|
if (this.accessLogs.length > max) {
|
||||||
@@ -45,4 +47,18 @@ Tea.context(function () {
|
|||||||
}, 5000)
|
}, 5000)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
this.formatTime = function (accessLog) {
|
||||||
|
let elapsedSeconds = Math.ceil(new Date().getTime() / 1000) - accessLog.timestamp
|
||||||
|
if (elapsedSeconds >= 0) {
|
||||||
|
if (elapsedSeconds < 60) {
|
||||||
|
accessLog.humanTime = elapsedSeconds + "秒前"
|
||||||
|
} else if (elapsedSeconds < 3600) {
|
||||||
|
accessLog.humanTime = Math.ceil(elapsedSeconds / 60) + "分钟前"
|
||||||
|
} else if (elapsedSeconds < 3600 * 24) {
|
||||||
|
accessLog.humanTime = Math.ceil(elapsedSeconds / 3600) + "小时前"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
Reference in New Issue
Block a user