Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-06-21 02:20:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: prettier config

Browse Source
This commit is contained in:
hamster1963
2024-12-13 17:26:28 +08:00
parent 1483ce56fa
commit 9a2f3ea8e6
81 changed files with 1666 additions and 2286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ErrorPage.tsx
+9 -11
View File
@@ -1,23 +1,21 @@
import { Button } from "@/components/ui/button";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button"
import { useTranslation } from "react-i18next"
import { useNavigate } from "react-router-dom"
interface ErrorPageProps {
code?: string | number;
message?: string;
code?: string | number
message?: string
}
export default function ErrorPage({ code = "500", message }: ErrorPageProps) {
const navigate = useNavigate();
const { t } = useTranslation();
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>
<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")}
@@ -28,5 +26,5 @@ export default function ErrorPage({ code = "500", message }: ErrorPageProps) {
</div>
</div>
</div>
);
)
}
src/pages/NotFound.tsx
+7 -9
View File
@@ -1,22 +1,20 @@
import { Button } from "@/components/ui/button";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button"
import { useTranslation } from "react-i18next"
import { useNavigate } from "react-router-dom"
export default function NotFound() {
const navigate = useNavigate();
const { t } = useTranslation();
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">404</h1>
<p className="text-xl text-muted-foreground">
{t("error.pageNotFound")}
</p>
<p className="text-xl text-muted-foreground">{t("error.pageNotFound")}</p>
<Button onClick={() => navigate("/")} className="mt-2">
{t("error.backToHome")}
</Button>
</div>
</div>
);
)
}
src/pages/Server.tsx
+76 -119
View File
@@ -1,67 +1,60 @@
import { NezhaWebsocketResponse } from "@/types/nezha-api";
import ServerCard from "@/components/ServerCard";
import { cn, formatNezhaInfo } from "@/lib/utils";
import ServerOverview from "@/components/ServerOverview";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { useQuery } from "@tanstack/react-query";
import { fetchServerGroup } from "@/lib/nezha-api";
import GroupSwitch from "@/components/GroupSwitch";
import { ServerGroup } from "@/types/nezha-api";
import { useWebSocketContext } from "@/hooks/use-websocket-context";
import { useTranslation } from "react-i18next";
import {
ChartBarSquareIcon,
ViewColumnsIcon,
MapIcon,
} from "@heroicons/react/20/solid";
import { ServiceTracker } from "@/components/ServiceTracker";
import ServerCardInline from "@/components/ServerCardInline";
import { Loader } from "@/components/loading/Loader";
import GlobalMap from "@/components/GlobalMap";
import { useStatus } from "@/hooks/use-status";
import useFilter from "@/hooks/use-filter";
import GlobalMap from "@/components/GlobalMap"
import GroupSwitch from "@/components/GroupSwitch"
import ServerCard from "@/components/ServerCard"
import ServerCardInline from "@/components/ServerCardInline"
import ServerOverview from "@/components/ServerOverview"
import { ServiceTracker } from "@/components/ServiceTracker"
import { Loader } from "@/components/loading/Loader"
import useFilter from "@/hooks/use-filter"
import { useStatus } from "@/hooks/use-status"
import { useWebSocketContext } from "@/hooks/use-websocket-context"
import { fetchServerGroup } from "@/lib/nezha-api"
import { cn, formatNezhaInfo } from "@/lib/utils"
import { NezhaWebsocketResponse } from "@/types/nezha-api"
import { ServerGroup } from "@/types/nezha-api"
import { ChartBarSquareIcon, MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"
import { useQuery } from "@tanstack/react-query"
import { useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import { toast } from "sonner"
export default function Servers() {
const { t } = useTranslation();
const { t } = useTranslation()
const { data: groupData } = useQuery({
queryKey: ["server-group"],
queryFn: () => fetchServerGroup(),
});
const { lastMessage, connected } = useWebSocketContext();
const { status } = useStatus();
const { filter } = useFilter();
const [showServices, setShowServices] = useState<string>("0");
const [showMap, setShowMap] = useState<string>("0");
const [inline, setInline] = useState<string>("0");
const [currentGroup, setCurrentGroup] = useState<string>("All");
})
const { lastMessage, connected } = useWebSocketContext()
const { status } = useStatus()
const { filter } = useFilter()
const [showServices, setShowServices] = useState<string>("0")
const [showMap, setShowMap] = useState<string>("0")
const [inline, setInline] = useState<string>("0")
const [currentGroup, setCurrentGroup] = useState<string>("All")
useEffect(() => {
const showServicesState = localStorage.getItem("showServices");
const showServicesState = localStorage.getItem("showServices")
if (showServicesState !== null) {
setShowServices(showServicesState);
setShowServices(showServicesState)
}
}, []);
}, [])
useEffect(() => {
const inlineState = localStorage.getItem("inline");
const inlineState = localStorage.getItem("inline")
if (inlineState !== null) {
setInline(inlineState);
setInline(inlineState)
}
}, []);
}, [])
const groupTabs = [
"All",
...(groupData?.data?.map((item: ServerGroup) => item.group.name) || []),
];
const groupTabs = ["All", ...(groupData?.data?.map((item: ServerGroup) => item.group.name) || [])]
useEffect(() => {
const hasShownToast = sessionStorage.getItem("websocket-connected-toast");
const hasShownToast = sessionStorage.getItem("websocket-connected-toast")
if (connected && !hasShownToast) {
toast.success(t("info.websocketConnected"));
sessionStorage.setItem("websocket-connected-toast", "true");
toast.success(t("info.websocketConnected"))
sessionStorage.setItem("websocket-connected-toast", "true")
}
}, [connected]);
}, [connected])
if (!connected) {
return (
@@ -71,42 +64,37 @@ export default function Servers() {
{t("info.websocketConnecting")}
</div>
</div>
);
)
}
const nezhaWsData = lastMessage
? (JSON.parse(lastMessage.data) as NezhaWebsocketResponse)
: null;
const nezhaWsData = lastMessage ? (JSON.parse(lastMessage.data) as NezhaWebsocketResponse) : null
if (!nezhaWsData) {
return (
<div className="flex flex-col items-center justify-center ">
<p className="font-semibold text-sm">{t("info.processing")}</p>
</div>
);
)
}
let filteredServers =
nezhaWsData?.servers?.filter((server) => {
if (currentGroup === "All") return true;
if (currentGroup === "All") return true
const group = groupData?.data?.find(
(g: ServerGroup) =>
g.group.name === currentGroup &&
Array.isArray(g.servers) &&
g.servers.includes(server.id),
);
return !!group;
}) || [];
)
return !!group
}) || []
const totalServers = filteredServers.length || 0;
const totalServers = filteredServers.length || 0
const onlineServers =
filteredServers.filter(
(server) => formatNezhaInfo(nezhaWsData.now, server).online,
)?.length || 0;
filteredServers.filter((server) => formatNezhaInfo(nezhaWsData.now, server).online)?.length || 0
const offlineServers =
filteredServers.filter(
(server) => !formatNezhaInfo(nezhaWsData.now, server).online,
)?.length || 0;
filteredServers.filter((server) => !formatNezhaInfo(nezhaWsData.now, server).online)?.length ||
0
const up =
filteredServers.reduce(
(total, server) =>
@@ -114,7 +102,7 @@ export default function Servers() {
? total + (server.state?.net_out_transfer ?? 0)
: total,
0,
) || 0;
) || 0
const down =
filteredServers.reduce(
(total, server) =>
@@ -122,7 +110,7 @@ export default function Servers() {
? total + (server.state?.net_in_transfer ?? 0)
: total,
0,
) || 0;
) || 0
const upSpeed =
filteredServers.reduce(
@@ -131,7 +119,7 @@ export default function Servers() {
? total + (server.state?.net_out_speed ?? 0)
: total,
0,
) || 0;
) || 0
const downSpeed =
filteredServers.reduce(
(total, server) =>
@@ -139,43 +127,33 @@ export default function Servers() {
? total + (server.state?.net_in_speed ?? 0)
: total,
0,
) || 0;
) || 0
filteredServers =
status === "all"
? filteredServers
: filteredServers.filter((server) =>
[status].includes(
formatNezhaInfo(nezhaWsData.now, server).online
? "online"
: "offline",
),
);
[status].includes(formatNezhaInfo(nezhaWsData.now, server).online ? "online" : "offline"),
)
if (filter) {
filteredServers.sort((a, b) => {
if (
!formatNezhaInfo(nezhaWsData.now, a).online &&
formatNezhaInfo(nezhaWsData.now, b).online
)
return 1;
if (
formatNezhaInfo(nezhaWsData.now, a).online &&
!formatNezhaInfo(nezhaWsData.now, b).online
)
return -1;
if (!formatNezhaInfo(nezhaWsData.now, a).online && formatNezhaInfo(nezhaWsData.now, b).online)
return 1
if (formatNezhaInfo(nezhaWsData.now, a).online && !formatNezhaInfo(nezhaWsData.now, b).online)
return -1
if (
!formatNezhaInfo(nezhaWsData.now, a).online &&
!formatNezhaInfo(nezhaWsData.now, b).online
)
return 0;
return 0
return (
formatNezhaInfo(nezhaWsData.now, b).state.net_in_speed +
formatNezhaInfo(nezhaWsData.now, b).state.net_out_speed -
(formatNezhaInfo(nezhaWsData.now, a).state.net_in_speed +
formatNezhaInfo(nezhaWsData.now, a).state.net_out_speed)
);
});
)
})
}
return (
@@ -192,13 +170,12 @@ export default function Servers() {
<section className="flex mt-6 items-center gap-2 w-full overflow-hidden">
<button
onClick={() => {
setShowMap(showMap === "0" ? "1" : "0");
setShowMap(showMap === "0" ? "1" : "0")
}}
className={cn(
"rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500":
showMap === "1",
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showMap === "1",
},
)}
>
@@ -206,17 +183,13 @@ export default function Servers() {
</button>
<button
onClick={() => {
setShowServices(showServices === "0" ? "1" : "0");
localStorage.setItem(
"showServices",
showServices === "0" ? "1" : "0",
);
setShowServices(showServices === "0" ? "1" : "0")
localStorage.setItem("showServices", showServices === "0" ? "1" : "0")
}}
className={cn(
"rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500":
showServices === "1",
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showServices === "1",
},
)}
>
@@ -224,54 +197,38 @@ export default function Servers() {
</button>
<button
onClick={() => {
setInline(inline === "0" ? "1" : "0");
localStorage.setItem("inline", inline === "0" ? "1" : "0");
setInline(inline === "0" ? "1" : "0")
localStorage.setItem("inline", inline === "0" ? "1" : "0")
}}
className={cn(
"rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500":
inline === "1",
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": inline === "1",
},
)}
>
<ViewColumnsIcon className="size-[13px]" />
</button>
<GroupSwitch
tabs={groupTabs}
currentTab={currentGroup}
setCurrentTab={setCurrentGroup}
/>
<GroupSwitch tabs={groupTabs} currentTab={currentGroup} setCurrentTab={setCurrentGroup} />
</section>
{showMap === "1" && (
<GlobalMap
now={nezhaWsData.now}
serverList={nezhaWsData?.servers || []}
/>
<GlobalMap now={nezhaWsData.now} serverList={nezhaWsData?.servers || []} />
)}
{showServices === "1" && <ServiceTracker />}
{inline === "1" && (
<section className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden mt-6">
{filteredServers.map((serverInfo) => (
<ServerCardInline
now={nezhaWsData.now}
key={serverInfo.id}
serverInfo={serverInfo}
/>
<ServerCardInline now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
))}
</section>
)}
{inline === "0" && (
<section className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6">
{filteredServers.map((serverInfo) => (
<ServerCard
now={nezhaWsData.now}
key={serverInfo.id}
serverInfo={serverInfo}
/>
<ServerCard now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
))}
</section>
)}
</div>
);
)
}
src/pages/ServerDetail.tsx
+18 -25
View File
@@ -1,26 +1,26 @@
import { NetworkChart } from "@/components/NetworkChart";
import ServerDetailChart from "@/components/ServerDetailChart";
import ServerDetailOverview from "@/components/ServerDetailOverview";
import TabSwitch from "@/components/TabSwitch";
import { Separator } from "@/components/ui/separator";
import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { NetworkChart } from "@/components/NetworkChart"
import ServerDetailChart from "@/components/ServerDetailChart"
import ServerDetailOverview from "@/components/ServerDetailOverview"
import TabSwitch from "@/components/TabSwitch"
import { Separator } from "@/components/ui/separator"
import { useEffect, useState } from "react"
import { useNavigate, useParams } from "react-router-dom"
export default function ServerDetail() {
const navigate = useNavigate();
const navigate = useNavigate()
useEffect(() => {
window.scrollTo({ top: 0, left: 0, behavior: "instant" });
}, []);
window.scrollTo({ top: 0, left: 0, behavior: "instant" })
}, [])
const tabs = ["Detail", "Network"];
const [currentTab, setCurrentTab] = useState(tabs[0]);
const tabs = ["Detail", "Network"]
const [currentTab, setCurrentTab] = useState(tabs[0])
const { id: server_id } = useParams();
const { id: server_id } = useParams()
if (!server_id) {
navigate("/404");
return null;
navigate("/404")
return null
}
return (
@@ -29,11 +29,7 @@ export default function ServerDetail() {
<section className="flex items-center my-2 w-full">
<Separator className="flex-1" />
<div className="flex justify-center w-full max-w-[200px]">
<TabSwitch
tabs={tabs}
currentTab={currentTab}
setCurrentTab={setCurrentTab}
/>
<TabSwitch tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
</div>
<Separator className="flex-1" />
</section>
@@ -41,11 +37,8 @@ export default function ServerDetail() {
<ServerDetailChart server_id={server_id} />
</div>
<div style={{ display: currentTab === tabs[1] ? "block" : "none" }}>
<NetworkChart
server_id={Number(server_id)}
show={currentTab === tabs[1]}
/>
<NetworkChart server_id={Number(server_id)} show={currentTab === tabs[1]} />
</div>
</div>
);
)
}