diff --git a/vehicle-data-platform/apps/web/src/pages/Quality.tsx b/vehicle-data-platform/apps/web/src/pages/Quality.tsx index 803223fc..8cef3b0c 100644 --- a/vehicle-data-platform/apps/web/src/pages/Quality.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Quality.tsx @@ -22,6 +22,7 @@ export function Quality({ onHealthLoaded }: { onHealthLoaded?: (health: OpsHealt const [issues, setIssues] = useState([]); const [health, setHealth] = useState(null); const [loadingIssues, setLoadingIssues] = useState(true); + const [loadingHealth, setLoadingHealth] = useState(true); const [filters, setFilters] = useState>({}); const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 }); @@ -39,14 +40,20 @@ export function Quality({ onHealthLoaded }: { onHealthLoaded?: (health: OpsHealt .finally(() => setLoadingIssues(false)); }; - useEffect(() => { - loadIssues({}, 1, pagination.pageSize); + const loadHealth = () => { + setLoadingHealth(true); api.opsHealth() .then((nextHealth) => { setHealth(nextHealth); onHealthLoaded?.(nextHealth); }) - .catch((error: Error) => Toast.error(error.message)); + .catch((error: Error) => Toast.error(error.message)) + .finally(() => setLoadingHealth(false)); + }; + + useEffect(() => { + loadIssues({}, 1, pagination.pageSize); + loadHealth(); }, []); return ( @@ -102,8 +109,13 @@ export function Quality({ onHealthLoaded }: { onHealthLoaded?: (health: OpsHealt ]} /> - + 链路健康} + style={{ marginTop: 16 }} + >