diff --git a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx index dad5f6e..4edf4b7 100644 --- a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx +++ b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx @@ -102,7 +102,15 @@ function CpuChart({ data }: { data: NezhaAPISafe }) { useEffect(() => { if (data) { const timestamp = Date.now().toString(); - const newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }]; + let newData = [] as cpuChartData[]; + if (cpuChartData.length === 0) { + newData = [ + { timeStamp: timestamp, cpu: cpu }, + { timeStamp: timestamp, cpu: cpu }, + ]; + } else { + newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }]; + } if (newData.length > 30) { newData.shift(); } @@ -194,10 +202,18 @@ function ProcessChart({ data }: { data: NezhaAPISafe }) { useEffect(() => { if (data) { const timestamp = Date.now().toString(); - const newData = [ - ...processChartData, - { timeStamp: timestamp, process: process }, - ]; + let newData = [] as processChartData[]; + if (processChartData.length === 0) { + newData = [ + { timeStamp: timestamp, process: process }, + { timeStamp: timestamp, process: process }, + ]; + } else { + newData = [ + ...processChartData, + { timeStamp: timestamp, process: process }, + ]; + } if (newData.length > 30) { newData.shift(); } @@ -276,10 +292,18 @@ function MemChart({ data }: { data: NezhaAPISafe }) { useEffect(() => { if (data) { const timestamp = Date.now().toString(); - const newData = [ - ...memChartData, - { timeStamp: timestamp, mem: mem, swap: swap }, - ]; + let newData = [] as memChartData[]; + if (memChartData.length === 0) { + newData = [ + { timeStamp: timestamp, mem: mem, swap: swap }, + { timeStamp: timestamp, mem: mem, swap: swap }, + ]; + } else { + newData = [ + ...memChartData, + { timeStamp: timestamp, mem: mem, swap: swap }, + ]; + } if (newData.length > 30) { newData.shift(); } @@ -395,7 +419,15 @@ function DiskChart({ data }: { data: NezhaAPISafe }) { useEffect(() => { if (data) { const timestamp = Date.now().toString(); - const newData = [...diskChartData, { timeStamp: timestamp, disk: disk }]; + let newData = [] as diskChartData[]; + if (diskChartData.length === 0) { + newData = [ + { timeStamp: timestamp, disk: disk }, + { timeStamp: timestamp, disk: disk }, + ]; + } else { + newData = [...diskChartData, { timeStamp: timestamp, disk: disk }]; + } if (newData.length > 30) { newData.shift(); } @@ -487,10 +519,18 @@ function NetworkChart({ data }: { data: NezhaAPISafe }) { useEffect(() => { if (data) { const timestamp = Date.now().toString(); - const newData = [ - ...networkChartData, - { timeStamp: timestamp, upload: up, download: down }, - ]; + let newData = [] as networkChartData[]; + if (networkChartData.length === 0) { + newData = [ + { timeStamp: timestamp, upload: up, download: down }, + { timeStamp: timestamp, upload: up, download: down }, + ]; + } else { + newData = [ + ...networkChartData, + { timeStamp: timestamp, upload: up, download: down }, + ]; + } if (newData.length > 30) { newData.shift(); } @@ -605,10 +645,18 @@ function ConnectChart({ data }: { data: NezhaAPISafe }) { useEffect(() => { if (data) { const timestamp = Date.now().toString(); - const newData = [ - ...connectChartData, - { timeStamp: timestamp, tcp: tcp, udp: udp }, - ]; + let newData = [] as connectChartData[]; + if (connectChartData.length === 0) { + newData = [ + { timeStamp: timestamp, tcp: tcp, udp: udp }, + { timeStamp: timestamp, tcp: tcp, udp: udp }, + ]; + } else { + newData = [ + ...connectChartData, + { timeStamp: timestamp, tcp: tcp, udp: udp }, + ]; + } if (newData.length > 30) { newData.shift(); } diff --git a/app/[locale]/(main)/ClientComponents/ServerListClient.tsx b/app/[locale]/(main)/ClientComponents/ServerListClient.tsx index eea8010..2f163ba 100644 --- a/app/[locale]/(main)/ClientComponents/ServerListClient.tsx +++ b/app/[locale]/(main)/ClientComponents/ServerListClient.tsx @@ -24,7 +24,7 @@ export default function ServerListClient() {

{t("error_message")}

); - if (!data) return null; + if (!data?.result) return null; const { result } = data; diff --git a/app/[locale]/(main)/ClientComponents/ServerOverviewClient.tsx b/app/[locale]/(main)/ClientComponents/ServerOverviewClient.tsx index c8582eb..ebfa63c 100644 --- a/app/[locale]/(main)/ClientComponents/ServerOverviewClient.tsx +++ b/app/[locale]/(main)/ClientComponents/ServerOverviewClient.tsx @@ -12,7 +12,10 @@ import useSWR from "swr"; export default function ServerOverviewClient() { const t = useTranslations("ServerOverviewClient"); - const { data, error } = useSWR("/api/server", nezhaFetcher); + const { data, error, isLoading } = useSWR( + "/api/server", + nezhaFetcher, + ); const disableCartoon = getEnv("NEXT_PUBLIC_DisableCartoon") === "true"; if (error) @@ -23,118 +26,118 @@ export default function ServerOverviewClient() { ); - if (!data?.result) - return ( -
-

{t("no_data_message")}

-
- ); - return ( -
- - -
-

- {t("p_816-881_Totalservers")} -

-
- - - - {data ? ( -
- {data?.result.length} -
- ) : ( -
- -
- )} -
-
-
-
- - -
-

- {t("p_1610-1676_Onlineservers")} -

-
- - - - - {data ? ( -
- {data?.live_servers} -
- ) : ( -
- -
- )} -
-
-
-
- - -
-

- {t("p_2532-2599_Offlineservers")} -

-
- - - - - {data ? ( -
- {data?.offline_servers} -
- ) : ( -
- -
- )} -
-
-
-
- - -
-

- {t("p_3463-3530_Totalbandwidth")} -

- {data ? ( -
-

- ↑{formatBytes(data?.total_out_bandwidth)} -

-

- ↓{formatBytes(data?.total_in_bandwidth)} -

-
- ) : ( -
- + <> +
+ + +
+

+ {t("p_816-881_Totalservers")} +

+
+ + + + {data?.result ? ( +
+ {data?.result.length} +
+ ) : ( +
+ +
+ )}
+
+
+
+ + +
+

+ {t("p_1610-1676_Onlineservers")} +

+
+ + + + + {data?.result ? ( +
+ {data?.live_servers} +
+ ) : ( +
+ +
+ )} +
+
+
+
+ + +
+

+ {t("p_2532-2599_Offlineservers")} +

+
+ + + + + {data?.result ? ( +
+ {data?.offline_servers} +
+ ) : ( +
+ +
+ )} +
+
+
+
+ + +
+

+ {t("p_3463-3530_Totalbandwidth")} +

+ {data?.result ? ( +
+

+ ↑{formatBytes(data?.total_out_bandwidth)} +

+

+ ↓{formatBytes(data?.total_in_bandwidth)} +

+
+ ) : ( +
+ +
+ )} +
+ {!disableCartoon && ( + {"Hamster1963"} )} -
- {!disableCartoon && ( - {"Hamster1963"} - )} - - -
+
+
+
+ {data?.result === undefined && !isLoading && ( +
+

{t("error_message")}

+
+ )} + ); } diff --git a/lib/utils.ts b/lib/utils.ts index 5dc9143..e22f1b1 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -90,17 +90,19 @@ export function formatRelativeTime(timestamp: number): string { const diff = now - timestamp; const hours = Math.floor(diff / (1000 * 60 * 60)); const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((diff % (1000 * 60)) / 1000); if (hours > 24) { const days = Math.floor(hours / 24); return `${days}d`; } else if (hours > 0) { return `${hours}h`; - } else if (minutes >= 0) { + } else if (minutes > 0) { return `${minutes}m`; - } else { - return "just now"; + } else if (seconds >= 0) { + return `${seconds}s`; } + return "0s"; } export function formatTime(timestamp: number): string {