87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { useCallback, useState } from "react";
|
|
|
|
import type { HistoryResponse, TargetStatus } from "../../shared/api";
|
|
|
|
import { subtractHours } from "../utils/time";
|
|
import { fetchJson, useDashboard, useTargetMetrics } from "./use-queries";
|
|
|
|
const detailQueryKeys = {
|
|
history: (targetId: number, from: string, to: string, page: number) => ["history", targetId, from, to, page] as const,
|
|
};
|
|
|
|
export function useTargetDetail() {
|
|
const [selectedTargetId, setSelectedTargetId] = useState<null | number>(null);
|
|
const [timeFrom, setTimeFrom] = useState("");
|
|
const [timeTo, setTimeTo] = useState("");
|
|
const [historyPage, setHistoryPage] = useState(1);
|
|
const [activeTab, setActiveTab] = useState<string>("overview");
|
|
|
|
const { data: dashboardData } = useDashboard(false);
|
|
const selectedTarget =
|
|
selectedTargetId !== null
|
|
? (dashboardData?.targets.find((target) => target.id === selectedTargetId) ?? null)
|
|
: null;
|
|
|
|
const metrics = useTargetMetrics(selectedTargetId, timeFrom, timeTo, "1h");
|
|
|
|
const history = useQuery({
|
|
enabled: selectedTargetId !== null && !!timeFrom && !!timeTo && activeTab === "history",
|
|
queryFn: () => {
|
|
if (selectedTargetId === null) throw new Error("未选择目标");
|
|
return fetchJson<HistoryResponse>(
|
|
`/api/targets/${selectedTargetId}/history?from=${encodeURIComponent(timeFrom)}&to=${encodeURIComponent(timeTo)}&page=${historyPage}&pageSize=20`,
|
|
);
|
|
},
|
|
queryKey:
|
|
selectedTargetId !== null && timeFrom && timeTo
|
|
? detailQueryKeys.history(selectedTargetId, timeFrom, timeTo, historyPage)
|
|
: ["history", "disabled"],
|
|
});
|
|
|
|
const openDrawer = useCallback((target: TargetStatus) => {
|
|
setSelectedTargetId(target.id);
|
|
const now = new Date();
|
|
const from = subtractHours(now, 24);
|
|
setTimeFrom(from.toISOString());
|
|
setTimeTo(now.toISOString());
|
|
setHistoryPage(1);
|
|
setActiveTab("overview");
|
|
}, []);
|
|
|
|
const closeDrawer = useCallback(() => {
|
|
setSelectedTargetId(null);
|
|
setActiveTab("overview");
|
|
}, []);
|
|
|
|
const handleTimeChange = useCallback((from: string, to: string) => {
|
|
setTimeFrom(from);
|
|
setTimeTo(to);
|
|
setHistoryPage(1);
|
|
}, []);
|
|
|
|
const handlePageChange = useCallback((page: number) => {
|
|
setHistoryPage(page);
|
|
}, []);
|
|
|
|
const handleTabChange = useCallback((tab: string) => {
|
|
setActiveTab(tab);
|
|
}, []);
|
|
|
|
return {
|
|
activeTab,
|
|
closeDrawer,
|
|
handlePageChange,
|
|
handleTabChange,
|
|
handleTimeChange,
|
|
historyData: history.data ?? { items: [], page: 1, pageSize: 20, total: 0 },
|
|
historyLoading: history.isLoading,
|
|
metricsData: metrics.data ?? null,
|
|
metricsLoading: metrics.isLoading,
|
|
openDrawer,
|
|
selectedTarget,
|
|
timeFrom,
|
|
timeTo,
|
|
};
|
|
}
|