root/base_lms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增es日志前端，可不通过grafana

Browse Source
This commit is contained in:
liyongde
2025-05-29 15:51:37 +08:00
parent 1556317547
commit df112f4e43
15 changed files with 980 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
nladmin-ui/src/views/lucene/index.vue
View File

@@ -56,7 +56,6 @@
<el-date-picker
v-model="query.createTime"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
:range-separator="$t('Log.to')"
:start-placeholder="$t('Log.start_time')"
:end-placeholder="$t('Log.end_time')"
@@ -82,8 +81,79 @@
<el-card shadow="hover" style="width: 100%" class="log-warpper">
<div style="width: 100%">
<div v-for="(log, index) in logs" :key="index">
<div v-if="compressedView === false" style="margin: 5px;font-size: 16px; word-break: break-all; white-space: pre-wrap;" v-html="log" />
<div v-else style="margin-bottom: 5px; font-size: 16px;" v-html="log" />
<!-- <div v-if="compressedView === false" style="margin: 5px;font-size: 16px; word-break: break-all; white-space: pre-wrap;">-->
<!-- {{ timestampToDate(log.time) }} - {{log.severity}} - {{log.logger}} - [{{log.thread}}] - {{log.tlogTraceId}} - {{log.message}}-->
<!-- </div>-->
<!-- <div v-else style="margin-bottom: 5px; font-size: 16px;">-->
<!-- {{ timestampToDate(log.time) }} - {{log.severity}} - {{log.logger}} - [{{log.thread}}] - {{log.tlogTraceId}} - {{log.message}}-->
<!-- </div>-->
<div v-if="compressedView" style="margin-bottom: 5px; font-size: 16px;">
<span style="color: #000000;">{{ timestampToDate(log.time) }}</span> -
<span style="color: #000569;">{{ log.currIp === null ? '0.0.0.0' : log.currIp }}</span> -
<span style="color: #111fc7;">{{ log.severity }}</span> -
<span style="color: #3498db;">{{ log.logger }}</span> -
<span style="color: #28b23a;">[{{ log.thread }}]</span> -
<span style="color: #d51313;">{{ log.tlogTraceId === null ? '无链路id' : log.tlogTraceId }}</span> -
<span style="color: #000000;">{{ log.message }}</span>
</div>
<div v-else style="margin-bottom: 5px; font-size: 16px; border: #00afff 1px solid; padding: 5px;">
<el-row>
<el-col :span="2">
时间：
</el-col>
<el-col :span="22">
<span style="color: #000000;">{{ timestampToDate(log.time) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
执行IP：
</el-col>
<el-col :span="22">
<span style="color: #000569;">{{ log.currIp === null ? '0.0.0.0' : log.currIp }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
日志级别：
</el-col>
<el-col :span="22">
<span style="color: #111fc7;">{{ log.severity }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
类名：
</el-col>
<el-col :span="22">
<span style="color: #111fc7;">{{ log.logger }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
线程名：
</el-col>
<el-col :span="22">
<span style="color: #28b23a;">{{ log.thread }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
链路标识：
</el-col>
<el-col :span="22">
<span style="color: #d51313;">{{ log.tlogTraceId === null ? '无链路id' : log.tlogTraceId }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
日志信息：
</el-col>
<el-col :span="22">
<span style="color: #000000;">{{ log.message }}</span>
</el-col>
</el-row>
</div>
</div>
</div>
</el-card>
@@ -145,6 +215,19 @@ export default {
this.getTagList()
},
methods: {
timestampToDate(timestamp) {
const date = new Date(timestamp)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0')
// 添加毫秒处理（强制3位数）
const milliseconds = String(date.getMilliseconds()).padStart(3, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`
},
handleSizeChange(val) {
this.query.size = val
this.queryData()
@@ -164,13 +247,8 @@ export default {
this.query.endTime = this.query.createTime[1]
}
luceneOperation.getLogData(this.query).then(res => {
this.logs = [] // 清空
var ansi_up = new AnsiUp()
// 数据初始化
for (const i in res.content) {
this.logs[i] = ansi_up.ansi_to_html(res.content[i])
}
// this.logs = res.content
console.log(res)
this.logs = res.content
this.query.total = res.totalElements
})
}