git-sync/crawlab
1
0
Fork 0
mirror of https://github.com/crawlab-team/crawlab.git synced 2026-01-22 17:31:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix task log view

Browse Source
This commit is contained in:
zkqiang
2020-07-04 14:32:23 +08:00
parent 78cc9cb99c
commit e491c242db
3 changed files with 37 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/ScrollView/LogItem.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="log-item" :style="style" :class="`log-item-${index} ${active ? 'active' : ''}`">
<div class="line-no">{{ index }}</div>
<div class="log-item" :style="style" :class="`log-item-${source.index} ${source.active ? 'active' : ''}`">
<div class="line-no">{{ source.index }}</div>
<div class="line-content">
<span v-if="isLogEnd" style="color: #E6A23C">
<span class="loading-text">{{ $t('Updating log...') }}</span>
<i class="el-icon-loading" />
</span>
<span v-else-if="isAnsi" v-html="dataHtml" />
<span v-else-if="source.isAnsi" v-html="dataHtml" />
<span v-else v-html="dataHtml" />
</div>
</div>
@@ -20,31 +20,11 @@
export default {
name: 'LogItem',
props: {
index: {
type: Number,
default: 1
},
logItem: {
source: {
type: Object,
default() {
return {}
}
},
data: {
type: String,
default: ''
},
isAnsi: {
type: Boolean,
default: false
},
searchString: {
type: String,
default: ''
},
active: {
type: Boolean,
default: false
}
},
data() {
@@ -63,14 +43,14 @@
return new RegExp(this.userInfo.setting.error_regex_pattern, 'i')
},
dataHtml() {
let html = this.data.replace(this.errorRegex, ' <span style="font-weight: bolder; text-decoration: underline">$1</span> ')
if (!this.searchString) return html
html = html.replace(new RegExp(`(${this.searchString})`, 'gi'), '<mark>$1</mark>')
let html = this.source.data.replace(this.errorRegex, ' <span style="font-weight: bolder; text-decoration: underline">$1</span> ')
if (!this.source.searchString) return html
html = html.replace(new RegExp(`(${this.source.searchString})`, 'gi'), '<mark>$1</mark>')
return html
},
style() {
let color = ''
if (this.data.match(this.errorRegex)) {
if (this.source.data.match(this.errorRegex)) {
color = '#F56C6C'
}
return {
@@ -78,7 +58,7 @@
}
},
isLogEnd() {
return this.data === '###LOG_END###'
return this.source.data === '###LOG_END###'
}
}
}

66
frontend/src/components/ScrollView/LogView.vue
View File

@@ -7,12 +7,6 @@
:inactive-text="$t('Auto-Scroll')"
style="margin-right: 10px"
/>
<!-- <el-switch-->
<!-- v-model="isLogAutoFetch"-->
<!-- :inactive-text="$t('Auto-Refresh')"-->
<!-- style="margin-right: 10px"-->
<!-- >-->
<!-- </el-switch>-->
<el-input
v-model="logKeyword"
size="small"
@@ -37,7 +31,7 @@
:current-page.sync="taskLogPage"
:page-sizes="[1000, 2000, 5000, 10000]"
:page-size.sync="taskLogPageSize"
:pager-count="3"
:page-count="3"
layout="sizes, prev, pager, next"
/>
<el-badge
@@ -57,22 +51,18 @@
</div>
<div class="content">
<div
v-loading="isLogFetchLoading"
:loading="isLogFetchLoading"
class="log-view-wrapper"
:class="isErrorsCollapsed ? 'errors-collapsed' : ''"
>
<virtual-list
ref="log-view"
class="log-view"
:data-key="'index'"
:data-sources="items"
:data-component="itemComponent"
:keeps="taskLogPageSize"
:start="currentLogIndex - 1"
:offset="0"
:size="18"
:remain="remainSize"
:item="item"
:itemcount="filteredLogData.length"
:itemprops="getItemProps"
:tobottom="onToBottom"
:onscroll="onScroll"
/>
</div>
<div
@@ -123,7 +113,7 @@
},
data() {
return {
item: LogItem,
itemComponent: LogItem,
searchString: '',
isScrolling: false,
isScrolling2nd: false,
@@ -200,15 +190,24 @@
this.$store.commit('task/SET_IS_LOG_FETCH_LOADING', value)
}
},
filteredLogData() {
return this.logData.filter(d => {
items() {
if (!this.logData || this.logData.length === 0) {
return []
}
const filteredLogData = this.logData.filter(d => {
if (!this.searchString) return true
return !!d.data.toLowerCase().match(this.searchString.toLowerCase())
})
},
remainSize() {
const height = document.querySelector('body').clientHeight
return (height - 240) / 18
return filteredLogData.map(logItem => {
const isAnsi = hasAnsi(logItem.data)
return {
index: logItem.index,
data: isAnsi ? convert.toHtml(logItem.data) : logItem.data,
searchString: this.logKeyword,
active: logItem.active,
isAnsi
}
})
}
},
watch: {
@@ -246,26 +245,6 @@
clearInterval(this.handle)
},
methods: {
getItemProps(index) {
const logItem = this.filteredLogData[index]
const isAnsi = hasAnsi(logItem.data)
return {
// <item/> will render with itemProps.
// https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
props: {
index: logItem.index,
logItem,
data: isAnsi ? convert.toHtml(logItem.data) : logItem.data,
searchString: this.logKeyword,
active: logItem.active,
isAnsi
}
}
},
onToBottom() {
},
onScroll() {
},
toBottom() {
this.$el.querySelector('.log-view').scrollTo({ top: 99999999 })
},
@@ -319,6 +298,7 @@
.log-view {
margin-top: 0 !important;
overflow-y: scroll !important;
height: 600px;
list-style: none;
color: #A9B7C6;
background: #2B2B2B;

21
frontend/src/views/task/TaskDetail.vue
View File

@@ -221,12 +221,12 @@
await this.$store.dispatch('task/getTaskResults', this.$route.params.id)
this.getTaskLog()
this.handle = setInterval(() => {
await this.getTaskLog()
this.handle = setInterval(async() => {
if (this.isLogAutoFetch) {
this.$store.dispatch('task/getTaskData', this.$route.params.id)
this.$store.dispatch('task/getTaskResults', this.$route.params.id)
this.getTaskLog()
await this.$store.dispatch('task/getTaskData', this.$route.params.id)
await this.$store.dispatch('task/getTaskResults', this.$route.params.id)
await this.getTaskLog()
}
}, 5000)
},
@@ -284,17 +284,6 @@
padding-left: 10px;
}
.log-view {
margin: 20px;
height: 640px;
}
.log-view pre {
height: 100%;
overflow-x: auto;
overflow-y: auto;
}
.button-group {
margin-bottom: 10px;
text-align: right;