diff --git a/frontend/src/components/resources/server/stats.tsx b/frontend/src/components/resources/server/stats.tsx index e8b11c026..1ac56d312 100644 --- a/frontend/src/components/resources/server/stats.tsx +++ b/frontend/src/components/resources/server/stats.tsx @@ -13,6 +13,8 @@ import { Types } from "@monitor/client"; import { useServer } from "."; import { ServerInfo } from "./info"; import { DataTable } from "@ui/data-table"; +import { useState } from "react"; +import { Input } from "@ui/input"; export const ServerStats = ({ id }: { id: string }) => { const server = useServer(id); @@ -31,6 +33,7 @@ export const ServerStats = ({ id }: { id: string }) => {
+
{ ]} />
+
@@ -57,6 +61,19 @@ export const ServerStats = ({ id }: { id: string }) => {
+ + {/*
+
+ {["one", "five", "fifteen"].map((minutes) => ( + + ))} +
+
*/} +
{ ]} />
- {stats?.processes && stats.processes.length > 0 && ( -
- `${process.cpu_perc.toFixed(2)} %`, - }, - { - header: "Memory", - accessorFn: (process) => - process.mem_mb > 1000 - ? `${(process.mem_mb / 1024).toFixed(2)} GB` - : `${process.mem_mb.toFixed(2)} MB`, - }, - ]} - /> -
- )} + + ); }; +const Processes = ({ stats }: { stats: Types.AllSystemStats | undefined }) => { + const [search, setSearch] = useState(""); + const searchSplit = search.split(" "); + + if (!stats?.processes || stats.processes.length === 0) return; + return ( +
setSearch(e.target.value)} + className="w-[300px]" + /> + } + > + + searchSplit.every((search) => process.name.includes(search)) + )} + columns={[ + { + header: "Name", + accessorKey: "name", + }, + { + header: "Exe", + accessorKey: "exe", + }, + { + header: "Cpu", + accessorFn: (process) => `${process.cpu_perc.toFixed(2)} %`, + }, + { + header: "Memory", + accessorFn: (process) => + process.mem_mb > 1000 + ? `${(process.mem_mb / 1024).toFixed(2)} GB` + : `${process.mem_mb.toFixed(2)} MB`, + }, + ]} + /> +
+ ); +}; + const CPU = ({ stats }: { stats: Types.AllSystemStats | undefined }) => { const perc = stats?.cpu.cpu_perc;