feat: 重试日志新增日志详情

This commit is contained in:
xlsea 2024-05-08 10:53:24 +08:00
parent 93de41e154
commit 0a08617a28

View File

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { watch } from 'vue'; import { onBeforeUnmount, ref } from 'vue';
import { $t } from '@/locales'; import { $t } from '@/locales';
import { tagColor } from '@/utils/common'; import { tagColor } from '@/utils/common';
import { retryTaskStatusTypeRecord, retryTaskTypeRecord } from '@/constants/business'; import { retryTaskStatusTypeRecord, retryTaskTypeRecord } from '@/constants/business';
import { fetchRetryLogList } from '@/service/api/log';
defineOptions({ defineOptions({
name: 'SceneDetailDrawer' name: 'SceneDetailDrawer'
@ -13,53 +14,104 @@ interface Props {
rowData?: Api.RetryTask.RetryTask | null; rowData?: Api.RetryTask.RetryTask | null;
} }
const props = defineProps<Props>();
const visible = defineModel<boolean>('visible', { const visible = defineModel<boolean>('visible', {
default: false default: false
}); });
const props = defineProps<Props>();
watch( const logList = ref<Api.JobLog.JobMessage[]>([]);
() => props.rowData, const interval = ref<NodeJS.Timeout>();
() => { const controller = new AbortController();
console.log(props.rowData); const finished = ref<boolean>(false);
}, let startId = '0';
{ immediate: true } let fromIndex: number = 0;
);
async function getLogList() {
const { data: logData, error } = await fetchRetryLogList({
groupName: props.rowData!.groupName,
uniqueId: props.rowData!.uniqueId!,
startId,
fromIndex,
size: 50
});
if (!error) {
finished.value = logData.finished;
startId = logData.nextStartId;
fromIndex = logData.fromIndex;
if (logData.message) {
logList.value.push(...logData.message);
logList.value.sort((a, b) => Number.parseInt(a.time_stamp, 10) - Number.parseInt(b.time_stamp, 10));
}
if (!finished.value) {
clearTimeout(interval.value);
interval.value = setTimeout(getLogList, 1000);
}
}
}
const handleUpdateTab = async (value: number) => {
if (value === 1 && logList.value.length === 0) {
await getLogList();
}
};
const stopLog = () => {
finished.value = true;
controller.abort();
clearTimeout(interval.value);
interval.value = undefined;
};
onBeforeUnmount(() => {
stopLog();
});
</script> </script>
<template> <template>
<OperateDrawer v-model="visible" :title="$t('page.retryTask.detail')"> <OperateDrawer v-model="visible" :title="$t('page.retryTask.detail')">
<NDescriptions label-placement="top" bordered :column="2"> <NTabs type="segment" animated @update:value="handleUpdateTab">
<NDescriptionsItem :label="$t('page.retryTask.uniqueId')" :span="2"> <NTabPane :name="0" :tab="$t('page.log.info')">
{{ rowData?.uniqueId }} <NDescriptions label-placement="top" bordered :column="2">
</NDescriptionsItem> <NDescriptionsItem :label="$t('page.retryTask.uniqueId')" :span="2">
<NDescriptionsItem :label="$t('page.retryTask.groupName')" :span="2">{{ rowData?.groupName }}</NDescriptionsItem> {{ rowData?.uniqueId }}
<NDescriptionsItem :label="$t('page.retryTask.sceneName')" :span="2">{{ rowData?.sceneName }}</NDescriptionsItem> </NDescriptionsItem>
<NDescriptionsItem :label="$t('page.retryTask.nextTriggerAt')" :span="1"> <NDescriptionsItem :label="$t('page.retryTask.groupName')" :span="2">
{{ rowData?.nextTriggerAt }} {{ rowData?.groupName }}
</NDescriptionsItem> </NDescriptionsItem>
<NDescriptionsItem :label="$t('page.retryTask.retryCount')" :span="1"> <NDescriptionsItem :label="$t('page.retryTask.sceneName')" :span="2">
{{ rowData?.retryCount }} {{ rowData?.sceneName }}
</NDescriptionsItem> </NDescriptionsItem>
<NDescriptionsItem :label="$t('page.retryTask.retryStatus')" :span="1"> <NDescriptionsItem :label="$t('page.retryTask.nextTriggerAt')" :span="1">
<NTag :type="tagColor(rowData?.retryStatus!)"> {{ rowData?.nextTriggerAt }}
{{ $t(retryTaskStatusTypeRecord[rowData?.retryStatus!]) }} </NDescriptionsItem>
</NTag> <NDescriptionsItem :label="$t('page.retryTask.retryCount')" :span="1">
</NDescriptionsItem> {{ rowData?.retryCount }}
<NDescriptionsItem :label="$t('page.retryTask.taskType')" :span="1"> </NDescriptionsItem>
<NTag :type="tagColor(rowData?.taskType!)">{{ $t(retryTaskTypeRecord[rowData?.taskType!]) }}</NTag> <NDescriptionsItem :label="$t('page.retryTask.retryStatus')" :span="1">
</NDescriptionsItem> <NTag :type="tagColor(rowData?.retryStatus!)">
<NDescriptionsItem :label="$t('page.retryTask.bizNo')" :span="2">{{ rowData?.bizNo }}</NDescriptionsItem> {{ $t(retryTaskStatusTypeRecord[rowData?.retryStatus!]) }}
<NDescriptionsItem :label="$t('page.retryTask.idempotentId')" :span="2"> </NTag>
{{ rowData?.idempotentId }} </NDescriptionsItem>
</NDescriptionsItem> <NDescriptionsItem :label="$t('page.retryTask.taskType')" :span="1">
<NDescriptionsItem :label="$t('page.retryTask.executorName')" :span="2"> <NTag :type="tagColor(rowData?.taskType!)">{{ $t(retryTaskTypeRecord[rowData?.taskType!]) }}</NTag>
{{ rowData?.executorName }} </NDescriptionsItem>
</NDescriptionsItem> <NDescriptionsItem :label="$t('page.retryTask.bizNo')" :span="2">{{ rowData?.bizNo }}</NDescriptionsItem>
<NDescriptionsItem :label="$t('page.retryTask.argsStr')" :span="2">{{ rowData?.argsStr }}</NDescriptionsItem> <NDescriptionsItem :label="$t('page.retryTask.idempotentId')" :span="2">
<NDescriptionsItem :label="$t('common.createDt')" :span="1">{{ rowData?.createDt }}</NDescriptionsItem> {{ rowData?.idempotentId }}
<NDescriptionsItem :label="$t('common.updateDt')" :span="1">{{ rowData?.updateDt }}</NDescriptionsItem> </NDescriptionsItem>
</NDescriptions> <NDescriptionsItem :label="$t('page.retryTask.executorName')" :span="2">
{{ rowData?.executorName }}
</NDescriptionsItem>
<NDescriptionsItem :label="$t('page.retryTask.argsStr')" :span="2">{{ rowData?.argsStr }}</NDescriptionsItem>
<NDescriptionsItem :label="$t('common.createDt')" :span="1">{{ rowData?.createDt }}</NDescriptionsItem>
<NDescriptionsItem :label="$t('common.updateDt')" :span="1">{{ rowData?.updateDt }}</NDescriptionsItem>
</NDescriptions>
</NTabPane>
<NTabPane :name="1" :tab="$t('page.log.title')" display-directive="if">
<LogDrawer v-model="logList" :drawer="false" />
</NTabPane>
</NTabs>
</OperateDrawer> </OperateDrawer>
</template> </template>