feature (admin): version details

client/pages/adminpage.js

@@ -7,7 +7,7 @@ import { Icon, LoadingPage, CSSTransition } from "../components/";
 import { Admin } from "../model";
 import { notify } from "../helpers/";
 import {
-    HomePage, BackendPage, SettingsPage, LogPage, SetupPage, LoginPage,
+    HomePage, BackendPage, SettingsPage, AboutPage, LogPage, SetupPage, LoginPage,
 } from "./adminpage/";
 
 function AdminOnly(WrappedComponent) {
@@ -60,6 +60,9 @@ export default AdminOnly((props) => {
                         <Route
                             path={match.url + "/logs"}
                             render={() => <LogPage isSaving={setIsSaving}/>} />
+                        <Route
+                            path={match.url + "/about"}
+                            render={() => <AboutPage />} />
                         <Route path={match.url + "/setup"} component={SetupPage} />
                         <Route path={match.url} component={HomePage} />
                     </Switch>
@@ -70,6 +73,14 @@ export default AdminOnly((props) => {
 });
 
 function SideMenu(props) {
+    const [version, setVersion] = useState(null);
+    useEffect(() => {
+        const controller = new AbortController();
+        fetch("/about", { signal: controller.signal }).then((r) => {
+            setVersion(r.headers.get("X-Powered-By").replace(/^Filestash\/([v\.0-9]*).*$/, "$1"))
+        })
+        return () => controller.abort();
+    }, []);
     return (
         <div className="component_menu_sidebar no-select">
             {
@@ -102,6 +113,11 @@ function SideMenu(props) {
                         Logs
                     </NavLink>
                 </li>
+                <li className="version">
+                    <NavLink activeClassName="active" to={props.url + "/about"}>
+                        { version }
+                    </NavLink>
+                </li>
             </ul>
         </div>
     );

client/pages/adminpage.scss

@@ -119,6 +119,11 @@
             a.active, a:hover{
                 color: white;
             }
+            &.version {
+                position: absolute;
+                bottom:0;
+                opacity: 0.25;
+            }
         }
     }
     .header{
@@ -150,6 +155,7 @@
             font-size: 1.25em;
             padding: 0;
         }
+        .version { display: none; }
     }
     @media screen and (max-width: 650px) {
         width: inherit;

client/pages/adminpage/about.js

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from "react";
+import { Redirect } from "react-router-dom";
+
+import "./about.scss";
+
+export function AboutPage() {
+    const [version, setVersion] = useState("Filestash/vxxxx");
+    useEffect(() => {
+        const controller = new AbortController();
+        fetch("/about", { signal: controller.signal })
+            .then((r) => r.text())
+            .then((r) => {
+                const a = document.createElement("html")
+                a.innerHTML = r;
+                document.getElementById("about-page").innerHTML = a.querySelector("table").outerHTML
+            });
+        return () => controller.abort();
+    }, [])
+
+    return (
+        <div id="about-page" />
+    );
+}

client/pages/adminpage/about.scss

@@ -0,0 +1,9 @@
+#about-page {
+    padding-top: 50px;
+    overflow-x: auto;
+    table td {
+        min-width: 100px;
+        padding: 10px 0;
+    }
+    .small { font-size: 0.9rem; }
+}

client/pages/adminpage/index.js

@@ -1,6 +1,7 @@
 export { HomePage } from "./home";
 export { BackendPage } from "./backend";
 export { SettingsPage } from "./settings";
+export { AboutPage } from "./about";
 export { LogPage } from "./logger";
 
 export { SetupPage } from "./setup";