From fc3a7530bc1100d45086f8b0f2a510aa75b9316e Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Tue, 7 May 2024 15:19:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=87=8D=E8=AF=95?=
 =?UTF-8?q?=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

---
 src/components/common/log-drawer.vue          |  21 ++-
 src/service/api/log.ts                        |   2 +-
 src/typings/api.d.ts                          |   8 ++
 .../batch/modules/job-batch-detail-drawer.vue |   2 +-
 .../log/modules/retry-log-detail-drawer.vue   | 122 +++++++++++++-----
 5 files changed, 117 insertions(+), 38 deletions(-)

diff --git a/src/components/common/log-drawer.vue b/src/components/common/log-drawer.vue
index a87a215..68da7d2 100644
--- a/src/components/common/log-drawer.vue
+++ b/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">
diff --git a/src/service/api/log.ts b/src/service/api/log.ts
index 4416361..9f4f43c 100644
--- a/src/service/api/log.ts
+++ b/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',
diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts
index 6738019..06dd90a 100644
--- a/src/typings/api.d.ts
+++ b/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;
diff --git a/src/views/job/batch/modules/job-batch-detail-drawer.vue b/src/views/job/batch/modules/job-batch-detail-drawer.vue
index 245aec8..88b2cc9 100644
--- a/src/views/job/batch/modules/job-batch-detail-drawer.vue
+++ b/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>
 
diff --git a/src/views/retry/log/modules/retry-log-detail-drawer.vue b/src/views/retry/log/modules/retry-log-detail-drawer.vue
index 51f8f3b..a8df105 100644
--- a/src/views/retry/log/modules/retry-log-detail-drawer.vue
+++ b/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,47 +14,98 @@ 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')">
-    <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.retryStatus')" :span="1">
-        <NTag :type="tagColor(rowData?.retryStatus!)">
-          {{ $t(retryTaskStatusTypeRecord[rowData?.retryStatus!]) }}
-        </NTag>
-      </NDescriptionsItem>
-      <NDescriptionsItem :label="$t('page.retryLog.taskType')" :span="1">
-        <NTag :type="tagColor(rowData?.taskType!)">{{ $t(retryTaskTypeRecord[rowData?.taskType!]) }}</NTag>
-      </NDescriptionsItem>
-      <NDescriptionsItem :label="$t('page.retryLog.bizNo')" :span="2">{{ rowData?.bizNo }}</NDescriptionsItem>
-      <NDescriptionsItem :label="$t('page.retryLog.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')">{{ rowData?.createDt }}</NDescriptionsItem>
-    </NDescriptions>
-  </OperateDrawer>
+  <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.retryStatus')" :span="1">
+            <NTag :type="tagColor(rowData?.retryStatus!)">
+              {{ $t(retryTaskStatusTypeRecord[rowData?.retryStatus!]) }}
+            </NTag>
+          </NDescriptionsItem>
+          <NDescriptionsItem :label="$t('page.retryLog.taskType')" :span="1">
+            <NTag :type="tagColor(rowData?.taskType!)">{{ $t(retryTaskTypeRecord[rowData?.taskType!]) }}</NTag>
+          </NDescriptionsItem>
+          <NDescriptionsItem :label="$t('page.retryLog.bizNo')" :span="2">{{ rowData?.bizNo }}</NDescriptionsItem>
+          <NDescriptionsItem :label="$t('page.retryLog.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')">{{ rowData?.createDt }}</NDescriptionsItem>
+        </NDescriptions>
+      </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>