create setup for stat graph center menu

core/src/routes/servers.ts

@@ -124,7 +124,7 @@ const servers = fp((app: FastifyInstance, _: {}, done: () => void) => {
     { onRequest: [app.auth, app.userEnabled] },
     async (req, res) => {
       const { id } = req.params as { id: string };
-      const { offset } = req.query as { offset: number };
+      const { offset } = req.query as { offset?: number };
       const server = await app.servers.findById(id);
       if (!server) {
         res.status(400);

frontend/public/icons/timeline-line-chart.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+<g id="timeline_line_chart_2_">
+	<g>
+		<path fill="#fceade" fill-rule="evenodd" clip-rule="evenodd" d="M19,16H2v-1.59l5-5l3.29,3.29C10.47,12.89,10.72,13,11,13s0.53-0.11,0.71-0.29
+			l7-7C18.89,5.53,19,5.28,19,5c0-0.55-0.45-1-1-1c-0.28,0-0.53,0.11-0.71,0.29L11,10.59L7.71,7.29C7.53,7.11,7.28,7,7,7
+			S6.47,7.11,6.29,7.29L2,11.59V3c0-0.55-0.45-1-1-1S0,2.45,0,3v14c0,0.14,0.03,0.27,0.08,0.39C0.23,17.75,0.59,18,1,18h18
+			c0.55,0,1-0.45,1-1C20,16.45,19.55,16,19,16z"/>
+	</g>
+</g>
+</svg>

frontend/src/components/home/Tree/Server.tsx

@@ -12,6 +12,7 @@ import Deployment from "./Deployment";
 import s from "../home.module.scss";
 import { NewDeployment } from "./New";
 import Loading from "../../util/loading/Loading";
+import StatGraphs from "../../server/StatGraphs";
 
 const Server: Component<{ id: string }> = (p) => {
   const { servers, serverStats, deployments, selected } = useAppState();
@@ -72,6 +73,7 @@ const Server: Component<{ id: string }> = (p) => {
                     <Icon type="refresh" width="0.75rem" />
                   </button>
                 </Show>
+                <StatGraphs id={p.id} />
               </Show>
             </Show>
             <div

frontend/src/components/server/StatGraphs.tsx

@@ -0,0 +1,46 @@
+import { StoredStats } from "@monitor/types";
+import { Component, createSignal } from "solid-js";
+import { useAppState } from "../../state/StateProvider";
+import { useToggle } from "../../util/hooks";
+import { getServerStatsHistory } from "../../util/query";
+import Button from "../util/Button";
+import Icon from "../util/Icon";
+import Grid from "../util/layout/Grid";
+import CenterMenu from "../util/menu/CenterMenu";
+
+const StatGraphs: Component<{ id: string }> = (p) => {
+  const [show, toggleShow] = useToggle();
+  return (
+    <CenterMenu
+      show={show}
+      toggleShow={toggleShow}
+      target={
+        <Button class="blue" onClick={toggleShow}>
+          <Icon type="timeline-line-chart" />
+        </Button>
+      }
+      content={<Graphs id={p.id} />}
+    />
+  );
+};
+
+const Graphs: Component<{ id: string }> = (p) => {
+  const { servers } = useAppState();
+  const server = () => servers.get(p.id)!;
+  const [stats, setStats] = createSignal<StoredStats[]>();
+  const [reloading, setReloading] = createSignal(false);
+  const reloadStats = async () => {
+    setReloading(true);
+    const stats = await getServerStatsHistory(p.id);
+    setStats(stats);
+    setReloading(false);
+  };
+	getServerStatsHistory(p.id).then(setStats);
+  return (
+    <Grid placeItems="center start">
+      <h1>{server().name}</h1>
+    </Grid>
+  );
+};
+
+export default StatGraphs;

frontend/src/components/util/Icon.tsx

@@ -42,7 +42,8 @@ export type IconType =
   | "caret-right"
   | "search"
   | "cog"
-  | "home";
+  | "home"
+  | "timeline-line-chart";
 
 const Icon: Component<{
   type: IconType;

frontend/src/index.tsx

@@ -12,10 +12,15 @@ import LoginGuard from "./components/login/LoginGuard";
 import { AppStateProvider } from "./state/StateProvider";
 import { ThemeProvider } from "./state/ThemeProvider";
 
+// export const URL =
+//   import.meta.env.MODE === "production"
+//     ? location.origin
+//     : "http://localhost:9000";
+
 export const URL =
   import.meta.env.MODE === "production"
     ? location.origin
-    : "http://localhost:9000";
+    : "https://monitor.assc.ai";
     
 export const WS_URL = URL.replace("https", "wss").replace("http", "ws") + "/ws";
 

frontend/src/util/query.ts

@@ -13,6 +13,7 @@ import {
   PM2Process,
   Server,
   Servers,
+  StoredStats,
   SystemStats,
   Update,
   User,
@@ -132,7 +133,7 @@ export async function getServerSystemStats(id: string) {
 }
 
 export async function getServerStatsHistory(id: string, offset?: number) {
-  return await client.get<SystemStats[]>(
+  return await client.get<StoredStats[]>(
     `/api/server/${id}/stats-history${generateQuery({ offset })}`
   );
 }