From 3a78de0b577f8ef57217aef0af0411399d760662 Mon Sep 17 00:00:00 2001 From: beckerinj Date: Wed, 10 Aug 2022 23:06:51 -0400 Subject: [PATCH] fix stats not having custom model. start making graph --- .vscode/fastify.code-snippets | 3 +- core/src/plugins/db/stats.ts | 3 +- frontend/package.json | 2 + frontend/src/components/home/Tree/Server.tsx | 44 +++++++--- frontend/src/components/server/StatGraphs.tsx | 43 ++++++++-- .../src/components/util/menu/CenterMenu.tsx | 10 ++- frontend/src/index.tsx | 2 +- yarn.lock | 86 +++++++++++++++++++ 8 files changed, 168 insertions(+), 25 deletions(-) diff --git a/.vscode/fastify.code-snippets b/.vscode/fastify.code-snippets index 744f845e0..040eabd42 100644 --- a/.vscode/fastify.code-snippets +++ b/.vscode/fastify.code-snippets @@ -22,13 +22,14 @@ "import { FastifyInstance } from \"fastify\";", "import fp from \"fastify-plugin\";", "import { Schema } from \"mongoose\";", + "import model from \"../../util/model\";", "", "const ${2:$TM_FILENAME_BASE} = fp((app: FastifyInstance, _: {}, done: () => void) => {", "\tconst schema = new Schema({", "\t\t${0}", "\t});", "\t", - "\tapp.decorate(\"${2:$TM_FILENAME_BASE}\", app.mongoose.model(\"${1}\", schema));", + "\tapp.decorate(\"${2:$TM_FILENAME_BASE}\", model(app, \"${1}\", schema));", "\t", "\tdone();", "});", diff --git a/core/src/plugins/db/stats.ts b/core/src/plugins/db/stats.ts index fd8274961..5a7707a48 100644 --- a/core/src/plugins/db/stats.ts +++ b/core/src/plugins/db/stats.ts @@ -2,6 +2,7 @@ import { DiskStats, MemStats, StoredStats } from "@monitor/types"; import { FastifyInstance } from "fastify"; import fp from "fastify-plugin"; import { Schema } from "mongoose"; +import model from "../../util/model"; const stats = fp((app: FastifyInstance, _: {}, done: () => void) => { const MemSchema = new Schema({ @@ -22,7 +23,7 @@ const stats = fp((app: FastifyInstance, _: {}, done: () => void) => { disk: DiskSchema }); - app.decorate("stats", app.mongoose.model("Stats", schema)); + app.decorate("stats", model(app, "Stats", schema)); done(); }); diff --git a/frontend/package.json b/frontend/package.json index efb0073c8..633025844 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,9 +17,11 @@ }, "dependencies": { "@monitor/util": "1.0.0", + "apexcharts": "^3.35.4", "axios": "^0.26.1", "js-file-download": "^0.4.12", "reconnecting-websocket": "^4.4.0", + "solid-apexcharts": "^0.1.6", "solid-js": "^1.3.10" } } diff --git a/frontend/src/components/home/Tree/Server.tsx b/frontend/src/components/home/Tree/Server.tsx index 41fa39e1d..9c7e4dc9f 100644 --- a/frontend/src/components/home/Tree/Server.tsx +++ b/frontend/src/components/home/Tree/Server.tsx @@ -1,4 +1,11 @@ -import { Component, createEffect, createMemo, createSignal, For, Show } from "solid-js"; +import { + Component, + createEffect, + createMemo, + createSignal, + For, + Show, +} from "solid-js"; import { useAppState } from "../../../state/StateProvider"; import { useTheme } from "../../../state/ThemeProvider"; import { useUser } from "../../../state/UserProvider"; @@ -52,7 +59,8 @@ const Server: Component<{ id: string }> = (p) => { }>
-
cpu:
{stats()?.cpu.toFixed(1)}% +
cpu:
{" "} + {stats()?.cpu.toFixed(1)}%
mem:
{" "} @@ -62,18 +70,28 @@ const Server: Component<{ id: string }> = (p) => {
disk:
{" "} {stats()?.disk.usedPercentage.toFixed(1)}%
- }> - + } > - - - - + + + +
= (p) => { const [show, toggleShow] = useToggle(); @@ -14,11 +16,8 @@ const StatGraphs: Component<{ id: string }> = (p) => { - - - } + target={} + targetClass="blue" content={} /> ); @@ -35,12 +34,42 @@ const Graphs: Component<{ id: string }> = (p) => { setStats(stats); setReloading(false); }; - getServerStatsHistory(p.id).then(setStats); + getServerStatsHistory(p.id).then(setStats); return (

{server().name}

+ + + ); }; +const Graph: Component<{ + stats: Accessor; + field: string; +}> = (p) => { + const options = () => ({ + chart: { + id: "mychart", + }, + xaxis: p.stats()!.map((stat) => readableTimestamp(stat.ts / 1000)) + }); + const series = () => [ + { + name: "CPU Usage", + data: p.stats()!.map((stat) => stat.cpu), + }, + ]; + + return ( + + ); +}; + export default StatGraphs; diff --git a/frontend/src/components/util/menu/CenterMenu.tsx b/frontend/src/components/util/menu/CenterMenu.tsx index 6a3b0c182..a4cdae2b3 100644 --- a/frontend/src/components/util/menu/CenterMenu.tsx +++ b/frontend/src/components/util/menu/CenterMenu.tsx @@ -42,7 +42,10 @@ const CenterMenu: Component<{ return ( <>