diff --git a/frontend/src/components/server/tabs/stats/Stats.tsx b/frontend/src/components/server/tabs/stats/Stats.tsx
index a40c52bbe..c5919486b 100644
--- a/frontend/src/components/server/tabs/stats/Stats.tsx
+++ b/frontend/src/components/server/tabs/stats/Stats.tsx
@@ -8,8 +8,8 @@ const Stats: Component<{}> = (p) => {
return (
-
+
diff --git a/frontend/src/components/server/tabs/stats/SystemStats.tsx b/frontend/src/components/server/tabs/stats/SystemStats.tsx
index db72117ff..fa8d2ef88 100644
--- a/frontend/src/components/server/tabs/stats/SystemStats.tsx
+++ b/frontend/src/components/server/tabs/stats/SystemStats.tsx
@@ -44,16 +44,21 @@ const SystemStats: Component<{}> = (p) => {
-
cpu: {sysStats()!.cpu}%
- mem: {sysStats()!.mem.usedMemPercentage}%
+ cpu:
+ {sysStats()!.cpu}%
+
+
+ mem:
+ {sysStats()!.mem.usedMemPercentage}%
(using {sysStats()!.mem.usedMemMb} mb of{" "}
{sysStats()!.mem.totalMemMb} mb)
- disk: {sysStats()!.disk.usedPercentage}%
+ disk:
+ {sysStats()!.disk.usedPercentage}%
(using {sysStats()!.disk.usedGb} gb of {sysStats()!.disk.totalGb}{" "}
gb)
diff --git a/frontend/src/components/server/tabs/stats/pm2/Log.tsx b/frontend/src/components/server/tabs/stats/pm2/Log.tsx
index 992b1c6f2..aa3efefe5 100644
--- a/frontend/src/components/server/tabs/stats/pm2/Log.tsx
+++ b/frontend/src/components/server/tabs/stats/pm2/Log.tsx
@@ -1,6 +1,8 @@
import { Log as LogType } from "@monitor/types";
import { Component, createSignal } from "solid-js";
import { useAppState } from "../../../../../state/StateProvider";
+import { useTheme } from "../../../../../state/ThemeProvider";
+import { combineClasses } from "../../../../../util/helpers";
import { useToggle } from "../../../../../util/hooks";
import { getPm2Log } from "../../../../../util/query";
import Button from "../../../../util/Button";
@@ -8,6 +10,7 @@ import Icon from "../../../../util/Icon";
import Flex from "../../../../util/layout/Flex";
import Grid from "../../../../util/layout/Grid";
import CenterMenu from "../../../../util/menu/CenterMenu";
+import s from "../stats.module.scss";
const LogButton: Component<{ name: string }> = (p) => {
const [show, toggleShow] = useToggle();
@@ -29,16 +32,18 @@ const Log: Component<{ name: string }> = (p) => {
getPm2Log(selected.id(), p.name).then((cle) => setLog(cle.log));
};
load();
+ const { themeClass } = useTheme();
return (
-
+
log
- {log()?.stdout}
- {log()?.stderr}
+
+ {log()?.stdout}
+
);
};
diff --git a/frontend/src/components/server/tabs/stats/pm2/Pm2Processes.tsx b/frontend/src/components/server/tabs/stats/pm2/Pm2Processes.tsx
index 4e41910e8..3532d2cc2 100644
--- a/frontend/src/components/server/tabs/stats/pm2/Pm2Processes.tsx
+++ b/frontend/src/components/server/tabs/stats/pm2/Pm2Processes.tsx
@@ -1,10 +1,18 @@
import { PM2Process } from "@monitor/types";
-import { Component, createEffect, createSignal, For, Show } from "solid-js";
+import {
+ Component,
+ createEffect,
+ createSignal,
+ For,
+ Match,
+ Show,
+ Switch,
+} from "solid-js";
import { pushNotification } from "../../../../..";
import { useAppState } from "../../../../../state/StateProvider";
import { useTheme } from "../../../../../state/ThemeProvider";
import { combineClasses } from "../../../../../util/helpers";
-import { getPm2Processes } from "../../../../../util/query";
+import { getPm2Processes, startPm2Process, stopPm2Process } from "../../../../../util/query";
import Button from "../../../../util/Button";
import Icon from "../../../../util/Icon";
import Flex from "../../../../util/layout/Flex";
@@ -12,6 +20,7 @@ import Grid from "../../../../util/layout/Grid";
import Loading from "../../../../util/loading/Loading";
import LogButton from "./Log";
import s from "../stats.module.scss";
+import ConfirmButton from "../../../../util/ConfirmButton";
const Pm2Processes: Component<{}> = (p) => {
const { selected } = useAppState();
@@ -58,6 +67,34 @@ const Pm2Processes: Component<{}> = (p) => {
? `${process.memory / 1024000} mb`
: "unknown"}
+
+
+ {
+ pushNotification("ok", `stopping ${process.name}`);
+ await stopPm2Process(selected.id(), process.name!);
+ pushNotification("good", `${process.name} stopped`);
+ setTimeout(() => loadPm2(), 1000);
+ }}
+ >
+
+
+
+
+ {
+ pushNotification("ok", `starting ${process.name}`);
+ await startPm2Process(selected.id(), process.name!);
+ pushNotification("good", `${process.name} started`);
+ setTimeout(() => loadPm2(), 1000);
+ }}
+ >
+
+
+
+
diff --git a/frontend/src/components/server/tabs/stats/stats.module.scss b/frontend/src/components/server/tabs/stats/stats.module.scss
index ea2d85743..f506779d2 100644
--- a/frontend/src/components/server/tabs/stats/stats.module.scss
+++ b/frontend/src/components/server/tabs/stats/stats.module.scss
@@ -17,4 +17,20 @@
.Stats {
padding: 0rem 1rem;
+}
+
+.Pm2Log {
+ white-space: pre-wrap;
+ overflow-wrap: anywhere;
+ word-wrap: break-word;
+ tab-size: 2;
+ width: 80vw;
+ box-sizing: border-box;
+ height: 80vh;
+ background-color: rgba(c.$darkgrey, 0.6);
+ padding: 1rem;
+}
+
+.Pm2Log:global(.dark) {
+ background-color: rgba(c.$darkgrey-dark, 0.6);
}
\ No newline at end of file