Add Orion Client API integration for client list display (#1747)

Author: zyd123-cmd

moon/apps/web/components/ClView/components/Checks/index.tsx

@@ -24,24 +24,32 @@ const Checks = ({ cl }: { cl: number }) => {
   useEffect(() => {
     if (!tasks || tasks.length === 0) return
 
-    const allBuildIds = tasks.flatMap((task) => task.build_list.map((build) => build.id))
+    const builds = tasks.flatMap((task) =>
+      (task.build_list ?? []).map((build) => ({
+        build_id: build.id,
+        task_id: build.task_id ?? task.task_id,
+        repo: build.repo
+      }))
+    )
+
+    const validBuilds = builds.filter((b) => Boolean(b.build_id && b.task_id && b.repo))
 
-    if (allBuildIds.length === 0) return
+    if (validBuilds.length === 0) return
 
-    allBuildIds.forEach((id) => {
-      setEventSource(id)
-      setLogStatus((prev) => ({ ...prev, [id]: 'loading' }))
+    validBuilds.forEach((b) => {
+      setEventSource(b.build_id)
+      setLogStatus((prev) => ({ ...prev, [b.build_id]: 'loading' }))
     })
 
     const fetchLogs = async () => {
       const logsResult = await Promise.allSettled(
-        allBuildIds.map(async (id) => {
+        validBuilds.map(async ({ build_id, task_id, repo }) => {
           try {
-            const res = await fetchHTTPLog({ id, type: 'full' })
+            const res = await fetchHTTPLog({ task_id, build_id, repo })
 
-            return { id, res, error: null }
+            return { id: build_id, res, error: null }
           } catch (error) {
-            return { id, res: null, error }
+            return { id: build_id, res: null, error }
           }
         })
       )
@@ -78,7 +86,7 @@ const Checks = ({ cl }: { cl: number }) => {
           }
         } else {
           // Promise.allSettled rejected (shouldn't happen with try-catch, but defensive)
-          const id = allBuildIds[logsResult.indexOf(item)]
+          const id = validBuilds[logsResult.indexOf(item)]?.build_id
 
           if (id) {
             newLogStatus[id] = 'error'
@@ -93,8 +101,8 @@ const Checks = ({ cl }: { cl: number }) => {
 
     fetchLogs()
 
-    if (!buildid && allBuildIds.length > 0) {
-      setBuildId(allBuildIds[0])
+    if (!buildid && validBuilds.length > 0) {
+      setBuildId(validBuilds[0].build_id)
     }
 
     return () => {

moon/apps/web/components/OrionClient/ClientsTable.tsx

@@ -3,8 +3,11 @@
 import React from 'react'
 import { DataTable } from '@primer/react/experimental'
 
+import { CoreWorkerStatus, TaskPhase } from '@gitmono/types/generated'
 import { Select, SelectTrigger, SelectValue, UIText } from '@gitmono/ui'
 
+import { useGetOrionClientStatusById } from '@/hooks/OrionClient/OrionClientStatusById'
+
 import { StatusBadge } from './StatusBadge'
 import { deriveStatus, OrionClient, OrionClientStatus } from './types'
 
@@ -86,7 +89,7 @@ export function ClientsTable({ clients, isLoading, statusFilter, onStatusChange,
         ),
         field: 'statusDerived',
         width: '14%',
-        renderCell: (row: Row) => <StatusBadge status={row.statusDerived} />
+        renderCell: (row: Row) => <OrionClientStatusCell client={row} />
       }
     ],
     [onStatusChange, statusFilter, statusOptions]
@@ -114,6 +117,38 @@ export function ClientsTable({ clients, isLoading, statusFilter, onStatusChange,
   )
 }
 
+function OrionClientStatusCell({ client }: { client: OrionClient }) {
+  const { data, isLoading, isError } = useGetOrionClientStatusById(client.client_id, undefined, 5 * 60 * 1000)
+
+  if (isLoading) {
+    return (
+      <UIText color='text-muted' size='text-xs'>
+        Loading…
+      </UIText>
+    )
+  }
+
+  if (isError || !data) {
+    return <StatusBadge status={deriveStatus(client)} />
+  }
+
+  return <StatusBadge status={mapApiStatusToUiStatus(data.core_status, data.phase)} />
+}
+
+function mapApiStatusToUiStatus(coreStatus: CoreWorkerStatus, phase: TaskPhase | null | undefined): OrionClientStatus {
+  if (coreStatus === CoreWorkerStatus.Idle) return 'idle'
+  if (coreStatus === CoreWorkerStatus.Error) return 'error'
+  if (coreStatus === CoreWorkerStatus.Lost) return 'offline'
+
+  if (coreStatus === CoreWorkerStatus.Busy) {
+    if (phase === TaskPhase.DownloadingSource) return 'downloading'
+    if (phase === TaskPhase.RunningBuild) return 'running'
+    return 'busy'
+  }
+
+  return 'idle'
+}
+
 function formatDateTime(iso: string) {
   if (!iso) return '—'
   const d = new Date(iso)

moon/apps/web/components/OrionClient/StatusBadge.tsx

@@ -4,22 +4,23 @@ import { Badge } from '@gitmono/ui'
 
 import { OrionClientStatus } from './types'
 
+type UIOrionClientStatus = Exclude<OrionClientStatus, 'preparing' | 'uploading'>
+
 const STATUS_META: Record<
-  OrionClientStatus,
+  UIOrionClientStatus,
   { color: 'default' | 'blue' | 'green' | 'brand' | 'orange' | 'amber'; label: string }
 > = {
   idle: { color: 'green', label: 'Idle' },
   busy: { color: 'orange', label: 'Busy ' },
   running: { color: 'blue', label: 'Running build' },
   downloading: { color: 'blue', label: 'Downloading source' },
-  preparing: { color: 'blue', label: 'Preparing environment' },
-  uploading: { color: 'blue', label: 'Uploading artifacts' },
   error: { color: 'brand', label: 'Error ' },
   offline: { color: 'default', label: 'Lost / Offline' }
 }
 
 export function StatusBadge({ status }: { status: OrionClientStatus }) {
-  const meta = STATUS_META[status] ?? STATUS_META.idle
+  const normalizedStatus: UIOrionClientStatus = status
+  const meta = STATUS_META[normalizedStatus]
 
   return (
     <Badge className='min-w-[140px] justify-center px-3 py-0.5 text-xs' color={meta.color}>

moon/apps/web/components/OrionClient/types.ts

@@ -1,19 +1,11 @@
 'use client'
 
-export type OrionClientStatus =
-  | 'idle'
-  | 'busy'
-  | 'running'
-  | 'downloading'
-  | 'preparing'
-  | 'uploading'
-  | 'error'
-  | 'offline'
+export type OrionClientStatus = 'idle' | 'busy' | 'running' | 'downloading' | 'error' | 'offline'
 
 export interface OrionClient {
   client_id: string
   hostname: string
-  instance_id: string
+  instance_id?: string
   orion_version: string
   start_time: string
   last_heartbeat: string

moon/apps/web/hooks/OrionClient/OrionClientStatusById.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query'
+
+import type { GetOrionClientStatusByIdData, RequestParams } from '@gitmono/types/generated'
+
+import { orionApiClient } from '@/utils/queryClient'
+
+export function useGetOrionClientStatusById(id: string, params?: RequestParams, refetchIntervalMs?: number) {
+  return useQuery<GetOrionClientStatusByIdData, Error>({
+    queryKey: [...orionApiClient.id.getOrionClientStatusById().requestKey(id), params],
+    queryFn: () => orionApiClient.id.getOrionClientStatusById().request(id, params),
+    refetchInterval: refetchIntervalMs,
+    refetchIntervalInBackground: Boolean(refetchIntervalMs),
+    enabled: Boolean(id)
+  })
+}
+
+export const fetchOrionClientStatusById = (id: string, params?: RequestParams) => {
+  return orionApiClient.id.getOrionClientStatusById().request(id, params)
+}

moon/apps/web/hooks/OrionClient/OrionClientsInfo.ts

@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import type { PageParamsOrionClientQuery, PostOrionClientsInfoData, RequestParams } from '@gitmono/types/generated'
+
+import { orionApiClient } from '@/utils/queryClient'
+
+export function usePostOrionClientsInfo(params?: RequestParams) {
+  const queryClient = useQueryClient()
+  const mutation = orionApiClient.postOrionClientsInfo()
+
+  return useMutation<PostOrionClientsInfoData, Error, PageParamsOrionClientQuery>({
+    mutationFn: (data) => mutation.request(data, params),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: mutation.baseKey
+      })
+    }
+  })
+}

moon/apps/web/hooks/SSE/useGetHTTPLog.ts

@@ -1,16 +1,19 @@
 import { useQuery } from '@tanstack/react-query'
 
-import { GetTaskHistoryOutputByIdData, GetTaskHistoryOutputByIdParams, RequestParams } from '@gitmono/types/generated'
+import { GetTaskHistoryOutputData, GetTaskHistoryOutputParams, RequestParams } from '@gitmono/types/generated'
 
 import { orionApiClient } from '@/utils/queryClient'
 
-export function useGetHTTPLog(payload: GetTaskHistoryOutputByIdParams, params?: RequestParams) {
-  return useQuery<GetTaskHistoryOutputByIdData, Error>({
-    queryKey: [...orionApiClient.id.getTaskHistoryOutputById().requestKey(payload), params],
-    queryFn: () => orionApiClient.id.getTaskHistoryOutputById().request(payload, params)
+export function useGetHTTPLog(query: GetTaskHistoryOutputParams, params?: RequestParams) {
+  const request = orionApiClient.getTaskHistoryOutput()
+
+  return useQuery<GetTaskHistoryOutputData, Error>({
+    queryKey: [...request.requestKey(query), params],
+    queryFn: () => request.request(query, params),
+    enabled: Boolean(query?.task_id && query?.build_id && query?.repo)
   })
 }
 
-export const fetchHTTPLog = (payload: GetTaskHistoryOutputByIdParams, params?: RequestParams) => {
-  return orionApiClient.id.getTaskHistoryOutputById().request(payload, params)
+export const fetchHTTPLog = (query: GetTaskHistoryOutputParams, params?: RequestParams) => {
+  return orionApiClient.getTaskHistoryOutput().request(query, params)
 }

moon/apps/web/hooks/commits/useGetCommitsDetail.ts

@@ -1,11 +1,21 @@
 import { useMutation } from '@tanstack/react-query'
 
-import { GetApiCommitsDetailData, GetApiCommitsDetailParams, RequestParams } from '@gitmono/types/generated'
+import {
+  Pagination,
+  PostApiCommitsFilesChangedData,
+  PostApiCommitsFilesChangedParams,
+  RequestParams
+} from '@gitmono/types/generated'
 
 import { legacyApiClient } from '@/utils/queryClient'
 
 export function useGetCommitsDetail() {
-  return useMutation<GetApiCommitsDetailData, Error, { data: GetApiCommitsDetailParams; params?: RequestParams }>({
-    mutationFn: ({ data, params }) => legacyApiClient.v1.getApiCommitsDetail().request(data, params)
+  return useMutation<
+    PostApiCommitsFilesChangedData,
+    Error,
+    { params: PostApiCommitsFilesChangedParams; data: Pagination; requestParams?: RequestParams }
+  >({
+    mutationFn: ({ params, data, requestParams }) =>
+      legacyApiClient.v1.postApiCommitsFilesChanged().request(params, data, requestParams)
   })
 }