ComputerSurge/komodo
3
0
Fork 0
forked from github-starred/komodo
Code Pull Requests 1 Actions Packages Releases Activity

fix stats not having custom model. start making graph

Browse Source
This commit is contained in:
beckerinj
2022-08-10 23:06:51 -04:00
parent eed36b22de
commit 3a78de0b57
8 changed files with 168 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/fastify.code-snippets vendored
View File

@@ -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();",
"});",

3
core/src/plugins/db/stats.ts
View File

@@ -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<MemStats>({
@@ -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();
});

2
frontend/package.json
View File

@@ -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"
}
}

44
frontend/src/components/home/Tree/Server.tsx
View File

@@ -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) => {
<Show when={server()?.status === "OK"}>
<Show when={stats()} fallback={<Loading type="three-dot" />}>
<div>
<div style={{ opacity: 0.7 }}>cpu:</div> {stats()?.cpu.toFixed(1)}%
<div style={{ opacity: 0.7 }}>cpu:</div>{" "}
{stats()?.cpu.toFixed(1)}%
</div>
<div>
<div style={{ opacity: 0.7 }}>mem:</div>{" "}
@@ -62,18 +70,28 @@ const Server: Component<{ id: string }> = (p) => {
<div style={{ opacity: 0.7 }}>disk:</div>{" "}
{stats()?.disk.usedPercentage.toFixed(1)}%
</div>
<Show when={!reloading()} fallback={<button class="blue"><Loading type="spinner" scale={0.2}/></button>}>
<button
class="blue"
onClick={(e) => {
e.stopPropagation();
reloadStats();
}}
<Flex gap=".5rem" alignItems="center">
<Show
when={!reloading()}
fallback={
<Button class="blue" style={{ height: "fit-content" }}>
<Loading type="spinner" scale={0.2} />
</Button>
}
>
<Icon type="refresh" width="0.75rem" />
</button>
</Show>
<StatGraphs id={p.id} />
<Button
class="blue"
style={{ height: "fit-content" }}
onClick={(e) => {
e.stopPropagation();
reloadStats();
}}
>
<Icon type="refresh" width="0.85rem" />
</Button>
</Show>
<StatGraphs id={p.id} />
</Flex>
</Show>
</Show>
<div

43
frontend/src/components/server/StatGraphs.tsx
View File

@@ -1,5 +1,6 @@
import { StoredStats } from "@monitor/types";
import { Component, createSignal } from "solid-js";
import { Accessor, Component, createSignal, Show } from "solid-js";
import { SolidApexCharts } from "solid-apexcharts";
import { useAppState } from "../../state/StateProvider";
import { useToggle } from "../../util/hooks";
import { getServerStatsHistory } from "../../util/query";
@@ -7,6 +8,7 @@ import Button from "../util/Button";
import Icon from "../util/Icon";
import Grid from "../util/layout/Grid";
import CenterMenu from "../util/menu/CenterMenu";
import { readableTimestamp } from "../../util/helpers";
const StatGraphs: Component<{ id: string }> = (p) => {
const [show, toggleShow] = useToggle();
@@ -14,11 +16,8 @@ const StatGraphs: Component<{ id: string }> = (p) => {
<CenterMenu
show={show}
toggleShow={toggleShow}
target={
<Button class="blue" onClick={toggleShow}>
<Icon type="timeline-line-chart" />
</Button>
}
target={<Icon type="timeline-line-chart" width="0.85rem" />}
targetClass="blue"
content={<Graphs id={p.id} />}
/>
);
@@ -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 (
<Grid placeItems="center start">
<h1>{server().name}</h1>
<Show when={stats()}>
<Graph stats={stats} field="cpu" />
</Show>
</Grid>
);
};
const Graph: Component<{
stats: Accessor<StoredStats[] | undefined>;
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 (
<SolidApexCharts
width="500"
type="line"
options={options()}
series={series() || []}
/>
);
};
export default StatGraphs;

10
frontend/src/components/util/menu/CenterMenu.tsx
View File

@@ -42,7 +42,10 @@ const CenterMenu: Component<{
return (
<>
<Button
onClick={p.toggleShow}
onClick={(e) => {
e.stopPropagation();
p.toggleShow();
}}
class={p.targetClass}
style={p.targetStyle}
>
@@ -70,7 +73,10 @@ const Child: Component<{
return (
<Grid
class={combineClasses(s.CenterMenuContainer, p.show() ? s.Enter : s.Exit)}
onClick={p.toggleShow}
onClick={(e) => {
e.stopPropagation();
p.toggleShow();
}}
placeItems={p.position === "center" ? "center" : "start center"}
>
<Grid

2
frontend/src/index.tsx
View File

@@ -20,7 +20,7 @@ import { ThemeProvider } from "./state/ThemeProvider";
export const URL =
import.meta.env.MODE === "production"
? location.origin
: "https://monitor.assc.ai";
: "http://52.193.1.140:9000";
export const WS_URL = URL.replace("https", "wss").replace("http", "ws") + "/ws";

86
yarn.lock
View File

@@ -695,6 +695,18 @@ anymatch@~3.1.2:
normalize-path "^3.0.0"
picomatch "^2.0.4"
apexcharts@^3.33.1, apexcharts@^3.35.4:
version "3.35.4"
resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.35.4.tgz#347140240fad6e646a76c7bc8e7e75294c2206b2"
integrity sha512-dsXjETHF2OmKtxNv66wBeFGU2qtZQnr6kp/vcNY05GWs4vcBepg54qNgOJ2Gp/gXskiGw/frrmIKGi8lJ/UDnQ==
dependencies:
svg.draggable.js "^2.2.2"
svg.easing.js "^2.0.0"
svg.filter.js "^2.0.2"
svg.pathmorphing.js "^0.1.3"
svg.resize.js "^1.4.3"
svg.select.js "^3.0.1"
"aproba@^1.0.3 || ^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
@@ -1105,6 +1117,11 @@ deepmerge@^4.2.2:
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
defu@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/defu/-/defu-6.0.0.tgz#b397a6709a2f3202747a3d9daf9446e41ad0c5fc"
integrity sha512-t2MZGLf1V2rV4VBZbWIaXKdX/mUcYW0n2znQZoADBkGGxYL8EWqCuCZBmJPJ/Yy9fofJkyuuSuo5GSwo0XdEgw==
delayed-stream@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -2767,6 +2784,20 @@ socks@^2.6.1:
ip "^1.1.5"
smart-buffer "^4.2.0"
solid-apexcharts@^0.1.6:
version "0.1.6"
resolved "https://registry.yarnpkg.com/solid-apexcharts/-/solid-apexcharts-0.1.6.tgz#0df85186d0c2e49343bddda27db9b1a3915398bb"
integrity sha512-U9pFwLzDk3a/DPphXVlEGXbeU9HUcKVAH0CaSTXRJfRVFXQeVSJn4RDyScaMMJiqr8OZ+IsytudEcZQAvpHvMw==
dependencies:
apexcharts "^3.33.1"
defu "^6.0.0"
solid-js "^1.1.7"
solid-js@^1.1.7:
version "1.4.8"
resolved "https://registry.yarnpkg.com/solid-js/-/solid-js-1.4.8.tgz#a1e7f56c17d64c1729c6fd36fe513ca283e78dbd"
integrity sha512-XErZdnnYYXF7OwGSUAPcua2y5/ELB/c53zFCpWiEGqxTNoH1iQghzI8EsHJXk06sNn+Z/TGhb8bPDNNGSgimag==
solid-js@^1.3.10, solid-js@^1.3.3:
version "1.3.12"
resolved "https://registry.yarnpkg.com/solid-js/-/solid-js-1.3.12.tgz#6a02d49e92d3544aa4be6173a5cd974206b808f0"
@@ -2938,6 +2969,61 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
svg.draggable.js@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
dependencies:
svg.js "^2.0.1"
svg.easing.js@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
integrity sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==
dependencies:
svg.js ">=2.3.x"
svg.filter.js@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
integrity sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==
dependencies:
svg.js "^2.2.5"
svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
version "2.7.1"
resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
svg.pathmorphing.js@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
dependencies:
svg.js "^2.4.0"
svg.resize.js@^1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
dependencies:
svg.js "^2.6.5"
svg.select.js "^2.1.2"
svg.select.js@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
dependencies:
svg.js "^2.2.5"
svg.select.js@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
dependencies:
svg.js "^2.6.5"
tar-fs@~2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.0.1.tgz#e44086c1c60d31a4f0cf893b1c4e155dabfae9e2"