From 0a08617a28607f473f63ab210b6f3aec39332d03 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Wed, 8 May 2024 10:53:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E8=AF=95=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=97=A5=E5=BF=97=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../task/modules/retry-task-detail-drawer.vue | 132 ++++++++++++------
 1 file changed, 92 insertions(+), 40 deletions(-)

diff --git a/src/views/retry/task/modules/retry-task-detail-drawer.vue b/src/views/retry/task/modules/retry-task-detail-drawer.vue
index 3f29df6..db1d097 100644
--- a/src/views/retry/task/modules/retry-task-detail-drawer.vue
+++ b/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,53 +14,104 @@ 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')">
-    <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.nextTriggerAt')" :span="1">
-        {{ rowData?.nextTriggerAt }}
-      </NDescriptionsItem>
-      <NDescriptionsItem :label="$t('page.retryTask.retryCount')" :span="1">
-        {{ rowData?.retryCount }}
-      </NDescriptionsItem>
-      <NDescriptionsItem :label="$t('page.retryTask.retryStatus')" :span="1">
-        <NTag :type="tagColor(rowData?.retryStatus!)">
-          {{ $t(retryTaskStatusTypeRecord[rowData?.retryStatus!]) }}
-        </NTag>
-      </NDescriptionsItem>
-      <NDescriptionsItem :label="$t('page.retryTask.taskType')" :span="1">
-        <NTag :type="tagColor(rowData?.taskType!)">{{ $t(retryTaskTypeRecord[rowData?.taskType!]) }}</NTag>
-      </NDescriptionsItem>
-      <NDescriptionsItem :label="$t('page.retryTask.bizNo')" :span="2">{{ rowData?.bizNo }}</NDescriptionsItem>
-      <NDescriptionsItem :label="$t('page.retryTask.idempotentId')" :span="2">
-        {{ rowData?.idempotentId }}
-      </NDescriptionsItem>
-      <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>
+    <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.nextTriggerAt')" :span="1">
+            {{ rowData?.nextTriggerAt }}
+          </NDescriptionsItem>
+          <NDescriptionsItem :label="$t('page.retryTask.retryCount')" :span="1">
+            {{ rowData?.retryCount }}
+          </NDescriptionsItem>
+          <NDescriptionsItem :label="$t('page.retryTask.retryStatus')" :span="1">
+            <NTag :type="tagColor(rowData?.retryStatus!)">
+              {{ $t(retryTaskStatusTypeRecord[rowData?.retryStatus!]) }}
+            </NTag>
+          </NDescriptionsItem>
+          <NDescriptionsItem :label="$t('page.retryTask.taskType')" :span="1">
+            <NTag :type="tagColor(rowData?.taskType!)">{{ $t(retryTaskTypeRecord[rowData?.taskType!]) }}</NTag>
+          </NDescriptionsItem>
+          <NDescriptionsItem :label="$t('page.retryTask.bizNo')" :span="2">{{ rowData?.bizNo }}</NDescriptionsItem>
+          <NDescriptionsItem :label="$t('page.retryTask.idempotentId')" :span="2">
+            {{ rowData?.idempotentId }}
+          </NDescriptionsItem>
+          <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>
 </template>