133 lines
3.4 KiB
Vue
133 lines
3.4 KiB
Vue
<template>
|
|
<PerformanceReport
|
|
title="二进制日志"
|
|
:site="name"
|
|
:reportOptions="binaryLogsOptions"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from '../../../utils/dayjs';
|
|
import { DashboardError } from '../../../utils/error';
|
|
import PerformanceReport from './PerformanceReport.vue';
|
|
import { toast } from 'vue-sonner';
|
|
|
|
export default {
|
|
name: 'SiteBinaryLogs',
|
|
props: ['name'],
|
|
components: { PerformanceReport },
|
|
data() {
|
|
return {
|
|
start_time: dayjs().subtract(2, 'hour').format('YYYY-MM-DD HH:mm:ss'),
|
|
end_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
pattern: '.*',
|
|
max_lines: 50
|
|
};
|
|
},
|
|
resources: {
|
|
binaryLogs() {
|
|
return {
|
|
url: 'jcloud.api.analytics.binary_logs',
|
|
makeParams: params => {
|
|
if (params) return params;
|
|
|
|
return {
|
|
name: this.name,
|
|
start_time: this.start_time,
|
|
end_time: this.end_time,
|
|
pattern: this.pattern,
|
|
max_lines: this.max_lines
|
|
};
|
|
},
|
|
validate() {
|
|
if (this.max_lines < 1 || this.max_lines > 500) {
|
|
toast.error('最大行数应在1到500之间');
|
|
throw new DashboardError('最大行数应在1到500之间');
|
|
}
|
|
// check between start_time and end_time is less than 2 hours
|
|
const start = dayjs(this.start_time);
|
|
const end = dayjs(this.end_time);
|
|
if (end.diff(start, 'hour') > 2) {
|
|
toast.error('时间范围应小于2小时');
|
|
throw new DashboardError('时间范围应小于2小时');
|
|
}
|
|
// start_time should be less than end_time
|
|
if (start.isAfter(end)) {
|
|
toast.error('开始时间应小于结束时间');
|
|
throw new DashboardError('开始时间应小于结束时间');
|
|
}
|
|
},
|
|
onError(error) {
|
|
console.error(error.message);
|
|
},
|
|
auto: false,
|
|
pageLength: 10,
|
|
keepData: true,
|
|
initialData: []
|
|
};
|
|
}
|
|
},
|
|
computed: {
|
|
binaryLogsOptions() {
|
|
return {
|
|
data: () => this.$resources.binaryLogs.data,
|
|
updateFilters: params => {
|
|
if (!params) return;
|
|
for (const [key, value] of Object.entries(params)) {
|
|
if (key === 'start_time') this.start_time = value;
|
|
if (key === 'end_time') this.end_time = value;
|
|
if (key === 'pattern') this.pattern = value;
|
|
if (key === 'max_lines') this.max_lines = value;
|
|
}
|
|
},
|
|
columns: [
|
|
{
|
|
label: '时间戳',
|
|
fieldname: 'timestamp',
|
|
width: '12rem',
|
|
format: value => {
|
|
return this.$format.date(value, 'YYYY-MM-DD HH:mm:ss');
|
|
}
|
|
},
|
|
{ label: '查询', fieldname: 'query', class: 'font-mono' }
|
|
],
|
|
filterControls: () => {
|
|
return [
|
|
{
|
|
type: 'datetime',
|
|
label: '开始时间',
|
|
fieldname: 'start_time',
|
|
default: this.start_time
|
|
},
|
|
{
|
|
type: 'datetime',
|
|
label: '结束时间',
|
|
fieldname: 'end_time',
|
|
default: this.end_time
|
|
},
|
|
{
|
|
label: '模式',
|
|
fieldname: 'pattern',
|
|
default: this.pattern
|
|
},
|
|
{
|
|
label: '最大行数',
|
|
fieldname: 'max_lines',
|
|
default: this.max_lines
|
|
}
|
|
];
|
|
},
|
|
actions: () => [
|
|
{
|
|
label: '查看日志',
|
|
variant: 'solid',
|
|
loading: this.$resources.binaryLogs.loading,
|
|
loadingText: '加载中',
|
|
onClick: () => this.$resources.binaryLogs.reload()
|
|
}
|
|
]
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script> |