fix(sj_map_reduce): 修复日志弹窗打开时间较长问题
This commit is contained in:
xlsea
parent
e07b2039c9
commit
a12569ca91
@ -99,13 +99,7 @@ function openNewTab() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer
|
||||
v-if="drawer && modelValue.length > 0"
|
||||
v-model:show="visible"
|
||||
width="100%"
|
||||
display-directive="if"
|
||||
@update:show="onUpdateShow"
|
||||
>
|
||||
<NDrawer v-if="drawer" v-model:show="visible" width="100%" display-directive="if" @update:show="onUpdateShow">
|
||||
<NDrawerContent closable>
|
||||
<template #header>
|
||||
<div class="flex-center">
|
||||
@ -116,22 +110,24 @@ function openNewTab() {
|
||||
<div class="snail-log bg-#fafafc p-16px dark:bg-#000">
|
||||
<div class="snail-log-scrollbar">
|
||||
<code>
|
||||
<pre
|
||||
v-for="(message, index) in modelValue"
|
||||
:key="index"
|
||||
><NDivider v-if="index !== 0" /><span class="log-hljs-time inline-block">{{timestampToDate(message.time_stamp)}}</span><span :class="`log-hljs-level-${message.level}`" class="ml-12px mr-12px inline-block">{{`${message.level}`}}</span><span class="log-hljs-thread mr-12px inline-block">{{ `[${message.host}:${message.port}]` }}</span><span class="log-hljs-thread mr-12px inline-block">{{`[${message.thread}]`}}</span><span class="log-hljs-location">{{`${message.location}: \n`}}</span> -<span class="pl-6px">{{`${message.message}`}}</span><ThrowableComponent :throwable="message.throwable" /></pre>
|
||||
<NVirtualList class="virtual-list" :item-size="42" :items="modelValue">
|
||||
<template #default="{ item: message, index }">
|
||||
<pre><NDivider v-if="index !== 0" /><span class="log-hljs-time inline-block">{{timestampToDate(message.time_stamp)}}</span><span :class="`log-hljs-level-${message.level}`" class="ml-12px mr-12px inline-block">{{`${message.level}`}}</span><span class="log-hljs-thread mr-12px inline-block">{{ `[${message.host}:${message.port}]` }}</span><span class="log-hljs-thread mr-12px inline-block">{{`[${message.thread}]`}}</span><span class="log-hljs-location">{{`${message.location}: \n`}}</span> -<span class="pl-6px">{{`${message.message}`}}</span><ThrowableComponent :throwable="message.throwable" /></pre>
|
||||
</template>
|
||||
</NVirtualList>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
<div v-if="!drawer && modelValue.length > 0" class="snail-log">
|
||||
<div v-if="!drawer" class="snail-log">
|
||||
<div class="snail-log-scrollbar">
|
||||
<code>
|
||||
<pre
|
||||
v-for="(message, index) in modelValue"
|
||||
:key="index"
|
||||
><NDivider v-if="index !== 0" /><span class="log-hljs-time">{{timestampToDate(message.time_stamp)}}</span><span :class="`log-hljs-level-${message.level}`">{{`\t${message.level}\t`}}</span><span class="log-hljs-thread">{{ `[${message.host}:${message.port}]\t` }}</span><span class="log-hljs-thread">{{`[${message.thread}]\t`}}</span><span class="log-hljs-location">{{`${message.location}: \n`}}</span> -<span class="pl-6px">{{`${message.message}\n`}}</span><ThrowableComponent :throwable="message.throwable" /></pre>
|
||||
<NVirtualList class="virtual-list" :item-size="42" :items="modelValue">
|
||||
<template #default="{ item: message, index }">
|
||||
<pre><NDivider v-if="index !== 0" /><span class="log-hljs-time inline-block">{{timestampToDate(message.time_stamp)}}</span><span :class="`log-hljs-level-${message.level}`" class="ml-12px mr-12px inline-block">{{`${message.level}`}}</span><span class="log-hljs-thread mr-12px inline-block">{{ `[${message.host}:${message.port}]` }}</span><span class="log-hljs-thread mr-12px inline-block">{{`[${message.thread}]`}}</span><span class="log-hljs-location">{{`${message.location}: \n`}}</span> -<span class="pl-6px">{{`${message.message}`}}</span><ThrowableComponent :throwable="message.throwable" /></pre>
|
||||
</template>
|
||||
</NVirtualList>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
@ -142,6 +138,10 @@ function openNewTab() {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 101px);
|
||||
}
|
||||
|
||||
&-scrollbar {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<script setup lang="tsx">
|
||||
import { NCollapse, NCollapseItem } from 'naive-ui';
|
||||
import { defineComponent, onBeforeUnmount, ref, watch } from 'vue';
|
||||
import { onBeforeUnmount, ref, watch } from 'vue';
|
||||
import { $t } from '@/locales';
|
||||
import { fetchJobLogList } from '@/service/api/log';
|
||||
|
||||
@ -10,58 +9,21 @@ defineOptions({
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
show?: boolean;
|
||||
taskData: Workflow.JobTaskType;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
title: $t('workflow.node.log.title'),
|
||||
show: false,
|
||||
modelValue: () => []
|
||||
});
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:show', show: boolean): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
const show = defineModel<boolean>('show', {
|
||||
default: true
|
||||
});
|
||||
|
||||
const ThrowableComponent = defineComponent({
|
||||
props: {
|
||||
throwable: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
setup(thProps) {
|
||||
return () => {
|
||||
if (!thProps.throwable) {
|
||||
return <></>;
|
||||
}
|
||||
const firstLine = thProps.throwable.match(/^.+/m);
|
||||
if (!firstLine) {
|
||||
return <></>;
|
||||
}
|
||||
const restOfText = thProps.throwable.replace(/^.+(\n|$)/m, '');
|
||||
return (
|
||||
<NCollapse>
|
||||
<NCollapseItem title={firstLine[0]} name="1">
|
||||
{`${restOfText}`}
|
||||
</NCollapseItem>
|
||||
</NCollapse>
|
||||
);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
() => show.value,
|
||||
val => {
|
||||
visible.value = val;
|
||||
if (val) {
|
||||
getLogList();
|
||||
}
|
||||
@ -69,10 +31,6 @@ watch(
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const onUpdateShow = (value: boolean) => {
|
||||
emit('update:show', value);
|
||||
};
|
||||
|
||||
const logList = ref<Api.JobLog.JobMessage[]>([]);
|
||||
const interval = ref<NodeJS.Timeout>();
|
||||
const controller = new AbortController();
|
||||
@ -114,35 +72,10 @@ const stopLog = () => {
|
||||
onBeforeUnmount(() => {
|
||||
stopLog();
|
||||
});
|
||||
|
||||
function timestampToDate(timestamp: string): string {
|
||||
const date = new Date(Number.parseInt(timestamp?.toString(), 10));
|
||||
const year = date.getFullYear();
|
||||
const month =
|
||||
(date.getMonth() + 1)?.toString().length === 1 ? `0${date.getMonth() + 1}` : (date.getMonth() + 1)?.toString();
|
||||
const day = date.getDate()?.toString().length === 1 ? `0${date.getDate()}` : date.getDate()?.toString();
|
||||
const hours = date.getHours()?.toString().length === 1 ? `0${date.getHours()}` : date.getHours()?.toString();
|
||||
const minutes = date.getMinutes()?.toString().length === 1 ? `0${date.getMinutes()}` : date.getMinutes()?.toString();
|
||||
const seconds = date.getSeconds()?.toString().length === 1 ? `0${date.getSeconds()}` : date.getSeconds()?.toString();
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${date.getMilliseconds()}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" width="100%" display-directive="if" @update:show="onUpdateShow">
|
||||
<NDrawerContent :title="title" closable>
|
||||
<div class="snail-log bg-#fafafc p-16px dark:bg-#000">
|
||||
<div class="snail-log-scrollbar">
|
||||
<code>
|
||||
<pre
|
||||
v-for="(message, index) in logList"
|
||||
:key="index"
|
||||
><NDivider v-if="index !== 0" /><span class="log-hljs-time inline-block">{{timestampToDate(message.time_stamp)}}</span><span :class="`log-hljs-level-${message.level}`" class="ml-12px mr-12px inline-block">{{`${message.level}`}}</span><span class="log-hljs-thread mr-12px inline-block">{{ `[${message.host}:${message.port}]` }}</span><span class="log-hljs-thread mr-12px inline-block">{{`[${message.thread}]`}}</span><span class="log-hljs-location">{{`${message.location}: \n`}}</span> -<span class="pl-6px">{{`${message.message}`}}</span><ThrowableComponent :throwable="message.throwable" /></pre>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
<LogDrawer v-model="logList" v-model:show="show" :title="title" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -169,12 +169,9 @@ const { columnChecks, columns, data, getData, loading, mobilePagination, searchP
|
||||
{{
|
||||
default: () => $t('common.confirmStop'),
|
||||
trigger: () => (
|
||||
<>
|
||||
<n-divider vertical />
|
||||
<NButton type="error" text ghost size="small">
|
||||
{$t('common.stop')}
|
||||
</NButton>
|
||||
</>
|
||||
<NButton type="error" text ghost size="small">
|
||||
{$t('common.stop')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
@ -206,7 +203,7 @@ const { columnChecks, columns, data, getData, loading, mobilePagination, searchP
|
||||
};
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
<NButton type="primary" text ghost size="small" onClick={handleLog}>
|
||||
<NButton type="primary" text ghost size="small" onClick={() => handleLog(row)}>
|
||||
{$t('common.log')}
|
||||
</NButton>
|
||||
{stopBtn()}
|
||||
@ -218,7 +215,8 @@ const { columnChecks, columns, data, getData, loading, mobilePagination, searchP
|
||||
]
|
||||
});
|
||||
|
||||
function handleLog() {
|
||||
function handleLog(row: Api.JobBatch.JobBatch) {
|
||||
detailData.value = row;
|
||||
setDetailLog(true);
|
||||
openDetail();
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@ const logShow = ref(false);
|
||||
const store = useLogStore();
|
||||
|
||||
async function openLog(row: Api.Job.JobTask) {
|
||||
store.setTaskInfo(props.rowData!.jobName, row.taskBatchId);
|
||||
store.setTaskInfo(props.rowData?.jobName || '', row.taskBatchId);
|
||||
logShow.value = true;
|
||||
taskData.value = row;
|
||||
await getLogList();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user