From ebd72684219964df62b46c2a0ec512800ec9b81d Mon Sep 17 00:00:00 2001
From: Jon Eugster <eugster.jon@gmail.com>
Date: Thu, 26 Sep 2024 18:07:17 +0200
Subject: [PATCH] feat: add option to display server capacity

---
 client/src/components/landing_page.tsx | 39 ++++++++++++++++++++++++++
 doc/server.md                          | 19 +++++++++++++
 relay/index.mjs                        |  4 +++
 3 files changed, 62 insertions(+)

diff --git a/client/src/components/landing_page.tsx b/client/src/components/landing_page.tsx
index be12fc0..3264cb0 100644
--- a/client/src/components/landing_page.tsx
+++ b/client/src/components/landing_page.tsx
@@ -95,6 +95,9 @@ function LandingPage() {
   const closePreferencesPopup = () => setPreferencesPopup(false);
   const togglePreferencesPopup = () => setPreferencesPopup(!preferencesPopup);
 
+  const [usageCPU, setUsageCPU] = React.useState<number>()
+  const [usageMem, setUsageMem] = React.useState<number>()
+
   const { t, i18n } = useTranslation()
 
   // Load the namespaces of all games
@@ -117,6 +120,30 @@ function LandingPage() {
     return q.data?.tile
   })
 
+  /** Parse `games/stats.csv` if present and display server capacity. */
+  React.useEffect(() => {
+    fetch('games/stats.csv')
+    .then(response => {if (response.ok) {
+      return response.text() } else {throw ""}})
+    .then(data => {
+      // Parse the CSV content
+      const lines = data.split('\n');
+      const [header, line2] = lines;
+      if (!(header.replace(' ', '').startsWith("CPU,Mem"))) {
+        console.warn("unexpected CSV `stats.csv`, expected 'CPU,Mem\\n0.2,0.2\\n', got", header)
+      }
+      if (line2) {
+        let values = line2.split(',')
+        setUsageCPU(100 * Number(values[0]));
+        setUsageMem(100 * Number(values[1]));
+      }
+    }).catch(err => {
+      console.info('games/stats.csv does not exist')
+    })
+
+
+  }, [])
+
   return <div className="landing-page">
     <header style={{backgroundImage: `url(${bgImage})`}}>
       <nav className="landing-page-nav">
@@ -155,6 +182,18 @@ function LandingPage() {
         ))
       }
     </div>
+    { // show server capacity from `games/stats.csv` if present
+      (usageMem >= 0 || usageCPU >= 0 ) &&
+      <section>
+        <div className="wrapper">
+          <h2>{t("Server capacity")}</h2>
+          <p>
+            { usageMem >= 0 && <> {t("RAM")}: <strong>{usageMem} % </strong> {t("used")}.<br/></> }
+            { usageCPU >= 0 && <> {t("CPU")}: <strong>{usageCPU} % </strong> {t("used")}. </> }
+          </p>
+        </div>
+      </section>
+    }
     <section>
       <div className="wrapper">
         <h2>{t("Development notes")}</h2>
diff --git a/doc/server.md b/doc/server.md
index 509c902..ef7de98 100644
--- a/doc/server.md
+++ b/doc/server.md
@@ -26,3 +26,22 @@ where you replace:
 Everything downloaded remains in the folder `lean4game/games`.
 The subfolder `tmp` contains downloaded artifacts and can be deleted without loss.
 The other folders should only contain the built lean-games, sorted by owner and repo.
+
+## Server capacity
+
+If you would like to display the server capacity on the landing page,
+you can create a file `lean4game/games/stats.csv` of the following form:
+
+```
+CPU,Mem
+0.1,0.8
+```
+
+These numbers will be displayed on the landing page ("CPU: 10 % used" and "RAM: 80 % used").
+
+If you only want one of the numbers, replace the number you don't want with `nan` (or anything
+else which does not parse as number).
+
+If you don't want to show either, simply do not create `stats.csv`
+
+Use your own script or cronjob to update the CSV file as desired.
diff --git a/relay/index.mjs b/relay/index.mjs
index 68bd5d4..e465e2f 100644
--- a/relay/index.mjs
+++ b/relay/index.mjs
@@ -52,6 +52,10 @@ const server = app
     req.url = filename;
     express.static(path.join(getGameDir(owner,repo),".lake","gamedata"))(req, res, next);
   })
+  .use('/data/stats', (req, res, next) => {
+    // stats file for server usage
+    express.static(path.join(__dirname, '..', 'games', 'stats.csv'))(req, res, next);
+  })
   .use('/', router)
   .listen(PORT, () => console.log(`Listening on ${PORT}`));