fix: service block page

This commit is contained in:
hamster1963 2024-12-03 14:20:17 +08:00
parent eb6612e27e
commit 3f87876a3c
4 changed files with 49 additions and 9 deletions

View File

@ -5,6 +5,7 @@ import Footer from "./components/Footer";
import Server from "./pages/Server"; import Server from "./pages/Server";
import ServerDetail from "./pages/ServerDetail"; import ServerDetail from "./pages/ServerDetail";
import NotFound from "./pages/NotFound"; import NotFound from "./pages/NotFound";
import ErrorPage from "./pages/ErrorPage";
const App: React.FC = () => { const App: React.FC = () => {
return ( return (
@ -15,6 +16,7 @@ const App: React.FC = () => {
<Routes> <Routes>
<Route path="/" element={<Server />} /> <Route path="/" element={<Server />} />
<Route path="/server/:id" element={<ServerDetail />} /> <Route path="/server/:id" element={<ServerDetail />} />
<Route path="/error" element={<ErrorPage />} />
<Route path="*" element={<NotFound />} /> <Route path="*" element={<NotFound />} />
</Routes> </Routes>
<Footer /> <Footer />

View File

@ -14,14 +14,20 @@ export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({
return ( return (
<section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4"> <section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
{Object.entries(cycleStats).map(([cycleId, cycleData]) => { {Object.entries(cycleStats).map(([cycleId, cycleData]) => {
const serverStats = Object.entries(cycleData.server_name).map( const serverStats = cycleData.server_name
? Object.entries(cycleData.server_name).map(
([serverId, serverName]) => ({ ([serverId, serverName]) => ({
serverId, serverId,
serverName, serverName,
transfer: cycleData.transfer[serverId] || 0, transfer: cycleData.transfer?.[serverId] || 0,
nextUpdate: cycleData.next_update[serverId], nextUpdate: cycleData.next_update?.[serverId],
}), })
); )
: [];
if (serverStats.length === 0) {
return null;
}
return ( return (
<CycleTransferStatsClient <CycleTransferStatsClient

View File

@ -57,7 +57,7 @@ export const ServiceTracker: React.FC = () => {
/> />
</div> </div>
)} )}
{serviceData.data.services && ( {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"> <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]) => { {Object.entries(serviceData.data.services).map(([name, data]) => {
const { days, uptime, avgDelay } = processServiceData(data); const { days, uptime, avgDelay } = processServiceData(data);

32
src/pages/ErrorPage.tsx Normal file
View File

@ -0,0 +1,32 @@
import { Button } from "@/components/ui/button";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
interface ErrorPageProps {
code?: string | number;
message?: string;
}
export default function ErrorPage({ code = "500", message }: ErrorPageProps) {
const navigate = useNavigate();
const { t } = useTranslation();
return (
<div className="flex flex-col items-center justify-center">
<div className="flex flex-col items-center gap-2">
<h1 className="text-4xl font-semibold">{code}</h1>
<p className="text-xl text-muted-foreground">
{message || t("error.somethingWentWrong")}
</p>
<div className="flex gap-2">
<Button onClick={() => window.location.reload()} variant="outline">
{t("error.tryAgain")}
</Button>
<Button onClick={() => navigate("/")} className="mt-2">
{t("error.backToHome")}
</Button>
</div>
</div>
</div>
);
}