CaIon
299 lines
9.2 KiB
TypeScript
Vendored
299 lines
9.2 KiB
TypeScript
Vendored
/* eslint-disable react-refresh/only-export-components */
|
|
import { useState, useMemo } from 'react'
|
|
import type { ColumnDef } from '@tanstack/react-table'
|
|
import { Music } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { formatTimestampToDate } from '@/lib/format'
|
|
import { cn } from '@/lib/utils'
|
|
import { DataTableColumnHeader } from '@/components/data-table'
|
|
import { StatusBadge } from '@/components/status-badge'
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
|
|
import { TASK_ACTIONS, TASK_STATUS } from '../../constants'
|
|
import {
|
|
taskActionMapper,
|
|
taskStatusMapper,
|
|
} from '../../lib/mappers'
|
|
import type { TaskLog } from '../../types'
|
|
import { getLogAvatarStyle } from '../../lib/avatar-color'
|
|
import { useUsageLogsContext } from '../usage-logs-provider'
|
|
import {
|
|
AudioPreviewDialog,
|
|
type AudioClip,
|
|
} from '../dialogs/audio-preview-dialog'
|
|
import { FailReasonDialog } from '../dialogs/fail-reason-dialog'
|
|
import {
|
|
createDurationColumn,
|
|
createChannelColumn,
|
|
createProgressColumn,
|
|
} from './column-helpers'
|
|
|
|
function parseTaskData(data: unknown): unknown[] {
|
|
if (Array.isArray(data)) return data
|
|
if (typeof data === 'string') {
|
|
try {
|
|
const parsed = JSON.parse(data)
|
|
return Array.isArray(parsed) ? parsed : []
|
|
} catch {
|
|
return []
|
|
}
|
|
}
|
|
return []
|
|
}
|
|
|
|
function AudioPreviewCell({ log }: { log: TaskLog }) {
|
|
const { t } = useTranslation()
|
|
const [open, setOpen] = useState(false)
|
|
const clips = useMemo(() => {
|
|
const data = parseTaskData(log.data)
|
|
return data.filter(
|
|
(c) =>
|
|
c && typeof c === 'object' && (c as Record<string, unknown>).audio_url
|
|
)
|
|
}, [log.data])
|
|
|
|
if (clips.length === 0) return null
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type='button'
|
|
className='group flex items-center gap-1 text-left text-xs'
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<Music className='size-3 text-muted-foreground' />
|
|
<span className='text-foreground leading-snug group-hover:underline'>
|
|
{t('Click to preview audio')}
|
|
</span>
|
|
</button>
|
|
<AudioPreviewDialog
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
clips={clips as AudioClip[]}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
|
|
const { t } = useTranslation()
|
|
const columns: ColumnDef<TaskLog>[] = [
|
|
{
|
|
accessorKey: 'submit_time',
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title={t('Submit Time')} />
|
|
),
|
|
cell: ({ row }) => {
|
|
const log = row.original
|
|
const submitTime = row.getValue('submit_time') as number
|
|
|
|
return (
|
|
<div className='flex flex-col gap-0.5'>
|
|
<span className='font-mono text-xs tabular-nums'>
|
|
{formatTimestampToDate(submitTime, 'seconds')}
|
|
</span>
|
|
{log.finish_time ? (
|
|
<span className='text-muted-foreground/60 font-mono text-[11px] tabular-nums'>
|
|
{formatTimestampToDate(log.finish_time, 'seconds')}
|
|
</span>
|
|
) : (
|
|
<span className='text-muted-foreground/50 text-[11px]'>-</span>
|
|
)}
|
|
</div>
|
|
)
|
|
},
|
|
meta: { label: t('Submit Time') },
|
|
},
|
|
]
|
|
|
|
if (isAdmin) {
|
|
columns.push(
|
|
createChannelColumn<TaskLog>({ headerLabel: t('Channel') }),
|
|
{
|
|
id: 'user',
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title={t('User')} />
|
|
),
|
|
cell: function UserCell({ row }) {
|
|
const {
|
|
sensitiveVisible,
|
|
setSelectedUserId,
|
|
setUserInfoDialogOpen,
|
|
} = useUsageLogsContext()
|
|
const log = row.original
|
|
const displayName = log.username || String(log.user_id || '?')
|
|
|
|
return (
|
|
<button
|
|
type='button'
|
|
className='flex items-center gap-1.5 text-left'
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setSelectedUserId(log.user_id)
|
|
setUserInfoDialogOpen(true)
|
|
}}
|
|
>
|
|
<Avatar className='size-6 ring-1 ring-border/60'>
|
|
<AvatarFallback
|
|
className={cn(
|
|
'text-[11px] font-semibold',
|
|
!sensitiveVisible && 'bg-muted text-muted-foreground'
|
|
)}
|
|
style={
|
|
sensitiveVisible ? getLogAvatarStyle(displayName) : undefined
|
|
}
|
|
>
|
|
{sensitiveVisible
|
|
? displayName.charAt(0).toUpperCase()
|
|
: '•'}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<span className='text-muted-foreground truncate text-sm hover:underline'>
|
|
{sensitiveVisible ? displayName : '••••'}
|
|
</span>
|
|
</button>
|
|
)
|
|
},
|
|
meta: { label: t('User'), mobileHidden: true },
|
|
}
|
|
)
|
|
}
|
|
|
|
columns.push(
|
|
{
|
|
accessorKey: 'task_id',
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title={t('Task ID')} />
|
|
),
|
|
cell: ({ row }) => {
|
|
const log = row.original
|
|
const taskId = row.getValue('task_id') as string
|
|
if (!taskId) {
|
|
return <span className='text-muted-foreground/60 text-xs'>-</span>
|
|
}
|
|
return (
|
|
<div className='flex max-w-[170px] flex-col gap-0.5'>
|
|
<StatusBadge
|
|
label={taskId}
|
|
autoColor={taskId}
|
|
size='sm'
|
|
showDot={false}
|
|
className='max-w-full truncate rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 font-mono'
|
|
/>
|
|
<span className='text-muted-foreground/60 truncate text-[11px]'>
|
|
{t(log.platform)} · {t(taskActionMapper.getLabel(log.action))}
|
|
</span>
|
|
</div>
|
|
)
|
|
},
|
|
meta: { label: t('Task ID'), mobileTitle: true },
|
|
},
|
|
createDurationColumn<TaskLog>({
|
|
submitTimeKey: 'submit_time',
|
|
finishTimeKey: 'finish_time',
|
|
unit: 'seconds',
|
|
headerLabel: t('Duration'),
|
|
warningThresholdSec: 300,
|
|
}),
|
|
{
|
|
accessorKey: 'status',
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title={t('Status')} />
|
|
),
|
|
cell: ({ row }) => {
|
|
const status = row.getValue('status') as string
|
|
return (
|
|
<StatusBadge
|
|
label={t(taskStatusMapper.getLabel(status, status || 'Submitting'))}
|
|
variant={taskStatusMapper.getVariant(status)}
|
|
size='sm'
|
|
copyable={false}
|
|
showDot
|
|
/>
|
|
)
|
|
},
|
|
meta: { label: t('Status') },
|
|
},
|
|
createProgressColumn<TaskLog>({ headerLabel: t('Progress') }),
|
|
{
|
|
accessorKey: 'fail_reason',
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title={t('Details')} />
|
|
),
|
|
cell: function DetailsCell({ row }) {
|
|
const log = row.original
|
|
const failReason = row.getValue('fail_reason') as string
|
|
const status = log.status
|
|
const [dialogOpen, setDialogOpen] = useState(false)
|
|
|
|
const isSunoSuccess =
|
|
log.platform === 'suno' && status === TASK_STATUS.SUCCESS
|
|
if (isSunoSuccess) {
|
|
const data = parseTaskData(log.data)
|
|
if (
|
|
data.some(
|
|
(c) =>
|
|
c &&
|
|
typeof c === 'object' &&
|
|
(c as Record<string, unknown>).audio_url
|
|
)
|
|
) {
|
|
return <AudioPreviewCell log={log} />
|
|
}
|
|
}
|
|
|
|
const isVideoTask =
|
|
log.action === TASK_ACTIONS.GENERATE ||
|
|
log.action === TASK_ACTIONS.TEXT_GENERATE ||
|
|
log.action === TASK_ACTIONS.FIRST_TAIL_GENERATE ||
|
|
log.action === TASK_ACTIONS.REFERENCE_GENERATE ||
|
|
log.action === TASK_ACTIONS.REMIX_GENERATE
|
|
const isSuccess = status === TASK_STATUS.SUCCESS
|
|
const isUrl = failReason?.startsWith('http')
|
|
|
|
if (isSuccess && isVideoTask && isUrl) {
|
|
const videoUrl = `/v1/videos/${log.task_id}/content`
|
|
return (
|
|
<a
|
|
href={videoUrl}
|
|
target='_blank'
|
|
rel='noopener noreferrer'
|
|
className='text-xs text-foreground hover:underline'
|
|
>
|
|
{t('Click to preview video')}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
if (!failReason) {
|
|
return <span className='text-muted-foreground/60 text-xs'>-</span>
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type='button'
|
|
className='group flex max-w-[200px] items-center gap-1 text-left text-xs'
|
|
onClick={() => setDialogOpen(true)}
|
|
title={t('Click to view full error message')}
|
|
>
|
|
<span className='truncate leading-snug text-red-600 group-hover:underline dark:text-red-400'>
|
|
{failReason}
|
|
</span>
|
|
</button>
|
|
<FailReasonDialog
|
|
failReason={failReason}
|
|
open={dialogOpen}
|
|
onOpenChange={setDialogOpen}
|
|
/>
|
|
</>
|
|
)
|
|
},
|
|
meta: { label: t('Details') },
|
|
size: 200,
|
|
maxSize: 220,
|
|
}
|
|
)
|
|
|
|
return columns
|
|
}
|