perf(admin): optimize large-dataset loading for dashboard/users/accounts/ops

This commit is contained in:
xvhuan
2026-03-04 13:45:49 +08:00
parent 46ea9170cb
commit 80ae592c23
27 changed files with 1109 additions and 179 deletions

View File

@@ -586,6 +586,32 @@ async function refreshThroughputTrendWithCancel(fetchSeq: number, signal: AbortS
}
}
async function refreshCoreSnapshotWithCancel(fetchSeq: number, signal: AbortSignal) {
if (!opsEnabled.value) return
loadingTrend.value = true
loadingErrorTrend.value = true
try {
const data = await opsAPI.getDashboardSnapshotV2(buildApiParams(), { signal })
if (fetchSeq !== dashboardFetchSeq) return
overview.value = data.overview
throughputTrend.value = data.throughput_trend
errorTrend.value = data.error_trend
} catch (err: any) {
if (fetchSeq !== dashboardFetchSeq || isCanceledRequest(err)) return
// Fallback to legacy split endpoints when snapshot endpoint is unavailable.
await Promise.all([
refreshOverviewWithCancel(fetchSeq, signal),
refreshThroughputTrendWithCancel(fetchSeq, signal),
refreshErrorTrendWithCancel(fetchSeq, signal)
])
} finally {
if (fetchSeq === dashboardFetchSeq) {
loadingTrend.value = false
loadingErrorTrend.value = false
}
}
}
async function refreshLatencyHistogramWithCancel(fetchSeq: number, signal: AbortSignal) {
if (!opsEnabled.value) return
loadingLatency.value = true
@@ -640,6 +666,14 @@ async function refreshErrorDistributionWithCancel(fetchSeq: number, signal: Abor
}
}
async function refreshDeferredPanels(fetchSeq: number, signal: AbortSignal) {
if (!opsEnabled.value) return
await Promise.all([
refreshLatencyHistogramWithCancel(fetchSeq, signal),
refreshErrorDistributionWithCancel(fetchSeq, signal)
])
}
function isOpsDisabledError(err: unknown): boolean {
return (
!!err &&
@@ -662,12 +696,8 @@ async function fetchData() {
errorMessage.value = ''
try {
await Promise.all([
refreshOverviewWithCancel(fetchSeq, dashboardFetchController.signal),
refreshThroughputTrendWithCancel(fetchSeq, dashboardFetchController.signal),
refreshCoreSnapshotWithCancel(fetchSeq, dashboardFetchController.signal),
refreshSwitchTrendWithCancel(fetchSeq, dashboardFetchController.signal),
refreshLatencyHistogramWithCancel(fetchSeq, dashboardFetchController.signal),
refreshErrorTrendWithCancel(fetchSeq, dashboardFetchController.signal),
refreshErrorDistributionWithCancel(fetchSeq, dashboardFetchController.signal)
])
if (fetchSeq !== dashboardFetchSeq) return
@@ -680,6 +710,9 @@ async function fetchData() {
if (autoRefreshEnabled.value) {
autoRefreshCountdown.value = Math.floor(autoRefreshIntervalMs.value / 1000)
}
// Defer non-core visual panels to reduce initial blocking.
void refreshDeferredPanels(fetchSeq, dashboardFetchController.signal)
} catch (err) {
if (!isOpsDisabledError(err)) {
console.error('[ops] failed to fetch dashboard data', err)