Merge pull request #6393 from viown/react-logs

Migrate logs to React

src/apps/dashboard/features/activity/api/useLogEntries.ts

@@ -23,12 +23,12 @@ const fetchLogEntries = async (
     return response.data;
 };
 
-export const useLogEntires = (
+export const useLogEntries = (
     requestParams: ActivityLogApiGetLogEntriesRequest
 ) => {
     const { api } = useApi();
     return useQuery({
-        queryKey: ['LogEntries', requestParams],
+        queryKey: ['ActivityLogEntries', requestParams],
         queryFn: ({ signal }) =>
             fetchLogEntries(api, requestParams, { signal }),
         enabled: !!api

src/apps/dashboard/features/logs/api/useServerLogs.ts

@@ -0,0 +1,26 @@
+import { Api } from '@jellyfin/sdk';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchServerLogs = async (api?: Api, options?: AxiosRequestConfig) => {
+    if (!api) {
+        console.error('[useServerLogs] No API instance available');
+        return;
+    }
+
+    const response = await getSystemApi(api).getServerLogs(options);
+
+    return response.data;
+};
+
+export const useServerLogs = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'ServerLogs' ],
+        queryFn: ({ signal }) => fetchServerLogs(api, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/logs/components/LogItemList.tsx

@@ -0,0 +1,56 @@
+import React, { FunctionComponent } from 'react';
+import type { LogFile } from '@jellyfin/sdk/lib/generated-client/models/log-file';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { useApi } from 'hooks/useApi';
+import datetime from 'scripts/datetime';
+
+type LogItemProps = {
+    logs: LogFile[];
+};
+
+const LogItemList: FunctionComponent<LogItemProps> = ({ logs }: LogItemProps) => {
+    const { api } = useApi();
+
+    // TODO: Use getUri from TS SDK once available.
+    const getLogFileUrl = (logFile: LogFile) => {
+        if (!api) return '';
+
+        let url = api.basePath + '/System/Logs/Log';
+
+        url += '?name=' + encodeURIComponent(String(logFile.Name));
+        url += '&api_key=' + encodeURIComponent(api.accessToken);
+
+        return url;
+    };
+
+    const getDate = (logFile: LogFile) => {
+        const date = datetime.parseISO8601Date(logFile.DateModified, true);
+        return datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date);
+    };
+
+    return (
+        <List sx={{ bgcolor: 'background.paper' }}>
+            {logs.map(log => {
+                return (
+                    <ListItem key={log.Name} disablePadding>
+                        <ListItemButton href={getLogFileUrl(log)} target='_blank'>
+                            <ListItemText
+                                primary={log.Name}
+                                primaryTypographyProps={{ variant: 'h3' }}
+                                secondary={getDate(log)}
+                                secondaryTypographyProps={{ variant: 'body1' }}
+                            />
+                            <OpenInNewIcon />
+                        </ListItemButton>
+                    </ListItem>
+                );
+            })}
+        </List>
+    );
+};
+
+export default LogItemList;

src/apps/dashboard/routes/_asyncRoutes.ts

@@ -3,6 +3,7 @@ import { AsyncRouteType, type AsyncRoute } from 'components/router/AsyncRoute';
 export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
     { path: 'activity', type: AsyncRouteType.Dashboard },
     { path: 'branding', type: AsyncRouteType.Dashboard },
+    { path: 'logs', type: AsyncRouteType.Dashboard },
     { path: 'playback/trickplay', type: AsyncRouteType.Dashboard },
     { path: 'plugins/:pluginId', page: 'plugins/plugin', type: AsyncRouteType.Dashboard },
     { path: 'users', type: AsyncRouteType.Dashboard },

src/apps/dashboard/routes/_legacyRoutes.ts

@@ -49,12 +49,6 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
             controller: 'dashboard/encodingsettings',
             view: 'dashboard/encodingsettings.html'
         }
-    }, {
-        path: 'logs',
-        pageProps: {
-            controller: 'dashboard/logs',
-            view: 'dashboard/logs.html'
-        }
     }, {
         path: 'libraries/metadata',
         pageProps: {

src/apps/dashboard/routes/activity/index.tsx

@@ -9,7 +9,7 @@ import Typography from '@mui/material/Typography';
 import { type MRT_ColumnDef, MaterialReactTable, useMaterialReactTable } from 'material-react-table';
 import { useSearchParams } from 'react-router-dom';
 
-import { useLogEntires } from 'apps/dashboard/features/activity/api/useLogEntries';
+import { useLogEntries } from 'apps/dashboard/features/activity/api/useLogEntries';
 import ActionsCell from 'apps/dashboard/features/activity/components/ActionsCell';
 import LogLevelCell from 'apps/dashboard/features/activity/components/LogLevelCell';
 import OverviewCell from 'apps/dashboard/features/activity/components/OverviewCell';
@@ -87,7 +87,7 @@ const Activity = () => {
         hasUserId: activityView !== ActivityView.All ? activityView === ActivityView.User : undefined
     }), [activityView, pagination.pageIndex, pagination.pageSize]);
 
-    const { data: logEntries, isLoading: isLogEntriesLoading } = useLogEntires(activityParams);
+    const { data: logEntries, isLoading: isLogEntriesLoading } = useLogEntries(activityParams);
 
     const isLoading = isUsersLoading || isLogEntriesLoading;
 

src/apps/dashboard/routes/branding/index.tsx

@@ -17,10 +17,7 @@ import Page from 'components/Page';
 import ServerConnections from 'components/ServerConnections';
 import globalize from 'lib/globalize';
 import { queryClient } from 'utils/query/queryClient';
-
-interface ActionData {
-    isSaved: boolean
-}
+import { ActionData } from 'types/actionData';
 
 const BRANDING_CONFIG_KEY = 'branding';
 const BrandingOption = {

src/apps/dashboard/routes/logs/index.tsx

@@ -0,0 +1,139 @@
+import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import Loading from 'components/loading/LoadingComponent';
+import Page from 'components/Page';
+import globalize from 'lib/globalize';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { type ActionFunctionArgs, Form, useActionData } from 'react-router-dom';
+import ServerConnections from 'components/ServerConnections';
+import { useServerLogs } from 'apps/dashboard/features/logs/api/useServerLogs';
+import { useConfiguration } from 'hooks/useConfiguration';
+import type { ServerConfiguration } from '@jellyfin/sdk/lib/generated-client/models/server-configuration';
+import { ActionData } from 'types/actionData';
+import LogItemList from 'apps/dashboard/features/logs/components/LogItemList';
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+    const api = ServerConnections.getCurrentApi();
+    if (!api) throw new Error('No Api instance available');
+
+    const formData = await request.formData();
+    const { data: config } = await getConfigurationApi(api).getConfiguration();
+
+    const enableWarningMessage = formData.get('EnableWarningMessage');
+    config.EnableSlowResponseWarning = enableWarningMessage === 'on';
+
+    const responseTime = formData.get('SlowResponseTime');
+    if (responseTime) {
+        config.SlowResponseThresholdMs = parseInt(responseTime.toString(), 10);
+    }
+
+    await getConfigurationApi(api)
+        .updateConfiguration({ serverConfiguration: config });
+
+    return {
+        isSaved: true
+    };
+};
+
+const Logs = () => {
+    const actionData = useActionData() as ActionData | undefined;
+    const [ isSubmitting, setIsSubmitting ] = useState(false);
+
+    const { isPending: isLogEntriesPending, data: logs } = useServerLogs();
+    const { isPending: isConfigurationPending, data: defaultConfiguration } = useConfiguration();
+    const [ loading, setLoading ] = useState(true);
+    const [ configuration, setConfiguration ] = useState<ServerConfiguration>( {} );
+
+    useEffect(() => {
+        if (!isConfigurationPending && defaultConfiguration) {
+            setConfiguration(defaultConfiguration);
+            setLoading(false);
+        }
+    }, [isConfigurationPending, defaultConfiguration]);
+
+    const setLogWarningMessage = useCallback((_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+        setConfiguration({
+            ...configuration,
+            EnableSlowResponseWarning: checked
+        });
+    }, [configuration]);
+
+    const onResponseTimeChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
+        setConfiguration({
+            ...configuration,
+            SlowResponseThresholdMs: parseInt(event.target.value, 10)
+        });
+    }, [configuration]);
+
+    const onSubmit = useCallback(() => {
+        setIsSubmitting(true);
+    }, []);
+
+    if (isLogEntriesPending || isConfigurationPending || loading || !logs) {
+        return <Loading />;
+    }
+
+    return (
+        <Page
+            id='logPage'
+            title={globalize.translate('TabLogs')}
+            className='mainAnimatedPage type-interior'
+        >
+            <Box className='content-primary'>
+                <Form method='POST' onSubmit={onSubmit}>
+                    <Stack spacing={3}>
+                        <Typography variant='h1'>
+                            {globalize.translate('TabLogs')}
+                        </Typography>
+
+                        {isSubmitting && actionData?.isSaved && (
+                            <Alert severity='success'>
+                                {globalize.translate('SettingsSaved')}
+                            </Alert>
+                        )}
+
+                        <FormControlLabel
+                            control={
+                                <Switch
+                                    checked={configuration?.EnableSlowResponseWarning}
+                                    onChange={setLogWarningMessage}
+                                    name={'EnableWarningMessage'}
+                                />
+                            }
+                            label={globalize.translate('LabelSlowResponseEnabled')}
+                        />
+
+                        <TextField
+                            fullWidth
+                            type='number'
+                            name={'SlowResponseTime'}
+                            label={globalize.translate('LabelSlowResponseTime')}
+                            value={configuration?.SlowResponseThresholdMs}
+                            disabled={!configuration?.EnableSlowResponseWarning}
+                            onChange={onResponseTimeChange}
+                        />
+
+                        <Button
+                            type='submit'
+                            size='large'
+                        >
+                            {globalize.translate('Save')}
+                        </Button>
+                    </Stack>
+                </Form>
+                <Box className='serverLogs readOnlyContent' sx={{ mt: 3 }}>
+                    <LogItemList logs={logs} />
+                </Box>
+            </Box>
+        </Page>
+    );
+};
+
+export default Logs;

src/controllers/dashboard/logs.html

@@ -1,33 +0,0 @@
-<div id="logPage" data-role="page" class="page type-interior" data-title="${TabLogs}">
-    <div>
-        <div class="content-primary">
-            <form class="logsForm">
-                <div class="verticalSection">
-                    <div class="sectionTitleContainer flex align-items-center">
-                        <h2 class="sectionTitle">${TabLogs}</h2>
-                    </div>
-                </div>
-
-                <div class="verticalSection">
-                    <div class="checkboxContainer checkboxContainer-withDescription">
-                        <label>
-                            <input type="checkbox" is="emby-checkbox" id="chkSlowResponseWarning" />
-                            <span>${LabelSlowResponseEnabled}</span>
-                        </label>
-                    </div>
-                    <div class="inputContainer">
-                        <input is="emby-input" type="number" id="txtSlowResponseWarning" label="${LabelSlowResponseTime}" />
-                    </div>
-                </div>
-                <br />
-                <div>
-                    <button is="emby-button" type="submit" class="raised button-submit block">
-                        <span>${Save}</span>
-                    </button>
-                </div>
-            </form>
-            <div class="serverLogs readOnlyContent">
-            </div>
-        </div>
-    </div>
-</div>

src/controllers/dashboard/logs.js

@@ -1,63 +0,0 @@
-import datetime from '../../scripts/datetime';
-import loading from '../../components/loading/loading';
-import globalize from '../../lib/globalize';
-import '../../elements/emby-button/emby-button';
-import '../../components/listview/listview.scss';
-import '../../styles/flexstyles.scss';
-import Dashboard from '../../utils/dashboard';
-import alert from '../../components/alert';
-
-function onSubmit(event) {
-    event.preventDefault();
-    loading.show();
-    const form = this;
-    ApiClient.getServerConfiguration().then(function (config) {
-        config.EnableSlowResponseWarning = form.querySelector('#chkSlowResponseWarning').checked;
-        config.SlowResponseThresholdMs = form.querySelector('#txtSlowResponseWarning').value;
-        ApiClient.updateServerConfiguration(config).then(function() {
-            Dashboard.processServerConfigurationUpdateResult();
-        }, function () {
-            alert(globalize.translate('ErrorDefault'));
-            Dashboard.processServerConfigurationUpdateResult();
-        });
-    });
-    return false;
-}
-
-export default function(view) {
-    view.querySelector('.logsForm').addEventListener('submit', onSubmit);
-    view.addEventListener('viewbeforeshow', function() {
-        loading.show();
-        const apiClient = ApiClient;
-        apiClient.getJSON(apiClient.getUrl('System/Logs')).then(function(logs) {
-            let html = '';
-            html += '<div class="paperList">';
-            html += logs.map(function(log) {
-                let logUrl = apiClient.getUrl('System/Logs/Log', {
-                    name: log.Name
-                });
-                logUrl += '&api_key=' + apiClient.accessToken();
-                let logHtml = '';
-                logHtml += '<a is="emby-linkbutton" href="' + logUrl + '" target="_blank" class="listItem listItem-border" style="color:inherit;">';
-                logHtml += '<div class="listItemBody two-line">';
-                logHtml += "<h3 class='listItemBodyText' dir='ltr' style='text-align: left'>" + log.Name + '</h3>';
-                const date = datetime.parseISO8601Date(log.DateModified, true);
-                let text = datetime.toLocaleDateString(date);
-                text += ' ' + datetime.getDisplayTime(date);
-                logHtml += '<div class="listItemBodyText secondary">' + text + '</div>';
-                logHtml += '</div>';
-                logHtml += '</a>';
-                return logHtml;
-            }).join('');
-            html += '</div>';
-            view.querySelector('.serverLogs').innerHTML = html;
-        });
-
-        apiClient.getServerConfiguration().then(function (config) {
-            view.querySelector('#chkSlowResponseWarning').checked = config.EnableSlowResponseWarning;
-            view.querySelector('#txtSlowResponseWarning').value = config.SlowResponseThresholdMs;
-        });
-
-        loading.hide();
-    });
-}

src/hooks/useConfiguration.ts

@@ -0,0 +1,26 @@
+import { Api } from '@jellyfin/sdk';
+import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+export const fetchConfiguration = async (api?: Api, options?: AxiosRequestConfig) => {
+    if (!api) {
+        console.error('[useLogOptions] No API instance available');
+        return;
+    }
+
+    const response = await getConfigurationApi(api).getConfiguration(options);
+
+    return response.data;
+};
+
+export const useConfiguration = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: ['Configuration'],
+        queryFn: ({ signal }) => fetchConfiguration(api, { signal }),
+        enabled: !!api
+    });
+};

src/types/actionData.ts

@@ -0,0 +1,3 @@
+export interface ActionData {
+    isSaved: boolean;
+}