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

src/views/retry/task/modules/retry-task-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.RetryTask.RetryTask | 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.retryTask.detail')">
+    <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.retryTask.uniqueId')" :span="2">
             {{ rowData?.uniqueId }}
           </NDescriptionsItem>
-      <NDescriptionsItem :label="$t('page.retryTask.groupName')" :span="2">{{ rowData?.groupName }}</NDescriptionsItem>
-      <NDescriptionsItem :label="$t('page.retryTask.sceneName')" :span="2">{{ rowData?.sceneName }}</NDescriptionsItem>
+          <NDescriptionsItem :label="$t('page.retryTask.groupName')" :span="2">
+            {{ rowData?.groupName }}
+          </NDescriptionsItem>
+          <NDescriptionsItem :label="$t('page.retryTask.sceneName')" :span="2">
+            {{ rowData?.sceneName }}
+          </NDescriptionsItem>
           <NDescriptionsItem :label="$t('page.retryTask.nextTriggerAt')" :span="1">
             {{ rowData?.nextTriggerAt }}
           </NDescriptionsItem>
@@ -60,6 +107,11 @@ watch(
           <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>
 </template>