diff --git a/frontend/src/components/stats/CurrentStats.tsx b/frontend/src/components/stats/CurrentStats.tsx index 969127b88..c18933429 100644 --- a/frontend/src/components/stats/CurrentStats.tsx +++ b/frontend/src/components/stats/CurrentStats.tsx @@ -36,10 +36,10 @@ import { } from "./Charts"; import s from "./stats.module.scss"; -const CurrentStats: Component<{}> = (p) => { +const CurrentStats: Component<{ setWsOpen: Setter }> = (p) => { const params = useParams(); const [stats, setStats] = createSignal([]); - const { open } = useStatsWs(params, setStats); + useStatsWs(params, setStats, p.setWsOpen); createEffect(() => { client .get_server_stats(params.id, { @@ -54,7 +54,7 @@ const CurrentStats: Component<{}> = (p) => { 0} fallback={}> - +
; - open: Accessor; }> = (p) => { const latest = () => p.stats()[p.stats().length - 1]; const mem_perc = () => { @@ -137,20 +136,6 @@ const BasicInfo: Component<{ }; return ( <> -
- - } - content={p.open() ? "connected" : "disconnected"} - position="right center" - /> -
- = (p) => { ); }; -function useStatsWs(params: Params, setStats: Setter) { +function useStatsWs(params: Params, setStats: Setter, setWsOpen: Setter) { const ws = new ReconnectingWebSocket( `${URL.replace("http", "ws")}/ws/stats/${params.id}${generateQuery({ networks: "true", @@ -290,11 +275,10 @@ function useStatsWs(params: Params, setStats: Setter) { processes: "true", })}` ); - const [open, setOpen] = createSignal(false); ws.addEventListener("open", () => { // console.log("connection opened"); ws.send(client.token!); - setOpen(true); + setWsOpen(true); }); ws.addEventListener("message", ({ data }) => { if (data === "LOGGED_IN") { @@ -311,15 +295,12 @@ function useStatsWs(params: Params, setStats: Setter) { ws.addEventListener("close", () => { console.log("stats connection closed"); // clearInterval(int); - setOpen(false); + setWsOpen(false); }); onCleanup(() => { console.log("closing stats ws"); ws.close(); }); - return { - open, - }; } // const NetworkIoInfo: Component<{ stats: Accessor }> = (p) => { diff --git a/frontend/src/components/stats/Stats.tsx b/frontend/src/components/stats/Stats.tsx index aeb72fb6c..10205c4a9 100644 --- a/frontend/src/components/stats/Stats.tsx +++ b/frontend/src/components/stats/Stats.tsx @@ -3,9 +3,11 @@ import { Accessor, Component, createSignal, Match, Setter, Show, Signal, Switch import { useAppState } from "../../state/StateProvider"; import { Timelength } from "../../types"; import { useLocalStorage } from "../../util/hooks"; +import Circle from "../shared/Circle"; import Icon from "../shared/Icon"; import Flex from "../shared/layout/Flex"; import Grid from "../shared/layout/Grid"; +import HoverMenu from "../shared/menu/HoverMenu"; import Selector from "../shared/menu/Selector"; import CurrentStats from "./CurrentStats"; import HistoricalStats from "./HistoricalStats"; @@ -33,10 +35,11 @@ const Stats: Component<{}> = () => { "stats-timelength-v3" ); const [page, setPage] = createSignal(0); + const [wsOpen, setWsOpen] = createSignal(false); return ( -
+
}> @@ -62,7 +65,7 @@ const Stats: Component<{}> = () => { - + @@ -72,14 +75,27 @@ const Stats: Component<{}> = () => { ); }; -export const Header = () => { +export const Header: Component<{ view: string, open: boolean }> = (p) => { const { servers } = useAppState(); const params = useParams(); const server = () => servers.get(params.id); return ( - +

{server()?.server.name} - system stats

-
+ + + } + content={p.open ? "connected" : "disconnected"} + position="right center" + /> + +
); }