refactor(web): migrate log service to TanStack Query (#30065)

web/service/log.ts

@@ -1,80 +1,38 @@
-import type { Fetcher } from 'swr'
 import type {
   AgentLogDetailRequest,
   AgentLogDetailResponse,
-  AnnotationsCountResponse,
-  ChatConversationFullDetailResponse,
-  ChatConversationsRequest,
-  ChatConversationsResponse,
   ChatMessagesRequest,
   ChatMessagesResponse,
-  CompletionConversationFullDetailResponse,
-  CompletionConversationsRequest,
-  CompletionConversationsResponse,
-  ConversationListResponse,
   LogMessageAnnotationsRequest,
   LogMessageAnnotationsResponse,
   LogMessageFeedbacksRequest,
   LogMessageFeedbacksResponse,
-  WorkflowLogsResponse,
   WorkflowRunDetailResponse,
 } from '@/models/log'
 import type { NodeTracingListResponse } from '@/types/workflow'
 import { get, post } from './base'
 
-export const fetchConversationList: Fetcher<ConversationListResponse, { name: string, appId: string, params?: Record<string, any> }> = ({ appId, params }) => {
-  return get<ConversationListResponse>(`/console/api/apps/${appId}/messages`, params)
-}
-
-// (Text Generation Application) Session List
-export const fetchCompletionConversations: Fetcher<CompletionConversationsResponse, { url: string, params?: CompletionConversationsRequest }> = ({ url, params }) => {
-  return get<CompletionConversationsResponse>(url, { params })
-}
-
-// (Text Generation Application) Session Detail
-export const fetchCompletionConversationDetail: Fetcher<CompletionConversationFullDetailResponse, { url: string }> = ({ url }) => {
-  return get<CompletionConversationFullDetailResponse>(url, {})
-}
-
-// (Chat Application) Session List
-export const fetchChatConversations: Fetcher<ChatConversationsResponse, { url: string, params?: ChatConversationsRequest }> = ({ url, params }) => {
-  return get<ChatConversationsResponse>(url, { params })
-}
-
-// (Chat Application) Session Detail
-export const fetchChatConversationDetail: Fetcher<ChatConversationFullDetailResponse, { url: string }> = ({ url }) => {
-  return get<ChatConversationFullDetailResponse>(url, {})
-}
-
 // (Chat Application) Message list in one session
-export const fetchChatMessages: Fetcher<ChatMessagesResponse, { url: string, params: ChatMessagesRequest }> = ({ url, params }) => {
+export const fetchChatMessages = ({ url, params }: { url: string, params: ChatMessagesRequest }): Promise<ChatMessagesResponse> => {
   return get<ChatMessagesResponse>(url, { params })
 }
 
-export const updateLogMessageFeedbacks: Fetcher<LogMessageFeedbacksResponse, { url: string, body: LogMessageFeedbacksRequest }> = ({ url, body }) => {
+export const updateLogMessageFeedbacks = ({ url, body }: { url: string, body: LogMessageFeedbacksRequest }): Promise<LogMessageFeedbacksResponse> => {
   return post<LogMessageFeedbacksResponse>(url, { body })
 }
 
-export const updateLogMessageAnnotations: Fetcher<LogMessageAnnotationsResponse, { url: string, body: LogMessageAnnotationsRequest }> = ({ url, body }) => {
+export const updateLogMessageAnnotations = ({ url, body }: { url: string, body: LogMessageAnnotationsRequest }): Promise<LogMessageAnnotationsResponse> => {
   return post<LogMessageAnnotationsResponse>(url, { body })
 }
 
-export const fetchAnnotationsCount: Fetcher<AnnotationsCountResponse, { url: string }> = ({ url }) => {
-  return get<AnnotationsCountResponse>(url)
-}
-
-export const fetchWorkflowLogs: Fetcher<WorkflowLogsResponse, { url: string, params: Record<string, any> }> = ({ url, params }) => {
-  return get<WorkflowLogsResponse>(url, { params })
-}
-
-export const fetchRunDetail = (url: string) => {
+export const fetchRunDetail = (url: string): Promise<WorkflowRunDetailResponse> => {
   return get<WorkflowRunDetailResponse>(url)
 }
 
-export const fetchTracingList: Fetcher<NodeTracingListResponse, { url: string }> = ({ url }) => {
+export const fetchTracingList = ({ url }: { url: string }): Promise<NodeTracingListResponse> => {
   return get<NodeTracingListResponse>(url)
 }
 
-export const fetchAgentLogDetail = ({ appID, params }: { appID: string, params: AgentLogDetailRequest }) => {
+export const fetchAgentLogDetail = ({ appID, params }: { appID: string, params: AgentLogDetailRequest }): Promise<AgentLogDetailResponse> => {
   return get<AgentLogDetailResponse>(`/apps/${appID}/agent/logs`, { params })
 }

web/service/use-log.ts

@@ -0,0 +1,89 @@
+import type {
+  AnnotationsCountResponse,
+  ChatConversationFullDetailResponse,
+  ChatConversationsRequest,
+  ChatConversationsResponse,
+  CompletionConversationFullDetailResponse,
+  CompletionConversationsRequest,
+  CompletionConversationsResponse,
+  WorkflowLogsResponse,
+} from '@/models/log'
+import { useQuery } from '@tanstack/react-query'
+import { get } from './base'
+
+const NAME_SPACE = 'log'
+
+// ============ Annotations Count ============
+
+export const useAnnotationsCount = (appId: string) => {
+  return useQuery<AnnotationsCountResponse>({
+    queryKey: [NAME_SPACE, 'annotations-count', appId],
+    queryFn: () => get<AnnotationsCountResponse>(`/apps/${appId}/annotations/count`),
+    enabled: !!appId,
+  })
+}
+
+// ============ Chat Conversations ============
+
+type ChatConversationsParams = {
+  appId: string
+  params?: Partial<ChatConversationsRequest>
+}
+
+export const useChatConversations = ({ appId, params }: ChatConversationsParams) => {
+  return useQuery<ChatConversationsResponse>({
+    queryKey: [NAME_SPACE, 'chat-conversations', appId, params],
+    queryFn: () => get<ChatConversationsResponse>(`/apps/${appId}/chat-conversations`, { params }),
+    enabled: !!appId,
+  })
+}
+
+// ============ Completion Conversations ============
+
+type CompletionConversationsParams = {
+  appId: string
+  params?: Partial<CompletionConversationsRequest>
+}
+
+export const useCompletionConversations = ({ appId, params }: CompletionConversationsParams) => {
+  return useQuery<CompletionConversationsResponse>({
+    queryKey: [NAME_SPACE, 'completion-conversations', appId, params],
+    queryFn: () => get<CompletionConversationsResponse>(`/apps/${appId}/completion-conversations`, { params }),
+    enabled: !!appId,
+  })
+}
+
+// ============ Chat Conversation Detail ============
+
+export const useChatConversationDetail = (appId?: string, conversationId?: string) => {
+  return useQuery<ChatConversationFullDetailResponse>({
+    queryKey: [NAME_SPACE, 'chat-conversation-detail', appId, conversationId],
+    queryFn: () => get<ChatConversationFullDetailResponse>(`/apps/${appId}/chat-conversations/${conversationId}`),
+    enabled: !!appId && !!conversationId,
+  })
+}
+
+// ============ Completion Conversation Detail ============
+
+export const useCompletionConversationDetail = (appId?: string, conversationId?: string) => {
+  return useQuery<CompletionConversationFullDetailResponse>({
+    queryKey: [NAME_SPACE, 'completion-conversation-detail', appId, conversationId],
+    queryFn: () => get<CompletionConversationFullDetailResponse>(`/apps/${appId}/completion-conversations/${conversationId}`),
+    enabled: !!appId && !!conversationId,
+  })
+}
+
+// ============ Workflow Logs ============
+
+type WorkflowLogsParams = {
+  appId: string
+  params?: Record<string, string | number | boolean | undefined>
+}
+
+export const useWorkflowLogs = ({ appId, params }: WorkflowLogsParams) => {
+  return useQuery<WorkflowLogsResponse>({
+    queryKey: [NAME_SPACE, 'workflow-logs', appId, params],
+    queryFn: () => get<WorkflowLogsResponse>(`/apps/${appId}/workflow-app-logs`, { params }),
+    enabled: !!appId,
+  })
+}