@@ -244,7 +252,7 @@ const kindBadgeClass = (kind: string) => {
{{ t('admin.ops.requestDetails.table.model') }}
- {{ t('admin.ops.requestDetails.table.duration') }}
+ {{ latencyLabel }}
|
{{ t('admin.ops.requestDetails.table.status') }}
@@ -274,7 +282,7 @@ const kindBadgeClass = (kind: string) => {
{{ row.model || '-' }}
|
- {{ typeof row.duration_ms === 'number' ? `${row.duration_ms} ms` : '-' }}
+ {{ formatLatency(row) }}
|
{{ row.status_code ?? '-' }}
diff --git a/frontend/src/views/admin/ops/components/__tests__/OpsRequestDetailsModal.spec.ts b/frontend/src/views/admin/ops/components/__tests__/OpsRequestDetailsModal.spec.ts
new file mode 100644
index 0000000000..be856162ad
--- /dev/null
+++ b/frontend/src/views/admin/ops/components/__tests__/OpsRequestDetailsModal.spec.ts
@@ -0,0 +1,90 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+import type { OpsDashboardOverview } from '@/api/admin/ops'
+import { flushPromises, mount, shallowMount } from '@vue/test-utils'
+import OpsDashboardHeader from '../OpsDashboardHeader.vue'
+import OpsRequestDetailsModal from '../OpsRequestDetailsModal.vue'
+
+const { listRequestDetails, viewport } = vi.hoisted(() => ({
+ listRequestDetails: vi.fn(),
+ viewport: { desktop: true },
+}))
+
+vi.mock('@vueuse/core', () => ({ useMediaQuery: () => ref(viewport.desktop) }))
+vi.mock('@/api/admin/ops', () => ({ opsAPI: { listRequestDetails } }))
+vi.mock('@/api', () => ({ adminAPI: { groups: { getAll: vi.fn().mockResolvedValue([]) } } }))
+vi.mock('@/stores', () => ({
+ useAppStore: () => ({ showError: vi.fn() }),
+ useAdminSettingsStore: () => ({ opsRealtimeMonitoringEnabled: false }),
+}))
+vi.mock('@/composables/useClipboard', () => ({ useClipboard: () => ({ copyToClipboard: vi.fn() }) }))
+vi.mock('vue-i18n', async (importOriginal) => ({
+ ...await importOriginal(),
+ useI18n: () => ({ t: (key: string) => key }),
+}))
+
+async function openDetails(sort: 'duration_desc' | 'ttft_desc') {
+ const wrapper = mount(OpsRequestDetailsModal, {
+ props: { modelValue: false, timeRange: '1h', preset: { title: 'Details', sort } },
+ global: { stubs: { BaseDialog: { template: '
' }, Pagination: true } },
+ })
+ await wrapper.setProps({ modelValue: true })
+ await flushPromises()
+ return wrapper
+}
+
+describe('Ops request latency details', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ viewport.desktop = true
+ listRequestDetails.mockResolvedValue({
+ items: [
+ { kind: 'success', created_at: '2026-09-10T00:00:00Z', duration_ms: 12000, first_token_ms: 800 },
+ { kind: 'success', created_at: '2026-09-10T00:00:01Z', duration_ms: 9000, first_token_ms: 0 },
+ { kind: 'success', created_at: '2026-09-10T00:00:02Z', duration_ms: 5000, first_token_ms: null },
+ ],
+ total: 3,
+ })
+ })
+
+ it('opens the TTFT card with first-token sorting and successful requests', async () => {
+ const wrapper = shallowMount(OpsDashboardHeader, {
+ props: { overview: {} as OpsDashboardOverview, platform: '', groupId: null, timeRange: '1h', queryMode: 'auto', loading: false, lastUpdated: null },
+ })
+ await flushPromises()
+ const button = wrapper.findAll('button').find((item) =>
+ item.text() === 'admin.ops.requestDetails.details' &&
+ item.element.parentElement?.textContent?.includes('TTFT'),
+ )
+ expect(button).toBeDefined()
+ await button!.trigger('click')
+ expect(wrapper.emitted('openRequestDetails')).toEqual([[
+ { title: 'admin.ops.ttftLabel', kind: 'success', sort: 'ttft_desc' },
+ ]])
+ wrapper.unmount()
+ })
+
+ it.each([true, false])('shows TTFT rather than total duration (desktop: %s)', async (desktop) => {
+ viewport.desktop = desktop
+ const wrapper = await openDetails('ttft_desc')
+ expect(listRequestDetails).toHaveBeenCalledWith(expect.objectContaining({ sort: 'ttft_desc' }))
+ expect(wrapper.text()).toContain('admin.ops.ttftLabel')
+ expect(wrapper.text()).toContain('800 ms')
+ expect(wrapper.text()).toContain('0 ms')
+ expect(wrapper.text()).not.toContain('12000 ms')
+ expect(wrapper.text()).not.toContain('9000 ms')
+ expect(wrapper.text()).not.toContain('5000 ms')
+ if (desktop) expect(wrapper.findAll('tbody tr')[2].findAll('td')[4].text()).toBe('-')
+ else expect(wrapper.text()).toContain('admin.ops.ttftLabel: -')
+ wrapper.unmount()
+ })
+
+ it('keeps total duration for duration details', async () => {
+ const wrapper = await openDetails('duration_desc')
+ expect(listRequestDetails).toHaveBeenCalledWith(expect.objectContaining({ sort: 'duration_desc' }))
+ expect(wrapper.text()).toContain('admin.ops.requestDetails.table.duration')
+ expect(wrapper.text()).toContain('12000 ms')
+ expect(wrapper.text()).not.toContain('800 ms')
+ wrapper.unmount()
+ })
+})
|