Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-02-06 05:30:07 +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

195
src/pages/Server.tsx
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>
);
)
}