fix: improve channel test failure details UX (#4988)
* fix: improve channel test failure details UX * fix: add accessible label to channel models region
This commit is contained in:
yyhhyyyyyy
+466
-210
@@ -26,8 +26,10 @@ import {
|
||||
getPaginationRowModel,
|
||||
useReactTable,
|
||||
} from '@tanstack/react-table'
|
||||
import { Loader2, Settings } from 'lucide-react'
|
||||
import { Check, Copy, Info, Loader2, Settings } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
|
||||
import { useIsMobile } from '@/hooks/use-mobile'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
@@ -48,6 +50,14 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from '@/components/ui/sheet'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import {
|
||||
Table,
|
||||
@@ -114,6 +124,88 @@ const STREAM_INCOMPATIBLE_ENDPOINTS = new Set([
|
||||
'openai-response-compact',
|
||||
])
|
||||
|
||||
const MODEL_PRICE_ERROR_CODE = 'model_price_error'
|
||||
const FAILURE_SUMMARY_MAX_LENGTH = 96
|
||||
|
||||
type FailureStatusDisplay = {
|
||||
summary: string
|
||||
details?: string
|
||||
}
|
||||
|
||||
type FailureDetailsState = {
|
||||
model: string
|
||||
summary: string
|
||||
details: string
|
||||
}
|
||||
|
||||
function normalizeInlineError(errorText: string) {
|
||||
return errorText.replace(/\s+/g, ' ').trim()
|
||||
}
|
||||
|
||||
function getFirstErrorLine(errorText: string) {
|
||||
return errorText
|
||||
.split(/\r?\n/)
|
||||
.map((line) => line.trim())
|
||||
.find(Boolean)
|
||||
}
|
||||
|
||||
function truncateFailureSummary(summary: string) {
|
||||
if (summary.length <= FAILURE_SUMMARY_MAX_LENGTH) {
|
||||
return summary
|
||||
}
|
||||
|
||||
return `${summary.slice(0, FAILURE_SUMMARY_MAX_LENGTH).trimEnd()}...`
|
||||
}
|
||||
|
||||
function getFailureStatusDisplay({
|
||||
errorText,
|
||||
fallbackSummary,
|
||||
isModelPriceError,
|
||||
modelPriceSummary,
|
||||
}: {
|
||||
errorText?: string
|
||||
fallbackSummary: string
|
||||
isModelPriceError: boolean
|
||||
modelPriceSummary: string
|
||||
}): FailureStatusDisplay {
|
||||
const rawError = errorText?.trim()
|
||||
|
||||
if (!rawError) {
|
||||
return { summary: fallbackSummary }
|
||||
}
|
||||
|
||||
if (isModelPriceError) {
|
||||
return {
|
||||
summary: modelPriceSummary,
|
||||
details: rawError === modelPriceSummary ? undefined : rawError,
|
||||
}
|
||||
}
|
||||
|
||||
const firstLine = getFirstErrorLine(rawError) ?? rawError
|
||||
const summary = truncateFailureSummary(normalizeInlineError(firstLine))
|
||||
const normalizedRawError = normalizeInlineError(rawError)
|
||||
|
||||
return {
|
||||
summary,
|
||||
details: summary === normalizedRawError ? undefined : rawError,
|
||||
}
|
||||
}
|
||||
|
||||
function getTestTableColumnClass(columnId: string) {
|
||||
switch (columnId) {
|
||||
case 'select':
|
||||
return 'w-10 min-w-10'
|
||||
case 'model':
|
||||
return 'w-auto whitespace-nowrap'
|
||||
case 'status':
|
||||
return 'w-70 min-w-70 max-w-70 whitespace-normal'
|
||||
case 'actions':
|
||||
return 'bg-popover sticky right-0 z-20 w-24 min-w-24 border-l shadow-[-8px_0_8px_-8px_rgb(0_0_0_/_0.2)] whitespace-nowrap sm:w-28 sm:min-w-28'
|
||||
default:
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
export function ChannelTestDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
@@ -129,6 +221,8 @@ export function ChannelTestDialog({
|
||||
() => new Set()
|
||||
)
|
||||
const [isBatchTesting, setIsBatchTesting] = useState(false)
|
||||
const [failureDetails, setFailureDetails] =
|
||||
useState<FailureDetailsState | null>(null)
|
||||
const [pagination, setPagination] = useState({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
@@ -142,6 +236,7 @@ export function ChannelTestDialog({
|
||||
setRowSelection({})
|
||||
setTestingModels(() => new Set())
|
||||
setIsBatchTesting(false)
|
||||
setFailureDetails(null)
|
||||
setPagination({ pageIndex: 0, pageSize: 10 })
|
||||
}, [])
|
||||
|
||||
@@ -199,6 +294,7 @@ export function ChannelTestDialog({
|
||||
}, [])
|
||||
|
||||
const updateTestResult = useCallback((key: string, result: TestResult) => {
|
||||
setFailureDetails((current) => (current?.model === key ? null : current))
|
||||
setTestResults((prev) => ({
|
||||
...prev,
|
||||
[key]: result,
|
||||
@@ -283,14 +379,16 @@ export function ChannelTestDialog({
|
||||
onCheckedChange={(value) =>
|
||||
table.toggleAllPageRowsSelected(!!value)
|
||||
}
|
||||
aria-label='Select all models'
|
||||
aria-label={t('Select all models')}
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<Checkbox
|
||||
checked={row.getIsSelected()}
|
||||
onCheckedChange={(value) => row.toggleSelected(!!value)}
|
||||
aria-label={`Select model ${row.original.model}`}
|
||||
aria-label={t('Select model {{model}}', {
|
||||
model: row.original.model,
|
||||
})}
|
||||
/>
|
||||
),
|
||||
enableSorting: false,
|
||||
@@ -299,17 +397,19 @@ export function ChannelTestDialog({
|
||||
},
|
||||
{
|
||||
accessorKey: 'model',
|
||||
header: 'Model',
|
||||
header: t('Model'),
|
||||
cell: ({ row }) => {
|
||||
const model = row.original.model
|
||||
const isDefault = defaultTestModel === model
|
||||
|
||||
return (
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='font-medium'>{model}</span>
|
||||
<div className='flex w-max items-center gap-2 whitespace-nowrap'>
|
||||
<span className='font-medium whitespace-nowrap' title={model}>
|
||||
{model}
|
||||
</span>
|
||||
{isDefault && (
|
||||
<StatusBadge
|
||||
label='Default'
|
||||
label={t('Default')}
|
||||
variant='info'
|
||||
size='sm'
|
||||
copyable={false}
|
||||
@@ -321,69 +421,16 @@ export function ChannelTestDialog({
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
header: 'Status',
|
||||
header: t('Status'),
|
||||
cell: ({ row }) => {
|
||||
const model = row.original.model
|
||||
const result = testResults[model]
|
||||
|
||||
if (!result || result.status === 'idle') {
|
||||
return (
|
||||
<StatusBadge
|
||||
label={t('Not tested')}
|
||||
variant='neutral'
|
||||
copyable={false}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (result.status === 'testing') {
|
||||
return (
|
||||
<div className='text-muted-foreground flex items-center gap-2 text-sm'>
|
||||
<Loader2 className='h-4 w-4 animate-spin' />
|
||||
Testing...
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (result.status === 'success') {
|
||||
return (
|
||||
<div className='flex flex-col gap-1 text-xs'>
|
||||
<StatusBadge
|
||||
label='Success'
|
||||
variant='success'
|
||||
copyable={false}
|
||||
/>
|
||||
{typeof result.responseTime === 'number' && (
|
||||
<span className='text-muted-foreground'>
|
||||
{formatResponseTime(result.responseTime, t)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-1 text-xs'>
|
||||
<StatusBadge label='Failed' variant='danger' copyable={false} />
|
||||
{result.error && (
|
||||
<span className='text-muted-foreground break-all'>
|
||||
{result.error}
|
||||
</span>
|
||||
)}
|
||||
{result.errorCode === 'model_price_error' && (
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
className='w-fit'
|
||||
onClick={() =>
|
||||
window.open('/console/setting?tab=ratio', '_blank')
|
||||
}
|
||||
>
|
||||
<Settings className='mr-1 h-3 w-3' />
|
||||
{t('Go to Settings')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<TestStatusCell
|
||||
result={result}
|
||||
model={model}
|
||||
onOpenDetails={setFailureDetails}
|
||||
/>
|
||||
)
|
||||
},
|
||||
enableSorting: false,
|
||||
@@ -391,7 +438,7 @@ export function ChannelTestDialog({
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: 'Actions',
|
||||
header: t('Actions'),
|
||||
cell: ({ row }) => {
|
||||
const model = row.original.model
|
||||
const isTestingModel = testingModels.has(model)
|
||||
@@ -406,7 +453,7 @@ export function ChannelTestDialog({
|
||||
{isTestingModel && (
|
||||
<Loader2 className='mr-2 h-4 w-4 animate-spin' />
|
||||
)}
|
||||
Test
|
||||
{t('Test')}
|
||||
</Button>
|
||||
)
|
||||
},
|
||||
@@ -443,160 +490,369 @@ export function ChannelTestDialog({
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className='max-h-[90vh] overflow-hidden sm:max-w-3xl'>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('Test Channel Connection')}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t('Test connectivity for:')} <strong>{currentRow.name}</strong>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className='max-h-[90vh] overflow-hidden sm:max-w-3xl'>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('Test Channel Connection')}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t('Test connectivity for:')} <strong>{currentRow.name}</strong>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className='max-h-[78vh] space-y-4 overflow-y-auto py-4 pr-1'>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<div className='grid gap-2'>
|
||||
<Label htmlFor='endpoint-type'>{t('Endpoint Type')}</Label>
|
||||
<Select
|
||||
items={[
|
||||
...endpointTypeOptions.map((option) => {
|
||||
const itemValue = option.value
|
||||
return { value: itemValue, label: t(option.label) }
|
||||
}),
|
||||
]}
|
||||
value={endpointType}
|
||||
onValueChange={(v) => v !== null && setEndpointType(v)}
|
||||
>
|
||||
<SelectTrigger id='endpoint-type'>
|
||||
<SelectValue placeholder={t('Auto detect (default)')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent alignItemWithTrigger={false}>
|
||||
<SelectGroup>
|
||||
{endpointTypeOptions.map((option) => {
|
||||
<div className='max-h-[78vh] space-y-4 overflow-y-auto py-4 pr-1'>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<div className='grid gap-2'>
|
||||
<Label htmlFor='endpoint-type'>{t('Endpoint Type')}</Label>
|
||||
<Select
|
||||
items={[
|
||||
...endpointTypeOptions.map((option) => {
|
||||
const itemValue = option.value
|
||||
return (
|
||||
<SelectItem key={itemValue} value={itemValue}>
|
||||
{t(option.label)}
|
||||
</SelectItem>
|
||||
)
|
||||
})}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{t(
|
||||
'Override the endpoint used for testing. Leave empty to auto detect.'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className='grid gap-2'>
|
||||
<Label htmlFor='stream-toggle'>{t('Stream Mode')}</Label>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Switch
|
||||
id='stream-toggle'
|
||||
checked={isStreamTest}
|
||||
onCheckedChange={setIsStreamTest}
|
||||
disabled={streamDisabled}
|
||||
/>
|
||||
<span className='text-sm'>
|
||||
{isStreamTest ? t('Enabled') : t('Disabled')}
|
||||
</span>
|
||||
</div>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{t('Enable streaming mode for the test request.')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='space-y-3 max-sm:has-[div[role="toolbar"]]:pb-16'>
|
||||
<div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
|
||||
<div>
|
||||
<p className='text-sm font-medium'>{t('Channel models')}</p>
|
||||
return { value: itemValue, label: t(option.label) }
|
||||
}),
|
||||
]}
|
||||
value={endpointType}
|
||||
onValueChange={(v) => v !== null && setEndpointType(v)}
|
||||
>
|
||||
<SelectTrigger id='endpoint-type'>
|
||||
<SelectValue placeholder={t('Auto detect (default)')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent alignItemWithTrigger={false}>
|
||||
<SelectGroup>
|
||||
{endpointTypeOptions.map((option) => {
|
||||
const itemValue = option.value
|
||||
return (
|
||||
<SelectItem key={itemValue} value={itemValue}>
|
||||
{t(option.label)}
|
||||
</SelectItem>
|
||||
)
|
||||
})}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{t('Select models to run batch tests.')}
|
||||
{t(
|
||||
'Override the endpoint used for testing. Leave empty to auto detect.'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className='grid gap-2'>
|
||||
<Label htmlFor='stream-toggle'>{t('Stream Mode')}</Label>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Switch
|
||||
id='stream-toggle'
|
||||
checked={isStreamTest}
|
||||
onCheckedChange={setIsStreamTest}
|
||||
disabled={streamDisabled}
|
||||
/>
|
||||
<span className='text-sm'>
|
||||
{isStreamTest ? t('Enabled') : t('Disabled')}
|
||||
</span>
|
||||
</div>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{t('Enable streaming mode for the test request.')}
|
||||
</p>
|
||||
</div>
|
||||
<Input
|
||||
placeholder={t('Filter models...')}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className='sm:w-64'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='space-y-3'>
|
||||
<div className='overflow-hidden rounded-md border' role='region'>
|
||||
<div className='max-h-[360px] overflow-y-auto'>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={
|
||||
row.getIsSelected() ? 'selected' : undefined
|
||||
}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={table.getVisibleLeafColumns().length}
|
||||
className='text-muted-foreground h-16 text-center text-sm'
|
||||
>
|
||||
{models.length
|
||||
? 'No models matched your search.'
|
||||
: 'This channel has no configured models.'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div className='space-y-3 max-sm:has-[div[role="toolbar"]]:pb-16'>
|
||||
<div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
|
||||
<div>
|
||||
<p className='text-sm font-medium'>{t('Channel models')}</p>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{t('Select models to run batch tests.')}
|
||||
</p>
|
||||
</div>
|
||||
<Input
|
||||
placeholder={t('Filter models...')}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className='sm:w-64'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DataTablePagination table={table} />
|
||||
<div className='space-y-3'>
|
||||
<div
|
||||
className='overflow-hidden rounded-md border'
|
||||
role='region'
|
||||
aria-label={t('Channel models')}
|
||||
>
|
||||
<div className='max-h-90 overflow-auto **:data-[slot=table-container]:overflow-visible'>
|
||||
<Table className='w-max min-w-full table-auto'>
|
||||
<colgroup>
|
||||
<col className='w-10 min-w-10' />
|
||||
<col className='w-auto' />
|
||||
<col className='w-70' />
|
||||
<col className='w-24 sm:w-28' />
|
||||
</colgroup>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead
|
||||
key={header.id}
|
||||
className={getTestTableColumnClass(
|
||||
header.column.id
|
||||
)}
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={
|
||||
row.getIsSelected() ? 'selected' : undefined
|
||||
}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell
|
||||
key={cell.id}
|
||||
className={getTestTableColumnClass(
|
||||
cell.column.id
|
||||
)}
|
||||
>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={table.getVisibleLeafColumns().length}
|
||||
className='text-muted-foreground h-16 text-center text-sm'
|
||||
>
|
||||
{models.length
|
||||
? 'No models matched your search.'
|
||||
: 'This channel has no configured models.'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTablePagination table={table} />
|
||||
</div>
|
||||
|
||||
<TestModelsBulkActions
|
||||
table={table}
|
||||
disabled={isAnyTesting}
|
||||
onTestSelected={handleBatchTest}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TestModelsBulkActions
|
||||
table={table}
|
||||
disabled={isAnyTesting}
|
||||
onTestSelected={handleBatchTest}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant='outline' onClick={handleClose}>
|
||||
{t('Close')}
|
||||
<DialogFooter>
|
||||
<Button variant='outline' onClick={handleClose}>
|
||||
{t('Close')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<FailureDetailsSheet
|
||||
details={failureDetails}
|
||||
onOpenChange={(sheetOpen) => {
|
||||
if (!sheetOpen) {
|
||||
setFailureDetails(null)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function TestStatusCell({
|
||||
result,
|
||||
model,
|
||||
onOpenDetails,
|
||||
}: {
|
||||
result?: TestResult
|
||||
model: string
|
||||
onOpenDetails: (details: FailureDetailsState) => void
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
if (!result || result.status === 'idle') {
|
||||
return (
|
||||
<StatusBadge label={t('Not tested')} variant='neutral' copyable={false} />
|
||||
)
|
||||
}
|
||||
|
||||
if (result.status === 'testing') {
|
||||
return (
|
||||
<div className='text-muted-foreground flex min-w-0 items-center gap-2 text-sm'>
|
||||
<Loader2 className='h-4 w-4 shrink-0 animate-spin' />
|
||||
<span className='truncate'>{t('Testing...')}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (result.status === 'success') {
|
||||
return (
|
||||
<div className='flex min-w-0 flex-col gap-1 text-xs'>
|
||||
<StatusBadge label={t('Success')} variant='success' copyable={false} />
|
||||
{typeof result.responseTime === 'number' && (
|
||||
<span className='text-muted-foreground truncate'>
|
||||
{formatResponseTime(result.responseTime, t)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<FailureStatusContent
|
||||
result={result}
|
||||
model={model}
|
||||
onOpenDetails={onOpenDetails}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FailureStatusContent({
|
||||
result,
|
||||
model,
|
||||
onOpenDetails,
|
||||
}: {
|
||||
result: TestResult
|
||||
model: string
|
||||
onOpenDetails: (details: FailureDetailsState) => void
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
const errorText = result.error?.trim()
|
||||
const isModelPriceError = result.errorCode === MODEL_PRICE_ERROR_CODE
|
||||
const modelPriceSummary = t(
|
||||
'Model price is not configured. Please complete model pricing in settings.'
|
||||
)
|
||||
const { summary, details } = getFailureStatusDisplay({
|
||||
errorText,
|
||||
fallbackSummary: t('Test failed'),
|
||||
isModelPriceError,
|
||||
modelPriceSummary,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='flex min-w-0 flex-col gap-1.5 text-xs whitespace-normal'>
|
||||
<StatusBadge label={t('Failed')} variant='danger' copyable={false} />
|
||||
<p className='text-muted-foreground line-clamp-2 min-w-0 leading-snug wrap-break-word'>
|
||||
{summary}
|
||||
</p>
|
||||
<div className='flex min-w-0 flex-wrap items-center gap-1.5'>
|
||||
{isModelPriceError && (
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
className='h-7 w-fit px-2 text-xs'
|
||||
onClick={() => window.open('/console/setting?tab=ratio', '_blank')}
|
||||
>
|
||||
<Settings className='mr-1 h-3 w-3 shrink-0' />
|
||||
{t('Go to Settings')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
{details && (
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
className='h-7 w-fit px-2 text-xs'
|
||||
aria-haspopup='dialog'
|
||||
onClick={() => onOpenDetails({ model, summary, details })}
|
||||
>
|
||||
<Info className='mr-1 h-3 w-3 shrink-0' />
|
||||
{t('Details')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FailureDetailsSheet({
|
||||
details,
|
||||
onOpenChange,
|
||||
}: {
|
||||
details: FailureDetailsState | null
|
||||
onOpenChange: (open: boolean) => void
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
const isMobile = useIsMobile()
|
||||
const { copiedText, copyToClipboard } = useCopyToClipboard({ notify: false })
|
||||
|
||||
return (
|
||||
<Sheet open={Boolean(details)} onOpenChange={onOpenChange}>
|
||||
<SheetContent
|
||||
side={isMobile ? 'bottom' : 'right'}
|
||||
className={
|
||||
isMobile
|
||||
? 'max-h-[85dvh] gap-0 overflow-hidden rounded-t-xl p-0'
|
||||
: 'h-dvh w-full gap-0 overflow-hidden p-0 sm:max-w-lg'
|
||||
}
|
||||
>
|
||||
{details && (
|
||||
<>
|
||||
<SheetHeader className='border-b px-4 py-3 text-start sm:px-5 sm:py-4'>
|
||||
<SheetTitle className='pr-10'>{t('Details')}</SheetTitle>
|
||||
<SheetDescription className='pr-10 wrap-break-word'>
|
||||
{details.model}
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className='min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-3 sm:px-5 sm:py-4'>
|
||||
<section className='space-y-1'>
|
||||
<div className='text-muted-foreground text-xs font-medium'>
|
||||
{t('Model')}
|
||||
</div>
|
||||
<p className='text-sm font-medium break-all'>{details.model}</p>
|
||||
</section>
|
||||
<section className='space-y-1'>
|
||||
<div className='text-muted-foreground text-xs font-medium'>
|
||||
{t('Failed')}
|
||||
</div>
|
||||
<p className='text-muted-foreground text-sm leading-relaxed wrap-break-word'>
|
||||
{details.summary}
|
||||
</p>
|
||||
</section>
|
||||
<section className='space-y-2'>
|
||||
<div className='text-muted-foreground text-xs font-medium'>
|
||||
{t('Details')}
|
||||
</div>
|
||||
<pre className='bg-muted/30 text-muted-foreground m-0 max-w-full rounded-md border p-3 text-xs leading-relaxed wrap-break-word whitespace-pre-wrap'>
|
||||
{details.details}
|
||||
</pre>
|
||||
</section>
|
||||
</div>
|
||||
<SheetFooter className='border-t px-4 py-3 sm:flex-row sm:justify-end sm:px-5'>
|
||||
<Button
|
||||
variant='outline'
|
||||
className='w-full sm:w-auto'
|
||||
onClick={() => copyToClipboard(details.details)}
|
||||
>
|
||||
{copiedText === details.details ? (
|
||||
<Check className='mr-2 h-4 w-4 text-green-600' />
|
||||
) : (
|
||||
<Copy className='mr-2 h-4 w-4' />
|
||||
)}
|
||||
{t('Copy')}
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -615,8 +871,8 @@ function TestModelsBulkActions({
|
||||
|
||||
const buttonLabel =
|
||||
selectedModels.length > 0
|
||||
? `Test ${selectedModels.length} selected`
|
||||
: 'Test selected models'
|
||||
? t('Test {{count}} selected', { count: selectedModels.length })
|
||||
: t('Test selected models')
|
||||
|
||||
return (
|
||||
<BulkActionsToolbar table={table} entityName='model'>
|
||||
|
||||
Reference in New Issue
Block a user