Implement push-based log view

Various layout fixes

src/main/frontend/components/administration/LogManagement.tsx

@@ -0,0 +1,92 @@
+import React, {useEffect, useRef, useState} from "react";
+import {LogEndpoint} from "Frontend/generated/endpoints";
+import withConfigPage from "Frontend/components/administration/withConfigPage";
+import * as Yup from 'yup';
+import ConfigFormField from "Frontend/components/administration/ConfigFormField";
+import {toast} from "sonner";
+import {Button, Code, Divider, Tooltip} from "@nextui-org/react";
+import {ArrowUDownLeft, SortAscending} from "@phosphor-icons/react";
+
+function LogManagementLayout({getConfig, formik}: any) {
+
+    const [logEntries, setLogEntries] = useState<string[]>([]);
+    const [autoScroll, setAutoScroll] = useState(true);
+    const [softWrap, setSoftWrap] = useState(false);
+    const subscribed = useRef(false);
+    const logEndRef = useRef<null | HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (subscribed.current) return;
+        LogEndpoint.getApplicationLogs().onNext((newEntry: string | undefined) =>
+            setLogEntries((currentEntries) => [...currentEntries, newEntry as string])
+        );
+        subscribed.current = true;
+    }, []);
+
+    useEffect(() => {
+        if (formik.isSubmitting == false && formik.submitCount > 0) {
+            LogEndpoint.reloadLogConfig()
+                .catch(() => toast.error("Failed to apply log configuration"));
+        }
+    }, [formik.isSubmitting]);
+
+    useEffect(() => {
+        if (autoScroll) {
+            scrollToBottom();
+        }
+    }, [logEntries, autoScroll, softWrap]);
+
+    function scrollToBottom() {
+        logEndRef.current?.scrollIntoView();
+    }
+
+    return (
+        <div className="flex flex-col">
+            <div className="flex flex-row gap-4">
+                <ConfigFormField configElement={getConfig("logs.folder")}/>
+                <ConfigFormField configElement={getConfig("logs.max-history-days")}/>
+                <ConfigFormField configElement={getConfig("logs.level")}/>
+            </div>
+
+            <div className="flex flex-col">
+                <div className="flex flex-row flex-grow justify-between items-baseline">
+                    <h2 className={"text-xl font-bold mt-8 mb-1"}>Application logs</h2>
+                    <div className="flex flex-row gap-1">
+                        <Tooltip content="Soft-wrap" placement="bottom">
+                            <Button isIconOnly
+                                    onPress={() => setSoftWrap(!softWrap)}
+                                    variant={softWrap ? "solid" : "ghost"}
+                            >
+                                <ArrowUDownLeft/>
+                            </Button>
+                        </Tooltip>
+                        <Tooltip content="Auto-scroll" placement="bottom">
+                            <Button isIconOnly
+                                    onPress={() => setAutoScroll(!autoScroll)}
+                                    variant={autoScroll ? "solid" : "ghost"}
+                            >
+                                <SortAscending/>
+                            </Button>
+                        </Tooltip>
+                    </div>
+                </div>
+                <Divider className="mb-4"/>
+            </div>
+            <Code size="sm" radius="none"
+                  className={`flex flex-col h-[50vh] max-h-[50vh] text-sm overflow-auto ${softWrap ? "whitespace-normal" : "whitespace-nowrap"}`}>
+                {logEntries.map((entry, index) => <p key={index}>{entry}</p>)}
+                <div ref={logEndRef}/>
+            </Code>
+        </div>
+    );
+}
+
+const validationSchema = Yup.object({
+    logs: Yup.object({
+        folder: Yup.string().required("Required"),
+        "max-history-days": Yup.number().required("Required"),
+        level: Yup.string().required("Required")
+    })
+});
+
+export const LogManagement = withConfigPage(LogManagementLayout, "Logging", "logs", validationSchema);

src/main/frontend/components/administration/withConfigPage.tsx

@@ -16,11 +16,13 @@ export default function withConfigPage(WrappedComponent: React.ComponentType<any
         const isInitialized = useRef(false);
         const [configSaved, setConfigSaved] = useState(false);
         const [configDtos, setConfigDtos] = useState<ConfigEntryDto[]>([]);
+        const [nestedConfigDtos, setNestedConfigDtos] = useState<NestedConfig>({});
         const [saveMessage, setSaveMessage] = useState<string>();
 
         useEffect(() => {
             ConfigEndpoint.getAll(configPrefix).then((response: any) => {
                 setConfigDtos(response as ConfigEntryDto[]);
+                setNestedConfigDtos(toNestedConfig(response as ConfigEntryDto[]));
                 isInitialized.current = true;
             });
         }, []);
@@ -34,6 +36,7 @@ export default function withConfigPage(WrappedComponent: React.ComponentType<any
         async function handleSubmit(values: NestedConfig) {
             const configValues = toConfigValuePair(values);
             await ConfigEndpoint.setAll(configValues);
+            setNestedConfigDtos(values);
             setConfigSaved(true);
         }
 
@@ -114,11 +117,12 @@ export default function withConfigPage(WrappedComponent: React.ComponentType<any
 
         return (
             <Formik
-                initialValues={toNestedConfig(configDtos)}
+                initialValues={nestedConfigDtos}
                 onSubmit={handleSubmit}
                 validationSchema={validationSchema}
+                enableReinitialize={true}
             >
-                {(formik: { values: any; isSubmitting: any; }) => (
+                {(formik) => (
                     <Form>
                         <div className="flex flex-row flex-grow justify-between mb-8">
                             <h1 className="text-2xl font-bold">{title}</h1>
@@ -131,7 +135,7 @@ export default function withConfigPage(WrappedComponent: React.ComponentType<any
                                 <Button
                                     color="primary"
                                     isLoading={formik.isSubmitting}
-                                    disabled={formik.isSubmitting || configSaved}
+                                    disabled={formik.isSubmitting || configSaved || !formik.dirty}
                                     type="submit"
                                 >
                                     {formik.isSubmitting ? "" : configSaved ? <Check/> : "Save"}

src/main/frontend/components/general/CheckboxInput.tsx

@@ -7,7 +7,7 @@ const CheckboxInput = ({label, ...props}) => {
     const [field] = useField(props);
 
     return (
-        <div className="flex flex-row flex-grow items-center gap-2 my-2">
+        <div className="flex flex-row flex-1 items-center gap-2 my-2">
             <Checkbox
                 {...field}
                 {...props}

src/main/frontend/components/general/Input.tsx

@@ -9,7 +9,7 @@ const Input = ({label, ...props}) => {
     const [field, meta] = useField(props);
 
     return (
-        <div className="flex flex-col w-full items-start gap-2 my-2">
+        <div className="flex flex-col flex-1 items-start gap-2 my-2">
             <NextUiInput
                 {...props}
                 {...field}

src/main/frontend/components/general/SelectInput.tsx

@@ -7,17 +7,18 @@ const SelectInput = ({label, values, ...props}) => {
     const [field] = useField(props);
 
     return (
-        <div className="flex flex-row flex-1 items-center gap-2 my-2">
+        <div className="flex flex-row flex-1 justify-center gap-2 my-2">
             <Select
                 {...field}
                 {...props}
                 id={field.name}
                 label={label}
                 defaultSelectedKeys={[field.value]}
+                disallowEmptySelection
             >
                 {values.map((value: string) => (
                     <SelectItem key={value} value={value}>
-                        {value.toLowerCase()}
+                        {value}
                     </SelectItem>
                 ))}
             </Select>

src/main/frontend/components/general/withSideMenu.tsx

@@ -51,7 +51,7 @@ export default function withSideMenu(menuItems: MenuItem[]) {
                         ))}
                     </Listbox>
                 </div>
-                <div className="flex flex-col flex-grow">
+                <div className="flex-1 overflow-auto">
                     <Outlet/>
                 </div>
             </div>

src/main/frontend/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Gameyfin</title>
     <style>
         body {

src/main/frontend/routes.tsx

@@ -13,6 +13,7 @@ import {SsoManagement} from "Frontend/components/administration/SsoManagement";
 import {AdministrationView} from "Frontend/views/AdministrationView";
 import {ProfileView} from "Frontend/views/ProfileView";
 import {NotificationManagement} from "Frontend/components/administration/NotificationManagement";
+import {LogManagement} from "Frontend/components/administration/LogManagement";
 
 export const routes = protectRoutes([
     {
@@ -41,7 +42,8 @@ export const routes = protectRoutes([
                             {path: 'libraries', element: <LibraryManagement/>},
                             {path: 'users', element: <UserManagement/>},
                             {path: 'sso', element: <SsoManagement/>},
-                            {path: 'notifications', element: <NotificationManagement/>}
+                            {path: 'notifications', element: <NotificationManagement/>},
+                            {path: 'logs', element: <LogManagement/>}
                         ]
                     }
                 ]

src/main/frontend/views/AdministrationView.tsx

@@ -1,4 +1,4 @@
-import {Envelope, GameController, LockKey, Users} from "@phosphor-icons/react";
+import {Envelope, GameController, LockKey, Log, Users} from "@phosphor-icons/react";
 import withSideMenu, {MenuItem} from "Frontend/components/general/withSideMenu";
 
 const menuItems: MenuItem[] = [
@@ -21,6 +21,11 @@ const menuItems: MenuItem[] = [
         title: "Notifications",
         url: "notifications",
         icon: <Envelope/>
+    },
+    {
+        title: "Logs",
+        url: "logs",
+        icon: <Log/>
     }
 ]
 

src/main/frontend/views/MainLayout.tsx

@@ -15,25 +15,24 @@ export default function MainLayout() {
 
     return (
         <div className="flex flex-col min-h-svh">
-            <Navbar maxWidth="2xl" className="shadow">
-                <NavbarBrand as="button" onClick={() => navigate('/')}>
-                    <GameyfinLogo className="h-10 fill-foreground"/>
-                </NavbarBrand>
-                <NavbarContent justify="end">
-                    <NavbarItem>
-                        <ProfileMenu/>
-                    </NavbarItem>
-                </NavbarContent>
-            </Navbar>
+            <div className="flex flex-col flex-grow w-full 2xl:w-3/4 m-auto">
+                <Navbar maxWidth="full">
+                    <NavbarBrand as="button" onClick={() => navigate('/')}>
+                        <GameyfinLogo className="h-10 fill-foreground"/>
+                    </NavbarBrand>
+                    <NavbarContent justify="end">
+                        <NavbarItem>
+                            <ProfileMenu/>
+                        </NavbarItem>
+                    </NavbarContent>
+                </Navbar>
 
-            <div className="flex-1">
-                <div className="flex-row relative m-auto max-w-[1536px] align-self-center px-2 pt-4">
+                <div className="w-full overflow-hidden ml-2 pr-8 mt-4">
                     <Outlet/>
                 </div>
             </div>
 
             <Divider/>
-
             <footer className="flex flex-row items-center justify-between py-4 px-12">
                 <p>Gameyfin {PackageJson.version}</p>
                 <p>