sys stats frontend

frontend/src/components/server/tabs/Stats.tsx

@@ -1,12 +1,13 @@
-import { CommandLogError } from "@monitor/types";
+import { CommandLogError, SystemStats } from "@monitor/types";
 import { Component, createEffect, createSignal, Show } from "solid-js";
 import { pushNotification } from "../../..";
 import { useAppState } from "../../../state/StateProvider";
 import { useTheme } from "../../../state/ThemeProvider";
 import { combineClasses } from "../../../util/helpers";
-import { getServerStats } from "../../../util/query";
+import { getServerStats, getServerSystemStats } from "../../../util/query";
 import Button from "../../util/Button";
 import Icon from "../../util/Icon";
+import Flex from "../../util/layout/Flex";
 import Grid from "../../util/layout/Grid";
 import Loading from "../../util/loading/Loading";
 import s from "./stats.module.scss";
@@ -20,13 +21,43 @@ const Stats: Component<{}> = (p) => {
       getServerStats(selected.id()).then(setLog);
     }
   };
-  const { themeClass } = useTheme();
   createEffect(load);
+  const [sysStats, setSysStats] = createSignal<SystemStats>();
+  const [refreshingStats, setRefreshingStats] = createSignal(false);
+  const loadStats = () => {
+    if (selected.id()) {
+      getServerSystemStats(selected.id()).then(setSysStats);
+    }
+  };
+  createEffect(loadStats);
+  const { themeClass } = useTheme();
   return (
     <Grid
-      placeItems={log() ? "start center" : "center"}
-      style={{ overflow: "scroll", height: "100%" }}
+      placeItems="start center"
+      style={{ overflow: "scroll", height: "fit-content" }}
     >
+      <Show when={sysStats()}>
+        <Flex alignItems="center" style={{ height: "fit-content" }}>
+          <h2>cpu: {sysStats()!.cpu}%</h2>
+          <h2>mem: {sysStats()!.mem.usedMemPercentage}%</h2>
+          <h2>disk: {sysStats()!.disk.usedPercentage}%</h2>
+          <Button
+            class="blue"
+            style={{ "justify-self": "end" }}
+            onClick={async () => {
+              setRefreshingStats(true);
+              const stats = await getServerSystemStats(selected.id());
+              setSysStats(stats);
+              setRefreshingStats(false);
+              pushNotification("good", "system stats refreshed");
+            }}
+          >
+            <Show when={!refreshingStats()} fallback={<Loading />}>
+              <Icon type="refresh" />
+            </Show>
+          </Button>
+        </Flex>
+      </Show>
       <Show when={log()} fallback={<Loading type="three-dot" scale={0.8} />}>
         <Grid class={combineClasses(s.StatsContainer, themeClass())}>
           <Button

frontend/src/components/server/tabs/stats.module.scss

@@ -17,5 +17,4 @@
 
 .Stats {
 	padding: 0rem 1rem;
-	margin-bottom: 40vh;
 }