From 3413c738896cb45a99710b5385ad8b9688ce1699 Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Sun, 20 Oct 2024 00:25:00 +0800 Subject: [PATCH 1/4] fix: better init detail chart --- .../ServerDetailChartClient.tsx | 54 ++++++++++++------- 1 file changed, 36 insertions(+), 18 deletions(-) diff --git a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx index dad5f6e..4afc4b0 100644 --- a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx +++ b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx @@ -102,7 +102,12 @@ 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 +199,12 @@ 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 +283,12 @@ 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 +404,12 @@ 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 +501,12 @@ 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 +621,12 @@ 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(); } From 57c7a60860bf84ab3115d4eb036fde483e1d07b1 Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Sun, 20 Oct 2024 00:36:08 +0800 Subject: [PATCH 2/4] feat: formatRelativeTime add seconds --- lib/utils.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) 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 { From 46958194a434eae763612c3f74d8eec5e44577c7 Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Sun, 20 Oct 2024 00:36:22 +0800 Subject: [PATCH 3/4] fix: error message --- .../ClientComponents/ServerListClient.tsx | 2 +- .../ClientComponents/ServerOverviewClient.tsx | 225 +++++++++--------- 2 files changed, 115 insertions(+), 112 deletions(-) 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")}

+
+ )} + ); } From a8358e04e4e49d74e00e42847cacda5398ce08d5 Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Sun, 20 Oct 2024 00:36:30 +0800 Subject: [PATCH 4/4] fix: init chart --- .../ServerDetailChartClient.tsx | 50 +++++++++++++++---- 1 file changed, 40 insertions(+), 10 deletions(-) diff --git a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx index 4afc4b0..4edf4b7 100644 --- a/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx +++ b/app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx @@ -104,7 +104,10 @@ function CpuChart({ data }: { data: NezhaAPISafe }) { const timestamp = Date.now().toString(); let newData = [] as cpuChartData[]; if (cpuChartData.length === 0) { - newData = [{ timeStamp: timestamp, cpu: cpu }, { timeStamp: timestamp, cpu: cpu }]; + newData = [ + { timeStamp: timestamp, cpu: cpu }, + { timeStamp: timestamp, cpu: cpu }, + ]; } else { newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }]; } @@ -201,9 +204,15 @@ function ProcessChart({ data }: { data: NezhaAPISafe }) { const timestamp = Date.now().toString(); let newData = [] as processChartData[]; if (processChartData.length === 0) { - newData = [{ timeStamp: timestamp, process: process }, { timeStamp: timestamp, process: process }]; + newData = [ + { timeStamp: timestamp, process: process }, + { timeStamp: timestamp, process: process }, + ]; } else { - newData = [...processChartData, { timeStamp: timestamp, process: process }]; + newData = [ + ...processChartData, + { timeStamp: timestamp, process: process }, + ]; } if (newData.length > 30) { newData.shift(); @@ -285,9 +294,15 @@ function MemChart({ data }: { data: NezhaAPISafe }) { const timestamp = Date.now().toString(); let newData = [] as memChartData[]; if (memChartData.length === 0) { - newData = [{ timeStamp: timestamp, mem: mem, swap: swap }, { timeStamp: timestamp, mem: mem, swap: swap }]; + newData = [ + { timeStamp: timestamp, mem: mem, swap: swap }, + { timeStamp: timestamp, mem: mem, swap: swap }, + ]; } else { - newData = [...memChartData, { timeStamp: timestamp, mem: mem, swap: swap }]; + newData = [ + ...memChartData, + { timeStamp: timestamp, mem: mem, swap: swap }, + ]; } if (newData.length > 30) { newData.shift(); @@ -406,7 +421,10 @@ function DiskChart({ data }: { data: NezhaAPISafe }) { const timestamp = Date.now().toString(); let newData = [] as diskChartData[]; if (diskChartData.length === 0) { - newData = [{ timeStamp: timestamp, disk: disk }, { timeStamp: timestamp, disk: disk }]; + newData = [ + { timeStamp: timestamp, disk: disk }, + { timeStamp: timestamp, disk: disk }, + ]; } else { newData = [...diskChartData, { timeStamp: timestamp, disk: disk }]; } @@ -503,9 +521,15 @@ function NetworkChart({ data }: { data: NezhaAPISafe }) { const timestamp = Date.now().toString(); let newData = [] as networkChartData[]; if (networkChartData.length === 0) { - newData = [{ timeStamp: timestamp, upload: up, download: down }, { timeStamp: timestamp, upload: up, download: down }]; + newData = [ + { timeStamp: timestamp, upload: up, download: down }, + { timeStamp: timestamp, upload: up, download: down }, + ]; } else { - newData = [...networkChartData, { timeStamp: timestamp, upload: up, download: down }]; + newData = [ + ...networkChartData, + { timeStamp: timestamp, upload: up, download: down }, + ]; } if (newData.length > 30) { newData.shift(); @@ -623,9 +647,15 @@ function ConnectChart({ data }: { data: NezhaAPISafe }) { const timestamp = Date.now().toString(); let newData = [] as connectChartData[]; if (connectChartData.length === 0) { - newData = [{ timeStamp: timestamp, tcp: tcp, udp: udp }, { timeStamp: timestamp, tcp: tcp, udp: udp }]; + newData = [ + { timeStamp: timestamp, tcp: tcp, udp: udp }, + { timeStamp: timestamp, tcp: tcp, udp: udp }, + ]; } else { - newData = [...connectChartData, { timeStamp: timestamp, tcp: tcp, udp: udp }]; + newData = [ + ...connectChartData, + { timeStamp: timestamp, tcp: tcp, udp: udp }, + ]; } if (newData.length > 30) { newData.shift();