feat: 新增重试日志详情

src/components/common/log-drawer.vue

@@ -10,12 +10,14 @@ defineOptions({
 interface Props {
   title?: string;
   show?: boolean;
+  drawer?: boolean;
   modelValue?: Api.JobLog.JobMessage[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   title: $t('page.log.title'),
   show: false,
+  drawer: true,
   modelValue: () => []
 });
 
@@ -79,7 +81,13 @@ function timestampToDate(timestamp: string): string {
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" width="100%" display-directive="if" @update:show="onUpdateShow">
+  <NDrawer
+    v-if="drawer && modelValue.length > 0"
+    v-model:show="visible"
+    width="100%"
+    display-directive="if"
+    @update:show="onUpdateShow"
+  >
     <NDrawerContent :title="title" closable>
       <div class="snail-log">
         <div class="snail-log-scrollbar">
@@ -93,6 +101,17 @@ function timestampToDate(timestamp: string): string {
       </div>
     </NDrawerContent>
   </NDrawer>
+  <div v-if="!drawer && modelValue.length > 0" 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.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>
+      </code>
+    </div>
+  </div>
+  <NEmpty v-else class="h-full" />
 </template>
 
 <style scoped lang="scss">

src/service/api/log.ts

@@ -10,7 +10,7 @@ export function fetchJobLogList(params?: Api.JobLog.JobLogSearchParams) {
 }
 
 /** get Retry Log List */
-export function fetchRetryLogList(params?: Api.JobLog.JobLogSearchParams) {
+export function fetchRetryLogList(params?: Api.JobLog.RetryLogSearchParams) {
   return request<Api.JobLog.JobLogList>({
     url: '/retry-task-log/message/list',
     method: 'get',

src/typings/api.d.ts

@@ -1202,6 +1202,14 @@ declare namespace Api {
       taskBatchId: string;
       jobId: string;
       taskId: string;
+    } & LogSearchParams;
+
+    type RetryLogSearchParams = {
+      groupName: string;
+      uniqueId: string;
+    } & LogSearchParams;
+
+    type LogSearchParams = {
       startId: string;
       fromIndex: number;
       size: number;

src/views/job/batch/modules/job-batch-detail-drawer.vue

@@ -196,7 +196,7 @@ onBeforeUnmount(() => {
         />
       </NTabPane>
     </NTabs>
-    <LogDrawer v-model="logList" v-model:show="logShow" title="日志" />
+    <LogDrawer v-model="logList" v-model:show="logShow" :title="$t('page.log.title')" />
   </DetailDrawer>
 </template>
 

src/views/retry/log/modules/retry-log-detail-drawer.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { watch } from 'vue';
+import { onBeforeUnmount, ref } from 'vue';
 import { $t } from '@/locales';
 import { tagColor } from '@/utils/common';
 import { retryTaskStatusTypeRecord, retryTaskTypeRecord } from '@/constants/business';
+import { fetchRetryLogList } from '@/service/api/log';
 
 defineOptions({
   name: 'SceneDetailDrawer'
@@ -13,28 +14,74 @@ interface Props {
   rowData?: Api.RetryLog.RetryLog | null;
 }
 
+const props = defineProps<Props>();
+
 const visible = defineModel<boolean>('visible', {
   default: false
 });
-const props = defineProps<Props>();
 
-watch(
-  () => props.rowData,
-  () => {
-    console.log(props.rowData);
-  },
-  { immediate: true }
-);
+const logList = ref<Api.JobLog.JobMessage[]>([]);
+const interval = ref<NodeJS.Timeout>();
+const controller = new AbortController();
+const finished = ref<boolean>(false);
+let startId = '0';
+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>
 
 <template>
-  <OperateDrawer v-model="visible" :title="$t('page.retryLog.detail')">
+  <DetailDrawer v-model="visible" :title="$t('page.retryLog.detail')" :width="['50%', '90%']">
+    <NTabs type="segment" animated @update:value="handleUpdateTab">
+      <NTabPane :name="0" :tab="$t('page.log.info')">
         <NDescriptions label-placement="top" bordered :column="2">
           <NDescriptionsItem :label="$t('page.retryLog.UniqueId')" :span="2">
             {{ rowData?.uniqueId }}
           </NDescriptionsItem>
-      <NDescriptionsItem :label="$t('page.retryLog.groupName')" :span="2">{{ rowData?.groupName }}</NDescriptionsItem>
-      <NDescriptionsItem :label="$t('page.retryLog.sceneName')" :span="2">{{ rowData?.sceneName }}</NDescriptionsItem>
+          <NDescriptionsItem :label="$t('page.retryLog.groupName')" :span="2">
+            {{ rowData?.groupName }}
+          </NDescriptionsItem>
+          <NDescriptionsItem :label="$t('page.retryLog.sceneName')" :span="2">
+            {{ rowData?.sceneName }}
+          </NDescriptionsItem>
           <NDescriptionsItem :label="$t('page.retryLog.retryStatus')" :span="1">
             <NTag :type="tagColor(rowData?.retryStatus!)">
               {{ $t(retryTaskStatusTypeRecord[rowData?.retryStatus!]) }}
@@ -53,7 +100,12 @@ watch(
           <NDescriptionsItem :label="$t('page.retryTask.argsStr')" :span="2">{{ rowData?.argsStr }}</NDescriptionsItem>
           <NDescriptionsItem :label="$t('common.createDt')">{{ rowData?.createDt }}</NDescriptionsItem>
         </NDescriptions>
-  </OperateDrawer>
+      </NTabPane>
+      <NTabPane :name="1" :tab="$t('page.log.title')" display-directive="if">
+        <LogDrawer v-model="logList" :drawer="false" />
+      </NTabPane>
+    </NTabs>
+  </DetailDrawer>
 </template>
 
 <style scoped></style>