mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Update to use list

Browse source
This commit is contained in:
viown 2025-01-14 23:42:26 +03:00
parent 941da45faa
commit 23c9e75dd2
3 changed files with 56 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/apps/dashboard/features/logs/components/LogItem.tsx
View file

@ -1,46 +0,0 @@
import React, { FunctionComponent } from 'react';
import type { LogFile } from '@jellyfin/sdk/lib/generated-client/models/log-file';
import { Card, CardActionArea, CardContent, ListItemText } from '@mui/material';
import { useApi } from 'hooks/useApi';
import datetime from 'scripts/datetime';
type LogItemProps = {
logFile: LogFile;
};
const LogItem: FunctionComponent<LogItemProps> = ({ logFile }: LogItemProps) => {
const { api } = useApi();
const getLogFileUrl = () => {
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 = () => {
const date = datetime.parseISO8601Date(logFile.DateModified, true);
return datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date);
};
return (
<Card>
<CardActionArea href={getLogFileUrl()} target='_blank'>
<CardContent>
<ListItemText
primary={logFile.Name}
primaryTypographyProps={{ variant: 'h3' }}
secondary={getDate()}
secondaryTypographyProps={{ variant: 'body1' }}
/>
</CardContent>
</CardActionArea>
</Card>
);
};
export default LogItem;

53
src/apps/dashboard/features/logs/components/LogItemList.tsx Normal file
View file

@ -0,0 +1,53 @@
import React, { FunctionComponent } from 'react';
import type { LogFile } from '@jellyfin/sdk/lib/generated-client/models/log-file';
import { Box, List, ListItem, ListItemButton, ListItemText, useTheme } from '@mui/material';
import { useApi } from 'hooks/useApi';
import datetime from 'scripts/datetime';
type LogItemProps = {
logs: LogFile[];
};
const LogItemList: FunctionComponent<LogItemProps> = ({ logs }: LogItemProps) => {
const { api } = useApi();
const theme = useTheme();
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 (
<Box sx={{ backgroundColor: theme.palette.background.paper }}>
<List>
{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' }}
/>
</ListItemButton>
</ListItem>
);
})}
</List>
</Box>
);
};
export default LogItemList;

11
src/apps/dashboard/routes/logs/index.tsx
View file

@ -1,6 +1,5 @@
import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
import LogItem from 'apps/dashboard/features/logs/components/LogItem';
import Loading from 'components/loading/LoadingComponent';
import Page from 'components/Page';
import globalize from 'lib/globalize';
@ -11,6 +10,7 @@ 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();
@ -69,7 +69,7 @@ const Logs = () => {
setIsSubmitting(true);
}, []);
if (isLogEntriesPending || isConfigurationPending || loading) {
if (isLogEntriesPending || isConfigurationPending || loading || !logs) {
return <Loading />;
}
@ -122,12 +122,7 @@ const Logs = () => {
</Stack>
</Form>
<Stack className='serverLogs readOnlyContent' spacing={1} sx={{ mt: 1 }}>
{logs?.map(log => {
return <LogItem
key={log.Name}
logFile={log}
/>;
})}
<LogItemList logs={logs} />
</Stack>
</Box>
</Page>