perf: Execution record

Author: wangdan-fit2cloud

ui/src/locales/lang/en-US/ai-chat.ts

@@ -89,6 +89,7 @@ export default {
   },
   executionDetails: {
     title: 'Execution Details',
+    createTime: 'Execution Time',
     paramOutputTooltip: 'Each document supports previewing up to 500 characters',
     audioFile: 'Audio File',
     searchContent: 'Search Query',

ui/src/locales/lang/zh-CN/ai-chat.ts

@@ -87,6 +87,7 @@ export default {
   },
   executionDetails: {
     title: '执行详情',
+    createTime: '执行时间',
     paramOutputTooltip: '每个文档仅支持预览500字',
     audioFile: '语音文件',
     searchContent: '检索内容',

ui/src/locales/lang/zh-Hant/ai-chat.ts

@@ -87,6 +87,7 @@ export default {
   },
   executionDetails: {
     title: '執行詳細',
+    createTime: '執行時間',
     paramOutputTooltip: '每個文件僅支持預覽 500 字',
     audioFile: '語音文件',
     searchContent: '檢索內容',

ui/src/views/knowledge-workflow/component/action/Result.vue

@@ -3,7 +3,7 @@
     <h4 class="title-decoration-1 mb-16 mt-4">
       {{ $t('chat.executionDetails.title') }}
     </h4>
-    <div class="mb-16">
+    <div class="mb-16" v-if="!isRecord">
       <!-- 执行结果 -->
       <el-alert
         v-if="state == 'SUCCESS'"
@@ -25,13 +25,12 @@
 </template>
 <script setup lang="ts">
 import { onUnmounted, ref, computed } from 'vue'
-import knowledgeApi from '@/api/knowledge/knowledge'
-const props = defineProps<{ id: string; knowledge_id: string }>()
+
 import ExecutionDetailContent from '@/components/ai-chat/component/knowledge-source-component/ExecutionDetailContent.vue'
-import { useRoute } from "vue-router";
-import { loadSharedApi } from "@/utils/dynamics-api/shared-api.ts";
+import { useRoute } from 'vue-router'
+import { loadSharedApi } from '@/utils/dynamics-api/shared-api.ts'
 const route = useRoute()
-
+const props = defineProps<{ id: string; knowledge_id: string; isRecord: boolean }>()
 const detail = computed(() => {
   if (knowledge_action.value) {
     return Object.values(knowledge_action.value.details)
@@ -60,7 +59,7 @@ const getKnowledgeWorkflowAction = () => {
   if (pollingTimer == null) {
     return
   }
-  loadSharedApi({type: 'knowledge', systemType: apiType.value})
+  loadSharedApi({ type: 'knowledge', systemType: apiType.value })
     .getWorkflowAction(props.knowledge_id, props.id)
     .then((ok: any) => {
       knowledge_action.value = ok.data

ui/src/views/knowledge-workflow/component/execution-record/ExecutionDetailDrawer.vue

@@ -1,11 +1,63 @@
 <template>
-  <el-drawer v-model="visible" size="60%" @close="closeHandle">
+  <el-drawer
+    v-model="visible"
+    size="800px"
+    :modal="false"
+    destroy-on-close
+    :before-close="closeHandle"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+  >
     <template #header>
-      <h4>{{ $t('views.problem.detailProblem') }}</h4>
+      <div class="flex align-center" style="margin-left: -8px">
+        <el-button class="cursor mr-4" link @click.prevent="visible = false">
+          <el-icon :size="20">
+            <Back />
+          </el-icon>
+        </el-button>
+        <h4>{{ $t('chat.executionDetails.title') }}</h4>
+      </div>
     </template>
     <div>
       <el-scrollbar>
-        <!-- <Result v-model:loading="loading" :knowledge_id="id" :id="action_id" /> -->
+        <h4 class="title-decoration-1 mb-16 mt-4">
+          {{ $t('workflow.ExecutionRecord') }}
+        </h4>
+        <el-card class="mb-24" shadow="never" style="--el-card-padding: 12px 16px">
+          <el-row :gutter="16" class="lighter">
+            <el-col :span="6">
+              <p class="color-secondary mb-4">{{ $t('workflow.initiator') }}</p>
+              <p>{{ detail?.meta.user_name || '-' }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="color-secondary mb-4">{{ $t('common.status.label') }}</p>
+              <p>
+                <el-text class="color-text-primary" v-if="detail?.state === 'SUCCESS'">
+                  <el-icon class="color-success"><SuccessFilled /></el-icon>
+                  {{ $t('common.status.success') }}
+                </el-text>
+                <el-text class="color-text-primary" v-else-if="detail?.state === 'FAILURE'">
+                  <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
+                  {{ $t('common.status.fail') }}
+                </el-text>
+                <el-text class="color-text-primary" v-else>
+                  <el-icon class="is-loading color-primary"><Loading /></el-icon>
+                  {{ $t('common.status.padding') }}
+                </el-text>
+              </p>
+            </el-col>
+            <el-col :span="6">
+              <p class="color-secondary mb-4">{{ $t('chat.KnowledgeSource.consumeTime') }}</p>
+              <p>{{ detail?.run_time != undefined ? detail?.run_time + 's' : '-' }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="color-secondary mb-4">{{ $t('chat.executionDetails.createTime') }}</p>
+              <p>{{ datetimeFormat(detail?.create_time) }}</p>
+            </el-col>
+          </el-row>
+        </el-card>
+        <Result :knowledge_id="knowledge_id" :id="action_id" is-record />
       </el-scrollbar>
     </div>
     <template #footer>
@@ -25,9 +77,7 @@
 import { ref, reactive, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import Result from '@/views/knowledge-workflow/component/action/Result.vue'
-import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
-import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
-import permissionMap from '@/permission'
+import { datetimeFormat } from '@/utils/time'
 import { t } from '@/locales'
 const props = withDefaults(
   defineProps<{
@@ -55,9 +105,6 @@ const props = withDefaults(
 const emit = defineEmits(['update:currentId', 'update:currentContent', 'refresh'])
 
 const route = useRoute()
-const {
-  params: { id },
-} = route
 
 const apiType = computed(() => {
   if (route.path.includes('shared')) {
@@ -72,9 +119,13 @@ const apiType = computed(() => {
 const loading = ref(false)
 const visible = ref(false)
 const action_id = ref<string>('')
+const knowledge_id = ref<string>('')
+const detail = ref<any>(null)
 
 function closeHandle() {
   action_id.value = ''
+  knowledge_id.value = ''
+  detail.value = null
 }
 
 function getRecord() {
@@ -86,6 +137,8 @@ watch(
   () => props.currentId,
   () => {
     action_id.value = ''
+    knowledge_id.value = ''
+    detail.value = null
   },
 )
 
@@ -97,8 +150,10 @@ watch(visible, (bool) => {
   }
 })
 
-const open = (id: string) => {
-  action_id.value = id
+const open = (row: any) => {
+  action_id.value = row.id
+  knowledge_id.value = row.knowledge_id
+  detail.value = row
   visible.value = true
 }
 

ui/src/views/knowledge-workflow/component/execution-record/ExecutionRecordDrawer.vue

@@ -15,22 +15,21 @@
           style="width: 120px"
         >
           <el-option :label="$t('workflow.initiator')" value="user_name" />
+          <el-option :label="$t('common.status.label')" value="state" />
         </el-select>
-        <!-- <el-select
-          v-if="filter_type === 'status'"
-          v-model="filter_status"
-          @change="changeStatusHandle"
+        <el-select
+          v-if="filter_type === 'state'"
+          v-model="query.status"
+          @change="getList"
           style="width: 220px"
           clearable
         >
-          <el-option
-            v-for="item in statusOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select> -->
+          <el-option :label="$t('common.status.success')" value="SUCCESS" />
+          <el-option :label="$t('common.status.fail')" value="FAILURE" />
+          <el-option :label="$t('common.status.padding')" value="PADDING" />
+        </el-select>
         <el-input
+          v-else
           v-model="query.user_name"
           @change="getList"
           :placeholder="$t('common.search')"
@@ -75,6 +74,16 @@
           {{ row.run_time != undefined ? row.run_time + 's' : '-' }}
         </template>
       </el-table-column>
+      <el-table-column
+        prop="create_time"
+        :label="$t('chat.executionDetails.createTime')"
+        width="180"
+      >
+        <template #default="{ row }">
+          {{ datetimeFormat(row.create_time) }}
+        </template>
+      </el-table-column>
+
       <el-table-column :label="$t('common.operation')" width="80">
         <template #default="{ row }">
           <el-tooltip effect="dark" :content="$t('chat.executionDetails.title')" placement="top">
@@ -85,16 +94,18 @@
         </template>
       </el-table-column>
     </app-table-infinite-scroll>
+    <ExecutionDetailDrawer ref="ExecutionDetailDrawerRef" />
   </el-drawer>
 </template>
 <script setup lang="ts">
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
 import AppTableInfiniteScroll from '@/components/app-table-infinite-scroll/index.vue'
+import ExecutionDetailDrawer from './ExecutionDetailDrawer.vue'
 import { computed, ref, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { datetimeFormat } from '@/utils/time'
 const drawer = ref<boolean>(false)
 const route = useRoute()
-const toDetails = (row: any) => {}
 
 const apiType = computed(() => {
   if (route.path.includes('shared')) {
@@ -112,17 +123,23 @@ const paginationConfig = reactive({
 })
 const query = ref<any>({
   user_name: '',
+  status: '',
 })
 const loading = ref(false)
 const filter_type = ref<string>('user_name')
 const active_knowledge_id = ref<string>('')
 const data = ref<Array<any>>([])
+const ExecutionDetailDrawerRef = ref<any>()
+
+const toDetails = (row: any) => {
+  ExecutionDetailDrawerRef.value.open(row)
+}
+
 const changeFilterHandle = () => {
-  query.value = { user_name: '' }
+  query.value = { user_name: '', status: '' }
 }
 const changePage = () => {
   paginationConfig.current_page += 1
-  console.log(paginationConfig.current_page)
   getList()
 }