feat: service tracker

src/pages/Server.tsx

@@ -10,6 +10,8 @@ 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 } from "@heroicons/react/20/solid";
+import { ServiceTracker } from "@/components/ServiceTracker";
 
 export default function Servers() {
   const { t } = useTranslation();
@@ -19,6 +21,7 @@ export default function Servers() {
   });
   const { lastMessage, readyState } = useWebSocketContext();
 
+  const [showServices, setShowServices] = useState(false);
   const [currentGroup, setCurrentGroup] = useState<string>("All");
 
   const groupTabs = [
@@ -91,13 +94,22 @@ export default function Servers() {
         up={up}
         down={down}
       />
-      <div className="mt-6">
+      <section className="flex mt-6 items-center gap-2 w-full overflow-hidden">
+        <button
+          onClick={() => {
+            setShowServices(!showServices);
+          }}
+          className="rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 hover:bg-blue-500 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] hover:shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] "
+        >
+          <ChartBarSquareIcon className="size-[13px]" />
+        </button>
         <GroupSwitch
           tabs={groupTabs}
           currentTab={currentGroup}
           setCurrentTab={setCurrentGroup}
         />
-      </div>
+      </section>
+      {showServices && <ServiceTracker />}
       <section className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6">
         {filteredServers.map((serverInfo) => (
           <ServerCard key={serverInfo.id} serverInfo={serverInfo} />

src/pages/ServerDetail.tsx

@@ -15,10 +15,10 @@ export default function ServerDetail() {
   const { id: server_id } = useParams();
 
   if (!server_id) {
-    navigate('/404');
+    navigate("/404");
     return null;
   }
-  
+
   return (
     <div className="mx-auto w-full max-w-5xl px-0 flex flex-col gap-4">
       <ServerDetailOverview server_id={server_id} />
@@ -34,10 +34,10 @@ export default function ServerDetail() {
         <Separator className="flex-1" />
       </section>
       <div style={{ display: currentTab === tabs[0] ? "block" : "none" }}>
-      <ServerDetailChart server_id={server_id} />
+        <ServerDetailChart server_id={server_id} />
       </div>
       <div style={{ display: currentTab === tabs[1] ? "block" : "none" }}>
-      <NetworkChart
+        <NetworkChart
           server_id={Number(server_id)}
           show={currentTab === tabs[1]}
         />