show sys info and, load, cpu freq on stats

frontend/src/components/stats/Charts.tsx

@@ -40,7 +40,7 @@ const SingleStatChart: Component<{
           "padding-bottom": "0.2rem",
         }}
       >
-        <Show when={!p.small}>
+        <Show when={!p.small} fallback={<div>{p.header}</div>}>
           <h2>{p.header}</h2>
         </Show>
         <LightweightChart
@@ -54,6 +54,33 @@ const SingleStatChart: Component<{
   );
 };
 
+export const LoadChart: Component<{
+  stats: Accessor<(SystemStatsRecord | SystemStats)[] | undefined>;
+  small?: boolean;
+  disableScroll?: boolean;
+}> = (p) => {
+  const line = () => {
+    return p.stats()?.map((s) => {
+      return {
+        time: convertTsMsToLocalUnixTsInSecs(
+          (s as SystemStatsRecord).ts || (s as SystemStats).refresh_ts
+        ),
+        value: s.system_load!,
+      };
+    });
+  };
+  return (
+    <SingleStatChart
+      header="system load %"
+      label="load %"
+      color={COLORS.blue}
+      line={line}
+      small={p.small}
+      disableScroll={p.disableScroll}
+    />
+  );
+};
+
 export const CpuChart: Component<{
   stats: Accessor<(SystemStatsRecord | SystemStats)[] | undefined>;
   small?: boolean;
@@ -71,7 +98,7 @@ export const CpuChart: Component<{
   };
   return (
     <SingleStatChart
-      header="cpu"
+      header="cpu %"
       label="cpu %"
       color={COLORS.blue}
       line={line}
@@ -81,6 +108,33 @@ export const CpuChart: Component<{
   );
 };
 
+export const CpuFreqChart: Component<{
+  stats: Accessor<(SystemStatsRecord | SystemStats)[] | undefined>;
+  small?: boolean;
+  disableScroll?: boolean;
+}> = (p) => {
+  const line = () => {
+    return p.stats()?.map((s) => {
+      return {
+        time: convertTsMsToLocalUnixTsInSecs(
+          (s as SystemStatsRecord).ts || (s as SystemStats).refresh_ts
+        ),
+        value: s.cpu_freq_mhz! / 1000,
+      };
+    });
+  };
+  return (
+    <SingleStatChart
+      header="cpu frequency"
+      label="GHz"
+      color={COLORS.blue}
+      line={line}
+      small={p.small}
+      disableScroll={p.disableScroll}
+    />
+  );
+};
+
 export const MemChart: Component<{
   stats: Accessor<(SystemStatsRecord | SystemStats)[] | undefined>;
   small?: boolean;

frontend/src/components/stats/CurrentStats.tsx

@@ -17,18 +17,18 @@ import { client, URL } from "../..";
 import { SystemProcess, SystemStats } from "../../types";
 import { generateQuery } from "../../util/helpers";
 import { useLocalStorage } from "../../util/hooks";
-import Circle from "../shared/Circle";
 import HeatBar from "../shared/HeatBar";
 import Flex from "../shared/layout/Flex";
 import Grid from "../shared/layout/Grid";
 import Loading from "../shared/loading/Loading";
-import HoverMenu from "../shared/menu/HoverMenu";
 import SimpleTabs from "../shared/tabs/SimpleTabs";
 import {
   CpuChart,
+  CpuFreqChart,
   DiskChart,
   DiskReadChart,
   DiskWriteChart,
+  LoadChart,
   MemChart,
   NetworkRecvChart,
   NetworkSentChart,
@@ -64,8 +64,8 @@ const CurrentStats: Component<{ setWsOpen: Setter<boolean> }> = (p) => {
                 title: "network io",
                 element: () => (
                   <Flex>
-                    <NetworkRecvChart stats={stats} />
-                    <NetworkSentChart stats={stats} />
+                    <NetworkRecvChart stats={stats} small disableScroll />
+                    <NetworkSentChart stats={stats} small disableScroll />
                   </Flex>
                 ),
               },
@@ -73,8 +73,8 @@ const CurrentStats: Component<{ setWsOpen: Setter<boolean> }> = (p) => {
                 title: "disk io",
                 element: () => (
                   <Flex>
-                    <DiskReadChart stats={stats} />
-                    <DiskWriteChart stats={stats} />
+                    <DiskReadChart stats={stats} small disableScroll />
+                    <DiskWriteChart stats={stats} small disableScroll />
                   </Flex>
                 ),
               },
@@ -136,12 +136,25 @@ const BasicInfo: Component<{
   };
   return (
     <>
+      <StatsHeatbarRow
+        label="load"
+        type="load"
+        stats={p.stats}
+        percentage={latest().system_load!}
+        localStorageKey="current-stats-load-graph-v1"
+      />
+
       <StatsHeatbarRow
         label="cpu"
         type="cpu"
         stats={p.stats}
         percentage={latest().cpu_perc}
         localStorageKey="current-stats-cpu-graph-v1"
+        additionalInfo={
+          <div style={{ opacity: 0.7 }}>
+            {(latest().cpu_freq_mhz / 1000).toFixed(1)} GHz
+          </div>
+        }
       />
 
       <StatsHeatbarRow
@@ -176,7 +189,7 @@ const BasicInfo: Component<{
 };
 
 const StatsHeatbarRow: Component<{
-  type: "cpu" | "mem" | "disk" | "temp";
+  type: "cpu" | "load" | "mem" | "disk" | "temp";
   label: string;
   stats: Accessor<SystemStats[]>;
   percentage: number;
@@ -208,8 +221,14 @@ const StatsHeatbarRow: Component<{
       <Show when={showGraph()}>
         <div />
         <Switch>
+          <Match when={p.type === "load"}>
+            <LoadChart stats={p.stats} small disableScroll />
+          </Match>
           <Match when={p.type === "cpu"}>
-            <CpuChart stats={p.stats} small disableScroll />
+            <Flex style={{ width: "100%" }}>
+              <CpuChart stats={p.stats} small disableScroll />
+              <CpuFreqChart stats={p.stats} small disableScroll />
+            </Flex>
           </Match>
           <Match when={p.type === "mem"}>
             <MemChart stats={p.stats} small disableScroll />
@@ -273,6 +292,7 @@ function useStatsWs(params: Params, setStats: Setter<SystemStats[]>, setWsOpen:
       networks: "true",
       components: "true",
       processes: "true",
+      cpus: "true",
     })}`
   );
   ws.addEventListener("open", () => {

frontend/src/components/stats/Stats.tsx

@@ -5,7 +5,6 @@ import {
   createResource,
   createSignal,
   Match,
-  Resource,
   Setter,
   Show,
   Switch,
@@ -64,8 +63,14 @@ const Stats: Component<{}> = () => {
             />
           </Flex>
         </Show>
-        <Flex alignItems="center">
-          
+        <Flex
+          alignItems="center"
+          style={{ "place-self": "center end", width: "fit-content" }}
+        >
+          <div>{sysInfo()?.os}</div>
+          {/* <div>{sysInfo()?.kernel}</div> */}
+          <div>{sysInfo()?.cpu_brand}</div>
+          <div>{sysInfo()?.core_count} cores</div>
         </Flex>
       </Grid>
       <Switch>

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

@@ -1,7 +1,7 @@
 @use "../../style/colors.scss" as c;
 
 .HeaderArea {
-	grid-template-columns: repeat(3, 1fr);
+	grid-template-columns: 2fr 1fr 2fr;
 }
 
 .Charts {