Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-09-21 10:40:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: use biome

Browse Source
This commit is contained in:
hamster1963
2025-12-28 18:05:02 +08:00
parent 3bfd4ef4d2
commit 29e349505d
115 changed files with 9918 additions and 8375 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ServiceTracker.tsx
+88 -67
View File
@@ -1,79 +1,100 @@
import { fetchService } from "@/lib/nezha-api"
import { NezhaServer, ServiceData } from "@/types/nezha-api"
import { ExclamationTriangleIcon } from "@heroicons/react/20/solid"
import { useQuery } from "@tanstack/react-query"
import { useTranslation } from "react-i18next"
import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { fetchService } from "@/lib/nezha-api";
import type { NezhaServer, ServiceData } from "@/types/nezha-api";
import { CycleTransferStatsCard } from "./CycleTransferStats"
import ServiceTrackerClient from "./ServiceTrackerClient"
import { Loader } from "./loading/Loader"
import { CycleTransferStatsCard } from "./CycleTransferStats";
import { Loader } from "./loading/Loader";
import ServiceTrackerClient from "./ServiceTrackerClient";
export function ServiceTracker({ serverList }: { serverList: NezhaServer[] }) {
const { t } = useTranslation()
const { data: serviceData, isLoading } = useQuery({
queryKey: ["service"],
queryFn: () => fetchService(),
refetchOnMount: true,
refetchOnWindowFocus: true,
refetchInterval: 10000,
})
const { t } = useTranslation();
const { data: serviceData, isLoading } = useQuery({
queryKey: ["service"],
queryFn: () => fetchService(),
refetchOnMount: true,
refetchOnWindowFocus: true,
refetchInterval: 10000,
});
const processServiceData = (serviceData: ServiceData) => {
const days = serviceData.up.map((up, index) => {
const totalChecks = up + serviceData.down[index]
const dailyUptime = totalChecks > 0 ? (up / totalChecks) * 100 : 0
return {
completed: up > serviceData.down[index],
date: new Date(Date.now() - (29 - index) * 24 * 60 * 60 * 1000),
uptime: dailyUptime,
delay: serviceData.delay[index] || 0,
}
})
const processServiceData = (serviceData: ServiceData) => {
const days = serviceData.up.map((up, index) => {
const totalChecks = up + serviceData.down[index];
const dailyUptime = totalChecks > 0 ? (up / totalChecks) * 100 : 0;
return {
completed: up > serviceData.down[index],
date: new Date(Date.now() - (29 - index) * 24 * 60 * 60 * 1000),
uptime: dailyUptime,
delay: serviceData.delay[index] || 0,
};
});
const totalUp = serviceData.up.reduce((a, b) => a + b, 0)
const totalChecks = serviceData.up.reduce((a, b) => a + b, 0) + serviceData.down.reduce((a, b) => a + b, 0)
const uptime = (totalUp / totalChecks) * 100
const totalUp = serviceData.up.reduce((a, b) => a + b, 0);
const totalChecks =
serviceData.up.reduce((a, b) => a + b, 0) +
serviceData.down.reduce((a, b) => a + b, 0);
const uptime = (totalUp / totalChecks) * 100;
const avgDelay = serviceData.delay.length > 0 ? serviceData.delay.reduce((a, b) => a + b, 0) / serviceData.delay.length : 0
const avgDelay =
serviceData.delay.length > 0
? serviceData.delay.reduce((a, b) => a + b, 0) /
serviceData.delay.length
: 0;
return { days, uptime, avgDelay }
}
return { days, uptime, avgDelay };
};
if (isLoading) {
return (
<div className="mt-4 text-sm font-medium flex items-center gap-1">
<Loader visible={true} />
{t("serviceTracker.loading")}
</div>
)
}
if (isLoading) {
return (
<div className="mt-4 text-sm font-medium flex items-center gap-1">
<Loader visible={true} />
{t("serviceTracker.loading")}
</div>
);
}
if (!serviceData?.data?.services && !serviceData?.data?.cycle_transfer_stats) {
return (
<div className="mt-4 text-sm font-medium flex items-center gap-1">
<ExclamationTriangleIcon className="w-4 h-4" />
{t("serviceTracker.noService")}
</div>
)
}
if (
!serviceData?.data?.services &&
!serviceData?.data?.cycle_transfer_stats
) {
return (
<div className="mt-4 text-sm font-medium flex items-center gap-1">
<ExclamationTriangleIcon className="w-4 h-4" />
{t("serviceTracker.noService")}
</div>
);
}
return (
<div className="mt-4 w-full mx-auto ">
{serviceData.data.cycle_transfer_stats && (
<div>
<CycleTransferStatsCard serverList={serverList} cycleStats={serviceData.data.cycle_transfer_stats} />
</div>
)}
{serviceData.data.services && Object.keys(serviceData.data.services).length > 0 && (
<section className="grid grid-cols-1 md:grid-cols-2 mt-4 gap-2 md:gap-4">
{Object.entries(serviceData.data.services).map(([name, data]) => {
const { days, uptime, avgDelay } = processServiceData(data)
return <ServiceTrackerClient key={name} days={days} title={data.service_name} uptime={uptime} avgDelay={avgDelay} />
})}
</section>
)}
</div>
)
return (
<div className="mt-4 w-full mx-auto ">
{serviceData.data.cycle_transfer_stats && (
<div>
<CycleTransferStatsCard
serverList={serverList}
cycleStats={serviceData.data.cycle_transfer_stats}
/>
</div>
)}
{serviceData.data.services &&
Object.keys(serviceData.data.services).length > 0 && (
<section className="grid grid-cols-1 md:grid-cols-2 mt-4 gap-2 md:gap-4">
{Object.entries(serviceData.data.services).map(([name, data]) => {
const { days, uptime, avgDelay } = processServiceData(data);
return (
<ServiceTrackerClient
key={name}
days={days}
title={data.service_name}
uptime={uptime}
avgDelay={avgDelay}
/>
);
})}
</section>
)}
</div>
);
}
export default ServiceTracker
export default ServiceTracker;