feat: add server metrics fetching and update translations

- Implemented `fetchServerMetrics` function in `nezha-api.ts` to retrieve server metrics based on metric type and period.
- Added new metric types and periods to `nezha-api.ts` type definitions.
- Updated English and Chinese translations to include new terms for metrics and periods.
- Commented out `ServerDetailSummary` component in `ServerDetail.tsx` for future use.

src/lib/nezha-api.ts

@@ -1,7 +1,10 @@
 import type {
 	LoginUserResponse,
+	MetricPeriod,
+	MetricType,
 	MonitorResponse,
 	ServerGroupResponse,
+	ServerMetricsResponse,
 	ServiceResponse,
 	SettingResponse,
 } from "@/types/nezha-api";
@@ -69,3 +72,19 @@ export const fetchSetting = async (): Promise<SettingResponse> => {
 	}
 	return data;
 };
+
+export const fetchServerMetrics = async (
+	server_id: number,
+	metric: MetricType,
+	period?: MetricPeriod,
+): Promise<ServerMetricsResponse> => {
+	const query = period
+		? `?metric=${metric}&period=${period}`
+		: `?metric=${metric}`;
+	const response = await fetch(`/api/v1/server/${server_id}/metrics${query}`);
+	const data = await response.json();
+	if (data.error) {
+		throw new Error(data.error);
+	}
+	return data;
+};

src/locales/en/translation.json

@@ -77,7 +77,11 @@
 		"mem": "Mem",
 		"swap": "Swap",
 		"upload": "Upload",
-		"download": "Download"
+		"download": "Download",
+		"realtime": "Realtime",
+		"period1d": "1 Day",
+		"period7d": "7 Days",
+		"period30d": "30 Days"
 	},
 	"footer": {
 		"themeBy": "Theme by "

src/locales/zh-CN/translation.json

@@ -77,7 +77,11 @@
 		"mem": "内存",
 		"swap": "虚拟内存",
 		"upload": "上传",
-		"download": "下载"
+		"download": "下载",
+		"realtime": "实时",
+		"period1d": "1 天",
+		"period7d": "7 天",
+		"period30d": "30 天"
 	},
 	"footer": {
 		"themeBy": "主题-"

src/pages/ServerDetail.tsx

@@ -3,7 +3,6 @@ import { useNavigate, useParams } from "react-router-dom";
 import { NetworkChart } from "@/components/NetworkChart";
 import ServerDetailChart from "@/components/ServerDetailChart";
 import ServerDetailOverview from "@/components/ServerDetailOverview";
-import ServerDetailSummary from "@/components/ServerDetailSummary";
 import TabSwitch from "@/components/TabSwitch";
 import { Separator } from "@/components/ui/separator";
 
@@ -39,9 +38,9 @@ export default function ServerDetail() {
 				<Separator className="flex-1" />
 			</section>
 
-			<section>
+			{/* <section>
 				<ServerDetailSummary server_id={Number(server_id)} />
-			</section>
+			</section> */}
 
 			<div style={{ display: currentTab === tabs[0] ? "block" : "none" }}>
 				<ServerDetailChart server_id={server_id} />

src/types/nezha-api.ts

@@ -158,3 +158,41 @@ export interface SettingResponse {
 		version: string;
 	};
 }
+
+export type MetricType =
+	| "cpu"
+	| "memory"
+	| "swap"
+	| "disk"
+	| "net_in_speed"
+	| "net_out_speed"
+	| "net_in_transfer"
+	| "net_out_transfer"
+	| "load1"
+	| "load5"
+	| "load15"
+	| "tcp_conn"
+	| "udp_conn"
+	| "process_count"
+	| "temperature"
+	| "uptime"
+	| "gpu";
+
+export type MetricPeriod = "1d" | "7d" | "30d";
+
+export interface MetricDataPoint {
+	ts: number;
+	value: number;
+}
+
+export interface ServerMetricsData {
+	server_id: number;
+	server_name: string;
+	metric: string;
+	data_points: MetricDataPoint[];
+}
+
+export interface ServerMetricsResponse {
+	success: boolean;
+	data: ServerMetricsData;
+}