revert: remove usage elapsed clock calibration

This commit is contained in:
elky
2026-05-31 20:30:51 +08:00
parent 40eb3cf6e1
commit 905453d62b
24 changed files with 91 additions and 1151 deletions
@@ -3,26 +3,25 @@
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useActiveElapsedDisplayNowMs } from '../composables/useActiveElapsedDisplayClock'
import { computed, onUnmounted, ref, watch } from 'vue'
const props = withDefaults(defineProps<{
createdAt?: string | null
status?: string | null
responseTimeMs?: number | null
displayNowMs?: number | null
precision?: number
}>(), {
createdAt: null,
status: null,
responseTimeMs: null,
displayNowMs: null,
precision: 2,
})
const now = ref(Date.now())
const precision = computed(() => Math.max(0, props.precision))
const isActive = computed(() => props.status === 'pending' || props.status === 'streaming')
const injectedDisplayNowMs = useActiveElapsedDisplayNowMs()
let rafId: number | null = null
function parseCreatedAtMs(value: string | null | undefined): number {
if (!value) return Number.NaN
@@ -31,6 +30,35 @@ function parseCreatedAtMs(value: string | null | undefined): number {
return new Date(normalized).getTime()
}
function stopRaf() {
if (rafId == null) return
cancelAnimationFrame(rafId)
rafId = null
}
function tick() {
now.value = Date.now()
rafId = requestAnimationFrame(tick)
}
function startRaf() {
stopRaf()
now.value = Date.now()
rafId = requestAnimationFrame(tick)
}
watch(isActive, (active) => {
if (active) {
startRaf()
} else {
stopRaf()
}
}, { immediate: true })
onUnmounted(() => {
stopRaf()
})
const displayText = computed(() => {
if (!isActive.value) {
if (props.responseTimeMs == null) return '-'
@@ -42,14 +70,7 @@ const displayText = computed(() => {
const createdAtMs = parseCreatedAtMs(props.createdAt)
if (Number.isNaN(createdAtMs)) return '-'
// 活跃请求里的 response_time_ms 可能只是首字或中间值;终态才使用后端最终耗时。
const injectedNowMs = injectedDisplayNowMs?.value
const nowMs = typeof props.displayNowMs === 'number' && Number.isFinite(props.displayNowMs)
? props.displayNowMs
: typeof injectedNowMs === 'number' && Number.isFinite(injectedNowMs)
? injectedNowMs
: Date.now()
const elapsedMs = Math.max(0, nowMs - createdAtMs)
const elapsedMs = Math.max(0, now.value - createdAtMs)
return `${(elapsedMs / 1000).toFixed(precision.value)}s`
})
</script>
@@ -1,79 +0,0 @@
import { afterEach, describe, expect, it } from 'vitest'
import { createApp, nextTick, ref, type App } from 'vue'
import { ACTIVE_ELAPSED_DISPLAY_NOW_MS_KEY, type ActiveElapsedDisplayNowMsRef } from '../../composables/useActiveElapsedDisplayClock'
import ElapsedTimeText from '../ElapsedTimeText.vue'
const mountedApps: Array<{ app: App, root: HTMLElement }> = []
function mountElapsedTimeText(
props: Record<string, unknown>,
options: { providedDisplayNowMs?: ActiveElapsedDisplayNowMsRef } = {}
) {
const root = document.createElement('div')
document.body.appendChild(root)
const app = createApp(ElapsedTimeText, props)
if (options.providedDisplayNowMs) {
app.provide(ACTIVE_ELAPSED_DISPLAY_NOW_MS_KEY, options.providedDisplayNowMs)
}
app.mount(root)
mountedApps.push({ app, root })
return root
}
afterEach(() => {
for (const { app, root } of mountedApps.splice(0)) {
app.unmount()
root.remove()
}
})
describe('ElapsedTimeText', () => {
it('uses the supplied display clock for active requests', () => {
const root = mountElapsedTimeText({
createdAt: '2026-05-28T12:00:00Z',
status: 'streaming',
responseTimeMs: 10_000,
displayNowMs: Date.parse('2026-05-28T12:00:40Z'),
})
expect(root.textContent).toBe('40.00s')
})
it('uses the injected shared display clock when no prop is supplied', async () => {
const displayNowMs = ref(Date.parse('2026-05-28T12:00:40Z'))
const root = mountElapsedTimeText({
createdAt: '2026-05-28T12:00:00Z',
status: 'streaming',
responseTimeMs: 10_000,
}, { providedDisplayNowMs: displayNowMs })
expect(root.textContent).toBe('40.00s')
displayNowMs.value = Date.parse('2026-05-28T12:00:45Z')
await nextTick()
expect(root.textContent).toBe('45.00s')
})
it('keeps terminal requests pinned to the backend final duration', () => {
const root = mountElapsedTimeText({
createdAt: '2026-05-28T12:00:00Z',
status: 'completed',
responseTimeMs: 42_340,
displayNowMs: Date.parse('2026-05-28T12:01:30Z'),
})
expect(root.textContent).toBe('42.34s')
})
it('clamps active elapsed time at zero when the display clock is behind', () => {
const root = mountElapsedTimeText({
createdAt: '2026-05-28T12:00:40Z',
status: 'pending',
displayNowMs: Date.parse('2026-05-28T12:00:00Z'),
})
expect(root.textContent).toBe('0.00s')
})
})
@@ -92,15 +92,8 @@ vi.mock('lucide-vue-next', async () => {
vi.mock('../ElapsedTimeText.vue', () => ({
default: defineComponent({
name: 'ElapsedTimeTextStub',
props: {
displayNowMs: {
type: Number,
},
},
setup(props) {
return () => h('span', {
'data-display-now-ms': props.displayNowMs == null ? 'missing' : String(props.displayNowMs),
}, 'elapsed')
setup() {
return () => h('span', 'elapsed')
},
}),
}))
@@ -252,16 +245,6 @@ describe('UsageRecordsTable', () => {
expect(root.querySelector('[data-active-latency-state="waiting-first-byte"]')).toBeNull()
})
it('leaves shared clock subscription inside active elapsed text', () => {
const root = mountUsageRecordsTable([buildRecord({
status: 'streaming',
response_time_ms: null,
first_byte_time_ms: 500,
})])
expect(root.querySelector('[data-display-now-ms="missing"]')).not.toBeNull()
})
it('shows failed when Codex image progress fails before the usage record finalizes', () => {
const root = mountUsageRecordsTable([buildRecord({
status: 'pending',
@@ -1,79 +0,0 @@
import { afterEach, describe, expect, it } from 'vitest'
import { createApp, defineComponent, h, nextTick, ref, type App, type Ref } from 'vue'
import {
provideActiveElapsedDisplayClock,
useActiveElapsedDisplayNowMs,
} from '../useActiveElapsedDisplayClock'
const mountedApps: Array<{ app: App, root: HTMLElement }> = []
afterEach(() => {
for (const { app, root } of mountedApps.splice(0)) {
app.unmount()
root.remove()
}
})
function mountApp(component: ReturnType<typeof defineComponent>) {
const root = document.createElement('div')
document.body.appendChild(root)
const app = createApp(component)
app.mount(root)
mountedApps.push({ app, root })
return root
}
describe('active elapsed display clock render scope', () => {
it('updates injected elapsed text without re-rendering the surrounding table', async () => {
const displayNowMs = ref(1_000)
const rows = Array.from({ length: 1_000 }, (_, index) => ({
id: `row-${index}`,
model: `model-${index}`,
}))
let tableRenderCount = 0
let elapsedRenderCount = 0
const ElapsedTextProbe = defineComponent({
name: 'ElapsedTextProbe',
setup() {
const injectedDisplayNowMs = useActiveElapsedDisplayNowMs()
return () => {
elapsedRenderCount += 1
return h('span', injectedDisplayNowMs?.value)
}
},
})
const TableProbe = defineComponent({
name: 'TableProbe',
setup() {
return () => {
tableRenderCount += 1
return h('table', rows.map(row => h('tr', { key: row.id }, [
h('td', row.model),
row.id === 'row-0' ? h('td', h(ElapsedTextProbe)) : h('td', '-'),
])))
}
},
})
const Harness = defineComponent({
name: 'Harness',
setup() {
provideActiveElapsedDisplayClock(displayNowMs as Ref<number>)
return () => h(TableProbe)
},
})
mountApp(Harness)
expect(tableRenderCount).toBe(1)
expect(elapsedRenderCount).toBe(1)
displayNowMs.value = 1_250
await nextTick()
expect(tableRenderCount).toBe(1)
expect(elapsedRenderCount).toBe(2)
})
})
@@ -1,101 +0,0 @@
import { afterEach, describe, expect, it, vi } from 'vitest'
import { nextTick, ref } from 'vue'
import { useActiveElapsedDisplayClock } from '../useActiveElapsedDisplayClock'
type TestRecord = {
status: string
}
afterEach(() => {
vi.useRealTimers()
})
describe('useActiveElapsedDisplayClock', () => {
it('ticks only while visible active records exist', async () => {
vi.useFakeTimers()
let nowMs = 1_000
const records = ref<TestRecord[]>([])
const isPageVisible = ref(true)
const serverClockOffsetMs = ref(0)
const hasServerClockOffset = ref(false)
const clock = useActiveElapsedDisplayClock({
records,
isPageVisible,
serverClockOffsetMs,
hasServerClockOffset,
resolveStatus: record => record.status,
intervalMs: 250,
now: () => nowMs,
})
expect(clock.hasVisibleActiveRecords.value).toBe(false)
expect(clock.displayNowMs.value).toBe(1_000)
nowMs = 1_250
vi.advanceTimersByTime(250)
expect(clock.displayNowMs.value).toBe(1_000)
records.value = [{ status: 'streaming' }]
await nextTick()
expect(clock.hasVisibleActiveRecords.value).toBe(true)
expect(clock.displayNowMs.value).toBe(1_250)
nowMs = 1_500
vi.advanceTimersByTime(250)
expect(clock.displayNowMs.value).toBe(1_500)
isPageVisible.value = false
await nextTick()
nowMs = 1_750
vi.advanceTimersByTime(250)
expect(clock.displayNowMs.value).toBe(1_500)
clock.stopActiveElapsedDisplayClock()
})
it('applies server clock offset to the display time', () => {
vi.useFakeTimers()
const clock = useActiveElapsedDisplayClock({
records: ref<TestRecord[]>([{ status: 'pending' }]),
isPageVisible: ref(true),
serverClockOffsetMs: ref(-11_000),
hasServerClockOffset: ref(true),
resolveStatus: record => record.status,
intervalMs: 250,
now: () => 2_000,
})
expect(clock.calibratedDisplayNowMs.value).toBe(-9_000)
clock.stopActiveElapsedDisplayClock()
})
it('stops when active records disappear', async () => {
vi.useFakeTimers()
let nowMs = 3_000
const records = ref<TestRecord[]>([{ status: 'pending' }])
const clock = useActiveElapsedDisplayClock({
records,
isPageVisible: ref(true),
serverClockOffsetMs: ref(0),
hasServerClockOffset: ref(false),
resolveStatus: record => record.status,
intervalMs: 250,
now: () => nowMs,
})
nowMs = 3_250
vi.advanceTimersByTime(250)
expect(clock.displayNowMs.value).toBe(3_250)
records.value = [{ status: 'completed' }]
await nextTick()
nowMs = 3_500
vi.advanceTimersByTime(250)
expect(clock.displayNowMs.value).toBe(3_250)
clock.stopActiveElapsedDisplayClock()
})
})
@@ -1,102 +0,0 @@
import { describe, expect, it } from 'vitest'
import {
calculateServerClockOffsetMs,
shouldUseServerClockSample,
useServerClock
} from '../useServerClock'
describe('useServerClock', () => {
it('calculates offset from the response receive time', () => {
const offset = calculateServerClockOffsetMs({
server_now_unix_ms: 10_500,
client_send_unix_ms: 20_000,
client_receive_unix_ms: 20_200,
round_trip_ms: 200,
})
expect(offset).toBe(-9_700)
})
it('ignores missing or invalid timing samples', () => {
expect(calculateServerClockOffsetMs(undefined)).toBeNull()
expect(calculateServerClockOffsetMs({
server_now_unix_ms: Number.NaN,
client_send_unix_ms: 20_000,
client_receive_unix_ms: 20_200,
round_trip_ms: 200,
})).toBeNull()
expect(calculateServerClockOffsetMs({
server_now_unix_ms: 10_500,
client_send_unix_ms: 20_200,
client_receive_unix_ms: 20_000,
round_trip_ms: 200,
})).toBeNull()
expect(calculateServerClockOffsetMs({
server_now_unix_ms: 10_500,
client_send_unix_ms: 20_000,
client_receive_unix_ms: 20_200,
round_trip_ms: Number.NaN,
})).toBeNull()
})
it('keeps the previous offset when a response has no server timing', () => {
const clock = useServerClock()
clock.updateServerClockOffset({
server_now_unix_ms: 10_500,
client_send_unix_ms: 20_000,
client_receive_unix_ms: 20_200,
round_trip_ms: 200,
})
clock.updateServerClockOffset(undefined)
expect(clock.hasServerClockOffset.value).toBe(true)
expect(clock.serverClockOffsetMs.value).toBe(-9_700)
expect(clock.serverClockSampleRoundTripMs.value).toBe(200)
})
it('does not let a much slower sample overwrite a better clock offset', () => {
const clock = useServerClock()
clock.updateServerClockOffset({
server_now_unix_ms: 10_500,
client_send_unix_ms: 20_000,
client_receive_unix_ms: 20_050,
round_trip_ms: 50,
})
clock.updateServerClockOffset({
server_now_unix_ms: 20_500,
client_send_unix_ms: 30_000,
client_receive_unix_ms: 30_500,
round_trip_ms: 500,
})
expect(clock.serverClockOffsetMs.value).toBe(-9_550)
expect(clock.serverClockSampleRoundTripMs.value).toBe(50)
})
it('accepts a faster sample after an initial slow sample', () => {
const clock = useServerClock()
clock.updateServerClockOffset({
server_now_unix_ms: 10_500,
client_send_unix_ms: 20_000,
client_receive_unix_ms: 20_500,
round_trip_ms: 500,
})
clock.updateServerClockOffset({
server_now_unix_ms: 20_500,
client_send_unix_ms: 30_000,
client_receive_unix_ms: 30_050,
round_trip_ms: 50,
})
expect(clock.serverClockOffsetMs.value).toBe(-9_550)
expect(clock.serverClockSampleRoundTripMs.value).toBe(50)
})
it('allows small RTT regressions so the offset can stay fresh', () => {
expect(shouldUseServerClockSample(140, 50)).toBe(true)
expect(shouldUseServerClockSample(151, 50)).toBe(false)
})
})
@@ -1,9 +1,4 @@
export { useUsageData } from './useUsageData'
export {
provideActiveElapsedDisplayClock,
useActiveElapsedDisplayClock,
useActiveElapsedDisplayNowMs,
} from './useActiveElapsedDisplayClock'
export { useUsageFilters } from './useUsageFilters'
export { useUsagePagination } from './useUsagePagination'
export { getDateRangeFromPeriod, formatDateTime, getSuccessRateColor } from './useDateRange'
@@ -1,98 +0,0 @@
import { computed, inject, provide, ref, watch, type ComputedRef, type InjectionKey, type Ref } from 'vue'
type ActiveElapsedStatus = string | null | undefined
export interface ActiveElapsedDisplayNowMsRef {
readonly value: number
}
export const ACTIVE_ELAPSED_DISPLAY_NOW_MS_KEY: InjectionKey<ActiveElapsedDisplayNowMsRef> =
Symbol('activeElapsedDisplayNowMs')
export function provideActiveElapsedDisplayClock(displayNowMs: ActiveElapsedDisplayNowMsRef): void {
provide(ACTIVE_ELAPSED_DISPLAY_NOW_MS_KEY, displayNowMs)
}
export function useActiveElapsedDisplayNowMs(): ActiveElapsedDisplayNowMsRef | undefined {
return inject(ACTIVE_ELAPSED_DISPLAY_NOW_MS_KEY, undefined)
}
export interface UseActiveElapsedDisplayClockOptions<TRecord> {
records: Ref<TRecord[]> | ComputedRef<TRecord[]>
isPageVisible: Ref<boolean> | ComputedRef<boolean>
serverClockOffsetMs: Ref<number> | ComputedRef<number>
hasServerClockOffset: Ref<boolean> | ComputedRef<boolean>
resolveStatus: (record: TRecord) => ActiveElapsedStatus
intervalMs?: number
now?: () => number
}
export function useActiveElapsedDisplayClock<TRecord>(
options: UseActiveElapsedDisplayClockOptions<TRecord>
) {
const intervalMs = options.intervalMs ?? 250
const now = options.now ?? Date.now
const displayNowMs = ref(now())
let activeElapsedDisplayTimer: ReturnType<typeof setInterval> | null = null
const hasVisibleActiveRecords = computed(() => {
return options.records.value.some((record) => {
const displayStatus = options.resolveStatus(record)
return displayStatus === 'pending' || displayStatus === 'streaming'
})
})
const calibratedDisplayNowMs = computed(() => {
return options.hasServerClockOffset.value
? displayNowMs.value + options.serverClockOffsetMs.value
: displayNowMs.value
})
function tickActiveElapsedDisplay() {
displayNowMs.value = now()
}
function startActiveElapsedDisplayTimer() {
if (activeElapsedDisplayTimer) return
if (!options.isPageVisible.value || !hasVisibleActiveRecords.value) return
tickActiveElapsedDisplay()
activeElapsedDisplayTimer = setInterval(tickActiveElapsedDisplay, intervalMs)
}
function stopActiveElapsedDisplayTimer() {
if (activeElapsedDisplayTimer) {
clearInterval(activeElapsedDisplayTimer)
activeElapsedDisplayTimer = null
}
}
function syncActiveElapsedDisplayTimer() {
if (options.isPageVisible.value && hasVisibleActiveRecords.value) {
startActiveElapsedDisplayTimer()
} else {
stopActiveElapsedDisplayTimer()
}
}
const stopActiveElapsedDisplayWatch = watch(
[hasVisibleActiveRecords, options.isPageVisible],
syncActiveElapsedDisplayTimer,
{ immediate: true }
)
function stopActiveElapsedDisplayClock() {
stopActiveElapsedDisplayWatch()
stopActiveElapsedDisplayTimer()
}
return {
displayNowMs,
calibratedDisplayNowMs,
hasVisibleActiveRecords,
tickActiveElapsedDisplay,
startActiveElapsedDisplayTimer,
stopActiveElapsedDisplayTimer,
syncActiveElapsedDisplayTimer,
stopActiveElapsedDisplayClock,
}
}
@@ -1,62 +0,0 @@
import { ref } from 'vue'
import type { ServerTimingMetadata } from '@/api/serverTiming'
const SERVER_CLOCK_RTT_REGRESSION_TOLERANCE_MS = 100
export function calculateServerClockOffsetMs(timing: ServerTimingMetadata | null | undefined): number | null {
if (!timing) return null
const {
server_now_unix_ms: serverNowUnixMs,
client_send_unix_ms: clientSendUnixMs,
client_receive_unix_ms: clientReceiveUnixMs,
round_trip_ms: roundTripMs,
} = timing
if (
!Number.isFinite(serverNowUnixMs) ||
!Number.isFinite(clientSendUnixMs) ||
!Number.isFinite(clientReceiveUnixMs) ||
!Number.isFinite(roundTripMs)
) {
return null
}
if (clientReceiveUnixMs < clientSendUnixMs || roundTripMs < 0) {
return null
}
return serverNowUnixMs - clientReceiveUnixMs
}
export function shouldUseServerClockSample(
nextRoundTripMs: number,
currentRoundTripMs: number | null | undefined
): boolean {
if (!Number.isFinite(nextRoundTripMs) || nextRoundTripMs < 0) return false
if (currentRoundTripMs == null || !Number.isFinite(currentRoundTripMs)) return true
return nextRoundTripMs <= currentRoundTripMs + SERVER_CLOCK_RTT_REGRESSION_TOLERANCE_MS
}
export function useServerClock() {
const serverClockOffsetMs = ref(0)
const hasServerClockOffset = ref(false)
const serverClockSampleRoundTripMs = ref<number | null>(null)
function updateServerClockOffset(timing: ServerTimingMetadata | null | undefined): void {
const offsetMs = calculateServerClockOffsetMs(timing)
if (offsetMs == null) return
if (!shouldUseServerClockSample(timing?.round_trip_ms ?? Number.NaN, serverClockSampleRoundTripMs.value)) {
return
}
serverClockOffsetMs.value = offsetMs
serverClockSampleRoundTripMs.value = timing?.round_trip_ms ?? null
hasServerClockOffset.value = true
}
return {
serverClockOffsetMs,
hasServerClockOffset,
serverClockSampleRoundTripMs,
updateServerClockOffset,
}
}
@@ -14,7 +14,6 @@ import { createDefaultStats } from '../types'
import { log } from '@/utils/logger'
import { getErrorStatus } from '@/types/api-error'
import { isUsageProviderVisible, normalizeUsageProviderStats } from '../utils/providerStats'
import { useServerClock } from './useServerClock'
export interface UseUsageDataOptions {
isAdminPage: Ref<boolean>
@@ -67,11 +66,6 @@ export function useUsageData(options: UseUsageDataOptions) {
// 可用的筛选选项(从统计数据获取,而不是从记录中)
const availableModels = ref<string[]>([])
const availableProviders = ref<string[]>([])
const {
serverClockOffsetMs,
hasServerClockOffset,
updateServerClockOffset,
} = useServerClock()
// 增强的模型统计(包含效率分析)
const enhancedModelStats = computed<EnhancedModelStatsItem[]>(() => {
@@ -220,7 +214,6 @@ export function useUsageData(options: UseUsageDataOptions) {
if (requestId !== loadStatsRequestId) {
return false
}
updateServerClockOffset(userData.server_timing)
stats.value = {
total_requests: userData.total_requests || 0,
@@ -377,7 +370,6 @@ export function useUsageData(options: UseUsageDataOptions) {
if (requestId !== loadRecordsRequestId) {
return
}
updateServerClockOffset(response.server_timing)
const nextRecords = (response.records || []) as UsageRecord[]
currentRecords.value = mergeRecordStatus(currentRecords.value, nextRecords)
totalRecords.value = response.total || 0
@@ -387,7 +379,6 @@ export function useUsageData(options: UseUsageDataOptions) {
if (requestId !== loadRecordsRequestId) {
return
}
updateServerClockOffset(userData.server_timing)
const nextRecords = (userData.records || []) as UsageRecord[]
currentRecords.value = mergeRecordStatus(currentRecords.value, nextRecords)
totalRecords.value = userData.pagination?.total || currentRecords.value.length
@@ -570,8 +561,6 @@ export function useUsageData(options: UseUsageDataOptions) {
apiFormatStats,
currentRecords,
totalRecords,
serverClockOffsetMs,
hasServerClockOffset,
// 筛选选项
availableModels,
@@ -583,7 +572,6 @@ export function useUsageData(options: UseUsageDataOptions) {
// 方法
loadStats,
loadRecords,
refreshData,
updateServerClockOffset
refreshData
}
}