log looking ok

frontend/src/components/server/tabs/stats/Stats.tsx

@@ -8,8 +8,8 @@ const Stats: Component<{}> = (p) => {
   return (
     <Grid class="config">
       <Grid class="config-items">
-        <SystemStats />
         <Pm2Processes />
+        <SystemStats />
         <DockerStats />
       </Grid>
     </Grid>

frontend/src/components/server/tabs/stats/SystemStats.tsx

@@ -44,16 +44,21 @@ const SystemStats: Component<{}> = (p) => {
             </Show>
           </Button>
         </Flex>
-        <div>cpu: {sysStats()!.cpu}%</div>
         <Flex alignItems="center">
-          <div>mem: {sysStats()!.mem.usedMemPercentage}%</div>
+          <h2>cpu: </h2>
+          <div>{sysStats()!.cpu}%</div>
+        </Flex>
+        <Flex alignItems="center">
+          <h2>mem: </h2>
+          <div>{sysStats()!.mem.usedMemPercentage}%</div>
           <div>
             (using {sysStats()!.mem.usedMemMb} mb of{" "}
             {sysStats()!.mem.totalMemMb} mb)
           </div>
         </Flex>
         <Flex>
-          <div>disk: {sysStats()!.disk.usedPercentage}%</div>
+          <h2>disk: </h2>
+          <div>{sysStats()!.disk.usedPercentage}%</div>
           <div>
             (using {sysStats()!.disk.usedGb} gb of {sysStats()!.disk.totalGb}{" "}
             gb)

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 (
-    <Grid style={{ padding: "0.5rem" }}>
+    <Grid style={{ padding: "0.5rem", width: "80vw", height: "90vh" }}>
       <Flex justifyContent="space-between">
         <h1>log</h1>
         <Button class="blue" onClick={load}>
           <Icon type="refresh" />
         </Button>
       </Flex>
-      <pre>{log()?.stdout}</pre>
-      <pre>{log()?.stderr}</pre>
+      <pre class={combineClasses(s.Pm2Log, "scroller", themeClass())}>
+        {log()?.stdout}
+      </pre>
     </Grid>
   );
 };

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"}
                   </div>
+                  <Switch>
+                    <Match when={process.status === "online"}>
+                      <ConfirmButton
+                        color="orange"
+                        onConfirm={async () => {
+                          pushNotification("ok", `stopping ${process.name}`);
+                          await stopPm2Process(selected.id(), process.name!);
+                          pushNotification("good", `${process.name} stopped`);
+                          setTimeout(() => loadPm2(), 1000);
+                        }}
+                      >
+                        <Icon type="pause" />
+                      </ConfirmButton>
+                    </Match>
+                    <Match when={process.status === "stopped"}>
+                      <ConfirmButton
+                        color="green"
+                        onConfirm={async () => {
+                          pushNotification("ok", `starting ${process.name}`);
+                          await startPm2Process(selected.id(), process.name!);
+                          pushNotification("good", `${process.name} started`);
+                          setTimeout(() => loadPm2(), 1000);
+                        }}
+                      >
+                        <Icon type="play" />
+                      </ConfirmButton>
+                    </Match>
+                  </Switch>
                   <LogButton name={process.name!} />
                 </Flex>
               </Flex>

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);
 }